Merge pull request #38 from Choi-Jinwook/feat/mypage

Fix: 마이페이지 피드백 반영 및 인증번호 로직 수정
Project-Catcher · Nov 20, 2023 · 7d1593c · 7d1593c
2 parents 2ff70b8 + 14e33da
commit 7d1593c
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 62 deletions.
diff --git a/src/mypage/components/MypageSubMenu.tsx b/src/mypage/components/MypageSubMenu.tsx
@@ -5,7 +5,7 @@ import { useModal } from "@shared/hook";
 interface SubMenu {
   value: string;
   isEnd?: boolean;
-  onClick: () => void | ((url: string) => void);
+  onClick: () => void;
 }
 
 const MypageSubMenu = () => {
@@ -24,22 +24,18 @@ const MypageSubMenu = () => {
     });
   };
 
-  const handleRoute = (url: string) => {
-    push(url);
-  };
-
   const MENU_SUB: SubMenu[] = [
     {
       value: "문의하기",
       onClick: () => handleContact(),
     },
     {
       value: "공지사항",
-      onClick: () => handleRoute("/notice"),
+      onClick: () => push("/notice"),
     },
     {
       value: "FAQ",
-      onClick: () => handleRoute("/faq"),
+      onClick: () => push("/faq"),
     },
     {
       value: "회원탈퇴",

diff --git a/src/mypage/components/UpdateProfile.tsx b/src/mypage/components/UpdateProfile.tsx
@@ -2,6 +2,7 @@ import { ValidateButton } from "@findid/components";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import {
+  AuthNumberInput,
   InputWithLabel,
   Instructions,
   TimerWithButton,
@@ -20,7 +21,6 @@ export interface MyInfoModify {
   email: string;
   birth: string;
   gender: string;
-  authNum: string;
 }
 
 interface UpdateProfileProps {
@@ -36,41 +36,19 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
     email: "",
     birth: "",
     gender: "",
-    authNum: "",
   });
 
   const validator = {
     isValidPhone: checkPhoneValidation(answer.phone),
     isValidEmail: checkEmailValidation(answer.email),
-    isValidAuthNum: checkAuthNumValidation(answer.authNum),
   };
 
   const handleAnswer = (answer: Partial<MyInfoModify>) => {
     setAnswer((prev) => ({ ...prev, ...answer }));
   };
 
-  const handleNickName = (nickname: string) => {
-    handleAnswer({ nickname: nickname });
-  };
-
-  const handlePhone = (phone: string) => {
-    handleAnswer({ phone: phone });
-  };
-
-  const handleEmail = (email: string) => {
-    handleAnswer({ email: email });
-  };
-
-  const handleBirth = (birth: string) => {
-    handleAnswer({ birth: birth });
-  };
-
-  const handleGender = (gender: string) => {
-    handleAnswer({ gender: gender });
-  };
-
-  const handleAuthNum = (authNum: string) => {
-    handleAnswer({ authNum: authNum });
+  const handleFormData = (key: keyof MyInfoModify, value: string) => {
+    handleAnswer({ [key]: value });
   };
 
   const handlePasswordChange = () => {
@@ -98,12 +76,14 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
         <div className="mb-[15px]">
           <InputWithLabel // TODO: add current nickname value
             label="닉네임"
-            id="id"
+            id="nickname"
             inputType="text"
             labelStyle="text-xs text-[#333333] font-medium mb-[8px]"
             inputStyle="w-full h-[57px] rounded-[9px] px-[26px]"
             placeholder="띄어쓰기 없이 영문과 숫자 6~15"
-            onChange={({ target: { value } }) => handleNickName(value)}
+            onChange={({ target: { value } }) =>
+              handleFormData("nickname", value)
+            }
           />
         </div>
 
@@ -121,7 +101,9 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
                 isDonePhoneInput ? "bg-[#F5F5F5] " : ""
               }w-full grow h-[46px] px-[15px]`}
               placeholder="휴대전화번호 (숫자만 입력)"
-              onChange={({ target: { value } }) => handlePhone(value)}
+              onChange={({ target: { value } }) =>
+                handleFormData("phone", value)
+              }
             />
           </div>
           <div>
@@ -141,21 +123,12 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
         </div>
 
         <div className="mb-[5px] gap-[4px]">
-          <div className="inline-block w-[278px]">
-            <InputWithLabel
-              label="휴대폰으로 전송된 인증코드를 입력해주세요."
-              id="authNum"
-              inputType="tel"
-              labelStyle="text-[12px] text-[#333333] mb-[8px]"
-              inputStyle="w-full h-[46px] px-[15px]"
-              placeholder="인증번호 6자리 입력"
-              onChange={({ target: { value } }) => handleAuthNum(value)}
-            />
-          </div>
-          <TimerWithButton
+          <AuthNumberInput
+            inputContainerStyle="inline-block w-[278px]"
             isDonePhoneInput={isDonePhoneInput}
-            isAuthNumValidate={validator.isValidAuthNum}
             callType="signup"
+            inputStyle="h-[46px] px-[15px]"
+            labelStyle="text-[12px] text-[#333333] mb-[8px]"
             buttonStyle="w-[113px] ml-[4px]"
           />
         </div>
@@ -169,7 +142,7 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
             labelStyle="text-xs text-[#333333] font-medium mb-[8px]"
             inputStyle="w-full h-[57px] rounded-[9px] px-[26px] bg-[#F5F5F5]"
             placeholder="이메일을 입력해 주세요."
-            onChange={({ target: { value } }) => handleEmail(value)}
+            onChange={({ target: { value } }) => handleFormData("email", value)}
           />
         </div>
 
@@ -201,7 +174,7 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
             labelStyle="text-xs text-[#333333] font-medium mb-[8px]"
             inputStyle="w-full h-[57px] rounded-[9px] px-[26px]"
             placeholder="생년월일을 입력해주세요 (YYYYMMDD)"
-            onChange={({ target: { value } }) => handleBirth(value)}
+            onChange={({ target: { value } }) => handleFormData("birth", value)}
           />
         </div>
 
@@ -213,7 +186,9 @@ const UpdateProfile = ({ handleConfirm }: UpdateProfileProps) => {
             labelStyle="text-xs text-[#333333] font-medium mb-[8px]"
             inputStyle="w-full h-[57px] rounded-[9px] px-[26px]"
             placeholder="성별을 입력해주세요"
-            onChange={({ target: { value } }) => handleGender(value)}
+            onChange={({ target: { value } }) =>
+              handleFormData("gender", value)
+            }
           />
         </div>
 

diff --git a/src/shared/components/AuthNumberInput.tsx b/src/shared/components/AuthNumberInput.tsx
@@ -0,0 +1,52 @@
+import exp from "constants";
+import { useState } from "react";
+import { checkAuthNumValidation } from "@shared/utils";
+import InputWithLabel from "./InputWithLabel";
+import TimerWithButton from "./TimerWithButton";
+
+interface AuthNumberInputProps {
+  inputContainerStyle: string;
+  isDonePhoneInput: boolean;
+  callType: "signup" | "findidpw";
+  inputStyle: string;
+  labelStyle: string;
+  buttonStyle: string;
+}
+
+const AuthNumberInput = ({
+  inputContainerStyle,
+  isDonePhoneInput,
+  callType,
+  inputStyle,
+  labelStyle,
+  buttonStyle,
+}: AuthNumberInputProps) => {
+  const [value, setValue] = useState("");
+  const isValidate = checkAuthNumValidation(value);
+
+  return (
+    <>
+      <div className={`${inputContainerStyle}`}>
+        <InputWithLabel
+          maxLength={6}
+          pattern="\d*"
+          label="휴대폰으로 전송된 인증코드를 입력해주세요."
+          id="authNum"
+          inputType="text"
+          labelStyle={`${labelStyle}`}
+          inputStyle={`w-full ${inputStyle}`}
+          placeholder="인증번호 6자리 입력"
+          onChange={({ target: { value } }) => setValue(value)}
+        />
+      </div>
+      <TimerWithButton
+        isDonePhoneInput={isDonePhoneInput}
+        isAuthNumValidate={isValidate}
+        callType={callType}
+        buttonStyle={buttonStyle}
+      />
+    </>
+  );
+};
+
+export default AuthNumberInput;
diff --git a/src/shared/components/TimerWithButton.tsx b/src/shared/components/TimerWithButton.tsx
@@ -29,9 +29,12 @@ const TimerWithButton = ({
   return (
     <>
       <button
-        className={`${
-          callType === "findidpw" ? "h-[36px]" : "h-[46px]"
-        } ${buttonStyle} text-white bg-[#FACD49]`}
+        disabled={!isDonePhoneInput}
+        className={`${callType === "findidpw" ? "h-[36px]" : "h-[46px]"} ${
+          isDonePhoneInput
+            ? "bg-[#FACD49]"
+            : "bg-[#FACD4975] cursor-not-allowed"
+        } ${buttonStyle} text-white`}
         onClick={handleRetransmit}
       >
         재발송
@@ -58,14 +61,11 @@ const TimerWithButton = ({
       )}
 
       {isDonePhoneInput ? (
-        <>
-          {!isAuthNumValidate && (
-            <AuthErrorMessage
-              messageStyle="text-[12px]"
-              isExpired={isExpired}
-            />
-          )}
-        </>
+        !isAuthNumValidate ? (
+          <AuthErrorMessage messageStyle="text-[12px]" isExpired={isExpired} />
+        ) : (
+          <div className="h-[18px] invisible mt-[5px] mb-[5px]"></div>
+        )
       ) : (
         <div className="h-[18px] invisible mt-[5px] mb-[5px]"></div>
       )}

diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
@@ -1,4 +1,5 @@
 export { default as AuthErrorMessage } from "./AuthErrorMessage";
+export { default as AuthNumberInput } from "./AuthNumberInput";
 export { default as AuthTimer } from "./AuthTimer";
 export { default as BackgroundHeart } from "./BackgroundHeart";
 export { default as CaptchaWithButton } from "./CaptchaWithButton";