From a3a669a5dc0e0bd740cdf1990562a39371be12fd Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Wed, 31 Jul 2024 23:01:58 +0900
Subject: [PATCH 1/9] =?UTF-8?q?:wrench:=20=EC=A0=95=EA=B7=9C=EC=8B=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

api 문서에서 제공하는 정규식
---
 src/schema/auth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/schema/auth.ts b/src/schema/auth.ts
index 5de73332..5ace18f2 100644
--- a/src/schema/auth.ts
+++ b/src/schema/auth.ts
@@ -1,6 +1,6 @@
 import * as z from 'zod';
 
-const PWD_VALIDATION_REGEX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
+const PWD_VALIDATION_REGEX = /^([a-z]|[A-Z]|[0-9]|[!@#$%^&])+$/;
 
 // NOTE: 회원가입 스키마
 export const PostSignUpRequest = z

From b451058644c659ffc32af35775a0b94c55e4e85f Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Wed, 31 Jul 2024 23:06:51 +0900
Subject: [PATCH 2/9] =?UTF-8?q?:sparkles:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8F=BC=20=EA=B3=B5=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=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.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
index e6c52906..1cbc4ffa 100644
--- a/src/pages/auth/SignUp.tsx
+++ b/src/pages/auth/SignUp.tsx
@@ -22,6 +22,10 @@ export default function SignUp() {
     },
   });
 
+  const trimWhitespace = (fieldName: keyof PostSignUpRequestType, value: string) => {
+    form.setValue(fieldName, value.trim(), { shouldValidate: true, shouldDirty: true });
+  };
+
   return (
     <div className='flex flex-col justify-center items-center bg-background-100 w-full min-h-screen'>
       <header className='h-full mb-[50px] md:mb-[60px]'>
@@ -44,6 +48,7 @@ export default function SignUp() {
                       placeholder='이메일'
                       className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
                       {...field}
+                      onBlur={(e) => trimWhitespace('email', e.target.value)}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -62,6 +67,7 @@ export default function SignUp() {
                       placeholder='비밀번호'
                       className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
                       {...field}
+                      onBlur={(e) => trimWhitespace('password', e.target.value)}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -79,6 +85,7 @@ export default function SignUp() {
                       placeholder='비밀번호 확인'
                       className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
                       {...field}
+                      onBlur={(e) => trimWhitespace('passwordConfirmation', e.target.value)}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -97,6 +104,7 @@ export default function SignUp() {
                       placeholder='닉네임'
                       className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
                       {...field}
+                      onBlur={(e) => trimWhitespace('nickname', e.target.value)}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />

From 5506804ebe20d346b2e6f4851c406660832ac267 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Thu, 1 Aug 2024 19:44:04 +0900
Subject: [PATCH 3/9] =?UTF-8?q?:lipstick:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

input, textarea 컴포넌트 포커스 스타일 삭제
---
 src/components/ui/input.tsx    | 2 +-
 src/components/ui/textarea.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 8971384a..63a54c1d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
   <input
     type={type}
     className={cn(
-      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     ref={ref}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 319ce8e9..dd9335c1 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => (
   <textarea
     className={cn(
-      'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     ref={ref}

From cd3d5931237136a0f4f7bbb637b9068f3eec57f9 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Thu, 1 Aug 2024 19:48:15 +0900
Subject: [PATCH 4/9] =?UTF-8?q?:sparkles:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8F=BC=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

중복된 이메일과 닉네임 입력시 입력한 인풋에 포커스
---
 src/hooks/useRegisterMutation.ts |  6 +++--
 src/pages/auth/SignUp.tsx        | 45 +++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
index 8cbe5fe7..f1fadc25 100644
--- a/src/hooks/useRegisterMutation.ts
+++ b/src/hooks/useRegisterMutation.ts
@@ -4,7 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { isAxiosError } from 'axios';
 
-const useRegisterMutation = () => {
+const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => void) => {
   const router = useRouter();
 
   return useMutation({
@@ -26,8 +26,9 @@ const useRegisterMutation = () => {
           if (errorMessage.includes('이미 사용중인 이메일')) {
             toast({
               description: '이미 사용중인 이메일입니다.',
-              className: 'border-state-error text-state-error font-semibold',
+              className: 'border-state-error text-state-error font-semibold right-0 top-0',
             });
+            onRegisterError('email');
             return;
           }
 
@@ -47,6 +48,7 @@ const useRegisterMutation = () => {
               description: '이미 존재하는 닉네임입니다.',
               className: 'border-state-error text-state-error font-semibold',
             });
+            onRegisterError('nickname');
             return;
           }
 
diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
index 1cbc4ffa..e3e38ed5 100644
--- a/src/pages/auth/SignUp.tsx
+++ b/src/pages/auth/SignUp.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,7 +10,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import useRegisterMutation from '@/hooks/useRegisterMutation';
 
 export default function SignUp() {
-  const mutationRegister = useRegisterMutation();
+  const [focusedField, setFocusedField] = useState<string | null>(null);
 
   const form = useForm<PostSignUpRequestType>({
     resolver: zodResolver(PostSignUpRequest),
@@ -22,8 +23,18 @@ export default function SignUp() {
     },
   });
 
+  const { setFocus, setValue, trigger } = form;
+
+  const handleFieldError = (field: 'email' | 'nickname') => {
+    setFocus(field);
+    setFocusedField(field);
+  };
+
+  const mutationRegister = useRegisterMutation(handleFieldError);
+
   const trimWhitespace = (fieldName: keyof PostSignUpRequestType, value: string) => {
-    form.setValue(fieldName, value.trim(), { shouldValidate: true, shouldDirty: true });
+    setValue(fieldName, value.trim(), { shouldValidate: true, shouldDirty: true });
+    trigger(fieldName);
   };
 
   return (
@@ -41,14 +52,20 @@ export default function SignUp() {
               name='email'
               render={({ field, fieldState }) => (
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
-                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>이메일</FormLabel>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid || focusedField === 'email' ? 'text-state-error' : 'text-blue-900'}`}>
+                    이메일
+                  </FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='text'
                       placeholder='이메일'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
-                      onBlur={(e) => trimWhitespace('email', e.target.value)}
+                      onBlur={(e) => {
+                        trimWhitespace('email', e.target.value);
+                      }}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${
+                        fieldState.invalid || focusedField === 'email' ? 'border-2 border-state-error' : 'focus:border-blue-500'
+                      }`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -63,11 +80,11 @@ export default function SignUp() {
                   <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>비밀번호</FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='password'
                       placeholder='비밀번호'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
                       onBlur={(e) => trimWhitespace('password', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -81,11 +98,11 @@ export default function SignUp() {
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
                   <FormControl>
                     <Input
+                      {...field}
                       type='password'
                       placeholder='비밀번호 확인'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
                       onBlur={(e) => trimWhitespace('passwordConfirmation', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -97,14 +114,16 @@ export default function SignUp() {
               name='nickname'
               render={({ field, fieldState }) => (
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] md:mb-10 mb-[30px] space-y-0'>
-                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>닉네임</FormLabel>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid || focusedField === 'nickname' ? 'text-state-error' : 'text-blue-900'}`}>
+                    닉네임
+                  </FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='text'
                       placeholder='닉네임'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
                       onBlur={(e) => trimWhitespace('nickname', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid || focusedField === 'nickname' ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />

From 180ec4a46857acc42ef06de16b62b79789f31e98 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Fri, 2 Aug 2024 11:33:19 +0900
Subject: [PATCH 5/9] =?UTF-8?q?:lipstick:=20=EC=86=8C=EC=85=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/horizen.png        | Bin 0 -> 137 bytes
 src/pages/auth/SignUp.tsx |  31 +++++++++++++++++++++----------
 2 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 public/horizen.png

diff --git a/public/horizen.png b/public/horizen.png
new file mode 100644
index 0000000000000000000000000000000000000000..a64360ecfbc09c9c620669d99d0c2b065760a69d
GIT binary patch
literal 137
zcmeAS@N?(olHy`uVBq!ia0vp^c|gp>!3HFE=DxfIq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{TfqXen7srqa#<vF;c^MdZ4jI%vwU{efGT{RA
enw6htc`@#t!>oAtV8wi(N(N6?KbLh*2~7a$k0ap#

literal 0
HcmV?d00001

diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
index e3e38ed5..1168ae8f 100644
--- a/src/pages/auth/SignUp.tsx
+++ b/src/pages/auth/SignUp.tsx
@@ -140,16 +140,27 @@ export default function SignUp() {
           </form>
         </Form>
       </div>
-      <div className='flex justify-center gap-4'>
-        <Button type='button' className='md:size-[60px] p-0'>
-          <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
-        </Button>
-        <Button type='button' className='md:size-[60px] p-0'>
-          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
-        </Button>
-        <Button type='button' className='md:size-[60px] p-0'>
-          <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
-        </Button>
+      <div className='flex flex-col items-center w-full lg:gap-10 gap-6'>
+        <div className='flex justify-center items-center lg:gap-6 gap-[14px] w-full lg:max-w-[640px] md:max-w-[384px] lg:px-0 md:px-0 px-6'>
+          <div className='flex-grow'>
+            <Image src='/horizen.png' alt='horizen' width={180} height={0} className='w-full h-[2px]' />
+          </div>
+          <h3 className='lg:text-xl text-xs font-pretendard text-blue-400 whitespace-nowrap'>SNS 계정으로 로그인하기</h3>
+          <div className='flex-grow'>
+            <Image src='/horizen.png' alt='horizen' width={180} height={0} className='w-full h-[2px]' />
+          </div>
+        </div>
+        <div className='flex justify-center gap-4'>
+          <Button type='button' className='md:size-[60px] p-0'>
+            <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
+          </Button>
+          <Button type='button' className='md:size-[60px] p-0'>
+            <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+          </Button>
+          <Button type='button' className='md:size-[60px] p-0'>
+            <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
+          </Button>
+        </div>
       </div>
     </div>
   );

From 5a36ca22ba40fca555dade44d1c7c18bf385de18 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Fri, 2 Aug 2024 11:45:13 +0900
Subject: [PATCH 6/9] =?UTF-8?q?:wrench:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

라우팅 변경, 토스트 추가
---
 src/hooks/useRegisterMutation.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
index f1fadc25..258c243c 100644
--- a/src/hooks/useRegisterMutation.ts
+++ b/src/hooks/useRegisterMutation.ts
@@ -12,7 +12,12 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
     onSuccess: (data) => {
       localStorage.setItem('accessToken', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      router.push('/auth/SignIn');
+      toast({
+        title: '회원가입 성공!',
+        description: '로그인 후 이용해주세요.',
+        className: 'bg-illust-green text-white font-semibold',
+      });
     },
     onError: (error) => {
       if (isAxiosError(error)) {
@@ -26,7 +31,7 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
           if (errorMessage.includes('이미 사용중인 이메일')) {
             toast({
               description: '이미 사용중인 이메일입니다.',
-              className: 'border-state-error text-state-error font-semibold right-0 top-0',
+              className: 'border-state-error text-state-error font-semibold',
             });
             onRegisterError('email');
             return;

From 96ad1ba7cb2ba9ebc935ae31e7ca0b60817dce40 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Fri, 2 Aug 2024 11:54:52 +0900
Subject: [PATCH 7/9] =?UTF-8?q?:wrench:=20if=EB=AC=B8=20depth=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useRegisterMutation.ts | 71 ++++++++++++++++----------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
index 258c243c..286805ab 100644
--- a/src/hooks/useRegisterMutation.ts
+++ b/src/hooks/useRegisterMutation.ts
@@ -20,63 +20,64 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
       });
     },
     onError: (error) => {
-      if (isAxiosError(error)) {
-        const { status, data } = error.response || {};
-
-        if (!status) return;
+      if (!isAxiosError(error)) {
+        return;
+      }
 
-        if (status === 400) {
-          const errorMessage = data?.message || '잘못된 요청입니다. 입력 값을 확인해주세요.';
+      const { status, data } = error.response || {};
 
-          if (errorMessage.includes('이미 사용중인 이메일')) {
-            toast({
-              description: '이미 사용중인 이메일입니다.',
-              className: 'border-state-error text-state-error font-semibold',
-            });
-            onRegisterError('email');
-            return;
-          }
+      if (status === 400) {
+        const errorMessage = data?.message || '잘못된 요청입니다. 입력 값을 확인해주세요.';
 
+        if (errorMessage.includes('이미 사용중인 이메일')) {
           toast({
-            description: errorMessage,
+            description: '이미 사용중인 이메일입니다.',
             className: 'border-state-error text-state-error font-semibold',
           });
+          onRegisterError('email');
           return;
         }
 
-        if (status === 500) {
-          const errorMessage = data?.message || '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
+        toast({
+          description: errorMessage,
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
 
-          // NOTE: swagger 문서에서 중복된 닉네임은 500에러와 함께 "Internal Server Error" 메시지로 응답 옴
-          if (errorMessage.includes('Internal Server Error')) {
-            toast({
-              description: '이미 존재하는 닉네임입니다.',
-              className: 'border-state-error text-state-error font-semibold',
-            });
-            onRegisterError('nickname');
-            return;
-          }
+      if (status === 500) {
+        const errorMessage = data?.message || '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
 
+        // NOTE: swagger 문서에서 중복된 닉네임은 500에러와 함께 "Internal Server Error" 메시지로 응답 옴
+        if (errorMessage.includes('Internal Server Error')) {
           toast({
-            description: errorMessage,
+            description: '이미 존재하는 닉네임입니다.',
             className: 'border-state-error text-state-error font-semibold',
           });
+          onRegisterError('nickname');
           return;
         }
 
-        if (status >= 500) {
-          toast({
-            description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-            className: 'border-state-error text-state-error font-semibold',
-          });
-          return;
-        }
+        toast({
+          description: errorMessage,
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
 
+      // NOTE: status값은 항상 있으며 undefined와 숫자를 비교연산 할 수 없어 Number로 설정
+      if (Number(status) >= 500) {
         toast({
-          description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
           className: 'border-state-error text-state-error font-semibold',
         });
+        return;
       }
+
+      toast({
+        description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+        className: 'border-state-error text-state-error font-semibold',
+      });
     },
   });
 };

From 79de51d76742f954ce26dedeab1bd7ec286ab8e0 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Fri, 2 Aug 2024 11:58:04 +0900
Subject: [PATCH 8/9] =?UTF-8?q?:lipstick:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useRegisterMutation.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
index 286805ab..a0e8e8cb 100644
--- a/src/hooks/useRegisterMutation.ts
+++ b/src/hooks/useRegisterMutation.ts
@@ -32,7 +32,7 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
         if (errorMessage.includes('이미 사용중인 이메일')) {
           toast({
             description: '이미 사용중인 이메일입니다.',
-            className: 'border-state-error text-state-error font-semibold',
+            className: 'bg-state-error text-white font-semibold',
           });
           onRegisterError('email');
           return;
@@ -40,7 +40,7 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
 
         toast({
           description: errorMessage,
-          className: 'border-state-error text-state-error font-semibold',
+          className: 'bg-state-error text-white font-semibold',
         });
         return;
       }
@@ -52,7 +52,7 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
         if (errorMessage.includes('Internal Server Error')) {
           toast({
             description: '이미 존재하는 닉네임입니다.',
-            className: 'border-state-error text-state-error font-semibold',
+            className: 'bg-state-error text-white font-semibold',
           });
           onRegisterError('nickname');
           return;
@@ -60,7 +60,7 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
 
         toast({
           description: errorMessage,
-          className: 'border-state-error text-state-error font-semibold',
+          className: 'bg-state-error text-white font-semibold',
         });
         return;
       }
@@ -69,14 +69,14 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
       if (Number(status) >= 500) {
         toast({
           description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-          className: 'border-state-error text-state-error font-semibold',
+          className: 'bg-state-error text-white font-semibold',
         });
         return;
       }
 
       toast({
         description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-        className: 'border-state-error text-state-error font-semibold',
+        className: 'bg-state-error text-white font-semibold',
       });
     },
   });

From 6932bcb5163fa9e6250ae481bb66a8c8504ae4f1 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Fri, 2 Aug 2024 12:04:39 +0900
Subject: [PATCH 9/9] =?UTF-8?q?:wrench:=20=EB=84=A4=EC=9D=B4=EB=B2=84,=20?=
 =?UTF-8?q?=EA=B5=AC=EA=B8=80,=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Link로 변경, 환경 변수 적용
---
 src/pages/auth/SignUp.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
index 1168ae8f..3c989445 100644
--- a/src/pages/auth/SignUp.tsx
+++ b/src/pages/auth/SignUp.tsx
@@ -151,15 +151,20 @@ export default function SignUp() {
           </div>
         </div>
         <div className='flex justify-center gap-4'>
-          <Button type='button' className='md:size-[60px] p-0'>
+          <Link
+            href={`https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&state=${'test'}&redirect_uri=${process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI}`}
+          >
             <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
-          </Button>
-          <Button type='button' className='md:size-[60px] p-0'>
-            <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
-          </Button>
-          <Button type='button' className='md:size-[60px] p-0'>
+          </Link>
+          {/* // FIXME: 구글 간편 로그인 리다이렉트시 500에러가 발생하는 부분으로 주석 처리하였음  */}
+          {/* <Link
+          href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&response_type=code&scope=email%20profile`}
+        > */}
+          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+          {/* </Link> */}
+          <Link href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`}>
             <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
-          </Button>
+          </Link>
         </div>
       </div>
     </div>