fix:#5 key값 타입에러 해결

Leets-Official · Jan 4, 2025 · da85b40 · da85b40
1 parent 0ee4679
commit da85b40
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/src/components/SignUp/BirthdayGenderStep.tsx b/src/components/SignUp/BirthdayGenderStep.tsx
@@ -30,6 +30,17 @@ const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
 
   const { year, month, day, gender } = signupState;
 
+  const birthInputFields: {
+    label: string;
+    key: keyof typeof signupState;
+    maxLength: number;
+    width: string;
+  }[] = [
+    { label: '년', key: 'year', maxLength: 4, width: '100px' },
+    { label: '월', key: 'month', maxLength: 2, width: '40px' },
+    { label: '일', key: 'day', maxLength: 2, width: '40px' },
+  ];
+
   const handleInputChange = (key: string, value: string) => {
     setSignupState((prev) => ({
       ...prev,
@@ -41,7 +52,7 @@ const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
     setSignupState((prev) => ({ ...prev, gender }));
   };
 
-  const handleBlur = (key: string) => {
+  const handleBlur = (key: keyof typeof signupState) => {
     setTouched((prev) => ({
       ...prev,
       [key]: true,
@@ -78,31 +89,19 @@ const BirthdayGenderStep: React.FC<{ onNext: () => void }> = ({ onNext }) => {
       </Description>
       <InputWrapper>
         <InputContainer>
-          <SignUpInput
-            type="text"
-            maxLength={4}
-            width="100px"
-            onChange={(e) => handleInputChange('year', e.target.value)}
-            onBlur={() => handleBlur('year')}
-          />
-          <Text>년</Text>
-
-          <SignUpInput
-            type="text"
-            maxLength={2}
-            width="40px"
-            onChange={(e) => handleInputChange('month', e.target.value)}
-            onBlur={() => handleBlur('month')}
-          />
-          <Text>월</Text>
-          <SignUpInput
-            type="text"
-            maxLength={2}
-            width="40px"
-            onChange={(e) => handleInputChange('day', e.target.value)}
-            onBlur={() => handleBlur('day')}
-          />
-          <Text>일</Text>
+          {birthInputFields.map(({ label, key, maxLength, width }) => (
+            <>
+              <SignUpInput
+                type="text"
+                maxLength={maxLength}
+                width={width}
+                value={signupState[key]}
+                onChange={(e) => handleInputChange(key, e.target.value)}
+                onBlur={() => handleBlur(key)}
+              />
+              <Text>{label}</Text>
+            </>
+          ))}
         </InputContainer>
         {errorMessage && <InputErrorMessage message={errorMessage} />}
       </InputWrapper>

diff --git a/src/recoil/atoms/userAtom.tsx b/src/recoil/atoms/userAtom.tsx
@@ -11,6 +11,6 @@ export const signupAtom = atom({
     mbti: '',
     nickname: '',
     studentId: '',
-    profilePhoto: null,
+    profilePhoto: undefined,
   },
 });