Merged
Conversation
jeonghoon11
requested review from
Sohyunnnn,
gyeongbibin and
u-zzn
as code owners
Closed
Sohyunnnn
approved these changes
Nov 16, 2025
Collaborator
Sohyunnnn
left a comment
Sohyunnnn
left a comment
There was a problem hiding this comment.
수고하셨습니다 :)
코드 스플리딩 적용까지 👍👍
Collaborator
|
고생하셨습니다잇 approve할게욥 |
gyeongbibin
approved these changes
Nov 16, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔍 관련 이슈 (Related Issues)
📝 변경 사항 요약 (Summary)
🎯 작업 내용 상세 (Details)
React Router v7 적용
React Router v7의
createBrowserRouter로 라우터를 구성했어요. Component prop으로 GlobalLayout을 설정해 페이지에 전역 레이아웃을 적용했어요. GlobalLayout 컴포넌트에서는 Suspense와 Outlet으로 자식 라우트를 렌더링하고 UX를 고려해ScrollRestoration을 추가해 페이지 이동 시 스크롤 위치를 복원하도록 했어요. 따라서 추후 css 설정이 끝나면 이 곳에서 모바일 웹 사이즈를 포함한 global css 적용을 진행할 예정이에요.코드 스플리팅 (Lazy Loading) 적용
모든 페이지 컴포넌트에
lazy()를 적용했어요. GlobalLayout에서 Suspense로 lazy 로딩된 컴포넌트를 처리하고 fallback처리하도록 했어요. 이번 프로젝트에서 Loading 상태일 때의 UI는 없어서 fallback은 null로 설정해뒀어요. 추후 로딩 디자인이 생긴다면 여기에 추가하면 됩니다. @Sohyunnnnlazy를 사용한 이유는 코드 스플리팅을 통한 성능 최적화를 위함이에요. 코드 스플리팅을 사용하면 페이지별로 번들을 분리해 필요한 페이지만 로드할 수 있지만lazy없이 일반적인 import를 쓰면 모든 페이지 코드가 초기 번들에 포함돼요.라우트 구성
/- 홈 페이지/select-ticket- 티켓 선택 페이지/ticket-detail/:ticketId- 티켓 상세 페이지📸 스크린샷 (Screenshots)
2025-11-16.8.09.41.mov
💬 리뷰어 참고사항 (Notes for Reviewers)