feat: useAuth 중복수정 #90
Conversation
Walkthrough
Changes
Assessment against linked issues
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/hooks/use-auth.ts (1)
Line range hint
115-141: 쿠키 설정 작업의 최적화 및 에러 처리 필요현재 구현은 각 쿠키를 개별적으로 설정하고 있으며, 에러 처리가 누락되어 있습니다. 또한 쿠키 설정 실패 시 상태 업데이트가 일관성 없이 진행될 수 있습니다.
다음과 같은 개선사항을 제안드립니다:
- 쿠키 설정을 일괄 처리하는 유틸리티 함수 도입
- try-catch 블록을 통한 에러 처리 추가
- 트랜잭션적 접근을 통한 일관성 보장
setAuth: async (response: LoginResponse) => { + try { const { token, memberId, memberName, memberNickName, annualIncome, deposit, } = response; - await setCookie("token", token); - await setCookie("memberId", memberId.toString()); - await setCookie("memberName", memberName); - await setCookie("memberNickName", memberNickName); - await setCookie("annualIncome", annualIncome.toString()); - await setCookie("deposit", deposit.toString()); + await Promise.all([ + setCookie("token", token), + setCookie("memberId", memberId.toString()), + setCookie("memberName", memberName), + setCookie("memberNickName", memberNickName), + setCookie("annualIncome", annualIncome.toString()), + setCookie("deposit", deposit.toString()) + ]); set({ token, memberId, memberName, memberNickName, annualIncome, deposit, isAuthenticated: true, isInitialized: true, }); + } catch (error) { + console.error('인증 정보 설정 중 오류 발생:', error); + throw error; + }
🧹 Nitpick comments (3)
src/hooks/use-auth.ts (3)
25-25:isInitializing상태에 대한 문서화 필요새로 추가된
isInitializing상태 필드에 대한 설명이 인터페이스에 누락되어 있습니다. 다른 개발자들의 이해를 돕기 위해 JSDoc 문서화가 필요합니다.다음과 같이 문서화를 추가해주세요:
interface AuthStore { + /** 인증 초기화가 진행 중인지 여부를 나타내는 플래그 */ isInitializing: boolean;
90-91: Promise 변수의 타입 안전성 개선 필요
initPromise변수가 명시적인 타입 선언 없이 초기화되었습니다. 타입 안전성을 위해 명시적인 타입 선언을 추가하는 것이 좋습니다.다음과 같이 수정해주세요:
- let initPromise: Promise<void> | null = null; + const initPromise = { + current: null as Promise<void> | null + };
185-234: 초기화 로직의 견고성 향상전반적으로 잘 구현되어 있으나, 몇 가지 개선 포인트가 있습니다:
- 숫자 파싱 시 발생할 수 있는 예외 처리
- 초기화 실패 시의 상태 처리 개선
다음과 같은 개선사항을 제안드립니다:
try { set({ isInitializing: true }); const token = await getCookie("token"); const memberIdStr = await getCookie("memberId"); const memberName = await getCookie("memberName"); const memberNickName = await getCookie("memberNickName"); const annualIncomeStr = await getCookie("annualIncome"); const depositStr = await getCookie("deposit"); - const memberId = memberIdStr ? parseInt(memberIdStr, 10) : null; - const annualIncome = annualIncomeStr - ? parseInt(annualIncomeStr, 10) - : null; - const deposit = depositStr ? parseInt(depositStr, 10) : null; + const memberId = memberIdStr ? Number(memberIdStr) || null : null; + const annualIncome = annualIncomeStr ? Number(annualIncomeStr) || null : null; + const deposit = depositStr ? Number(depositStr) || null : null; set({ token, memberId, memberName, memberNickName, annualIncome, deposit, isAuthenticated: !!token, isInitialized: true, isInitializing: false, }); } catch (error) { set({ isInitialized: true, isInitializing: false, + isAuthenticated: false, + token: null, + memberId: null, + memberName: null, + memberNickName: null, + annualIncome: null, + deposit: null }); throw error; }
src/hooks/use-auth.ts
Outdated
| clearAuth: async () => { | ||
| await deleteCookie("token"); | ||
| await deleteCookie("memberId"); | ||
| await deleteCookie("memberName"); | ||
| await deleteCookie("memberNickName"); | ||
| await deleteCookie("annualIncome"); | ||
| await deleteCookie("deposit"); | ||
|
|
||
| set({ | ||
| token: null, | ||
| memberId: null, | ||
| memberName: null, | ||
| memberNickName: null, | ||
| annualIncome: null, | ||
| deposit: null, | ||
| isAuthenticated: false, | ||
| isInitialized: true, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로그아웃 처리의 안정성 개선 필요
setAuth와 동일한 패턴의 문제가 있습니다. 쿠키 삭제 작업의 최적화와 에러 처리가 필요합니다.
다음과 같이 개선해주세요:
clearAuth: async () => {
+ try {
- await deleteCookie("token");
- await deleteCookie("memberId");
- await deleteCookie("memberName");
- await deleteCookie("memberNickName");
- await deleteCookie("annualIncome");
- await deleteCookie("deposit");
+ await Promise.all([
+ deleteCookie("token"),
+ deleteCookie("memberId"),
+ deleteCookie("memberName"),
+ deleteCookie("memberNickName"),
+ deleteCookie("annualIncome"),
+ deleteCookie("deposit")
+ ]);
set({
token: null,
memberId: null,
memberName: null,
memberNickName: null,
annualIncome: null,
deposit: null,
isAuthenticated: false,
isInitialized: true,
});
+ } catch (error) {
+ console.error('로그아웃 처리 중 오류 발생:', 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.
| clearAuth: async () => { | |
| await deleteCookie("token"); | |
| await deleteCookie("memberId"); | |
| await deleteCookie("memberName"); | |
| await deleteCookie("memberNickName"); | |
| await deleteCookie("annualIncome"); | |
| await deleteCookie("deposit"); | |
| set({ | |
| token: null, | |
| memberId: null, | |
| memberName: null, | |
| memberNickName: null, | |
| annualIncome: null, | |
| deposit: null, | |
| isAuthenticated: false, | |
| isInitialized: true, | |
| }); | |
| clearAuth: async () => { | |
| try { | |
| await Promise.all([ | |
| deleteCookie("token"), | |
| deleteCookie("memberId"), | |
| deleteCookie("memberName"), | |
| deleteCookie("memberNickName"), | |
| deleteCookie("annualIncome"), | |
| deleteCookie("deposit") | |
| ]); | |
| set({ | |
| token: null, | |
| memberId: null, | |
| memberName: null, | |
| memberNickName: null, | |
| annualIncome: null, | |
| deposit: null, | |
| isAuthenticated: false, | |
| isInitialized: true, | |
| }); | |
| } catch (error) { | |
| console.error('로그아웃 처리 중 오류 발생:', error); | |
| throw error; | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/hooks/use-auth.ts (1)
Line range hint
104-134: 에러 처리 로직 추가가 필요합니다쿠키 설정 작업 중 발생할 수 있는 오류에 대한 처리가 없습니다.
다음과 같이 try-catch 블록을 추가하는 것을 추천드립니다:
setAuth: async (response: LoginResponse) => { + try { const { token, memberId, memberName, memberNickName, annualIncome, deposit, } = response; await Promise.all([ setCookie("token", token), setCookie("memberId", memberId.toString()), setCookie("memberName", memberName), setCookie("memberNickName", memberNickName), setCookie("annualIncome", annualIncome.toString()), setCookie("deposit", deposit.toString()), ]); set({ token, memberId, memberName, memberNickName, annualIncome, deposit, isAuthenticated: true, isInitialized: true, }); + } catch (error) { + console.error('인증 정보 설정 중 오류 발생:', error); + throw error; + } },
🧹 Nitpick comments (2)
src/hooks/use-auth.ts (2)
90-102: 타입 안전성 개선이 필요합니다
initPromise변수의 타입 안전성을 높일 수 있습니다.다음과 같이 개선해보세요:
- let initPromise: Promise<void> | null = null; + let initPromise: Promise<void> | null | undefined = null;또한 초기 상태를 별도의 상수로 분리하면 코드의 가독성과 재사용성이 향상될 것 같습니다:
const initialState = { token: null, memberId: null, memberName: null, memberNickName: null, annualIncome: null, deposit: null, isAuthenticated: false, isInitialized: false, isInitializing: false, } as const;
159-218: 메모리 누수 방지를 위한 정리(cleanup) 로직 추가 필요컴포넌트가 언마운트되거나 초기화가 중단되었을 때
initPromise를 정리하는 메커니즘이 없습니다.다음과 같은 cleanup 함수를 추가하는 것을 고려해보세요:
const cleanup = () => { initPromise = null; }; // useAuth 훅을 사용하는 컴포넌트에서: useEffect(() => { initAuth(); return cleanup; }, []);또한 초기화 상태 변경을 추적할 수 있도록 디버그 로그를 추가하는 것도 좋을 것 같습니다:
try { + console.debug('인증 초기화 시작'); set({ isInitializing: true }); // ... existing code ... set({ // ... existing code ... }); + console.debug('인증 초기화 완료'); } catch (error) { + console.error('인증 초기화 실패:', error); set({ isInitialized: true, isInitializing: false, }); throw error; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/hooks/use-auth.ts(3 hunks)
🔇 Additional comments (2)
src/hooks/use-auth.ts (2)
32-77: 문서화가 잘 되어있습니다! 👍
JSDoc 문서화가 매우 상세하고 실용적입니다. 특히 다음 사항들이 인상적입니다:
- 명확한 사용 사례와 예제 코드 제공
- 각 시나리오별 구현 방법 설명
- 컴포넌트 수준의 실제 사용 예시
136-157: 이전 리뷰 제안사항이 잘 반영되었습니다
쿠키 삭제 작업을 Promise.all을 사용하여 병렬로 처리하도록 개선한 것이 좋습니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/app/error.tsx (2)
5-6: 함수 이름 개선을 고려해보세요.현재
NotFound라는 이름은 404 에러 페이지를 연상시키지만, 실제로는 서비스 점검 안내를 제공하고 있습니다. 페이지 목적에 맞춰ServiceMaintenance등 더 의도가 명확한 이름을 사용하면 가독성과 유지보수성이 높아집니다.
7-20: 추가적인 안내 요소를 고려해보세요.사용자가 기다리는 동안 다른 페이지로 이동하거나, 홈 화면으로 돌아갈 수 있도록 링크 혹은 버튼을 제공하면 UX가 개선됩니다.
#️⃣ 이슈
📝 작업 내용
인증인가 부분 최적화입니다
이전에는 init 초기화되는 중에 컴포넌트가 랜더링되면 계속해서 초기화가 됐는데 이제는 하나를 초기화하고 있으면 그걸 이어서 하는걸로 수정했습니다.
이제 인증이 필요한 컴포넌트에서만 useAuth를 호출합니다
📸 스크린샷
이전
이후
✅ 체크 리스트
👩💻 공유 포인트 및 논의 사항
Summary by CodeRabbit
isInitializing속성이 추가되었습니다.isAuthenticated가 항상true로 설정됩니다.NotFound컴포넌트가 추가되었습니다.