Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

πŸ”€ 둜그인 νŽ˜μ΄μ§€ λ¦¬νŒ©ν† λ§ 진행 #63

Merged
merged 6 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/entities/signIn/api/postSignin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import axios from 'axios';

interface SignInData {
nickname: string;
password: string;
}

export const postSignin = async (data: SignInData) => {
const response = await axios.post('/api/auth/signin', data);
return response;
};
Comment on lines +8 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

API 응닡 νƒ€μž… 및 μ—λŸ¬ 처리 κ°œμ„  ν•„μš”

API 호좜 κ΅¬ν˜„μ— λ‹€μŒ 사항듀이 λ³΄μ™„λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€:

  1. 응닡 λ°μ΄ν„°μ˜ νƒ€μž… μ •μ˜κ°€ λˆ„λ½λ˜μ—ˆμŠ΅λ‹ˆλ‹€
  2. μ—λŸ¬ 처리 둜직이 μ—†μŠ΅λ‹ˆλ‹€
  3. axios 인터셉터 섀정이 ν•„μš”ν•  수 μžˆμŠ΅λ‹ˆλ‹€

λ‹€μŒκ³Ό 같이 κ°œμ„ ν•˜λŠ” 것을 μ œμ•ˆλ“œλ¦½λ‹ˆλ‹€:

+interface SignInResponse {
+  accessToken: string;
+  // 기타 응닡 ν•„λ“œλ“€...
+}

-export const postSignin = async (data: SignInData) => {
+export const postSignin = async (data: SignInData): Promise<SignInResponse> => {
   try {
-    const response = await axios.post('/api/auth/signin', data);
+    const response = await axios.post<SignInResponse>('/api/auth/signin', data);
     return response.data;
   } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(error.response?.data?.message || 'λ‘œκ·ΈμΈμ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');
+    }
+    throw error;
   }
 };
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const postSignin = async (data: SignInData) => {
const response = await axios.post('/api/auth/signin', data);
return response;
};
interface SignInResponse {
accessToken: string;
// 기타 응닡 ν•„λ“œλ“€...
}
export const postSignin = async (data: SignInData): Promise<SignInResponse> => {
try {
const response = await axios.post<SignInResponse>('/api/auth/signin', data);
return response.data;
} catch (error) {
if (axios.isAxiosError(error)) {
throw new Error(error.response?.data?.message || 'λ‘œκ·ΈμΈμ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');
}
throw error;
}
};

24 changes: 24 additions & 0 deletions src/entities/signIn/model/useSignin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'react-toastify';
import { postSignin } from '../api/postSignin';

interface SignInData {
nickname: string;
password: string;
}

export const useSignin = () => {
const router = useRouter();

return useMutation({
mutationFn: (data: SignInData) => postSignin(data),
onSuccess: () => {
toast.success('둜그인이 μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.');
router.push('/');
},
onError: () => {
toast.error('λ‘œκ·ΈμΈμ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
},
});
Comment on lines +14 to +23
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

mutation μ„€μ • κ°œμ„  ν•„μš”

mutation ꡬ성에 λͺ‡ 가지 μ€‘μš”ν•œ 섀정이 λˆ„λ½λ˜μ—ˆμŠ΅λ‹ˆλ‹€:

λ‹€μŒ 섀정듀을 μΆ”κ°€ν•˜λŠ” 것을 μΆ”μ²œλ“œλ¦½λ‹ˆλ‹€:

 return useMutation({
   mutationFn: (data: SignInData) => postSignin(data),
+  retry: 1,
   onSuccess: () => {
     toast.success('둜그인이 μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.');
+    // 둜그인 ν›„ κ΄€λ ¨ 쿼리듀 λ¬΄νš¨ν™”
+    queryClient.invalidateQueries({ queryKey: ['user'] });
     router.push('/');
   },
   onError: () => {
     toast.error('λ‘œκ·ΈμΈμ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
   },
+  onSettled: () => {
+    // λ‘œλ”© μƒνƒœ 처리
+  }
 });

Committable suggestion skipped: line range outside the PR's diff.

};
7 changes: 3 additions & 4 deletions src/entities/signIn/ui/SignInForm/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
'use client';

import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import Button from '@/shared/ui/Button';
import Input from '@/shared/ui/Input';
import { signIn } from '../../api/signin';
import { showError } from '../../model/showError';
import { useSignin } from '../../model/useSignin';

type FormData = {
nickname: string;
Expand All @@ -19,12 +18,12 @@ const SignInForm = () => {
formState: { isSubmitting },
} = useForm<FormData>();

const router = useRouter();
const { mutate: signin } = useSignin();

return (
<form
onSubmit={handleSubmit(
(data) => signIn(data, router),
(data) => signin(data),
(errors) => {
const firstError = Object.values(errors)[0];
if (firstError && firstError.message) {
Expand Down
21 changes: 0 additions & 21 deletions src/entities/signUp/api/checkSmsCode.ts

This file was deleted.

14 changes: 14 additions & 0 deletions src/entities/signUp/api/getCheckSmsCode.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import axios from 'axios';
import { toast } from 'react-toastify';

export const getCheckSmsCode = async (phoneNumber: string, code: string) => {
if (!phoneNumber || !code) {
toast.error('μ „ν™”λ²ˆν˜Έμ™€ 인증 번호λ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
return;
}

const response = await axios.get(
`/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
);
Comment on lines +10 to +12
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

URL λ§€κ°œλ³€μˆ˜ 인코딩 ν•„μš”

URL λ§€κ°œλ³€μˆ˜μ— 특수 λ¬Έμžκ°€ 포함될 수 μžˆμœΌλ―€λ‘œ encodeURIComponentλ₯Ό μ‚¬μš©ν•˜μ—¬ μ•ˆμ „ν•˜κ²Œ 인코딩해야 ν•©λ‹ˆλ‹€.

-    `/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
+    `/api/auth/sms?phoneNumber=${encodeURIComponent(phoneNumber)}&code=${encodeURIComponent(code)}`,
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const response = await axios.get(
`/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
);
const response = await axios.get(
`/api/auth/sms?phoneNumber=${encodeURIComponent(phoneNumber)}&code=${encodeURIComponent(code)}`,
);

return response;
};
Comment on lines +4 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

μ—λŸ¬ 처리 및 νƒ€μž… μ•ˆμ „μ„± κ°œμ„  ν•„μš”

ν•¨μˆ˜μ˜ λ°˜ν™˜ νƒ€μž…μ„ λͺ…μ‹œν•˜κ³  μ—λŸ¬ 처리λ₯Ό κ°œμ„ ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

-export const getCheckSmsCode = async (phoneNumber: string, code: string) => {
+interface SmsVerificationResponse {
+  success: boolean;
+  message: string;
+}
+
+export const getCheckSmsCode = async (
+  phoneNumber: string,
+  code: string
+): Promise<SmsVerificationResponse> => {
   if (!phoneNumber || !code) {
     toast.error('μ „ν™”λ²ˆν˜Έμ™€ 인증 번호λ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
-    return;
+    throw new Error('μ „ν™”λ²ˆν˜Έμ™€ 인증 λ²ˆν˜ΈλŠ” ν•„μˆ˜μž…λ‹ˆλ‹€.');
   }

-  const response = await axios.get(
-    `/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
-  );
-  return response;
+  try {
+    const response = await axios.get<SmsVerificationResponse>(
+      `/api/auth/sms?phoneNumber=${encodeURIComponent(phoneNumber)}&code=${encodeURIComponent(code)}`,
+    );
+    return response.data;
+  } catch (error) {
+    toast.error('인증 확인 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.');
+    throw error;
+  }
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const getCheckSmsCode = async (phoneNumber: string, code: string) => {
if (!phoneNumber || !code) {
toast.error('μ „ν™”λ²ˆν˜Έμ™€ 인증 번호λ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
return;
}
const response = await axios.get(
`/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
);
return response;
};
interface SmsVerificationResponse {
success: boolean;
message: string;
}
export const getCheckSmsCode = async (
phoneNumber: string,
code: string
): Promise<SmsVerificationResponse> => {
if (!phoneNumber || !code) {
toast.error('μ „ν™”λ²ˆν˜Έμ™€ 인증 번호λ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
throw new Error('μ „ν™”λ²ˆν˜Έμ™€ 인증 λ²ˆν˜ΈλŠ” ν•„μˆ˜μž…λ‹ˆλ‹€.');
}
try {
const response = await axios.get<SmsVerificationResponse>(
`/api/auth/sms?phoneNumber=${encodeURIComponent(phoneNumber)}&code=${encodeURIComponent(code)}`,
);
return response.data;
} catch (error) {
toast.error('인증 확인 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.');
throw error;
}
};

12 changes: 12 additions & 0 deletions src/entities/signUp/api/postSendSms.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import axios from 'axios';
import { toast } from 'react-toastify';

export const postSendSms = async (phoneNumber: string) => {
if (!phoneNumber) {
toast.error('μ „ν™”λ²ˆν˜Έλ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
return;
}
Comment on lines +4 to +8
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

API ν•¨μˆ˜μ—μ„œ UI 둜직 뢄리 ν•„μš”

postSendSms ν•¨μˆ˜ λ‚΄μ—μ„œ toast.errorλ₯Ό ν˜ΈμΆœν•˜μ—¬ UI 둜직과 API 둜직이 ν˜Όμž¬λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. API ν•¨μˆ˜λŠ” 데이터 ν†΅μ‹ μ—λ§Œ μ§‘μ€‘ν•˜κ³ , μ—λŸ¬ μ²˜λ¦¬λŠ” ν˜ΈμΆœλΆ€μ—μ„œ λ‹΄λ‹Ήν•˜λ„λ‘ μˆ˜μ •ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

적용 μ˜ˆμ‹œ:

export const postSendSms = async (phoneNumber: string) => {
  if (!phoneNumber) {
-   toast.error('μ „ν™”λ²ˆν˜Έλ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
-   return;
+   throw new Error('μ „ν™”λ²ˆν˜Έλ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
  }
  const response = await axios.post('/api/auth/sms', { phoneNumber });
  return response;
};

Committable suggestion skipped: line range outside the PR's diff.


const response = await axios.post('/api/auth/sms', { phoneNumber });
return response;
Comment on lines +10 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

API 호좜 μ‹œ μ—λŸ¬ 처리 ν•„μš”

axios.post μš”μ²­ 쀑 λ°œμƒν•  수 μžˆλŠ” μ—λŸ¬μ— λŒ€ν•œ μ²˜λ¦¬κ°€ μ—†μŠ΅λ‹ˆλ‹€. λ„€νŠΈμ›Œν¬ 였λ₯˜λ‚˜ μ„œλ²„ 였λ₯˜μ— λŒ€λΉ„ν•˜κΈ° μœ„ν•΄ try-catch ꡬ문을 μ‚¬μš©ν•˜μ—¬ μ—λŸ¬λ₯Ό μ²˜λ¦¬ν•˜λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

적용 μ˜ˆμ‹œ:

export const postSendSms = async (phoneNumber: string) => {
  if (!phoneNumber) {
    throw new Error('μ „ν™”λ²ˆν˜Έλ₯Ό μž…λ ₯ν•΄μ£Όμ„Έμš”.');
  }
+ try {
    const response = await axios.post('/api/auth/sms', { phoneNumber });
    return response;
+ } catch (error) {
+   throw error;
+ }
};

Committable suggestion skipped: line range outside the PR's diff.

};
14 changes: 14 additions & 0 deletions src/entities/signUp/api/postSignup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import axios from 'axios';

interface SignUpData {
name: string;
nickname: string;
email: string;
password: string;
phoneNumber: string;
}

export const postSignup = async (data: SignUpData) => {
const response = await axios.post('/api/auth/signup', data);
return response;
Comment on lines +11 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

API 호좜 μ‹œ μ—λŸ¬ 처리 ν•„μš”

axios.post μš”μ²­ μ‹œ λ°œμƒν•  수 μžˆλŠ” μ—λŸ¬λ₯Ό μ²˜λ¦¬ν•˜μ§€ μ•Šκ³  μžˆμŠ΅λ‹ˆλ‹€. μ„œλ²„ 응닡 였λ₯˜λ‚˜ λ„€νŠΈμ›Œν¬ μž₯애에 λŒ€λΉ„ν•˜μ—¬ try-catch ꡬ문으둜 μ—λŸ¬λ₯Ό μ²˜λ¦¬ν•˜λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

적용 μ˜ˆμ‹œ:

export const postSignup = async (data: SignUpData) => {
+ try {
    const response = await axios.post('/api/auth/signup', data);
    return response;
+ } catch (error) {
+   throw error;
+ }
};
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const postSignup = async (data: SignUpData) => {
const response = await axios.post('/api/auth/signup', data);
return response;
export const postSignup = async (data: SignUpData) => {
try {
const response = await axios.post('/api/auth/signup', data);
return response;
} catch (error) {
throw error;
}
};

};
25 changes: 0 additions & 25 deletions src/entities/signUp/api/sendSms.ts

This file was deleted.

33 changes: 0 additions & 33 deletions src/entities/signUp/api/signup.ts

This file was deleted.

10 changes: 10 additions & 0 deletions src/entities/signUp/model/useCheckSmsCode.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { useQuery } from '@tanstack/react-query';
import { getCheckSmsCode } from '../api/getCheckSmsCode';

export const useCheckSmsCode = (phoneNumber: string, code: string) => {
return useQuery({
queryKey: ['CheckSmsCode', phoneNumber, code],
queryFn: () => getCheckSmsCode(phoneNumber, code),
enabled: false,
});
};
20 changes: 20 additions & 0 deletions src/entities/signUp/model/useSendSms.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useMutation } from '@tanstack/react-query';
import { toast } from 'react-toastify';
import { postSendSms } from '../api/postSendSms';

export const useSendSms = (
setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>,
setTimer: React.Dispatch<React.SetStateAction<number>>,
) => {
return useMutation({
mutationFn: (phoneNumber: string) => postSendSms(phoneNumber),
onSuccess: () => {
setIsSmsSent(true);
setTimer(180);
toast.success('문자 λ©”μ‹œμ§€ 전솑이 μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.');
},
onError: () => {
toast.error('문제 λ§€μ‹œμ§€ 전솑에 μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

μ˜€νƒ€ μˆ˜μ • ν•„μš”

μ—λŸ¬ λ©”μ‹œμ§€μ˜ μ˜€νƒ€λ₯Ό μˆ˜μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.

-      toast.error('문제 λ§€μ‹œμ§€ 전솑에 μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
+      toast.error('문자 λ©”μ‹œμ§€ 전솑에 μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
toast.error('문제 λ§€μ‹œμ§€ 전솑에 μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
toast.error('문자 λ©”μ‹œμ§€ 전솑에 μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');

},
});
};
27 changes: 27 additions & 0 deletions src/entities/signUp/model/useSignup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'react-toastify';
import { postSignup } from '../api/postSignup';

interface SignUpData {
name: string;
nickname: string;
email: string;
password: string;
phoneNumber: string;
}

export const useSignup = () => {
const router = useRouter();

return useMutation({
mutationFn: (data: SignUpData) => postSignup(data),
onSuccess: () => {
toast.success('νšŒμ›κ°€μž…μ΄ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.');
router.push('/signIn');
},
onError: () => {
toast.error('νšŒμ›κ°€μž…μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.');
},
});
};
6 changes: 5 additions & 1 deletion src/entities/signUp/model/useTimer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ import { useEffect } from 'react';
export const useTimer = (
timer: number,
setTimer: React.Dispatch<React.SetStateAction<number>>,
setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>, // μΆ”κ°€
) => {
useEffect(() => {
if (timer > 0) {
const intervalId = setInterval(() => {
setTimer((prev) => prev - 1);
}, 1000);

return () => clearInterval(intervalId);
} else if (timer === 0) {
setIsSmsSent(false);
}
}, [timer, setTimer]);
}, [timer, setTimer, setIsSmsSent]);
Comment on lines 8 to +18
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

타이머 둜직 κ°œμ„  ν•„μš”

타이머 λ‘œμ§μ— λͺ‡ 가지 κ°œμ„ μ΄ ν•„μš”ν•©λ‹ˆλ‹€:

 useEffect(() => {
+  let intervalId: NodeJS.Timeout;
   if (timer > 0) {
-    const intervalId = setInterval(() => {
+    intervalId = setInterval(() => {
       setTimer((prev) => prev - 1);
     }, 1000);
-
-    return () => clearInterval(intervalId);
   } else if (timer === 0) {
     setIsSmsSent(false);
   }
+  return () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  };
 }, [timer, setTimer, setIsSmsSent]);
  1. λ©”λͺ¨λ¦¬ λˆ„μˆ˜ 방지λ₯Ό μœ„ν•œ cleanup ν•¨μˆ˜ κ°œμ„ 
  2. 타이머가 0이 λ˜μ—ˆμ„ λ•Œμ˜ 처리 둜직 λͺ…ν™•ν™”
  3. μΈν„°λ²Œ ID 관리 κ°œμ„ 
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
useEffect(() => {
if (timer > 0) {
const intervalId = setInterval(() => {
setTimer((prev) => prev - 1);
}, 1000);
return () => clearInterval(intervalId);
} else if (timer === 0) {
setIsSmsSent(false);
}
}, [timer, setTimer]);
}, [timer, setTimer, setIsSmsSent]);
useEffect(() => {
let intervalId: NodeJS.Timeout;
if (timer > 0) {
intervalId = setInterval(() => {
setTimer((prev) => prev - 1);
}, 1000);
} else if (timer === 0) {
setIsSmsSent(false);
}
return () => {
if (intervalId) {
clearInterval(intervalId);
}
};
}, [timer, setTimer, setIsSmsSent]);

};
27 changes: 14 additions & 13 deletions src/entities/signUp/ui/SignUpForm/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
'use client';

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Button, Input } from '@/shared/ui';
import { checkSmsCode } from '../../api/checkSmsCode';
import { sendSms } from '../../api/sendSms';
import { signUp } from '../../api/signup';
import { showError } from '../../model/showError';
import { useCheckSmsCode } from '../../model/useCheckSmsCode';
import { useSendSms } from '../../model/useSendSms';
import { useSignup } from '../../model/useSignup';
import { useTimer } from '../../model/useTimer';

type FormData = {
Expand All @@ -29,15 +28,19 @@ const SignUpForm = () => {
} = useForm<FormData>();
const [isSmsSent, setIsSmsSent] = useState(false);
const [timer, setTimer] = useState(0);
const { mutate: signup } = useSignup();
const { mutate: sendSms } = useSendSms(setIsSmsSent, setTimer);
const { refetch: checkSmsCode } = useCheckSmsCode(
watch('phoneNumber'),
watch('code'),
);

useTimer(timer, setTimer);

const router = useRouter();
useTimer(timer, setTimer, setIsSmsSent);

return (
<form
onSubmit={handleSubmit(
(data) => signUp(data, router),
(data) => signup(data),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

μ„œλ²„λ‘œ μ „λ‹¬λ˜λŠ” 데이터 필터링 ν•„μš”

signup ν•¨μˆ˜ 호좜 μ‹œ dataλ₯Ό κ·ΈλŒ€λ‘œ μ „λ‹¬ν•˜κ³  μžˆμ–΄ checkPassword와 code 같은 λΆˆν•„μš”ν•œ 데이터가 μ„œλ²„λ‘œ λ³΄λ‚΄μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. λ―Όκ°ν•œ μ •λ³΄λ‚˜ λΆˆν•„μš”ν•œ λ°μ΄ν„°λŠ” μ„œλ²„λ‘œ μ „λ‹¬λ˜μ§€ μ•Šλ„λ‘ ν•„μš”ν•œ ν•„λ“œλ§Œ μ„ λ³„ν•˜μ—¬ μ „λ‹¬ν•˜λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

적용 μ˜ˆμ‹œ:

(data) => signup({
  name: data.name,
  nickname: data.nickname,
  email: data.email,
  password: data.password,
  phoneNumber: data.phoneNumber,
})
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
(data) => signup(data),
(data) => signup({
name: data.name,
nickname: data.nickname,
email: data.email,
password: data.password,
phoneNumber: data.phoneNumber,
}),

(errors) => {
const firstError = Object.values(errors)[0];
if (firstError && firstError.message) {
Expand Down Expand Up @@ -126,10 +129,10 @@ const SignUpForm = () => {
type="text"
placeholder="인증 번호 μž…λ ₯"
style={{ width: '80%' }}
disabled={!isSmsSent}
disabled={!isSmsSent && watch('code') !== null}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

μž…λ ₯ ν•„λ“œ λΉ„ν™œμ„±ν™” 쑰건 둜직 μˆ˜μ • ν•„μš”

disabled={!isSmsSent && watch('code') !== null} μ‘°κ±΄μ—μ„œ watch('code') !== null은 항상 μ°Έ(true)일 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” μž…λ ₯ ν•„λ“œκ°€ μ˜λ„μΉ˜ μ•Šκ²Œ λΉ„ν™œμ„±ν™”λ˜μ§€ μ•ŠλŠ” 원인이 될 수 μžˆμœΌλ―€λ‘œ 쑰건 λ‘œμ§μ„ μž¬κ²€ν† ν•΄μ£Όμ„Έμš”.

적용 μ˜ˆμ‹œ:

-disabled={!isSmsSent && watch('code') !== null}
+disabled={!isSmsSent || !watch('code')}
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
disabled={!isSmsSent && watch('code') !== null}
disabled={!isSmsSent || !watch('code')}

/>
<Button
onClick={() => checkSmsCode(watch('phoneNumber'), watch('code'))}
onClick={() => checkSmsCode()}
text="확인"
width="20%"
disabled={!isSmsSent}
Expand All @@ -138,9 +141,7 @@ const SignUpForm = () => {
</div>
<button
type="button"
onClick={() =>
sendSms(watch('phoneNumber'), setIsSmsSent, setTimer)
}
onClick={() => sendSms(watch('phoneNumber'))}
className="text-caption2 text-gray-300"
disabled={isSmsSent}
>
Expand Down
Loading