Conversation
|
""" Walkthrough이번 변경사항은 인증 상태를 전역적으로 활용하여 주요 페이지 및 컴포넌트에서 로그인 여부에 따라 접근 및 UI를 제어하도록 개선하였습니다. 또한, 인증 미들웨어와 API 요청에 skipAuth 헤더를 도입하여 인증이 필요한 요청과 아닌 요청을 명확히 구분하도록 하였으며, 버튼 컴포넌트와 메뉴 라벨 등 일부 UI 요소도 소폭 수정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant useAuthStore
participant API
participant AxiosClient
User->>UI_Component: 페이지 접근/버튼 클릭
UI_Component->>useAuthStore: isLoggedIn 조회
alt isLoggedIn == false
UI_Component-->>User: "로그인이 필요한 서비스입니다." 메시지 표시
else isLoggedIn == true
UI_Component->>AxiosClient: API 요청 (skipAuth 여부에 따라)
AxiosClient->>useAuthStore: isLoggedIn 확인 (skipAuth 없을 때)
alt isLoggedIn == false
AxiosClient-->>UI_Component: 401 에러 반환
UI_Component-->>User: 인증 필요 메시지
else
AxiosClient->>API: 요청 전달
API-->>AxiosClient: 응답 반환
AxiosClient-->>UI_Component: 데이터 전달
UI_Component-->>User: 데이터 표시
end
end
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 4
🧹 Nitpick comments (2)
src/pages/event/ui/host/HostSelectionPage.tsx (1)
54-60: 인증 체크 로직이 적절하게 구현되었습니다.로그인하지 않은 사용자의 다음 단계 진행을 막는 로직이 올바르게 구현되어 있습니다.
UX 개선을 위해 alert 대신 모달을 사용하는 것을 고려해보세요:
- alert('로그인이 필요한 서비스입니다.'); + // useAuthStore의 openModal() 사용 또는 전용 모달 컴포넌트 활용src/pages/menu/ui/MyTicketPage.tsx (1)
70-70: 버튼 표시 조건 로직을 단순화할 수 있습니다.현재 조건이 복잡해 보입니다. 로직을 더 명확하게 만들어보세요.
- {!isModalOpen && tickets.length > 0 && ( + {!isModalOpen && isLoggedIn && tickets.length > 0 && (로그인 상태도 명시적으로 확인하는 것이 더 명확할 것 같습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
design-system/ui/buttons/TertiaryButton.tsx(2 hunks)src/app/provider/authStore.ts(1 hunks)src/entities/event/api/event.ts(5 hunks)src/features/join/api/user.ts(1 hunks)src/features/join/hooks/useUserHook.ts(1 hunks)src/pages/bookmark/ui/BookmarkPage.tsx(2 hunks)src/pages/event/ui/host/HostSelectionPage.tsx(3 hunks)src/pages/menu/ui/MyPage.tsx(4 hunks)src/pages/menu/ui/MyTicketPage.tsx(6 hunks)src/pages/menu/ui/myHost/MyHostPage.tsx(4 hunks)src/shared/types/api/http-client.ts(1 hunks)src/shared/types/menuType.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (8)
src/features/join/hooks/useUserHook.ts (2)
src/features/join/model/userInformation.ts (2)
UserInfoResponse(1-6)UserInfoRequest(8-12)src/features/join/api/user.ts (2)
readUser(4-9)updateUser(11-16)
src/features/join/api/user.ts (2)
src/features/join/model/userInformation.ts (2)
UserInfoResponse(1-6)UserInfoRequest(8-12)src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/shared/types/api/http-client.ts (1)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)
src/pages/menu/ui/myHost/MyHostPage.tsx (1)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)
src/entities/event/api/event.ts (3)
src/shared/types/api/http-client.ts (1)
axiosClient(6-13)src/shared/types/api/apiResponse.ts (1)
ApiResponse(1-5)src/entities/event/model/eventDetail.ts (1)
EventItem(30-34)
src/pages/bookmark/ui/BookmarkPage.tsx (2)
src/features/bookmark/hook/useBookmarkHook.ts (1)
useBookmarks(6-11)src/app/provider/authStore.ts (1)
useAuthStore(16-28)
src/pages/menu/ui/MyPage.tsx (2)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)src/features/join/hooks/useUserHook.ts (2)
useUserInfo(5-11)useUserUpdate(13-17)
src/pages/event/ui/host/HostSelectionPage.tsx (1)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (31)
src/app/provider/authStore.ts (1)
16-28:Details
❓ Verification inconclusive
인증 상태 영속성 제거에 대한 영향 검증이 필요합니다.
zustand의
persist미들웨어가 제거되어 인증 상태가 브라우저 세션 간에 유지되지 않게 됩니다. 이는 사용자가 페이지를 새로고침하거나 다시 방문할 때마다 로그인해야 함을 의미합니다.이 변경이 의도된 것인지, 그리고 사용자 경험에 미치는 영향을 고려했는지 확인해 주세요.
🏁 Script executed:
#!/bin/bash # 설명: 앱 전체에서 인증 상태 지속성에 의존하는 코드가 있는지 확인 # 테스트: persist 또는 localStorage 관련 인증 로직 검색 rg -A 3 -B 3 "persist|localStorage.*auth|auth.*localStorage" # 테스트: 페이지 로드 시 인증 상태 복원 로직 검색 rg -A 5 "useEffect.*auth|componentDidMount.*auth"Length of output: 114
아직
persist미들웨어나localStorage직접 사용 여부가 불명확합니다. 추가로 다음 스크립트를 실행해 코드베이스 전반에서 관련 패턴을 검색해 주세요.
🏁 Script executed:
#!/bin/bash # 1. 'persist(' 호출이 남아있는지 확인 rg -n "persist\(" --color=never # 2. zustand/middleware에서 persist를 import한 곳이 있는지 확인 rg -n "import.*persist" --color=never # 3. localStorage 직접 사용 여부 확인 rg -n "localStorage" --color=never # 4. useAuthStore 호출 위치 확인 (스토어 사용 컴포넌트 검사) rg -n "useAuthStore" --color=neverLength of output: 3977
인증 상태 영속성 제거 의도 확인 요청
현재
authStore.ts에서persist미들웨어가 제거되어 페이지 새로고침이나 재방문 시 로그인 상태가 초기화됩니다.
코드베이스 전반을 살펴본 결과, 인증 상태의 영속성에 의존하는 별도의 로직(LocalStorage, rehydrate 등)은 발견되지 않았습니다.
하지만 UX 영향이 크기 때문에 다음 사항을 확인 부탁드립니다:
persist제거가 보안 또는 요구사항 변경에 따른 의도된 조치인지- 로그인 세션 유지가 필요할 경우, 대체 인증 토큰 관리(쿠키, 세션스토리지 등) 계획 여부
의도를 공유해주시면 감사하겠습니다.
src/shared/types/menuType.ts (1)
23-23: UI 개선이 적절합니다.메뉴 라벨을 "마이페이지"로 변경한 것은 더 간결하고 사용자 친화적입니다.
src/features/join/hooks/useUserHook.ts (2)
5-11: 조건부 데이터 페칭 구현이 우수합니다.
enabled매개변수를 추가하여 인증 상태에 따라 사용자 정보 조회를 제어할 수 있게 한 것은 좋은 개선사항입니다. 이는 로그인하지 않은 사용자를 위한 로직 구현에 도움이 됩니다.
13-17: 코드 포맷팅 개선을 확인합니다.일관된 들여쓰기와 세미콜론 추가로 코드 가독성이 향상되었습니다.
src/pages/menu/ui/MyPage.tsx (6)
13-13: 인증 상태 관리 구현이 적절합니다.auth store에서 로그인 상태를 올바르게 가져오고 있습니다.
15-15: 조건부 데이터 페칭 구현이 우수합니다.로그인 상태에 따라 사용자 정보 조회를 조건부로 활성화하는 것이 성능과 보안 측면에서 바람직합니다.
80-80: 적절한 폴백 메시지 제공로그인하지 않은 경우에 대한 명확한 안내 메시지를 제공하고 있어 사용자 경험이 개선되었습니다.
91-91: 폼 필드 비활성화 로직이 올바릅니다.로그인하지 않은 사용자가 정보를 수정할 수 없도록 필드를 비활성화하는 것이 적절합니다.
Also applies to: 102-102
119-119: 사용자 안내 메시지가 명확합니다.로그인 후 정보 수정이 가능하다는 안내가 적절하게 제공되고 있습니다.
109-116:Details
✅ Verification successful
저장 버튼 비활성화 구현 확인
TertiaryButton에 disabled 속성이 올바르게 적용되었는지 확인이 필요합니다.
다음 스크립트로 TertiaryButton의 disabled prop 지원 여부를 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash # TertiaryButton 컴포넌트에서 disabled prop 지원 확인 ast-grep --pattern 'interface $_ { $$$ disabled?: boolean; $$$ }' # TertiaryButton 구현에서 disabled 처리 확인 rg -A 10 "disabled" design-system/ui/buttons/TertiaryButton.tsxLength of output: 5342
TertiaryButton의 disabled prop 적용 확인됨
TertiaryButtonProps에
disabled?: boolean이 정의되어 있으며, 내부<button>요소에disabled={disabled}가 올바르게 전달되고 있습니다. 따라서 로그인 상태에 따른 “저장하기” 버튼 비활성화 로직이 기대대로 동작합니다.src/pages/menu/ui/myHost/MyHostPage.tsx (4)
9-9: 인증 관리 모듈 임포트가 적절합니다.다른 페이지들과 일관된 패턴으로 useAuthStore를 임포트하고 있습니다.
18-18: 인증 상태 가져오기 구현이 올바릅니다.auth store에서 로그인 상태를 정확하게 가져오고 있습니다.
27-29: 조건부 렌더링 로직이 우수합니다.로그인하지 않은 사용자에게 적절한 안내 메시지를 표시하고, 색상(빨간색)을 통해 중요성을 강조한 것이 좋습니다.
42-42: UI 개선이 바람직합니다.호스트 정보가 없을 때 메시지를 중앙 정렬(mx-auto)로 표시하여 UI 일관성이 개선되었습니다.
src/pages/bookmark/ui/BookmarkPage.tsx (3)
7-7: 일관된 인증 관리 구현다른 페이지들과 동일한 패턴으로 useAuthStore를 임포트하여 일관성이 유지되고 있습니다.
12-12: 인증 상태 접근이 올바릅니다.auth store에서 로그인 상태를 적절하게 가져오고 있습니다.
25-29: 사용자 경험을 고려한 조건부 렌더링로그인하지 않은 사용자에게 명확한 안내 메시지를 제공하고, col-span-2와 적절한 여백(mt-20)으로 레이아웃이 잘 구성되어 있습니다. 빨간색 텍스트로 중요성을 강조한 것도 좋습니다.
src/entities/event/api/event.ts (6)
10-10: 이벤트 상세 조회에 대한 공개 접근 허용이 적절합니다.이벤트 상세 정보는 인증 없이도 조회할 수 있어야 하는 공개 데이터이므로 skipAuth 헤더 추가가 합리적입니다.
28-29: 전체 이벤트 목록 조회에 대한 공개 접근이 바람직합니다.사용자가 로그인하지 않아도 이벤트를 탐색할 수 있어야 하므로 skipAuth 헤더 추가가 적절합니다.
52-53: 카테고리별 이벤트 조회에 대한 공개 접근 구현이 올바릅니다.카테고리별 이벤트 브라우징은 공개 기능이어야 하므로 인증 우회가 적절합니다.
66-67: 태그별 이벤트 조회에 대한 공개 접근이 합리적입니다.태그 기반 이벤트 필터링도 공개 기능으로 제공되어야 하므로 skipAuth 헤더가 필요합니다.
79-81: 카테고리별 이벤트 조회 구현이 일관됩니다.다른 조회 함수들과 일관되게 skipAuth 헤더를 추가하여 공개 접근을 허용하고 있습니다.
86-89: 이벤트 삭제에 인증 요구사항 유지가 보안상 올바릅니다.이벤트 삭제는 인증이 필요한 작업이므로 skipAuth 헤더를 추가하지 않은 것이 적절합니다. 데이터 변경 작업과 조회 작업을 명확히 구분하고 있습니다.
src/shared/types/api/http-client.ts (2)
17-19: skipAuth 헤더 우회 로직이 올바르게 구현되었습니다.인증이 필요하지 않은 요청에 대해 skipAuth 헤더를 통한 우회 메커니즘이 적절히 구현되어 있습니다.
21-31:Details
✅ Verification successful
인증 상태 확인 로직 구현이 적절합니다.
useAuthStore에서 인증 상태를 확인하고 미인증 시 요청을 차단하는 로직이 올바르게 구현되었습니다. 하지만 skipAuth 헤더의 사용 패턴을 검증해보는 것이 좋겠습니다.
다음 스크립트로 skipAuth 헤더 사용 패턴을 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash # skipAuth 헤더 사용 패턴 확인 echo "=== skipAuth 헤더 사용 현황 ===" rg -A 3 -B 3 "skipAuth.*true" echo "=== API 요청에서 skipAuth 사용 ===" rg -A 5 -B 5 "headers.*skipAuth"Length of output: 8537
skipAuth 헤더 사용 패턴 확인 완료 – 코드 승인
skipAuth: true 헤더가 의도한 API들(src/features/jjoin/api/user.ts, src/entities/event/api/event.ts 등)에 일관되게 적용되어 있고,
axiosClient.request 인터셉터에서 skipAuth 플래그를 올바르게 감지해 예외 처리하는 로직도 정상 동작함을 확인했습니다.
인증 상태 확인 및 요청 차단 로직이 적절히 구현되었으므로 변경사항을 승인합니다.design-system/ui/buttons/TertiaryButton.tsx (2)
6-6: disabled prop 추가가 적절합니다.선택적 boolean disabled 속성이 인터페이스에 올바르게 추가되었습니다.
11-11: disabled 속성 구현이 올바릅니다.컴포넌트 매개변수에서 disabled prop을 받아 button 요소에 전달하는 구현이 표준 HTML 패턴을 따르고 있습니다. 접근성 측면에서도 좋은 개선사항입니다.
Also applies to: 29-29
src/pages/event/ui/host/HostSelectionPage.tsx (2)
8-8: 인증 상태 관리 구현이 올바릅니다.useAuthStore를 적절히 import하고 isLoggedIn 상태를 정확하게 가져오고 있습니다.
Also applies to: 21-21
64-67: IconButton의 중복 onClick 핸들러를 확인해주세요.IconButton에 별도의 onClick 핸들러가 있어 인증 체크를 우회할 수 있습니다.
IconButton의 onClick이 상위 div의 onClick과 중복되어 인증 체크를 우회할 가능성이 있습니다. IconButton의 onClick을 제거하거나 동일한 인증 체크를 추가해야 합니다.
src/pages/menu/ui/MyTicketPage.tsx (2)
14-14: 인증 상태 관리 구현이 올바릅니다.useAuthStore를 적절히 import하고 isLoggedIn 상태를 정확하게 가져오고 있습니다.
Also applies to: 26-26
84-88: 로그인 여부에 따른 조건부 렌더링이 잘 구현되었습니다.사용자가 로그인하지 않았을 때 적절한 안내 메시지를 표시하는 로직이 올바르게 구현되어 있습니다.
Yejiin21
force-pushed
the
feat/#149/token-error-handling
branch
from
0210fb5 to
bd1d57b
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/entities/event/hook/useEventHook.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/entities/event/hook/useEventHook.ts (3)
src/app/provider/authStore.ts (1)
useAuthStore(16-28)src/features/join/hooks/useUserHook.ts (1)
useUserInfo(5-11)src/entities/event/api/event.ts (1)
eventDetail(7-13)
🔇 Additional comments (3)
src/entities/event/hook/useEventHook.ts (3)
6-6: 인증 상태 관리를 위한 import 추가 승인인증 상태를 확인하기 위해
useAuthStore를 import한 것이 적절합니다.
10-11: 로그인 상태에 따른 조건부 사용자 정보 조회 구현 승인로그인 상태를 확인하고, 이를
useUserInfo훅의enabled파라미터로 전달하여 조건부로 사용자 정보를 조회하는 로직이 올바르게 구현되었습니다. 이는 불필요한 API 호출을 방지하고 성능을 개선합니다.
18-18: 이벤트 상세 조회 활성화 조건 단순화 승인
enabled조건을!!eventId로 단순화한 것이 적절합니다. 관련 코드 스니펫에서 확인할 수 있듯이 이벤트 API는skipAuth: true헤더를 사용하여 비로그인 사용자도 접근할 수 있도록 설계되었으므로, 사용자 ID 의존성을 제거하는 것이 올바른 접근입니다.
| queryFn: () => eventDetail({ eventId, userId: user?.id }), | ||
| enabled: !!user?.id && !!eventId, | ||
| enabled: !!eventId, | ||
| retry: false, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
쿼리 재시도 비활성화에 대한 검토 필요
retry: false 설정은 일시적인 네트워크 오류나 서버 문제 발생 시 자동 재시도를 하지 않아 사용자 경험에 부정적인 영향을 줄 수 있습니다. 이벤트 상세 정보는 중요한 데이터이므로 재시도 로직을 유지하는 것을 고려해보세요.
- retry: false,
+ retry: 2, // 또는 기본값 사용을 위해 이 라인 제거📝 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.
| retry: false, | |
| - retry: false, | |
| + retry: 2, // 또는 기본값 사용을 위해 이 라인 제거 |
🤖 Prompt for AI Agents
In src/entities/event/hook/useEventHook.ts at line 19, the retry option is set
to false, disabling automatic retries on query failure. Since event details are
important, review this setting and consider enabling retry to handle transient
network or server errors gracefully. Adjust the retry configuration to allow a
reasonable number of retries instead of disabling it completely.
2 participants
Summary by CodeRabbit
신규 기능
버그 수정
기타