From 9e9a83428ed9fa4c8d985c65d6a742abc6ed9755 Mon Sep 17 00:00:00 2001
From: ChoiWonBeen <zad1264@naver.com>
Date: Thu, 27 Jul 2023 13:31:07 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=9D=98=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Auth/Signup/CompletePage/index.tsx | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/pages/Auth/Signup/CompletePage/index.tsx b/src/pages/Auth/Signup/CompletePage/index.tsx
index be0d88ef..73311494 100644
--- a/src/pages/Auth/Signup/CompletePage/index.tsx
+++ b/src/pages/Auth/Signup/CompletePage/index.tsx
@@ -8,16 +8,29 @@ import AuthDetail from 'components/Auth/AuthDetail';
 import { ReactComponent as Progress } from 'assets/svg/auth/third-progress.svg';
 import { ReactComponent as Complete } from 'assets/svg/auth/complete.svg';
 import useBooleanState from 'utils/hooks/useBooleanState';
+import { modify } from 'api/user';
+import makeToast from 'utils/ts/makeToast';
 import styles from './Complete.module.scss';
 import useRouteCheck from '../hooks/useRouteCheck';
 import { ERROR_MESSAGE } from '../static/signUp';
 import CompleteModal from './components/CompleteModal';
 
+interface CompleteFormData {
+  nickname: string;
+}
+
 export default function CompleteForm() {
   useRouteCheck('signUpCheck', '/signup');
-  const { register, handleSubmit, watch } = useForm();
-  const onSubmit = (data: any) => data;
   const navigate = useNavigate();
+  const { register, handleSubmit, watch } = useForm<CompleteFormData>();
+
+  const onSubmit = async ({ nickname }: CompleteFormData) => {
+    modify({ nickname }).then(() => {
+      navigate('/login', { replace: true });
+    }).catch(() => {
+      makeToast('error', '닉네임 설정에 실패했습니다.');
+    });
+  };
   const nicknameValue = watch('nickname');
   const [modal,, close] = useBooleanState(true);
 
@@ -48,10 +61,7 @@ export default function CompleteForm() {
           />
           <button
             type="submit"
-            className={
-              styles.form__button
-            }
-            onClick={() => navigate('/login', { replace: true })}
+            className={styles.form__button}
             disabled={nicknameValue === undefined || nicknameValue === ''}
           >
             완료

From f915abeff92bf557a8b23c71d9c1d2105862db70 Mon Sep 17 00:00:00 2001
From: ChoiWonBeen <zad1264@naver.com>
Date: Thu, 27 Jul 2023 13:49:56 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EB=94=94=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=ED=99=95=EC=9D=B8=20=EC=97=90=EB=9F=AC?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A5=BC=20=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B0=9B=EC=95=84=EC=99=80=20=EC=B6=9C?=
 =?UTF-8?q?=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Signup/SignupPage/components/IdInput.tsx  | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pages/Auth/Signup/SignupPage/components/IdInput.tsx b/src/pages/Auth/Signup/SignupPage/components/IdInput.tsx
index be52416f..e20a23f1 100644
--- a/src/pages/Auth/Signup/SignupPage/components/IdInput.tsx
+++ b/src/pages/Auth/Signup/SignupPage/components/IdInput.tsx
@@ -5,15 +5,20 @@ import { useFormContext } from 'react-hook-form';
 import { useQuery } from 'react-query';
 import { checkIdDuplicate } from 'api/user';
 import { ERROR_MESSAGE } from 'pages/Auth/Signup/static/signUp';
+import { AxiosError } from 'axios';
 import styles from '../SignUp.module.scss';
 import { SignUpFormData } from '../entity';
 
 const useIdCheckServer = (id: string) => {
-  const { status } = useQuery(['idDuplicate', id], ({ queryKey: [, account] }) => checkIdDuplicate({ account }), {
+  const { status, error } = useQuery<
+  unknown, AxiosError<{ errorMessage: string }>, unknown, [string, string]
+  >({
+    queryKey: ['idDuplicate', id],
+    queryFn: ({ queryKey: [, account] }) => checkIdDuplicate({ account }),
     enabled: id !== '',
   });
 
-  return status;
+  return { status, error };
 };
 
 const useIdDuplicateCheck = () => {
@@ -25,18 +30,22 @@ const useIdDuplicateCheck = () => {
     setCurrentCheckedId(id);
   };
 
-  const status = useIdCheckServer(currentCheckedId);
+  const { status, error } = useIdCheckServer(currentCheckedId);
 
   useEffect(() => {
     if (id && (id === currentCheckedId)) trigger('id');
   }, [trigger, currentCheckedId, id, status]);
 
-  return { status, handleCheckIdDuplicate, currentCheckedId };
+  return {
+    status, handleCheckIdDuplicate, currentCheckedId, error,
+  };
 };
 
 export default function IdInput() {
   const { register, watch, formState: { errors } } = useFormContext<SignUpFormData>();
-  const { status, handleCheckIdDuplicate, currentCheckedId } = useIdDuplicateCheck();
+  const {
+    status, handleCheckIdDuplicate, currentCheckedId, error,
+  } = useIdDuplicateCheck();
 
   return (
     <div className={styles.form__form}>
@@ -66,6 +75,8 @@ export default function IdInput() {
           required: ERROR_MESSAGE.id,
           validate: {
             checkValid: (val) => ((val === currentCheckedId) || '아이디 중복확인을 해주세요.'),
+            // 서버에서 타입을 같이 전달하고 있어 해당 부분 임시 처리
+            checkServerValidation: () => (error?.response?.data.errorMessage?.slice(-23)),
             checkError: () => ((status !== 'error') || '이미 사용중인 아이디입니다.'),
             checkLoading: () => ((status !== 'loading') || '중복 확인중입니다.'),
           },