메인페이지 스켈레톤 구현 #229
Merged
메인페이지 스켈레톤 구현 #229
Conversation
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
📝 WalkthroughWalkthrough이번 변경은 메인 페이지의 카드 표시 개수를 창 크기에 따라 동적으로 조정하고, 로딩 상태일 때 스켈레톤 UI를 표시하도록 리팩터링합니다. Carousel 컴포넌트의 내부 상태 관리를 제거하고, Skeleton 컴포넌트 및 관련 문서/라우트/사이드바 항목을 디자인 시스템에 추가합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MainPage(index.tsx)
participant Carousel
participant Skeletons
User->>MainPage: 페이지 접속/리사이즈
MainPage->>MainPage: getCount()로 itemsPerPage 결정
MainPage->>Carousel: itemsPerPage prop 전달
MainPage->>MainPage: 데이터 fetch
alt 로딩 중
MainPage->>Skeletons: CarouselSkeleton, ActivityCardGridSkeleton 렌더
else 데이터 로드 완료
MainPage->>Carousel: 인기 액티비티 렌더
MainPage->>MainPage: 카드 그리드 렌더
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx (2)
38-43: 반응형 개수 계산 로직 중복을 리팩터링하세요.
getResponsiveCount함수가 메인 페이지의getCount함수와 동일한 로직을 가지고 있습니다. 공통 유틸리티로 추출하는 것을 고려해보세요.다음과 같이 공통 유틸리티로 추출할 수 있습니다:
+// utils/responsive.ts +export const getResponsiveCardCount = () => { + const w = window.innerWidth; + if (w < 768) return 6; // 모바일 + if (w < 1280) return 4; // 태블릿 + return 8; // 데스크탑 +}; -const getResponsiveCount = () => { - const w = window.innerWidth; - if (w < 768) return 6; // 모바일 - if (w < 1280) return 4; // 태블릿 - return 8; // 데스크탑 -};
108-111: 스크롤바 숨기기 스타일링을 개선하세요.인라인 스타일과
<style>태그 사용 대신 CSS 클래스나 전역 스타일로 관리하는 것이 좋습니다.다음과 같이 개선할 수 있습니다:
- <div - className='flex w-full gap-6 overflow-x-auto px-4 md:hidden' - style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} - > - <style>{`div::-webkit-scrollbar { display: none; }`}</style> + <div className='flex w-full gap-6 overflow-x-auto px-4 no-scrollbar md:hidden'>그리고 전역 CSS에 다음을 추가:
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/what-today/src/pages/main/index.tsx(8 hunks)packages/design-system/src/components/Carousel/Carousel.tsx(1 hunks)packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx(1 hunks)packages/design-system/src/components/MainPageSkeleton/index.ts(1 hunks)packages/design-system/src/components/index.ts(1 hunks)packages/design-system/src/layouts/Sidebar.tsx(1 hunks)packages/design-system/src/pages/MainPageSkeletonDoc.tsx(1 hunks)packages/design-system/src/routes/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.712Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#150
File: apps/what-today/src/pages/main/index.tsx:45-50
Timestamp: 2025-07-28T00:26:02.960Z
Learning: Taeil08은 What-Today 프로젝트에서 로딩 및 에러 상태 처리와 같은 UX 관련 사항은 팀원들과 회의를 통해 결정한 후 구현하는 접근 방식을 선호한다.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#107
File: apps/what-today/src/pages/main/index.tsx:13-158
Timestamp: 2025-07-24T04:47:25.214Z
Learning: Taeil08은 What-Today 프로젝트에서 API 연결 예정인 임시 더미 데이터의 경우, 나중에 삭제될 예정이므로 데이터 품질 개선을 하지 않는 접근법을 선호한다.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
packages/design-system/src/layouts/Sidebar.tsxpackages/design-system/src/components/MainPageSkeleton/index.tspackages/design-system/src/routes/index.tsxpackages/design-system/src/components/index.tspackages/design-system/src/components/Carousel/Carousel.tsxpackages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsxpackages/design-system/src/pages/MainPageSkeletonDoc.tsxapps/what-today/src/pages/main/index.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.712Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
packages/design-system/src/layouts/Sidebar.tsxpackages/design-system/src/components/MainPageSkeleton/index.tspackages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsxpackages/design-system/src/pages/MainPageSkeletonDoc.tsxapps/what-today/src/pages/main/index.tsx
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.
Applied to files:
packages/design-system/src/components/MainPageSkeleton/index.tspackages/design-system/src/components/index.tspackages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsxapps/what-today/src/pages/main/index.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
packages/design-system/src/components/Carousel/Carousel.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
packages/design-system/src/components/Carousel/Carousel.tsxpackages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsxpackages/design-system/src/pages/MainPageSkeletonDoc.tsxapps/what-today/src/pages/main/index.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx
📚 Learning: user kjhyun0830 follows an incremental development approach in what-today project, implementing ui f...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Applied to files:
apps/what-today/src/pages/main/index.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/pages/main/index.tsx
📚 Learning: myungjiwoo encountered multiple api calls when adding all dependencies to useeffect in oauth callbac...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#98
File: apps/what-today/src/hooks/useKakaoOAuth.ts:37-65
Timestamp: 2025-07-21T13:40:52.209Z
Learning: MyungJiwoo encountered multiple API calls when adding all dependencies to useEffect in OAuth callback hooks. The solution is to use useRef to prevent duplicate requests and useCallback to memoize the async function, keeping only essential dependencies (searchParams and the memoized function) in the dependency array.
Applied to files:
apps/what-today/src/pages/main/index.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트에서 여러 페이지 간 일관성을 위해 동일한 쿼리 훅(예: useinfinitemyactivitiesquery)을 사용하는 것을 선호...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#205
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:17-0
Timestamp: 2025-08-02T03:36:31.249Z
Learning: kjhyun0830은 What-Today 프로젝트에서 여러 페이지 간 일관성을 위해 동일한 쿼리 훅(예: useInfiniteMyActivitiesQuery)을 사용하는 것을 선호하며, 기능적으로 문제없이 작동하는 코드는 최적화보다는 현재 상태를 유지하는 실용적인 접근 방식을 취한다.
Applied to files:
apps/what-today/src/pages/main/index.tsx
🧬 Code Graph Analysis (1)
packages/design-system/src/routes/index.tsx (1)
packages/design-system/src/pages/MainPageSkeletonDoc.tsx (1)
MainPageSkeletonDoc(25-54)
🔇 Additional comments (22)
packages/design-system/src/layouts/Sidebar.tsx (1)
50-50: 새로운 MainPageSkeleton 문서 링크가 올바르게 추가되었습니다.사이드바에 MainPageSkeleton 컴포넌트 문서 링크가 기존 패턴과 일관되게 추가되었습니다.
packages/design-system/src/components/index.ts (1)
17-17: MainPageSkeleton 모듈이 올바르게 export되었습니다.새로운 skeleton 컴포넌트들이 design system의 메인 entry point에서 접근 가능하도록 적절히 추가되었습니다.
packages/design-system/src/components/MainPageSkeleton/index.ts (1)
1-3: Skeleton 컴포넌트들이 명확하게 export되었습니다.MainPageSkeleton 모듈의 세 가지 skeleton 컴포넌트가 표준적인 barrel export 패턴을 사용하여 깔끔하게 정리되었습니다.
packages/design-system/src/routes/index.tsx (2)
17-17: MainPageSkeletonDoc import가 올바르게 추가되었습니다.새로운 문서 페이지 컴포넌트가 적절히 import되었습니다.
200-203: MainPageSkeleton 문서 페이지 라우트가 올바르게 구성되었습니다.새로운 라우트가 기존 패턴과 일관되게 추가되어 MainPageSkeletonDoc 컴포넌트에 접근할 수 있도록 했습니다.
packages/design-system/src/components/Carousel/Carousel.tsx (2)
2-2: useEffect import 제거가 적절합니다.내부 상태 관리 로직이 제거되면서 useEffect가 더 이상 필요하지 않아 올바르게 제거되었습니다.
8-8: itemsPerPage 필수 prop 확인 완료컴포넌트 단순화가 잘 이루어졌습니다.
- 내부 상태 관리를 제거하고 itemsPerPage를 순수한 필수 prop으로 변경해 책임을 명확히 했습니다.
- CarouselProps에서
itemsPerPage: number로 정의되어 필수 prop임을 확인했습니다.packages/design-system/src/pages/MainPageSkeletonDoc.tsx (1)
1-54: 문서화 구현이 우수합니다.스켈레톤 컴포넌트에 대한 문서화가 체계적으로 잘 구현되어 있습니다. 예시 코드, props 설명, 그리고 인터랙티브 플레이그라운드가 모두 포함되어 개발자가 이해하기 쉽게 작성되었습니다.
apps/what-today/src/pages/main/index.tsx (10)
29-35: 반응형 로직이 적절하게 구현되었습니다.화면 너비에 따른 카드 개수 계산 로직이 명확하고 적절한 브레이크포인트를 사용하고 있습니다.
47-49: 리사이즈 핸들러가 최적화되었습니다.
getCount함수를 활용해 리사이즈 핸들러를 간결하게 구현했습니다.
58-68: 데이터 페칭 로직이 개선되었습니다.
isLoading과isFetching상태를 추가하고refetchOnMount: 'always'를 설정해 데이터 신선도를 보장하는 좋은 개선입니다.
75-79: 정렬 로직이 간결해졌습니다.삼항 연산자를 사용해 정렬 로직을 더 간결하게 표현했습니다.
100-100: 가격 정렬 로직도 간결해졌습니다.삼항 연산자를 사용해 코드가 더 읽기 쉬워졌습니다.
105-107: 페이지네이션 로직이 최적화되었습니다.불필요한 변수를 제거하고 직접 계산해 코드가 더 효율적이 되었습니다.
114-114: 불필요한 상태 업데이트를 방지합니다.페이지 변경 시 현재 페이지와 비교해 불필요한 상태 업데이트를 방지하는 좋은 최적화입니다.
166-170: 스켈레톤 로딩 상태가 적절히 구현되었습니다.인기 체험 섹션에서 로딩 중일 때
CarouselSkeleton을 표시하는 로직이 UX 개선에 도움이 됩니다.
230-240: 반응형 그리드와 스켈레톤 로딩이 잘 구현되었습니다.그리드 레이아웃을
xl:grid-cols-4로 조정하고, 로딩/페칭 상태에서ActivityCardGridSkeleton을 표시하는 로직이 적절합니다.
242-244: 페이지네이션 조건부 렌더링이 적절합니다.로딩 중이 아니고 필터된 아이템이 있을 때만 페이지네이션을 표시하는 로직이 올바릅니다.
packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx (4)
7-9: 기본 스켈레톤 컴포넌트가 잘 구현되었습니다.
twMerge를 사용해 클래스를 병합하고 애니메이션이 포함된 기본 스켈레톤 스타일이 적절합니다.
12-35: 활동 카드 스켈레톤 구조가 우수합니다.실제 카드 컴포넌트의 구조를 잘 모방하여 로딩 상태에서 자연스러운 UX를 제공합니다. 반응형 높이와 패딩 설정도 적절합니다.
45-61: 그리드 스켈레톤 컴포넌트가 적절히 구현되었습니다.
useEffect를 사용한 리사이즈 이벤트 처리와 정리가 올바르게 구현되어 있습니다.
72-87: 캐러셀 스켈레톤의 반응형 로직을 검토하세요.
getInitial함수에서 태블릿 브레이크포인트 조건이 다른 컴포넌트와 일관되지 않습니다.w < TABLET_BREAK일 때2를 반환하는 로직이 의도한 동작인지 확인이 필요합니다.다른 반응형 로직과 비교:
getResponsiveCount: 태블릿에서 4개getInitial: 태블릿에서 2개이 차이가 의도된 것인지 확인해주세요.
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
2025-08-03.11.59.40.mov
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
개선 사항