From 7d3567d9dec4626da2a2a91ba28af441d061b3d9 Mon Sep 17 00:00:00 2001
From: dahhyeon <dahhyeon22@gmail.com>
Date: Sat, 4 Jan 2025 16:45:13 +0900
Subject: [PATCH] =?UTF-8?q?refactor:#5=20=EC=9E=85=EB=A0=A5=20=EC=A0=9C?=
 =?UTF-8?q?=ED=95=9C=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=97=90=EB=9F=AC?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SignUp/MbtiStep.tsx | 40 ++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/SignUp/MbtiStep.tsx b/src/components/SignUp/MbtiStep.tsx
index 4e22118..c033828 100644
--- a/src/components/SignUp/MbtiStep.tsx
+++ b/src/components/SignUp/MbtiStep.tsx
@@ -1,6 +1,7 @@
 import {
   ButtonContainer,
   Description,
+  ErrorContainer,
   InputContainer,
   MainTitle,
 } from '@/styles/SignUp/SignUp.styled';
@@ -8,11 +9,13 @@ import Button from '@/components/common/Button/Button';
 import SignUpInput from './SignupInput';
 import { useRecoilState } from 'recoil';
 import { signupAtom } from '@/recoil/atoms/userAtom';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import errorCheck from '@/assets/images/error_check.svg';
 
 const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
   const [signupState, setSignupState] = useRecoilState(signupAtom);
   const [errors, setErrors] = useState([false, false, false, false]);
+  const [errorMessage, setErrorMessage] = useState<string>('');
 
   const constraints = [
     /^[EIei]$/, // 첫 번째 input: E, I
@@ -29,18 +32,22 @@ const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     newErrors[index] = !isValid;
     setErrors(newErrors);
 
-    if (isValid || value === '') {
-      const newMbti = [...signupState.mbti];
-      newMbti[index] = upperValue;
-      setSignupState((prev) => ({ ...prev, mbti: newMbti.join('') }));
-    }
+    const newMbti = [...signupState.mbti];
+    newMbti[index] = upperValue;
+    setSignupState((prev) => ({ ...prev, mbti: newMbti.join('') }));
+
+    if (!isValid && value !== '') {
+      setErrorMessage('다시 입력해주세요.');
+    } else setErrorMessage('');
   };
 
   // 모든 입력란이 올바르게 입력되었는지 확인
-  const allInputsFilled =
+  const allInputsValid =
     signupState.mbti.length === 4 &&
     !errors.includes(true) &&
-    signupState.mbti.split('').every((char) => char !== '');
+    signupState.mbti
+      .split('')
+      .every((char, index) => constraints[index].test(char));
 
   // 하나 이상의 입력란이 선택되었는지 확인
   const anyInputSelected = signupState.mbti
@@ -49,6 +56,10 @@ const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
   const mbtiLetters = ['E/I', 'N/S', 'F/T', 'P/J'];
 
+  useEffect(() => {
+    console.log('signupState updated:', signupState);
+  }, [signupState]);
+
   return (
     <div>
       <MainTitle>MBTI를 알고계시나요?</MainTitle>
@@ -58,23 +69,30 @@ const MbtiStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
         {mbtiLetters.map((letters, index) => (
           <SignUpInput
             type="text"
-            key={letters}
+            inputMode="text"
+            maxLength={1}
             value={signupState.mbti[index] || ''}
             width="50px"
             onChange={(e) => handleInputChange(index, e.target.value)}
             error={errors[index]}
-            errorMessage="다시 입력해주세요"
           />
         ))}
       </InputContainer>
 
+      {errorMessage && (
+        <ErrorContainer>
+          <img src={errorCheck} alt="check" />
+          <span>{errorMessage}</span>
+        </ErrorContainer>
+      )}
+
       <ButtonContainer>
         <Button
           onClick={onNext}
           variant="primary"
           size="lg"
           rounded="sm"
-          disabled={!allInputsFilled && anyInputSelected}
+          disabled={!allInputsValid}
         >
           {anyInputSelected ? '다음' : '나중에 하기'}
         </Button>