Feat/verify 관리자 페이지 비밀번호 입력 페이지 #18

Nahee-Park · 2022-04-05T18:17:24Z

✅ PR check list

PR 제목: [feat/fix/refactor...] 작업 내용 한 줄 요약 (브랜치 이름) #이슈번호
commit message가 적절한지 확인해주세요.
적절한 branch로 요청했는지 확인해주세요.
Assignees, Label을 붙여주세요.
주의 사항과 관련해 꼭 확인해야 할 사람이 있다면 Reviewer로 등록해주세요.
PR이 승인된 경우 해당 브랜치는 삭제 부탁드립니다.

📝 PR 요약

verify 페이지 개발
Input 컴포넌트 제작

📌 변경 사항 및 주의 사항

📸 ScreenShot

euijinkk

우아~ 수고했어요~
짱 잘한다~!!

euijinkk · 2022-04-10T13:56:18Z

pages/[id]/verify.tsx

+import Input from '@src/components/common/Input';
+import ToastMessage from '@src/components/common/ToastMessage';
+import { PW_MINLENGTH, TOAST_DELAY } from '@src/constants';
+import useInput from '@src/hooks/useInput';

 function verify() {


이거 대문자로 하기로 했었던거맞죵??

pages 안에선 그대로 라우팅 되니까 소문자로 하기로 했었어요 !!

아하 그렇군요.. 저는 고쳐야겠네욤 ㅋㄷ

euijinkk · 2022-04-10T13:57:20Z

pages/[id]/verify.tsx

+    width: 80vw;
+    max-width: 500px;
+    color: white;
+    margin-top: 4.84vh;


이거 무슨 의미에염? 4.84

헤더와 Main 섹션 사이의 간격을 세로 반응형으로 주고 싶어서 vh단위를 썼습니다 ! 저 수치는 임의로 지정했어요 ...

음,, 지금 ㅋㅋ 셋다 스타일하는게 달라서 조금 걱정이네요. 어떻게 하면 좋을지...~

@euijinkk ㅋ ㅋ 그건 일단 갈긴 이후에 마지막에 통일할까욤 ?

euijinkk · 2022-04-10T13:57:38Z

pages/[id]/verify.tsx

+    margin-top: 4.84vh;
+    ${flexColumnCenter};
+    @media (max-width: 767px) {
+      width: 80vw;


이거 필요있나염?

ㅎㅎ 필요 없슴다 ! 삭제하겠습니다 : )

euijinkk · 2022-04-10T13:58:59Z

pages/[id]/verify.tsx

+  ImageSection: styled.section`
+    margin-bottom: 4.84vh;
+    width: 100%;
+    & * {


이거 Image 태그 하나 말하는거죵?

네넵 ! 근데 이 테그 안에 무엇이 들어가더라도 width 100%는 유지되어야 할 것 같아서 전체 선택자를 사용했습니다 ..!

euijinkk · 2022-04-11T00:52:14Z

pages/[id]/verify.tsx

+        <UnderlinedButton handleClick={handleSubmit} disabled={isDisabled}>
+          확인
+        </UnderlinedButton>


생각해보니까 이게 좀 애매하네 ㅋㅋ
Form 태그 안에 있으면 이벤트를 넘겨줄 필요가 없는데 말이지...
지금 이상태면 이벤트 2번 동작하지 않을까?
onSumit , onClick 2개 니까

맞아,, 이벤트 두 번 동작하는데 버튼 클릭할 때에도 submit이 되어야해서 이렇게 썼었어 .. 흠 더 좋은 방법이 뭐가 있을까?

euijinkk · 2022-04-11T01:01:23Z

src/components/common/Input.tsx

+  const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {
+    if (String(e.target.value).length <= maxLength && typeof e.target.value === 'string') {
+      onChange(e);
+    }
+  };


e.target.value는 무조건 string type 이지 않나요?
type=number에서 number type으로 뽑아오는 것은 e.target.valueAsNumber 입니당.

아래처럼 하면 동작 안 하나요?

Suggested change

const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {

if (String(e.target.value).length <= maxLength && typeof e.target.value === 'string') {

onChange(e);

}

};

const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {

if (e.target.value <= maxLength) {

onChange(e);

}

};

Suggested change

const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {

if (String(e.target.value).length <= maxLength && typeof e.target.value === 'string') {

onChange(e);

}

};

const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {

if (String(e.target.value).length <= maxLength && typeof e.target.valueAsNumber === 'number') {

onChange(e);

}

};

이렇게 하니까 정확히 원하는대로 동작합니다 ! e.target.valueAsNumber 배워갑니다 ㅎㅎ

String(e.target.value).length <= maxLength
e.target.value는 무조건 string인데, String 형변환이 필요한가요?

typeof e.target.valueAsNumber === 'number'
e.target.valueAsNumber는 무조건 number를 return하는데, number 체크가 필요한가요?

string형변환은 필요 없을 것 같습니다!
typeof e.target.valueAsNumber === 'number'
이 조건을 넣은 이유는, Input에 숫자가 아니라 문자가 입력될 수도 있기 때문입니다 !
그래서 숫자가 입력되었을 때에만 onChange를 걸어서 입력될 수 있도록 저 조건을 넣었습니다
(저 조건을 추가하지 않으면 일단 문자 하나는 인풋에 입력이 되고 나서 입력이 막힙니다)

euijinkk · 2022-04-11T01:04:44Z

src/components/common/Input.tsx

+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength'> {
+  className?: string;
+  sort: Sort;
+  valid?: boolean;
+  maxLength?: number;
+  [key: string]: any;
+}


우앙 멋지다 Omit를 쓰셨군요.

근데 왜 input의 maxlength를 안쓰고, 따로 정의했을까요?

e.target.getAttribute('maxlength') 하면 가져올 수 있을것같은데욤

음,, 일단! Input Attribute는 maxlength (소문자) 입닏당!

maxlength로 하면 UI 이상한 에러 메시지가 뜨는건가...? 확인좀용,. ㅠ-ㅠ

input type number에서는 maxlength 속성을 지원하지 않습니다. 그래서 type number의 경우에는 maxlength를 따로 구현해줘야 한다고 하더라고요. 그래서 일단 input type number용으로 이런 옵션을 만들었고, 다른 타입의 경우 maxlength attribute를 사용할 수 있도록 props롤 구분했습니다! type number인 경우에만 maxLength 옵션을 통해 길이를 제한하고, 나머지 타입의 경우 maxlength를 사용할 수 있도록요 ..!

음,, 정확히 이해를 못했습니당,,

input attribute의 maxlength는 number type에서 지원되지 않으니 제거하고, 커스텀 maxLength를 사용하여 사용하자는 것 맞나요?

type number인 경우에만 maxLength 옵션을 통해 길이를 제한하고, 나머지 타입의 경우 maxlength를 사용할 수 있도록요 ..!

이 말이 이해가 안됐는데, maxlength를 Omit했는데 어떻게 maxlength를 사용한다는 것인지 모르겠습니다!

이 부분 제가 처음 의도한 부분이랑 제가 설명한 게 달라서 헷갈렸을 것 같습니다 ㅋ ㅋ ㅋ ㅋ
일단 리액트에서는 attribute이름이 maxLength여서 그걸 Omit시켰던 거고, type=number에서 사용할 수 없으니 커스텀한 maxLength를 사용할 수 있도록 했던 거였습니다 !

다만 이제 제가 커스텀한 방향이 type=number에 맞춰져 있어서, 이 컴포넌트의 이름은 NumberInput 이런 식으로 바꾸는 편이 좀 더 적절할 것 같기도 합니다 !

type=number에는 maxLength가 사용이 안되는구나.. ㅋㅋ 써보다가 알았습니다리..!
감사합니다!!

euijinkk · 2022-04-11T01:06:39Z

src/components/common/Input.tsx

+    ${({ sort }) =>
+      sort === 'middle'
+        ? css`
+            text-align: center;
+          `
+        : css`
+            text-align: left;
+          `}
+    &::placeholder {


밑 방식 vs css 방식

혹시 css 방식으로 쓰신 이유가 있을까요?

Suggested change

${({ sort }) =>

sort === 'middle'

? css`

text-align: center;

`

: css`

text-align: left;

`}

&::placeholder {

text-align: ${({sort}) => sort === 'middle' ? 'center' : 'left'}

&::placeholder {

오,,, 그냥 막 갈겼습니다. 밑 방식이 좀 더 깔끔할 것 같군요 ! 수정하겠습니다 : )

euijinkk · 2022-04-11T01:06:54Z

src/components/common/UnderlinedButton.tsx

+  handleClick?: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.FormEvent<HTMLFormElement>,
+  ) => void;


euijinkk · 2022-04-11T01:07:39Z

src/hooks/useInput.ts

+const useInput = <T>(
+  inputValue: T,
+): [T, Dispatch<SetStateAction<T>>, (e?: ChangeEvent<HTMLInputElement>) => void] => {
+  const [value, setValue] = useState<typeof inputValue>(inputValue);
+  const onChnage = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+  return [value, setValue, onChnage];
+};
+
+export default useInput;


굿굿, 나도 써야징

euijinkk · 2022-04-11T01:31:46Z

src/components/common/Input.tsx

+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength'> {
+  className?: string;
+  sort: Sort;


sort로 좋긴한데, align 같은게 좀 더 의미가 잘 와닿는거같아요!

밑에서도 text-align 으로 사용하니까!

좋습니다 ㅎㅎ

Nahee-Park · 2022-04-14T06:20:00Z

@euijinkk 헤헤 꼼꼼한 리뷰 감사합니다 : D 반영해서 커밋했습니다 : )

euijinkk · 2022-04-15T07:29:27Z

pages/[id]/verify.tsx

+        <Styled.Form onSubmit={handleSubmit}>
+          <label htmlFor="pw-input" className="label">
+            비밀번호를 입력해주세요.
+          </label>
+          <Input
+            id="pw-input"
+            type="number"
+            placeholder="ex.0000"
+            value={password}
+            align="middle"
+            onChange={onChange}
+            maxLength={4}
+          />
+        </Styled.Form>
+        <UnderlinedButton handleClick={handleSubmit} disabled={isDisabled}>
+          확인
+        </UnderlinedButton>


Suggested change

<Styled.Form onSubmit={handleSubmit}>

<label htmlFor="pw-input" className="label">

비밀번호를 입력해주세요.

</label>

<Input

id="pw-input"

type="number"

placeholder="ex.0000"

value={password}

align="middle"

onChange={onChange}

maxLength={4}

/>

</Styled.Form>

<UnderlinedButton handleClick={handleSubmit} disabled={isDisabled}>

확인

</UnderlinedButton>

<Styled.Form onSubmit={handleSubmit}>

<label htmlFor="pw-input" className="label">

비밀번호를 입력해주세요.

</label>

<Input

id="pw-input"

type="number"

placeholder="ex.0000"

value={password}

align="middle"

onChange={onChange}

maxLength={4}

/>

<UnderlinedButton disabled={isDisabled}>

확인

</UnderlinedButton>

</Styled.Form>

Form안에 Button을 넣고, Button에서 onClick을 없애봤는데.

이렇게 쓰면 어색한가?

오호 그게 더 좋을 거 같다 !!!!!

dannaward · 2022-05-06T06:30:02Z

src/hooks/useInput.ts

+  inputValue: T,
+): [T, Dispatch<SetStateAction<T>>, (e?: ChangeEvent<HTMLInputElement>) => void] => {
+  const [value, setValue] = useState<typeof inputValue>(inputValue);
+  const onChnage = useCallback((e) => {


오타발견 온츠나지

Suggested change

const onChnage = useCallback((e) => {

const onChange = useCallback((e) => {

Nahee-Park added 5 commits April 4, 2022 02:55

feat: useInput 커스텀훅 제작

5448416

refact: useInput 커스텀훅 제네릭 타입으로 수정

725a37f

feat: Input 컴포넌트 제작

e520b01

feat: verify 페이지 개발

fb93263

style: 브레이크포인트 추가

5d17d0b

Nahee-Park added the 🥝 feature 새로운 기능 label Apr 5, 2022

Nahee-Park self-assigned this Apr 5, 2022

euijinkk requested changes Apr 11, 2022

View reviewed changes

euijinkk reviewed Apr 11, 2022

View reviewed changes

feat: 코드리뷰 반영

e1068a3

chore: 불필요한 코드 삭제

1c80ed8

euijinkk reviewed Apr 15, 2022

View reviewed changes

refact: 불필요한 이벤트 발생 코드 수정

7f2ca8f

dannaward reviewed May 6, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/verify 관리자 페이지 비밀번호 입력 페이지 #18

Feat/verify 관리자 페이지 비밀번호 입력 페이지 #18

Nahee-Park commented Apr 5, 2022

euijinkk left a comment

euijinkk Apr 10, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 15, 2022

euijinkk Apr 10, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 15, 2022

Nahee-Park Apr 15, 2022

euijinkk Apr 10, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 10, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 11, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 11, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 15, 2022

Nahee-Park Apr 15, 2022

euijinkk Apr 11, 2022

euijinkk Apr 11, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 15, 2022

Nahee-Park Apr 15, 2022

euijinkk Apr 26, 2022

euijinkk Apr 11, 2022

Nahee-Park Apr 14, 2022

euijinkk Apr 11, 2022

euijinkk Apr 11, 2022

euijinkk Apr 11, 2022 •

edited

Loading

Nahee-Park Apr 14, 2022

Nahee-Park commented Apr 14, 2022

euijinkk Apr 15, 2022 •

edited

Loading

Nahee-Park Apr 15, 2022

dannaward May 6, 2022

	const onChnage = useCallback((e) => {
	const onChange = useCallback((e) => {

Feat/verify 관리자 페이지 비밀번호 입력 페이지 #18

Are you sure you want to change the base?

Feat/verify 관리자 페이지 비밀번호 입력 페이지 #18

Conversation

Nahee-Park commented Apr 5, 2022

✅ PR check list

📝 PR 요약

📌 변경 사항 및 주의 사항

📸 ScreenShot

euijinkk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

euijinkk Apr 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nahee-Park commented Apr 14, 2022

euijinkk Apr 15, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

euijinkk Apr 11, 2022 •

edited

Loading

euijinkk Apr 15, 2022 •

edited

Loading