fix: 티켓 UI 수정 및 티켓 취소 시 다중 선택 오류, 토큰 만료에 따른 로그아웃 오류 해결#206
fix: 티켓 UI 수정 및 티켓 취소 시 다중 선택 오류, 토큰 만료에 따른 로그아웃 오류 해결#206xaexunxang merged 9 commits intodevelopfrom
Conversation
Walkthrough이 변경사항은 텍스트 필드에 최대 글자 수 제한을 추가하고, 로그아웃 및 토큰 만료 처리 로직을 개선하며, 주문 및 티켓 관련 모델에서 id 필드를 orderId로 변경하는 등 일관성 있는 데이터 핸들링을 도입합니다. 또한, UI에서 티켓 총액 표시와 에러 핸들링 개선이 포함되어 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TicketCreatePage
participant DefaultTextField
User->>TicketCreatePage: 티켓 이름 입력
TicketCreatePage->>DefaultTextField: maxLength=17 전달
DefaultTextField->>DefaultTextField: <input maxLength=17> 렌더링
sequenceDiagram
participant User
participant LogoutPage
participant http-client
participant AuthStore
User->>LogoutPage: 로그아웃 시도
LogoutPage->>http-client: 로그아웃 요청
http-client-->>LogoutPage: 에러 응답 (TOKEN4001/TOKEN4004)
LogoutPage->>AuthStore: logout()
LogoutPage->>User: 홈('/')으로 이동
sequenceDiagram
participant User
participant TicketInfo
User->>TicketInfo: 티켓 수량 조절
TicketInfo->>TicketInfo: 총액(가격 * 수량) 계산 및 표시
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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: 1
🧹 Nitpick comments (2)
src/pages/menu/ui/MyTicketPage.tsx (1)
28-28: 디버그용 console.log 제거를 고려해주세요.개발 중 디버깅을 위한 console.log 문이 남아있습니다. 프로덕션 환경에서는 제거하는 것이 좋겠습니다.
다음과 같이 제거해주세요:
- console.log("Selected ticket details:", tickets.map(ticket => ticket.orderId)); - console.log("tickets", tickets);Also applies to: 71-71
src/features/host/hook/useHostHook.ts (1)
11-13: 에러 로깅 방식 개선을 고려해보세요.
console.log를 사용한 단순한 에러 로깅보다는 더 체계적인 에러 핸들링을 고려해보시기 바랍니다. 프로덕션 환경에서는 적절한 로깅 서비스나 에러 모니터링 도구를 활용하는 것이 좋습니다.onError: (error) => { - console.log("error", error.message); + console.error("Host creation failed:", error.message); + // TODO: 프로덕션 환경에서는 적절한 에러 모니터링 서비스로 전송 },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
design-system/ui/textFields/DefaultTextField.tsx(3 hunks)src/features/host/hook/useHostHook.ts(1 hunks)src/features/ticket/hooks/useOrderHook.ts(1 hunks)src/features/ticket/model/Order.ts(1 hunks)src/pages/dashboard/ui/ticket/TicketCreatePage.tsx(1 hunks)src/pages/join/LogoutPage.tsx(1 hunks)src/pages/menu/ui/MyTicketPage.tsx(7 hunks)src/shared/types/api/http-client.ts(2 hunks)src/widgets/event/ui/TicketInfo.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/shared/types/api/http-client.ts (1)
src/app/provider/authStore.ts (1)
useAuthStore(17-36)
🪛 ESLint
src/pages/join/LogoutPage.tsx
[error] 16-16: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (10)
design-system/ui/textFields/DefaultTextField.tsx (1)
21-21: maxLength 프로퍼티 추가가 올바르게 구현되었습니다.TypeScript 인터페이스에 선택적 프로퍼티로 정의하고, 컴포넌트에서 구조분해할당으로 받아 HTML input 요소에 전달하는 구현이 정확합니다. 표준 HTML 속성을 활용하여 사용자 경험을 개선하는 좋은 접근 방식입니다.
Also applies to: 42-42, 62-62
src/pages/dashboard/ui/ticket/TicketCreatePage.tsx (1)
119-119: 티켓 이름 길이 제한이 올바르게 적용되었습니다.새로 추가된
maxLength프로퍼티를 사용하여 티켓 이름을 17자로 제한하는 것이 PR 목표와 정확히 일치합니다. UI 일관성 향상에 기여하는 좋은 변경사항입니다.src/features/ticket/model/Order.ts (1)
10-10: orderId 일관성 확인 완료코드베이스 전체에서
ticket.id참조가 모두ticket.orderId로 업데이트된 것이 확인되었습니다. 변경 사항에 문제가 없으므로 이대로 승인합니다.src/features/ticket/hooks/useOrderHook.ts (1)
41-41: 에러 코드 수정이 적절합니다.
'TICKET4004'에서'TICKET4003'으로 변경된 것은 올바른 에러 코드를 확인하기 위한 버그 수정으로 보입니다. 이를 통해 판매 기간이 아닌 티켓에 대한 적절한 에러 메시지가 표시될 것입니다.src/widgets/event/ui/TicketInfo.tsx (1)
87-115: UI 개선사항이 잘 구현되었습니다.티켓 UI 개선사항들이 적절히 반영되었습니다:
- 총액 표시 로직이 올바르게 구현됨 (가격 × 수량)
toLocaleString('ko-KR')사용으로 한국 숫자 형식 적용- 레이아웃 구조 개선으로 사용자 경험 향상
특히 100-101라인의 총액 계산과 한국어 포맷팅이 PR 목적에 부합합니다.
src/pages/menu/ui/MyTicketPage.tsx (1)
41-41: orderId 참조 변경이 일관되게 적용되었습니다.모든
ticket.id참조가ticket.orderId로 올바르게 변경되어 다중 선택 오류 문제를 해결했습니다:
- 선택된 티켓 필터링 로직 (41행)
- 이벤트 카드 클릭 핸들러의 선택 로직 (61행)
- EventCard 컴포넌트의 key와 id props (104-105행)
- CSS 클래스 조건부 적용 (114행)
- 티켓 취소 후 상태 업데이트 (170행)
이러한 변경으로 페이지 ID와 티켓 주문 ID 간의 혼동이 해결되었습니다.
Also applies to: 61-61, 104-105, 114-114, 170-170
src/shared/types/api/http-client.ts (2)
6-15: 로그아웃 로직 중앙화가 잘 구현되었습니다.
logoutAndRedirect함수를 통해 로그아웃 관련 로직을 중앙화한 것이 훌륭합니다. 이를 통해 코드 중복을 제거하고 일관된 로그아웃 동작을 보장할 수 있습니다.
70-89: 토큰 만료 에러 처리 개선이 적절합니다.TOKEN4001과 TOKEN4004 에러코드에 대한 처리가 PR 목표와 일치하며, 중앙화된
logoutAndRedirect함수를 활용하여 일관된 에러 처리를 구현했습니다. 특히 refresh token이 만료된 경우(TOKEN4004)에 대한 즉시 로그아웃 처리가 적절합니다.src/pages/join/LogoutPage.tsx (2)
16-27: 토큰 만료 에러 처리 로직이 우수합니다.토큰 만료로 인한 자동 로그아웃과 실제 로그아웃 실패를 구분하여 처리하는 로직이 잘 구현되었습니다. 사용자 경험 개선에 도움이 될 것입니다.
31-31: useEffect 의존성 배열 개선이 적절합니다.
logout함수를 의존성 배열에 추가한 것이 올바른 접근입니다. 이를 통해 React의 exhaustive-deps 규칙을 준수하고 있습니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/home/ui/MainPage.tsx (1)
38-42: 로그인 상태 확인 로직의 사용자 경험 개선을 고려해보세요.현재 구현은 사용자가 로그인하지 않은 상태일 때마다 모달을 자동으로 여는 로직입니다. 토큰 만료 상황을 처리하기 위한 목적으로 보이지만, 다음과 같은 개선점을 고려해보세요:
- 초기 방문자 vs 토큰 만료 사용자 구분: 현재 로직은 처음 방문하는 사용자와 토큰이 만료된 사용자를 구분하지 못합니다.
- 의도적 로그아웃 후 경험: 사용자가 의도적으로 로그아웃한 후에도 메인 페이지 접근 시 모달이 열립니다.
토큰 만료 상황만을 대상으로 하는 더 정교한 로직을 고려해보세요:
useEffect(() => { - if (!isLoggedIn) { + // 토큰 만료로 인한 로그아웃 상황에서만 모달 표시 + if (!isLoggedIn && /* 토큰 만료 상태 체크 조건 */) { openModal(); } }, [isLoggedIn, openModal]);또는 별도의 상태 관리를 통해 토큰 만료 상황을 추적하는 방법을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/pages/home/ui/MainPage.tsx(2 hunks)src/pages/join/LogoutPage.tsx(1 hunks)src/pages/menu/ui/MyTicketPage.tsx(6 hunks)src/shared/types/api/http-client.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/shared/types/api/http-client.ts
- src/pages/join/LogoutPage.tsx
- src/pages/menu/ui/MyTicketPage.tsx
🔇 Additional comments (1)
src/pages/home/ui/MainPage.tsx (1)
8-8: import 추가가 올바르게 되었습니다.useEffect 훅 사용을 위한 import가 적절히 추가되었습니다.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/shared/types/api/tokenValidator.ts (1)
29-36: validateToken 호출에 대한 에러 처리 추가 고려
validateToken()호출이 reject될 경우에 대한 처리가 없습니다. 예상치 못한 에러가 발생하면 사용자가 계속 로그인 상태로 남을 수 있습니다.다음과 같이 try-catch를 추가하는 것을 고려해보세요:
- const isValid = await validateToken(); - - if (!isValid) { - // 토큰이 유효하지 않으면 로그아웃 처리 - authStore.logout(); - localStorage.removeItem('auth-storage'); - authStore.openModal(); - } + try { + const isValid = await validateToken(); + + if (!isValid) { + // 토큰이 유효하지 않으면 로그아웃 처리 + authStore.logout(); + localStorage.removeItem('auth-storage'); + authStore.openModal(); + } + } catch (error) { + // 토큰 검증 중 예상치 못한 에러가 발생한 경우 안전하게 로그아웃 + console.error('Token validation failed:', error); + authStore.logout(); + localStorage.removeItem('auth-storage'); + authStore.openModal(); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/main.tsx(1 hunks)src/pages/join/LogoutPage.tsx(1 hunks)src/shared/types/api/http-client.ts(2 hunks)src/shared/types/api/tokenValidator.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/shared/types/api/http-client.ts
- src/pages/join/LogoutPage.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/main.tsx (1)
src/shared/types/api/tokenValidator.ts (1)
initializeAuth(21-37)
src/shared/types/api/tokenValidator.ts (2)
src/shared/types/api/http-client.ts (1)
axiosClient(15-22)src/app/provider/authStore.ts (1)
useAuthStore(17-36)
🪛 ESLint
src/shared/types/api/tokenValidator.ts
[error] 10-10: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🔇 Additional comments (2)
src/main.tsx (2)
8-8: 적절한 인증 초기화 모듈 import토큰 검증을 위한
initializeAuth함수를 올바른 경로에서 import하고 있습니다.
12-12: React 렌더링 전 인증 초기화 로직이 적절함앱 시작 시 토큰 검증을 수행하는 위치와 에러 처리가 적절합니다. React 앱이 렌더링되기 전에 인증 상태를 확인하여 만료된 토큰에 대한 처리를 보장합니다.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/shared/types/api/tokenValidator.ts (1)
15-22: 에러 처리 로직 개선이 필요합니다.현재 구현에서 예상치 못한 에러(네트워크 에러, 서버 에러 등)에 대해
true를 반환하는 것은 안전하지 않을 수 있습니다. axios 에러에 대한 더 구체적인 처리가 필요합니다.다음과 같이 개선을 제안합니다:
+import axios from 'axios'; import { axiosClient } from './http-client';그리고 에러 처리 로직을 다음과 같이 수정:
} catch (error: unknown) { - // 토큰이 만료되었거나 유효하지 않은 경우 - if (isTokenError(error) && (error.code === 'TOKEN4001' || error.code === 'TOKEN4004' || error.status === 401)) { - return false; + // axios 에러 처리 + if (axios.isAxiosError(error)) { + // 토큰 만료 관련 에러 코드 확인 + if (error.response?.data?.code === 'TOKEN4001' || + error.response?.data?.code === 'TOKEN4004' || + error.response?.status === 401) { + return false; + } + // 다른 HTTP 에러의 경우도 false 반환 (안전한 방향으로) + return false; } - // 다른 에러의 경우 토큰이 유효하다고 간주 - return true; + // 예상치 못한 에러의 경우 false 반환 (안전한 방향으로) + return false;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/shared/types/api/http-client.ts(2 hunks)src/shared/types/api/tokenValidator.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/shared/types/api/http-client.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/shared/types/api/tokenValidator.ts (2)
src/shared/types/api/http-client.ts (1)
axiosClient(15-22)src/app/provider/authStore.ts (1)
useAuthStore(17-36)
🪛 ESLint
src/shared/types/api/tokenValidator.ts
[error] 6-6: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🔇 Additional comments (2)
src/shared/types/api/tokenValidator.ts (2)
1-2: 임포트 구문이 올바르게 작성되었습니다.필요한 의존성들이 적절한 경로로 임포트되어 있습니다.
25-42: 앱 초기화 로직이 잘 구현되었습니다.로그인 상태 확인 후 토큰 검증을 수행하고, 과거 리뷰에서 지적된 localStorage 수동 제거 문제가 해결되어 Zustand의 persist 기능과 일관성 있게 동작합니다.
2 participants
티켓 UI 수정
toLocaleString('ko-KR')적용티켓 취소 시 다중 선택 오류 해결
id값과 사용자가 구매한 각각의 티켓에 대한orderId값 사이에 혼동으로 오타로 추정orderId값을 추가하여 취소하려는 티켓만 취소하는 로직으로 수정토큰 만료에 따른 로그아웃 오류 해결
Application/Cookies에는 토큰값과 함께accessToken과refreshToken이 존재accessToken과refreshToken값이 모두 만료된 상태임기타 사항
accessToken이 만료되었을 때와accessToken과refreshToken이 모두 만료되었을 때 서버로부터 받는 에러코드가 달랐음accessToken이 만료되었을 때의 로직만 존재했음Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
버그 수정
UI/UX 개선
기타