메인페이지 예약내역페이지 예약관리 상세페이지 모션 추가 #255
Conversation
|
🚀 오늘뭐해 Preview Deploy 완료! |
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthrough애플리케이션의 여러 컴포넌트와 페이지에 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MainPage
participant motion.div
participant Card
User->>MainPage: 페이지 진입
MainPage->>motion.div: 카드 컴포넌트 감싸기 (초기 opacity 0, y-offset)
motion.div->>Card: 카드 렌더링
motion.div-->>User: 카드가 뷰포트에 들어오면 애니메이션 실행 (opacity 1, y 0)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
✨ 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. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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 (6)
packages/design-system/src/pages/UpcomingScheduleDoc.tsx (1)
29-29: 렌더링 주석 처리로 인한 데드 코드 및 UX 저하 가능성
실제 JSX가 주석 처리되어 있어<DocCode>블록만 노출되고 실시간 결과가 없으므로, 문서 페이지가 빈 상태로 보일 것입니다. 사용자가 예제 코드를 보면서 동시에 결과를 확인할 수 없다는 점을 고려해 주석을 유지할지, 또는 최소 Mock 데이터를 넣어 렌더링을 복구할지 결정해 주세요.packages/design-system/src/pages/OngoingExperienceCardDoc.tsx (2)
1-1: 컴포넌트 임포트 주석 처리로 문서가 무용지물이 될 수 있습니다
OngoingExperienceCard를 주석 처리하면 실제 미리보기가 표시되지 않습니다. 다른 문서 페이지들과 동일한 이유(빌드 오류 회피, SSR 문제 등)라면 주석 이유를 코드 상단에 TODO 형태로 명시해 두면 후속 유지보수자가 의도를 파악하기 쉽습니다.
28-32: 불필요한 레이아웃 요소 유지
div.flex.gap-12내부가 전부 주석 처리돼 빈 컨테이너만 렌더링됩니다. 화면상 공백만 차지하므로, 컴포넌트를 다시 활성화할 계획이 없다면 컨테이너 자체를 제거하거나 조건부 렌더링으로 감싸주는 편이 낫습니다.apps/what-today/src/pages/mypage/manage-activities/index.tsx (1)
92-112: 체험 카드 애니메이션 구현 우수하나 일관성 고려 필요ExperienceCard 애니메이션 구현이 좋습니다. 다만 다른 파일들과의 일관성을 위해 고려사항이 있습니다:
다른 파일들과의 일관성을 위해 transition에 ease 속성을 추가하는 것을 고려해보세요:
- transition={{ duration: 1 }} + transition={{ duration: 1, ease: 'easeOut' }}apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
24-41: 후기 카드 애니메이션 구현 우수하나 일관성 고려 필요ActivitiesReview 컴포넌트의 애니메이션 구현이 좋습니다. key prop 사용도 적절합니다.
다른 컴포넌트들과의 일관성을 위해 다음 사항들을 고려해보세요:
- transition={{ duration: 1 }} - viewport={{ once: true, amount: 0.1 }} + transition={{ duration: 1, ease: 'easeOut' }} + viewport={{ once: true, amount: 0.2 }}다른 파일들에서는 ease: 'easeOut'과 amount: 0.2를 사용하고 있습니다.
apps/what-today/src/pages/main/index.tsx (1)
251-272: 메인 카드 애니메이션 구현 우수하나 일관성 고려 필요활동 카드에 대한 애니메이션 구현이 잘 되어있습니다. 특히 key 값에 currentPage와 idx를 포함한 것이 좋습니다.
다른 컴포넌트들과의 일관성을 위해 애니메이션 속성을 통일하는 것을 고려해보세요:
- initial={{ opacity: 0, y: 100 }} - transition={{ duration: 1 }} - viewport={{ once: true, amount: 0.1 }} + initial={{ opacity: 0, y: 80 }} + transition={{ duration: 1, ease: 'easeOut' }} + viewport={{ once: true, amount: 0.2 }}다른 파일들에서는 y: 80, ease: 'easeOut', amount: 0.2를 사용하고 있습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/what-today/src/components/activities/ActivitiesReview.tsx(2 hunks)apps/what-today/src/pages/main/index.tsx(5 hunks)apps/what-today/src/pages/mypage/manage-activities/index.tsx(2 hunks)apps/what-today/src/pages/mypage/reservations-list/index.tsx(3 hunks)packages/design-system/src/components/skeleton/index.tsx(1 hunks)packages/design-system/src/pages/OngoingExperienceCardDoc.tsx(2 hunks)packages/design-system/src/pages/UpcomingScheduleDoc.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/what-today/src/pages/main/index.tsx (1)
packages/design-system/src/components/MainCard/index.ts (1)
MainCard(5-9)
apps/what-today/src/pages/mypage/manage-activities/index.tsx (1)
packages/design-system/src/components/ExperienceCard.tsx (1)
ExperienceCard(63-127)
🔇 Additional comments (9)
packages/design-system/src/pages/UpcomingScheduleDoc.tsx (1)
1-1: 문서 예제 컴포넌트가 완전히 비활성화되어 있습니다
UpcomingSchedule컴포넌트 임포트를 주석 처리하면 페이지에서 실제 컴포넌트 미리보기가 사라집니다. 디자인-시스템 문서 목적이라면 최소한 스텁·플레이스홀더 또는 동적 임포트(next/dynamic)로 대체해 사용자가 UI를 확인할 수 있도록 하는 편이 좋습니다. 의도된 임시 조치인지 확인 부탁드립니다.packages/design-system/src/components/skeleton/index.tsx (1)
2-2: Export 순서 변경 승인NotificationCardSkeleton의 export 순서 변경이 적절합니다. 애니메이션 추가와 관련된 일관된 import 패턴을 위한 것으로 보입니다.
apps/what-today/src/pages/mypage/reservations-list/index.tsx (2)
14-14: Motion 라이브러리 import 승인motion/react 라이브러리 import가 적절합니다.
211-218: 예약 섹션 애니메이션 구현 우수날짜별 예약 그룹에 대한 애니메이션 구현이 잘 되어있습니다:
- viewport 진입 시 트리거되는 효율적인 애니메이션
- once: true로 불필요한 재실행 방지
- 적절한 easing과 duration 설정
- 다른 페이지와 일관된 애니메이션 패턴 유지
Also applies to: 272-272
apps/what-today/src/pages/mypage/manage-activities/index.tsx (1)
11-11: Motion 라이브러리 import 승인motion/react 라이브러리 import가 적절합니다.
apps/what-today/src/components/activities/ActivitiesReview.tsx (1)
2-2: Motion 라이브러리 import 승인motion/react 라이브러리 import가 적절합니다.
apps/what-today/src/pages/main/index.tsx (3)
21-21: Motion 라이브러리 import 승인motion/react 라이브러리 import가 적절합니다.
59-68: 스크롤 제어 로직 우수useLayoutEffect를 사용한 스크롤 제어가 적절합니다:
- scrollRestoration을 'manual'로 설정하여 브라우저 자동 스크롤 복원 비활성화
- 페이지 마운트 시 상단으로 스크롤 이동
- useLayoutEffect 사용으로 렌더링 전에 실행되어 깜빡임 방지
139-141: 코드 스타일 변경 승인단일 라인 조건문에 중괄호를 추가한 것이 코드 일관성에 도움이 됩니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/what-today/src/pages/main/index.tsx (2)
59-68: 스크롤 동작 관리 개선이 필요합니다.현재 구현에는 몇 가지 UX 개선 사항이 있습니다:
scrollRestoration설정이 전체 브라우저 세션에 영향을 미칩니다- 강제 스크롤이 뒤로가기 시 사용자 경험을 해칠 수 있습니다
다음과 같이 개선할 수 있습니다:
useLayoutEffect(() => { - if ('scrollRestoration' in window.history) { - window.history.scrollRestoration = 'manual'; - } - }, []); - - // 페이지 마운트 시 무조건 맨 위로 - useLayoutEffect(() => { - window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); + // 컴포넌트 마운트 시에만 스크롤 복원 비활성화 + const originalScrollRestoration = window.history.scrollRestoration; + if ('scrollRestoration' in window.history) { + window.history.scrollRestoration = 'manual'; + } + + // 새로 진입한 경우에만 맨 위로 스크롤 + if (window.performance.navigation.type === 1) { + window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); + } + + // cleanup 시 원래 설정 복원 + return () => { + if ('scrollRestoration' in window.history) { + window.history.scrollRestoration = originalScrollRestoration; + } + }; }, []);
251-272: 애니메이션 구현이 잘 되었지만 성능 최적화를 고려해보세요.현재 구현의 장점:
- viewport 설정이 적절합니다 (
once: true,amount: 0.1)- 페이지네이션 시 재애니메이션을 위한 key 생성이 잘 되었습니다
개선 사항:
- 1초 애니메이션 지속시간이 다소 길 수 있습니다
- 카드 간 stagger 효과 부재로 동시 애니메이션이 어색할 수 있습니다
다음과 같이 개선할 수 있습니다:
pagedItems.map((item, idx) => ( <motion.div key={`${item.id}-${currentPage}-${idx}`} initial={{ opacity: 0, y: 100 }} - transition={{ duration: 1 }} + transition={{ + duration: 0.6, + delay: idx * 0.1, + ease: [0.25, 0.46, 0.45, 0.94] + }} viewport={{ once: true, amount: 0.1 }} whileInView={{ opacity: 1, y: 0 }} >또는 모바일에서의 y 오프셋을 줄이는 것도 고려해보세요:
- initial={{ opacity: 0, y: 100 }} + initial={{ opacity: 0, y: window.innerWidth < 768 ? 50 : 100 }}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/what-today/src/components/activities/ActivitiesReview.tsx(2 hunks)apps/what-today/src/pages/main/index.tsx(5 hunks)apps/what-today/src/pages/mypage/manage-activities/index.tsx(2 hunks)apps/what-today/src/pages/mypage/reservations-list/index.tsx(3 hunks)packages/design-system/src/components/skeleton/index.tsx(1 hunks)packages/design-system/src/pages/OngoingExperienceCardDoc.tsx(2 hunks)packages/design-system/src/pages/UpcomingScheduleDoc.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/what-today/src/pages/mypage/manage-activities/index.tsx (1)
packages/design-system/src/components/ExperienceCard.tsx (1)
ExperienceCard(63-127)
apps/what-today/src/pages/main/index.tsx (1)
packages/design-system/src/components/MainCard/index.ts (1)
MainCard(5-9)
🔇 Additional comments (11)
packages/design-system/src/pages/UpcomingScheduleDoc.tsx (1)
1-1: 컴포넌트가 임시로 비활성화된 이유를 확인해주세요.
UpcomingSchedule컴포넌트의 import와 사용이 주석 처리되었습니다. 이것이 임시적인 변경인지, 아니면 컴포넌트에 문제가 있어서 비활성화한 것인지 명확히 해주세요.Also applies to: 29-29
packages/design-system/src/pages/OngoingExperienceCardDoc.tsx (1)
1-1: 문서 페이지에서 컴포넌트 비활성화 패턴을 확인해주세요.
OngoingExperienceCard컴포넌트도UpcomingSchedule과 같이 주석 처리되었습니다. 여러 디자인 시스템 컴포넌트가 동시에 비활성화된 것은 특정한 이유가 있을 것 같습니다.Also applies to: 29-31
apps/what-today/src/pages/mypage/manage-activities/index.tsx (2)
11-11: 모션 라이브러리 import가 적절합니다.
motion/react에서 motion을 import하여 애니메이션 효과를 추가하는 것이 적절합니다.
92-112: 체험 카드 애니메이션 구현이 우수합니다.각
ExperienceCard를motion.div로 감싸서 페이드인 및 슬라이드업 애니메이션을 적용한 것이 좋습니다. 애니메이션 설정도 적절합니다:
- 초기 상태:
opacity: 0, y: 80(아래에서 시작)- 최종 상태:
opacity: 1, y: 0(완전히 보이고 제자리)- 지속 시간: 1초 (적절한 속도)
- 뷰포트 트리거: 20% 가시성에서 한 번만 실행 (성능 최적화)
모든 props가 올바르게 전달되고 있습니다.
apps/what-today/src/pages/mypage/reservations-list/index.tsx (2)
14-14: 모션 라이브러리 import가 적절합니다.애니메이션 효과를 위한
motion/reactimport가 올바르게 추가되었습니다.
211-272: 예약 섹션 애니메이션이 일관성 있게 구현되었습니다.날짜별 예약 그룹을
motion.section으로 변경하여 애니메이션을 적용한 것이 훌륭합니다:
- 다른 페이지와 일관된 애니메이션 패턴 사용
easeOut트랜지션으로 자연스러운 움직임 구현- 뷰포트 20% 가시성에서 한 번만 트리거하여 성능 최적화
- 기존 로직과 스타일링을 그대로 유지
apps/what-today/src/components/activities/ActivitiesReview.tsx (2)
2-2: 모션 라이브러리 import가 적절합니다.후기 카드에 애니메이션 효과를 추가하기 위한 motion import가 올바르게 추가되었습니다.
24-41: 후기 카드 애니메이션이 잘 구현되었습니다.후기 카드를
motion.div로 감싸서 애니메이션을 적용한 것이 좋습니다:
- 일관된 페이드인 및 슬라이드업 애니메이션 패턴 사용
key={review.id}로 React 재조정 최적화- 뷰포트 10% 트리거 사용 (후기 카드 크기에 적합)
- 기존 스타일링과 구조 완전히 보존
다른 페이지들과 일관된 애니메이션 경험을 제공합니다.
apps/what-today/src/pages/main/index.tsx (3)
21-22: 애니메이션 라이브러리 import가 올바르게 추가되었습니다.motion/react 라이브러리와 useLayoutEffect 훅이 적절히 추가되어 후속 코드에서 사용할 준비가 되었습니다.
139-141: 코드 일관성 개선이 좋습니다.단일 라인 if문에 중괄호를 추가하여 코드의 일관성과 가독성이 향상되었습니다.
21-272: 전반적으로 잘 구현된 모션 효과입니다.PR 목표에 부합하는 모션 효과가 성공적으로 추가되었습니다. 구현이 일관성 있고 React 및 motion/react 모범 사례를 따르고 있습니다.
주요 개선사항:
- 스크롤 동작 관리 최적화
- 애니메이션 성능 및 UX 개선
전체적으로 기능적으로 올바르게 작동할 것으로 예상되며, 사용자 경험을 향상시킬 것입니다.
|
🚀 오늘뭐해 Preview Deploy 완료! |
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
스타일
문서화
기타