Merge pull request #245 from Team-Lecue/refactor/Register

dev로 들어가라 !!!!!
Team-Lecue · Feb 21, 2024 · a49748c · a49748c
2 parents 27de5cb + 7597495
commit a49748c
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 79 deletions.
diff --git a/src/Register/components/NicknameInput/index.tsx b/src/Register/components/NicknameInput/index.tsx
@@ -1,50 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { isValidState } from '../../page';
+import { NicknameInputProps } from '../../types/registerTypes';
+import handleChangeInput from '../../utils/handleCheckInput';
 import * as S from './NicknameInput.style';
 
-interface NicknameInputProps {
-  nickname: string;
-  setNickname: React.Dispatch<React.SetStateAction<string>>;
-  setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsValid: React.Dispatch<React.SetStateAction<isValidState>>;
-  isValid: string;
-}
-
 function NicknameInput(props: NicknameInputProps) {
-  const { nickname, setNickname, setIsActive, isValid, setIsValid } = props;
+  const {
+    nickname,
+    isValid,
+    handleSetNickname,
+    handleSetIsActive,
+    handleSetIsValid,
+  } = props;
 
   const [wordCnt, setWordCnt] = useState(0);
 
-  /** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */
-  const checkInputRange = (str: string) => {
-    const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣0-9a-zA-Z\s]/g;
-    return regExp.test(str) || str.length === 0;
-  };
-
-  /** 8자 이하 & 한글, 영어, 숫자만 입력 가능하도록 & 첫번째 글자는 공백 불가능 체크 함수*/
-  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value;
-
-    if (
-      e.target.value.length <= 8 &&
-      checkInputRange(input[input.length - 1])
-    ) {
-      if (e.target.value === ' ') {
-        setNickname('');
-        setWordCnt(0);
-      } else {
-        setNickname(e.target.value);
-        setWordCnt(e.target.value.length);
-      }
-      setIsValid('valid');
-    } else {
-      e.target.value.length > 8 ? setIsValid('valid') : setIsValid('special');
-    }
+  const handleSetWordCnt = (wordCnt: number) => {
+    setWordCnt(wordCnt);
   };
 
   useEffect(() => {
-    wordCnt >= 2 ? setIsActive(true) : setIsActive(false);
+    wordCnt >= 2 ? handleSetIsActive(true) : handleSetIsActive(false);
   }, [wordCnt]);
 
   return (
@@ -55,7 +31,14 @@ function NicknameInput(props: NicknameInputProps) {
           type="text"
           value={nickname}
           placeholder="닉네임을 입력해주세요."
-          onChange={handleChangeInput}
+          onChange={(e) => {
+            handleChangeInput({
+              handleSetNickname,
+              handleSetWordCnt,
+              handleSetIsValid,
+              e,
+            });
+          }}
         />
         <S.WordCount>({wordCnt}/8)</S.WordCount>
       </S.InputContainer>

diff --git a/src/Register/components/SubmitButton/index.tsx b/src/Register/components/SubmitButton/index.tsx
@@ -1,25 +1,18 @@
 import Button from '../../../components/common/Button';
 import usePatchNickname from '../../hooks/usePatchNickname';
-import { isValidState } from '../../page';
+import { SubmitButtonProps } from '../../types/registerTypes';
 import * as S from './SubmitButton.style';
 
-type SubmitButtonProps = {
-  isActive: boolean;
-  token: string;
-  nickname: string;
-  setIsValid: React.Dispatch<React.SetStateAction<isValidState>>;
-  isValid: string;
-  setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
-};
+function SubmitButton(props: SubmitButtonProps) {
+  const { isActive, token, nickname, handleSetIsValid, handleSetIsActive } =
+    props;
 
-function SubmitButton({
-  isActive,
-  token,
-  nickname,
-  setIsValid,
-  setIsActive,
-}: SubmitButtonProps) {
-  const patchMutation = usePatchNickname({ setIsValid, setIsActive, token, nickname });
+  const patchMutation = usePatchNickname({
+    handleSetIsValid,
+    handleSetIsActive,
+    token,
+    nickname,
+  });
 
   const handelClickSubmitBtn = (token: string, nickname: string) => {
     const patchNickname = nickname.trim();

diff --git a/src/Register/hooks/usePatchNickname.ts b/src/Register/hooks/usePatchNickname.ts
@@ -3,20 +3,13 @@ import { useMutation } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
 import { patchNickname } from '../api/patchNickname';
-import { isValidState } from '../page';
-
-interface patchNicknameProps {
-  token: string;
-  nickname: string;
-}
-
-interface usePatchNicknameProps extends patchNicknameProps {
-  setIsValid: React.Dispatch<React.SetStateAction<isValidState>>;
-  setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
-}
+import {
+  patchNicknameProps,
+  usePatchNicknameProps,
+} from '../types/registerTypes';
 
 const usePatchNickname = (props: usePatchNicknameProps) => {
-  const { setIsValid, setIsActive, token, nickname } = props;
+  const { handleSetIsValid, handleSetIsActive, token, nickname } = props;
 
   const navigate = useNavigate();
 
@@ -28,11 +21,11 @@ const usePatchNickname = (props: usePatchNicknameProps) => {
       const code = err.response?.status;
       if (code === 409) {
         // 닉네임 중복코드 : 409
-        setIsValid('duplicate');
-        setIsActive(false);
+        handleSetIsValid('duplicate');
+        handleSetIsActive(false);
       } else if (code === 400) {
-        setIsValid('space');
-        setIsActive(false);
+        handleSetIsValid('space');
+        handleSetIsActive(false);
       } else {
         navigate('/error');
       }

diff --git a/src/Register/page/index.tsx b/src/Register/page/index.tsx
@@ -4,36 +4,46 @@ import { useLocation } from 'react-router-dom';
 import NicknameInput from '../components/NicknameInput';
 import RegisterLogo from '../components/RegisterLogo';
 import SubmitButton from '../components/SubmitButton';
+import { isValidState } from '../types/registerTypes';
 import * as S from './Register.style';
 
-export type isValidState = 'valid' | 'special' | 'duplicate' | 'space';
-
 function Register() {
   const [isActive, setIsActive] = useState(false);
   const [nickname, setNickname] = useState('');
   const [isValid, setIsValid] = useState<isValidState>('valid');
 
   const location = useLocation();
-
   const { token } = location.state && location.state;
 
+  const handleSetNickname = (nickname: string) => {
+    setNickname(nickname);
+  };
+
+  const handleSetIsValid = (isValid: isValidState) => {
+    setIsValid(isValid);
+  };
+
+  const handleSetIsActive = (isActive: boolean) => {
+    setIsActive(isActive);
+  };
+
   return (
     <S.Wrapper>
       <RegisterLogo />
       <NicknameInput
-        setIsActive={setIsActive}
+        handleSetIsActive={handleSetIsActive}
         nickname={nickname}
-        setNickname={setNickname}
+        handleSetNickname={handleSetNickname}
         isValid={isValid}
-        setIsValid={setIsValid}
+        handleSetIsValid={handleSetIsValid}
       />
       <SubmitButton
         isActive={isActive}
         nickname={nickname}
         token={token}
-        setIsValid={setIsValid}
+        handleSetIsValid={handleSetIsValid}
         isValid={isValid}
-        setIsActive={setIsActive}
+        handleSetIsActive={handleSetIsActive}
       />
     </S.Wrapper>
   );

diff --git a/src/Register/types/registerTypes.ts b/src/Register/types/registerTypes.ts
@@ -0,0 +1,31 @@
+export type isValidState = 'valid' | 'special' | 'duplicate' | 'space';
+
+export interface NicknameInputProps {
+  nickname: string;
+  isValid: string;
+  handleSetNickname: (nickname: string) => void;
+  handleSetIsActive: (isActive: boolean) => void;
+  handleSetIsValid: (isValid: isValidState) => void;
+}
+
+export interface SubmitButtonProps extends NicknameInputProps {
+  token: string;
+  isActive: boolean;
+}
+
+export interface CheckNicknameProps {
+  handleSetNickname: (nickname: string) => void;
+  handleSetWordCnt: (wordCnt: number) => void;
+  handleSetIsValid: (isValid: isValidState) => void;
+  e: React.ChangeEvent<HTMLInputElement>;
+}
+
+export interface patchNicknameProps {
+  token: string;
+  nickname: string;
+}
+
+export interface usePatchNicknameProps extends patchNicknameProps {
+  handleSetIsActive: (isActive: boolean) => void;
+  handleSetIsValid: (isValid: isValidState) => void;
+}
diff --git a/src/Register/utils/checkInputRange.ts b/src/Register/utils/checkInputRange.ts
@@ -0,0 +1,7 @@
+/** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */
+const checkInputRange = (str: string) => {
+  const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣0-9a-zA-Z\s]/g;
+  return regExp.test(str) || str.length === 0;
+};
+
+export default checkInputRange;
diff --git a/src/Register/utils/handleCheckInput.ts b/src/Register/utils/handleCheckInput.ts
@@ -0,0 +1,26 @@
+import { CheckNicknameProps } from '../types/registerTypes';
+import checkInputRange from './checkInputRange';
+
+/** 8자 이하 & 한글, 영어, 숫자만 입력 가능하도록 & 첫번째 글자는 공백 불가능 체크 함수*/
+const handleChangeInput = (props: CheckNicknameProps) => {
+  const { handleSetNickname, handleSetWordCnt, handleSetIsValid, e } = props;
+
+  const input = e.target.value;
+
+  if (e.target.value.length <= 8 && checkInputRange(input[input.length - 1])) {
+    if (e.target.value === ' ') {
+      handleSetNickname('');
+      handleSetWordCnt(0);
+    } else {
+      handleSetNickname(e.target.value);
+      handleSetWordCnt(e.target.value.length);
+    }
+    handleSetIsValid('valid');
+  } else {
+    e.target.value.length > 8
+      ? handleSetIsValid('valid')
+      : handleSetIsValid('special');
+  }
+};
+
+export default handleChangeInput;