마이-메인페이지 구현 #219
Merged
마이-메인페이지 구현 #219
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
added 9 commits
August 2, 2025 14:07
Closed
📝 WalkthroughWalkthrough이번 변경 사항은 마이페이지 대시보드 신설, 예약 가능 일정 API 추가, 활동 스케줄 스키마 개선, 디자인 시스템 내 프로필/예약/경험 카드 컴포넌트 도입, 기존 사이드바 및 헤더 내 링크와 이미지 처리 방식 일부 조정 등 마이페이지 및 활동 관련 기능을 대폭 확장 및 개선합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyPage
participant API
participant DesignSystem
User->>MyPage: 마이페이지 접속
MyPage->>API: 활동 목록/예약/스케줄 데이터 fetch
API-->>MyPage: 활동/예약/스케줄 응답
MyPage->>DesignSystem: 프로필 헤더, 요약 카드, 예정 일정, 진행중 경험 카드 렌더링
DesignSystem-->>MyPage: UI 컴포넌트 반환
MyPage-->>User: 마이페이지 대시보드 표시
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes 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 (4)
✅ Files skipped from review due to trivial changes (1)
🧰 Additional context used🧠 Learnings (7)📓 Common learnings📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...Applied to files:
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...Applied to files:
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...Applied to files:
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...Applied to files:
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...Applied to files:
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...Applied to files:
🔇 Additional comments (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. 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (7)
apps/what-today/src/schemas/activities.ts (2)
40-47: JSDoc 주석을 구체화해주세요.
timeSchema의 JSDoc 주석이 "항목 스키마"로만 되어 있어 무엇을 위한 스키마인지 불분명합니다./** - * @description 항목 스키마 + * @description 시간 슬롯 항목 스키마 */
49-60: JSDoc 주석을 구체화해주세요.
scheduleResponseSchema의 JSDoc 주석이 기존scheduleSchema와 동일한 "스케줄 항목 스키마"로 되어 있어 구분이 어렵습니다. 두 스키마의 용도와 구조가 다르므로 더 명확한 설명이 필요합니다./** - * @description 스케줄 항목 스키마 + * @description 날짜별 시간 슬롯 그룹 스키마 */ const scheduleResponseSchema = z.object({apps/what-today/src/routes/index.tsx (1)
43-43: 주석 처리된 라우트의 의도를 명확히 해주세요.주석에 "✅ 여기만 별도로(다시 변경)"라고 되어 있는데, 이 라우트가 향후 어떻게 변경될 예정인지 명확하지 않습니다. 팀원들이 이해할 수 있도록 더 구체적인 설명을 추가하는 것을 고려해보세요.
- // { path: 'mypage', element: <MyPage /> }, // ✅ 여기만 별도로(다시 변경) + // TODO: 향후 레이아웃 구조 변경 시 사용 예정 + // { path: 'mypage', element: <MyPage /> },apps/what-today/src/apis/activityDetail.ts (1)
70-81: JSDoc 주석을 수정해주세요.함수의 실제 반환 타입이
Schedules인데 JSDoc에서는ActivityWithSubImagesAndSchedules타입을 반환한다고 잘못 기술되어 있습니다.다음과 같이 수정해주세요:
/** * @description 체험 예약 가능일 리스트를 불러옵니다. * @param activityId 체험 ID - * @returns ActivityWithSubImagesAndSchedules 타입의 체험 상세 데이터 + * @returns Schedules 타입의 예약 가능 일정 데이터 */apps/what-today/src/components/MypageMainSideBar.tsx (2)
5-23: 주석 처리된 인터페이스를 정리해주세요.현재 사용되지 않는 인터페이스가 주석으로 남아있습니다. 향후 구현 예정이라면 TODO 주석을 추가하거나, 불필요하다면 제거하는 것이 코드 정리에 도움이 될 것 같습니다.
41-41: 컴포넌트명과 파일명 불일치를 확인해주세요.파일명은
MypageMainSideBar.tsx이지만 컴포넌트명은MypageMainSidebar입니다. 일관성을 위해 둘 중 하나로 통일하는 것을 권장합니다.packages/design-system/src/components/UpcomingSchedule.tsx (1)
54-57: 주석 처리된 타임라인 UI 코드PR 설명에 언급된 대로 타임라인 UI가 스크롤 시 제대로 확장되지 않는 문제로 임시 제거된 것으로 보입니다. 추후 수정 예정이신가요?
이 문제를 해결하기 위한 구현을 도와드릴까요? 새로운 이슈를 생성하여 트래킹하시겠습니까?
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/what-today/src/apis/activityDetail.ts(2 hunks)apps/what-today/src/components/Header.tsx(1 hunks)apps/what-today/src/components/MypageMainSideBar.tsx(1 hunks)apps/what-today/src/components/MypageSidebar.tsx(5 hunks)apps/what-today/src/layouts/Mypage.tsx(1 hunks)apps/what-today/src/pages/mypage/main/index.tsx(1 hunks)apps/what-today/src/routes/index.tsx(2 hunks)apps/what-today/src/schemas/activities.ts(2 hunks)packages/design-system/src/components/MypageProfileHeader.tsx(1 hunks)packages/design-system/src/components/OngoingExperienceCard.tsx(1 hunks)packages/design-system/src/components/UpcomingSchedule.tsx(1 hunks)packages/design-system/src/components/index.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (15)
📓 Common learnings
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#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
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: 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: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
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)을 사용하는 것을 선호하며, 기능적으로 문제없이 작동하는 코드는 최적화보다는 현재 상태를 유지하는 실용적인 접근 방식을 취한다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#178
File: apps/what-today/src/index.css:63-83
Timestamp: 2025-07-30T13:22:43.195Z
Learning: kjhyun0830은 What-Today 프로젝트에서 기능적으로 문제가 없는 코드에 대해서는 장기적인 유지보수 개선사항보다는 현재 작동하는 상태를 유지하는 것을 선호하는 실용적인 접근 방식을 취한다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:2-37
Timestamp: 2025-07-19T01:02:08.026Z
Learning: User kjhyun0830 prefers to keep temporary mock data inline in components when API integration is planned soon, rather than creating separate files for short-term code that will be deleted.
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: kjhyun0830
PR: What-Today-FE/What-Today#96
File: packages/design-system/src/components/ExperienceImageUpload/IntroduceInput.tsx:30-35
Timestamp: 2025-07-22T03:09:16.142Z
Learning: kjhyun0830은 현재 이미지 업로드 컴포넌트의 파일 검증 로직(타입, 크기 검증)을 나중에 zod 스키마에서 이미지 URL 정의할 때 참고할 예정입니다. 이는 일관된 이미지 검증 체계 구축을 위한 계획입니다.
📚 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:
apps/what-today/src/components/Header.tsxapps/what-today/src/layouts/Mypage.tsxapps/what-today/src/routes/index.tsxapps/what-today/src/components/MypageSidebar.tsxapps/what-today/src/components/MypageMainSideBar.tsxpackages/design-system/src/components/MypageProfileHeader.tsxpackages/design-system/src/components/OngoingExperienceCard.tsxapps/what-today/src/pages/mypage/main/index.tsxpackages/design-system/src/components/UpcomingSchedule.tsx
📚 Learning: profileimageinput 컴포넌트(packages/design-system/src/components/profileimageinput.tsx)에서 previewurl은 의도...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#79
File: packages/design-system/src/components/ProfileImageInput.tsx:44-45
Timestamp: 2025-07-19T17:03:39.193Z
Learning: ProfileImageInput 컴포넌트(packages/design-system/src/components/ProfileImageInput.tsx)에서 previewUrl은 의도적으로 내부 상태로 관리됩니다. 이는 미리보기 이미지 관리와 API로 받아온 원본 이미지와의 비교를 위한 용도로, 외부에서 제어할 필요가 없는 uncontrolled 컴포넌트 + 콜백 패턴입니다.
Applied to files:
apps/what-today/src/components/Header.tsxapps/what-today/src/layouts/Mypage.tsxapps/what-today/src/components/MypageSidebar.tsxpackages/design-system/src/components/MypageProfileHeader.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/routes/index.tsxapps/what-today/src/components/MypageMainSideBar.tsxapps/what-today/src/pages/mypage/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:
apps/what-today/src/components/MypageSidebar.tsxpackages/design-system/src/components/MypageProfileHeader.tsxpackages/design-system/src/components/OngoingExperienceCard.tsxpackages/design-system/src/components/UpcomingSchedule.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:
apps/what-today/src/components/MypageSidebar.tsxpackages/design-system/src/components/UpcomingSchedule.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:
apps/what-today/src/components/MypageSidebar.tsxpackages/design-system/src/components/index.tsapps/what-today/src/schemas/activities.tsapps/what-today/src/components/MypageMainSideBar.tsxapps/what-today/src/apis/activityDetail.tsapps/what-today/src/pages/mypage/main/index.tsxpackages/design-system/src/components/UpcomingSchedule.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:
apps/what-today/src/components/MypageSidebar.tsxapps/what-today/src/components/MypageMainSideBar.tsxpackages/design-system/src/components/OngoingExperienceCard.tsxpackages/design-system/src/components/UpcomingSchedule.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
apps/what-today/src/components/MypageSidebar.tsx
📚 Learning: popovertrigger component in controlled mode (when open and onopenchange props are provided to popove...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#117
File: apps/what-today/src/components/notification/NotificationPopover.tsx:21-21
Timestamp: 2025-07-24T08:18:09.297Z
Learning: PopoverTrigger component in controlled mode (when open and onOpenChange props are provided to PopoverRoot) does not automatically toggle the popover state on click. The developer must provide a manual onClick handler to manage the state toggle, as the internal handleClick only works when !isControlled.
Applied to files:
apps/what-today/src/components/MypageSidebar.tsx
📚 Learning: kjhyun0830은 현재 이미지 업로드 컴포넌트의 파일 검증 로직(타입, 크기 검증)을 나중에 zod 스키마에서 이미지 url 정의할 때 참고할 예정입니다. 이는 일관된 이미지 ...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#96
File: packages/design-system/src/components/ExperienceImageUpload/IntroduceInput.tsx:30-35
Timestamp: 2025-07-22T03:09:16.142Z
Learning: kjhyun0830은 현재 이미지 업로드 컴포넌트의 파일 검증 로직(타입, 크기 검증)을 나중에 zod 스키마에서 이미지 URL 정의할 때 참고할 예정입니다. 이는 일관된 이미지 검증 체계 구축을 위한 계획입니다.
Applied to files:
apps/what-today/src/schemas/activities.ts
📚 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/mypage/main/index.tsx
📚 Learning: myungjiwoo plans to implement form validation using zod and react-hook-form in a future iteration ra...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Applied to files:
apps/what-today/src/pages/mypage/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/mypage/main/index.tsx
📚 Learning: what-today 프로젝트는 react + vite로 구성된 클라이언트 사이드 애플리케이션이며 ssr(server-side rendering)을 사용하지 않는다....
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#97
File: apps/what-today/src/hooks/useResponsive.ts:16-16
Timestamp: 2025-07-22T03:59:53.290Z
Learning: What-Today 프로젝트는 React + Vite로 구성된 클라이언트 사이드 애플리케이션이며 SSR(Server-Side Rendering)을 사용하지 않는다.
Applied to files:
apps/what-today/src/pages/mypage/main/index.tsx
🔇 Additional comments (22)
apps/what-today/src/schemas/activities.ts (1)
73-73: LGTM!새로운
Schedules타입이 다른 타입들과 일관성 있게 정의되었습니다. 날짜별로 그룹화된 스케줄 데이터를 위한 적절한 타입 정의입니다.apps/what-today/src/components/Header.tsx (1)
34-34: LGTM!헤더의 프로필 링크를
/mypage/edit-profile에서/mypage로 변경한 것이 적절합니다. 사용자가 프로필을 클릭했을 때 편집 페이지보다는 메인 대시보드로 이동하는 것이 더 직관적인 UX를 제공합니다.apps/what-today/src/layouts/Mypage.tsx (1)
40-40: 주석 처리된 코드의 처리 방향을 명확히 해주세요.
profileImgUrlprop이 주석 처리되어 있는데, 이것이 임시적인 비활성화인지 완전한 제거를 위한 것인지 명확하지 않습니다.만약 영구적으로 제거할 예정이라면 주석을 삭제하고, 임시적인 비활성화라면 TODO 주석을 추가하는 것을 고려해보세요:
- // profileImgUrl={user?.profileImageUrl ?? ''} + // TODO: 프로필 이미지 처리 방식 변경 예정 + // profileImgUrl={user?.profileImageUrl ?? ''}apps/what-today/src/routes/index.tsx (2)
13-13: LGTM!새로운
MyPage컴포넌트를 적절히 import했습니다.
49-49: LGTM!
/mypage의 기본 자식 라우트를EditProfilePage에서MyPage로 변경한 것이 적절합니다. 이는 사용자에게 더 유용한 대시보드 경험을 제공할 것으로 보입니다.packages/design-system/src/components/index.ts (3)
19-20: LGTM!새로운
MypageProfileHeader컴포넌트와MypageSummaryCard의 모든 export가 적절히 추가되었습니다. 기존 export 패턴과 일관성이 있습니다.
23-23: LGTM!
OngoingExperienceCard컴포넌트가 알파벳 순서에 맞게 적절한 위치에 추가되었습니다.
35-35: LGTM!
UpcomingSchedule컴포넌트가 알파벳 순서에 맞게 적절한 위치에 추가되었습니다.packages/design-system/src/components/MypageProfileHeader.tsx (3)
5-9: 인터페이스 정의가 잘 구성되어 있습니다.선택적 props (
name,profileImageUrl)와 필수 콜백 (onLogoutClick)의 조합이 적절하며, 컴포넌트의 용도에 맞게 설계되었습니다.
15-23: 프로필 이미지 조건부 렌더링이 올바르게 구현되었습니다.
profileImageUrl이 있을 때는 실제 이미지를, 없을 때는 기본ProfileLogo를 표시하는 로직이 명확하고 적절합니다. 이미지 스타일링과 접근성(alt 텍스트)도 잘 처리되었습니다.
28-35: 로그아웃 버튼 구현이 우수합니다.디자인 시스템의
Button컴포넌트와ExitIcon을 활용하여 일관성 있는 UI를 구현했으며,variant='none'과 적절한 스타일링으로 텍스트 버튼 형태를 잘 구현했습니다.apps/what-today/src/apis/activityDetail.ts (2)
64-68: 파라미터 인터페이스가 명확하게 정의되었습니다.
year와month를 문자열로 받는 인터페이스가 명확하며, 주석을 통해 용도를 잘 설명했습니다.
75-81: API 함수 구현이 올바릅니다.
axiosInstance사용, 파라미터 전달,schedulesSchema를 통한 응답 파싱이 모두 적절하게 구현되었습니다. 다른 API 함수들과 일관된 패턴을 따르고 있습니다.apps/what-today/src/components/MypageMainSideBar.tsx (2)
48-53: 메뉴 항목 정의가 잘 구성되었습니다.아이콘, 라벨, 경로를 포함한 메뉴 항목 배열이 명확하고, 유지보수하기 좋은 구조로 정의되었습니다.
75-92: 메뉴 렌더링 로직이 우수합니다.
useLocation을 활용한 활성 상태 처리, 동적 스타일링, 아이콘 색상 변경 등이 모두 적절하게 구현되었습니다.twMerge를 사용한 조건부 스타일링도 깔끔합니다.apps/what-today/src/components/MypageSidebar.tsx (3)
10-10: 프로필 이미지 기능 비활성화가 적절합니다.
profileImgUrl프로퍼티를 주석 처리하여 일시적으로 비활성화한 것이 새로운MypageProfileHeader컴포넌트와의 역할 분리를 위한 것으로 보입니다. 점진적 개발 접근법에 부합합니다.
74-82: 프로필 이미지 렌더링 블록 비활성화가 일관성 있게 처리되었습니다.인터페이스 변경과 일치하게 렌더링 부분도 주석 처리되어 일관성을 유지하고 있습니다.
61-61: 모바일 사이드바 높이 조정이 적절합니다.
h-474클래스를 제거하여 프로필 이미지 영역이 없어진 상황에 맞게 높이를 조정한 것이 합리적입니다.packages/design-system/src/components/OngoingExperienceCard.tsx (3)
19-21: 조건부 스타일링 로직이 깔끔합니다.빈 상태일 때
justify-center클래스를 적용하는 로직과twMerge를 사용한 클래스 병합이 적절하게 구현되었습니다.
22-28: 빈 상태 UI가 잘 구현되었습니다.
EmptyLogo와 "체험 등록하러 가기" 버튼을 포함한 빈 상태 UI가 사용자 친화적이며,onClick콜백을 통한 이벤트 처리도 적절합니다.
30-41: 활동 카드 렌더링이 잘 구현되었습니다.각 활동을 카드 형태로 렌더링하는 로직이 적절하며, 이미지, 제목, 가격 표시와 클릭 이벤트 처리가 올바르게 구현되었습니다. 가격 포맷팅(
toLocaleString())도 좋은 사용자 경험을 제공합니다.apps/what-today/src/pages/mypage/main/index.tsx (1)
146-153: 고정 높이와 overflow hidden으로 인한 레이아웃 문제PR에서 언급한 "수평 스크롤과 overflow 문제"가 이 부분과 관련이 있는 것 같습니다. 고정 높이(h-300)와 overflow-hidden의 조합이 콘텐츠를 잘라낼 수 있습니다.
다음과 같은 개선을 고려해보세요:
- 고정 높이 대신 min-height 사용
- overflow-x-auto로 수평 스크롤 허용
- flex-shrink-0을 자식 요소에 추가하여 축소 방지
- <div className='flex h-300 w-full flex-col gap-16 overflow-hidden rounded-3xl border border-gray-50 px-40 py-24'> + <div className='flex min-h-300 w-full flex-col gap-16 overflow-x-auto rounded-3xl border border-gray-50 px-40 py-24'>
MyungJiwoo
approved these changes
Aug 3, 2025
Contributor
MyungJiwoo
left a comment
MyungJiwoo
left a comment
There was a problem hiding this comment.
질문 하나 남겨두었습니다!!
지금 오류나지는 않지만 개선되면 좋을 부분이라고 생각해서 확인 해보시고 답변 부탁드립니다!
ㅠㅠ 이거 구현 못할 줄 알았는데 지현님 덕분에 제 꿈을 이룰 수 있게 됐어요! 감사합니다...🙇🏻♀️🥹
UI 쪽은 제가 다시 확인해볼게요!!
그리고 제가 여러 계정에 로그인해서 쓰다보니 지금 로그인한 계정의 이메일을 계속 까먹게 돼서
프로필에 이메일도 추가하려고 하는데 어떠신지 의견 여쭤보고 싶습니당!
| queryFn: () => | ||
| fetchMyReservations({ | ||
| cursorId: null, // 첫 페이지부터 가져옴 | ||
| size: MAX_PAGE_SIZE, // 충분히 큰 숫자로 설정 (전체 데이터 한 번에) |
Contributor
There was a problem hiding this comment.
페이지네이션이 걸려있는 목록에서 전체 데이터를 한 번에 받아올 때는,
요청 데이터의 size를 1로 하여 반환받은 totalPages를 사용하는 방법도 있습니다!
혹시 cursorId만 제공되는 엔드포인트였을까요..?!
그게 아니라면 API 요청이 한 번 더 가지만 size=1로 먼저 요청하고 totalPages로 재요청하는 것이,
나중에 데이터가 많아졌을때 누락없이 모든 데이터를 받아올 수 있을 것 같습니다!
Contributor
Author
There was a problem hiding this comment.
안그래도 저렇게 1000을 넣는 것이 맞나 의문이 들긴 했어요...
cursorId, size를 보낼 수 있는데 그럼 수정 가능한 걸까요?? 가능하다면 말씀해주신 방향으로 수정해보겠습니다!
Contributor
Author
저도 지우님 UI 가 너무 맘에 들어 차마 포기할 수 없었습니다..ㅎㅎ 그리고 이메일 넣는 것 좋아요!! |
|
🚀 오늘뭐해 Preview Deploy 완료! |
This was referenced Aug 4, 2025
Merged
Merged
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.2.21.40.mov
2025-08-03.2.22.47.mov
2025-08-03.2.23.06.mov
❓무슨 문제가 발생했나요? (선택)
-> 현재 화면에 보여지는 주요 기능들은 구현했고 UI 쪽 문제들이라 수정 가능한 부분만 도와주시면 감사하겠습니다!
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
기능 개선
버그 수정
/mypage/edit-profile에서/mypage로 수정되었습니다.디자인 시스템
기타