Refactor: #69 타입명 변경 및 타입 정의 방식 수정

GU-99 · Aug 15, 2024 · 118618e · 118618e
1 parent c1df4fa
commit 118618e
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 59 deletions.
diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts
@@ -25,12 +25,14 @@ export const USER_DUMMY = [
 ];
 
 export const USER_INFO_DUMMY = {
+  provider: 'LOCAL',
   userId: 1,
+  id: 'test123',
   email: '[email protected]',
   nickname: 'momoco',
-  image: '',
+  profileUrl: '',
   bio: "Hi, I'm Momoco!",
-  link: ['[email protected]'],
+  links: ['[email protected]'],
 };
 
 export const TEAM_DUMMY: Team[] = [

diff --git a/src/pages/setting/UserAuthenticatePage.tsx b/src/pages/setting/UserAuthenticatePage.tsx
@@ -5,7 +5,7 @@ import useToast from '@/hooks/useToast';
 import ValidationInput from '@/components/common/ValidationInput';
 import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
 import Timer from '@/components/common/Timer';
-import { SearchIDForm } from '@/types/UserType';
+import { EmailVerificationForm } from '@/types/UserType';
 
 function UserAuthenticatePage() {
   const nav = useNavigate();
@@ -19,7 +19,7 @@ function UserAuthenticatePage() {
     setError,
     watch,
     formState: { errors, isSubmitting },
-  } = useForm<SearchIDForm>({
+  } = useForm<EmailVerificationForm>({
     mode: 'onChange',
   });
 
@@ -53,7 +53,7 @@ function UserAuthenticatePage() {
     toastError('인증 시간이 만료되었습니다. 다시 시도해 주세요.');
   };
 
-  const onSubmit = async (data: SearchIDForm) => {
+  const onSubmit = async (data: EmailVerificationForm) => {
     console.log(data);
 
     const verifyResult = verifyCode(watch('code'));

diff --git a/src/pages/setting/UserPasswordSettingPage.tsx b/src/pages/setting/UserPasswordSettingPage.tsx
@@ -1,19 +1,19 @@
 import { useForm } from 'react-hook-form';
 import ValidationInput from '@/components/common/ValidationInput';
 import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
-import { EditPassword } from '@/types/UserType';
+import { EditPasswordForm } from '@/types/UserType';
 
 export default function UserPasswordSettingPage() {
   const {
     register,
     handleSubmit,
     watch,
     formState: { errors, isSubmitting },
-  } = useForm<EditPassword>({
+  } = useForm<EditPasswordForm>({
     mode: 'onChange',
   });
 
-  const onSubmit = (data: EditPassword) => {
+  const onSubmit = (data: EditPasswordForm) => {
     console.log(data);
   };
 
@@ -22,8 +22,8 @@ export default function UserPasswordSettingPage() {
       {/* 현재 비밀번호 */}
       <ValidationInput
         label="현재 비밀번호"
-        errors={errors.currentPassword?.message}
-        register={register('currentPassword', USER_AUTH_VALIDATION_RULES.PASSWORD)}
+        errors={errors.password?.message}
+        register={register('password', USER_AUTH_VALIDATION_RULES.PASSWORD)}
       />
 
       {/* 신규 비밀번호 */}
@@ -36,8 +36,8 @@ export default function UserPasswordSettingPage() {
       {/* 신규 비밀번호 확인 */}
       <ValidationInput
         label="신규 비밀번호 확인"
-        errors={errors.newPasswordChk?.message}
-        register={register('newPasswordChk', USER_AUTH_VALIDATION_RULES.PASSWORD_CONFIRM(watch('newPassword')))}
+        errors={errors.checkNewPassword?.message}
+        register={register('checkNewPassword', USER_AUTH_VALIDATION_RULES.PASSWORD_CONFIRM(watch('newPassword')))}
       />
 
       <div className="flex flex-col text-center">

diff --git a/src/pages/user/SearchIdPage.tsx b/src/pages/user/SearchIdPage.tsx
@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form';
 import ValidationInput from '@/components/common/ValidationInput';
 import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
-import { SearchIDForm } from '@/types/UserType';
+import { EmailVerificationForm } from '@/types/UserType';
 import AuthForm from '@/components/user/authForm/AuthForm';
 import FooterLinks from '@/components/user/authForm/FooterLinks';
 
@@ -10,15 +10,15 @@ export default function SearchIdPage() {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-  } = useForm<SearchIDForm>({
+  } = useForm<EmailVerificationForm>({
     mode: 'onChange',
     defaultValues: {
       email: '',
       code: '',
     },
   });
 
-  const onSubmit = (data: SearchIDForm) => {
+  const onSubmit = (data: EmailVerificationForm) => {
     console.log(data);
   };
 

diff --git a/src/pages/user/SearchPasswordPage.tsx b/src/pages/user/SearchPasswordPage.tsx
@@ -13,7 +13,7 @@ export default function SearchPasswordPage() {
   } = useForm<SearchPasswordForm>({
     mode: 'onChange',
     defaultValues: {
-      userId: '',
+      id: '',
       email: '',
       code: '',
     },
@@ -28,8 +28,8 @@ export default function SearchPasswordPage() {
       {/* 아이디 */}
       <ValidationInput
         placeholder="아이디"
-        errors={errors.userId?.message}
-        register={register('userId', USER_AUTH_VALIDATION_RULES.ID)}
+        errors={errors.id?.message}
+        register={register('id', USER_AUTH_VALIDATION_RULES.ID)}
       />
 
       {/* 이메일 */}

diff --git a/src/pages/user/SignInPage.tsx b/src/pages/user/SignInPage.tsx
@@ -15,7 +15,7 @@ export default function SignInPage() {
   } = useForm({
     mode: 'onChange',
     defaultValues: {
-      userId: '',
+      id: '',
       password: '',
     },
   });
@@ -30,8 +30,8 @@ export default function SignInPage() {
         {/* 아이디 */}
         <ValidationInput
           placeholder="아이디"
-          errors={errors.userId?.message}
-          register={register('userId', USER_AUTH_VALIDATION_RULES.ID)}
+          errors={errors.id?.message}
+          register={register('id', USER_AUTH_VALIDATION_RULES.ID)}
         />
 
         {/* 비밀번호 */}

diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx
@@ -4,7 +4,7 @@ import { FaRegTrashCan, FaPlus, FaMinus } from 'react-icons/fa6';
 import { ChangeEvent, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import axios from 'axios';
-import { UserSignUp } from '@/types/UserType';
+import { UserSignUpForm } from '@/types/UserType';
 import ValidationInput from '@/components/common/ValidationInput';
 import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
 import Timer from '@/components/common/Timer';
@@ -31,12 +31,12 @@ export default function SignUpPage() {
     watch,
     setValue,
     setError,
-  } = useForm<UserSignUp>({
+  } = useForm<UserSignUpForm>({
     mode: 'onChange',
     defaultValues: {
-      userId: '',
+      id: '',
       email: '',
-      verificationCode: '',
+      code: '',
       nickname: '',
       password: '',
       checkPassword: '',
@@ -60,7 +60,7 @@ export default function SignUpPage() {
   };
 
   const handleRemoveImg = () => {
-    setValue('image', '');
+    setValue('profileUrl', '');
     setImageUrl('');
   };
 
@@ -111,25 +111,25 @@ export default function SignUpPage() {
 
     // 인증번호 불일치
     // setIsVerificationCodeValid(false);
-    setError('verificationCode', {
+    setError('code', {
       type: 'manual',
       message: '인증번호가 일치하지 않습니다.',
     });
     return false;
   };
 
   // form 전송 함수
-  const onSubmit = async (data: UserSignUp) => {
-    const { userId, verificationCode, checkPassword, ...filteredData } = data;
+  const onSubmit = async (data: UserSignUpForm) => {
+    const { id, code, checkPassword, ...filteredData } = data;
 
-    const verifyResult = verifyCode(verificationCode);
+    const verifyResult = verifyCode(code);
     if (!verifyResult) return toastError('인증번호가 유효하지 않습니다. 다시 시도해 주세요.');
 
     // TODO: 폼 제출 로직 수정 필요
     try {
       // 회원가입 폼
-      const formData = { ...filteredData, userId, verificationCode };
-      const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${userId}`, formData);
+      const formData = { ...filteredData, id, code };
+      const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${id}`, formData);
       if (registrationResponse.status !== 200) return toastError('회원가입에 실패했습니다. 다시 시도해 주세요.');
 
       // 이미지 폼
@@ -138,8 +138,8 @@ export default function SignUpPage() {
       try {
         const jpeg = await reduceImageSize(imageUrl);
         const file = new File([jpeg], new Date().toISOString(), { type: 'image/jpeg' });
-        imgFormData.append('profile', file);
-        imgFormData.append('userId', userId);
+        imgFormData.append('profileUrl', file);
+        imgFormData.append('id', id);
 
         const imageResponse = await axios.post(`http://localhost:8080/api/v1/users/file`, imgFormData, {
           headers: { 'Content-Type': 'multipart/form-data' },
@@ -182,7 +182,7 @@ export default function SignUpPage() {
               htmlFor="image"
               className="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-1 text-center"
             >
-              <input {...register('image')} id="image" type="file" className="hidden" onChange={handleChangeImg} />
+              <input {...register('profileUrl')} id="image" type="file" className="hidden" onChange={handleChangeImg} />
               <GoPlusCircle size="1.5rem" color="#5E5E5E" />
             </label>
           )}
@@ -192,8 +192,8 @@ export default function SignUpPage() {
       {/* 아이디 */}
       <ValidationInput
         label="아이디"
-        errors={errors.userId?.message}
-        register={register('userId', USER_AUTH_VALIDATION_RULES.ID)}
+        errors={errors.id?.message}
+        register={register('id', USER_AUTH_VALIDATION_RULES.ID)}
       />
 
       {/* 이메일 */}
@@ -206,8 +206,8 @@ export default function SignUpPage() {
       {isVerificationRequested && (
         <ValidationInput
           label="인증번호"
-          errors={errors.verificationCode?.message}
-          register={register('verificationCode', USER_AUTH_VALIDATION_RULES.CERTIFICATION)}
+          errors={errors.code?.message}
+          register={register('code', USER_AUTH_VALIDATION_RULES.CERTIFICATION)}
         />
       )}
 

diff --git a/src/types/UserType.tsx b/src/types/UserType.tsx
@@ -1,34 +1,32 @@
-// 회원가입, 로그인 시 필요한 유저 타입 정의
-export type UserSignInForm = {
-  userId: string;
-  password: string;
-};
-
-export type UserSignUpForm = UserSignInForm & {
+export type User = {
+  userId: number;
+  id: string;
   email: string;
-  image: string;
-  password: string;
+  provider: 'LOCAL' | 'KAKAO' | 'GOOGLE';
   nickname: string;
-  bio: string;
+  bio: string | null;
   links: string[];
+  profileUrl: string | null;
 };
 
-export type UserSignUp = UserSignUpForm & {
-  verificationCode: string;
+export type UserSignUpForm = Omit<User, 'userId' | 'provider'> & {
+  code: string;
+  password: string;
   checkPassword: string;
 };
 
-export type SearchIDForm = {
-  email: string;
-  code: string;
+export type UserSignInForm = Pick<User, 'id'> & {
+  password: string;
 };
 
-export type SearchPasswordForm = SearchIDForm & {
-  userId: string;
+export type EmailVerificationForm = Pick<User, 'email'> & {
+  code: string;
 };
 
-export type EditPassword = {
-  currentPassword: string;
+export type SearchPasswordForm = Pick<User, 'id'> & EmailVerificationForm;
+
+export type EditPasswordForm = {
+  password: string;
   newPassword: string;
-  newPasswordChk: string;
+  checkNewPassword: string;
 };