#121 refactor(architecture): Global Layout, Route Guard, Query Key Factory, 타입 분리 아키텍처 리팩토링 - #126
Conversation
…ctory, 타입 분리 아키텍처 리팩토링 - GlobalLayout 도입 - Header/Footer 전역 관리, Layout Route 패턴 적용 - 모든 페이지에서 Header/Footer 중복 import 및 렌더링 코드 제거 - RouteGuard 통합 컴포넌트 구현 - type="private" | "public" prop으로 인증/비인증 접근 제어 - 페이지 내부 수동 localStorage 토큰 체크 코드 제거 - 로그인 후 원래 페이지 복귀 지원 (state.from → sessionStorage) - Query Key Factory 패턴 도입 - queryKeys.ts에서 모든 queryKey 중앙 관리 - 계층적 구조(all → lists → list(param))로 부분 캐시 무효화 지원 - WaitingRoom ↔ SeatSelectPage 간 캐시 키 불일치 버그 수정 - API 디렉토리 도메인별 분리 - auth/, performance/, payment/, reservation/ 서브디렉토리로 재편 - 내부/외부 import 경로 전체 업데이트 - ApiDataTypes.ts 타입 분리 - 도메인별 타입 파일 생성 (auth.ts, performance.ts, reservation.ts, payment.ts) - PascalCase 네이밍 컨벤션 통일 - re-export 허브를 통한 하위호환성 유지 Resolves: #121 See also: None
kaeuhy
changed the title
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the application's routing and layout structure by introducing a GlobalLayout component and a centralized RouteGuard for authentication. It also modularizes API types into domain-specific files and implements a centralized queryKeys factory for TanStack Query. Redundant Header and Footer components were removed from individual pages. Feedback was provided regarding the redundant use of the <main> tag in FailPage.tsx and SuccessPage.tsx, which conflicts with the <main> tag already present in the new GlobalLayout.
Geunone2
left a comment
Geunone2
left a comment
There was a problem hiding this comment.
무분별하게 존재했던 QueryKey를 효율적으로 관리하도록 리팩토링 한 노력이 보이네요.
또한 다른 개발자가 알기 어려웠던 폴더 구조 역시, 이번 리팩토링을 통해 좀 더 세분화되어 알기 쉽게 구조가 잡힌 것 같습니다. 고생 많으셨습니다!
…ctory, 타입 분리 아키텍처 리팩토링 코드 리뷰 반영 - AboutPage: 가독성을 위해 하드코딩된 배경 이미지 URL 문자열을 IMAGE_URL 상수로 분리하고 인라인 스타일로 적용 - SuccessPage, FailPage: GlobalLayout 컴포넌트와의 중복을 방지하고 웹 표준을 준수하기 위해 <main> 태그를 <div> 태그로 변경 - SendSeatsButton.test: 패키지 구조 변경에 맞춰 jest.mock()의 API 참조 경로를 '../../../api/reservation/reservation.ts'로 올바르게 수정하여 CI 테스트 실패 해결 Resolves: #121 See also: None
2 participants
🛠️ 설명 (Description)
📝 변경 사항 요약 (Summary)
GlobalLayout 도입으로 Header/Footer를 전역 레이아웃에서 관리하고, 개별 페이지의 중복 레이아웃 코드를 제거했습니다.
RouteGuard 컴포넌트를 추가하여
type="private" | "public"기반으로 인증/비인증 접근 제어를 통합 관리하고, 각 페이지 내부의 localStorage토큰 체크 로직을 제거했습니다.
queryKeys.ts에 Query Key Factory 패턴을 도입하여 performanceKeys, reviewKeys, seatKeys, paymentKeys를 정의하고, TanStack Query 전역에서 동일한 쿼리 키를 사용하도록 통일했습니다.WaitingRoom과 SeatSelectPage에서 사용하던 좌석/좌석 상태 쿼리 키를
["seats", stadiumId], ["seatStatus", scheduleId]에서 seatKeys.definitions(stadiumId), seatKeys.states(scheduleId)로 변경하여 캐시 키 불일치로 인한 버그를 해결했습니다.API 디렉토리를 도메인별(
auth/, performance/, payment/, reservation/)로 분리하고, 이에 따라 모든 import 경로를 새로운 구조에 맞게 수정했습니다.
ApiDataTypes.ts에 집중되어 있던 타입들을 auth.ts, performance.ts, reservation.ts, payment.ts로 분리하고, ApiDataTypes.ts는 기존 이름을 유지하면서 re-export 허브로 동작하도록 변경해 하위 호환성을 유지했습니다.로그인/마이페이지/메인/공연/결제 관련 페이지 컴포넌트에서 GlobalLayout/RouteGuard/Query Key Factory 도입에 맞춰 레이아웃 및 데이터 패칭 로직을 정리했습니다.
🔗 관련 이슈 (Related Issues)
☑️ 체크리스트 (Checklist)
👀 리뷰어를 위한 참고 사항 (Notes for Reviewers)
➕ 추가 정보 (Additional Information)