메인카드 카테고리 추가 및 높이수정 #217
Merged
메인카드 카테고리 추가 및 높이수정 #217
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이번 변경에서는 MainCard 컴포넌트에 새로운 필수 prop인 Changes
Sequence Diagram(s)sequenceDiagram
participant Page as Main Page
participant Carousel as Carousel
participant MainCard as MainCard.Root
participant Content as MainCard.Content
Page->>Carousel: items (각 item에 category 포함)
Carousel->>MainCard: 각 item의 props (category 포함) 전달
MainCard->>Content: context로 category 전달
Content->>Content: category, title, rating, price 등 표시
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 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. ✨ 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 (3)
packages/design-system/src/components/MainCard/types/index.tsx (1)
18-18: 타입 정의가 올바르게 추가되었습니다.
category속성이MainCardContextType에 적절히 추가되었습니다.JSDoc 주석도 업데이트하는 것을 고려해보세요:
/** * 💡 MainCard 내부에서 Context로 전달되는 값의 타입입니다. * * MainCard.Image, MainCard.Content에서 공통으로 사용하는 데이터를 포함합니다. * * @property {string} title - 체험 제목 * @property {number} price - 체험 가격 * @property {string} bannerImageUrl - 카드 상단 이미지 URL * @property {number} rating - 평균 평점 * @property {number} reviewCount - 리뷰 수 + * @property {string} category - 체험 카테고리 */packages/design-system/src/components/Carousel/types/index.ts (1)
31-31: 캐러셀 타입에 카테고리 속성이 올바르게 추가되었습니다.
CarouselProps인터페이스에category속성이 적절히 추가되었습니다.JSDoc 주석도 업데이트하면 더 완전한 문서화가 됩니다:
/** * Carousel 카드에 사용되는 기본 아이템 타입입니다. * * @property {number} id - 고유 식별자 * @property {string} title - 카드 제목 * @property {number} price - 가격 (₩ 단위) * @property {number} rating - 평점 (예: 4.5) * @property {number} reviewCount - 리뷰 개수 * @property {string} bannerImageUrl - 배너 이미지 URL + * @property {string} category - 체험 카테고리 */packages/design-system/src/pages/MainCardDoc.tsx (1)
8-18: 문서 업데이트가 포괄적으로 잘 수행되었습니다.모든 예시 코드에서
MainCard.Root사용법과 새로운categoryprop이 일관되게 업데이트되어 새로운 API를 정확히 반영하고 있습니다.props 설명 테이블(30-50행)에
categoryprop에 대한 설명을 추가하는 것을 고려해보세요:| reviewCount | number | 리뷰 수입니다. | + | category | string | 체험 카테고리입니다. | | className | string? | 카드 전체 wrapper(MainCard)에 적용할 커스텀 Tailwind 클래스입니다. |Also applies to: 62-73, 78-109, 112-129
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/what-today/src/pages/main/index.tsx(2 hunks)packages/design-system/src/components/Carousel/Carousel.tsx(3 hunks)packages/design-system/src/components/Carousel/types/index.ts(1 hunks)packages/design-system/src/components/MainCard/Content.tsx(2 hunks)packages/design-system/src/components/MainCard/Image.tsx(1 hunks)packages/design-system/src/components/MainCard/MainCardRoot.tsx(1 hunks)packages/design-system/src/components/MainCard/types/index.tsx(1 hunks)packages/design-system/src/pages/MainCardDoc.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (9)
📓 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#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#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/components/Carousel/Carousel.tsxpackages/design-system/src/components/MainCard/Image.tsxapps/what-today/src/pages/main/index.tsxpackages/design-system/src/pages/MainCardDoc.tsxpackages/design-system/src/components/MainCard/Content.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/Carousel/Carousel.tsxapps/what-today/src/pages/main/index.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/pages/MainCardDoc.tsxpackages/design-system/src/components/MainCard/MainCardRoot.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: 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:
packages/design-system/src/components/MainCard/Image.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/pages/main/index.tsxpackages/design-system/src/pages/MainCardDoc.tsxpackages/design-system/src/components/MainCard/types/index.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
🧬 Code Graph Analysis (1)
packages/design-system/src/components/MainCard/MainCardRoot.tsx (1)
packages/design-system/src/components/MainCard/types/index.tsx (1)
MainCardProps(32-35)
🔇 Additional comments (7)
packages/design-system/src/components/MainCard/Image.tsx (1)
11-11: 높이 조정이 올바르게 적용되었습니다.PR 목표에 따라 메인카드 높이가 300px에서 340px로 증가했습니다. 카테고리 추가로 인한 상단 여백 증가를 적절히 보상하는 변경사항입니다.
packages/design-system/src/components/Carousel/Carousel.tsx (2)
33-33: 컨테이너 너비 제약 제거가 적절합니다.
max-w-6xl클래스 제거로 PR에서 언급된 너비 불일치 문제를 해결했습니다.
53-53: 카테고리 prop 전달이 올바르게 구현되었습니다.데스크탑/태블릿과 모바일 캐러셀 모두에서
categoryprop이 일관되게MainCard.Root에 전달되고 있습니다.Also applies to: 81-81
apps/what-today/src/pages/main/index.tsx (2)
141-141: 메인카드에 카테고리 prop이 올바르게 전달되었습니다.
MemoizedMainCard에categoryprop이 적절히 추가되어 업데이트된 디자인 시스템 API와 올바르게 통합되었습니다.
163-163: 컨테이너 스타일링이 적절히 단순화되었습니다.
-mx-15클래스 제거로 Carousel 컴포넌트의 변경사항과 일관된 스타일링을 유지합니다.packages/design-system/src/components/MainCard/MainCardRoot.tsx (1)
14-14: 카테고리 prop 추가가 올바르게 구현되었습니다.새로운
categoryprop이 함수 매개변수와 컨텍스트 프로바이더 값에 일관되게 추가되어 MainCard 컴포넌트 시스템 전반에서 카테고리 정보를 사용할 수 있게 되었습니다.Also applies to: 18-18
packages/design-system/src/components/MainCard/Content.tsx (1)
21-21: 카테고리 표시 및 레이아웃 개선이 잘 구현되었습니다.컨텍스트에서
category를 올바르게 추출하고, 카테고리 → 제목 → 평점 → 가격 순서의 논리적인 시각적 계층구조를 구성했습니다. gap을 4에서 20으로 증가시켜 PR 목표에 맞게 더 명확한 시각적 분리를 제공합니다.Also applies to: 31-46
MyungJiwoo
approved these changes
Aug 2, 2025
Contributor
MyungJiwoo
left a comment
MyungJiwoo
left a comment
There was a problem hiding this comment.
이제 카드에서도 카테고리를 확인할 수 있어서 좋아요!!
고생하셨습니다! ✨
| <MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' /> | ||
| <MainCard.Content | ||
| className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 shadow-xl' | ||
| className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 text-white shadow-xl' |
Contributor
There was a problem hiding this comment.
잉? shadow-xl이 어디 들어가있나요..?
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-02.9.06.04.mov
2025-08-02.9.04.27.mov
d57
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
스타일
문서화