마이페이지 메인 UI 리팩토링 #248
Merged
마이페이지 메인 UI 리팩토링 #248
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 구조, 컴포넌트 구조가 대폭 개선되었습니다. 디자인 시스템의 카드 및 스켈레톤 컴포넌트가 추가 및 수정되었고, 기존 리스트형 컴포넌트가 단일 아이템 기반으로 변경되었습니다. 스타일링도 전반적으로 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyPage
participant API
participant NoResultOngoing
participant NoResultUpcoming
participant OngoingExperienceCard
participant UpcomingSchedule
participant Skeleton
User->>MyPage: 페이지 진입
MyPage->>API: 활동/예약 데이터 fetch
alt 데이터 로딩 중
MyPage->>Skeleton: 스켈레톤 카드 렌더
else 데이터 있음
MyPage->>OngoingExperienceCard: 진행 중 경험 리스트 렌더
MyPage->>UpcomingSchedule: 예정 예약 리스트 렌더
else 데이터 없음
MyPage->>NoResultOngoing: 진행 중 경험 없음 UI 렌더
MyPage->>NoResultUpcoming: 예정 예약 없음 UI 렌더
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 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 (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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
|
|
🚀 오늘뭐해 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: 3
🔭 Outside diff range comments (1)
packages/design-system/src/components/UpcomingSchedule.tsx (1)
25-25: 이미지 로딩 실패 처리 필요
src가 없거나 이미지 로딩에 실패할 경우를 대비한 처리가 필요합니다.- <img alt='체험 베너 이미지' className='h-full w-140 rounded-l-none rounded-r-2xl object-cover' src={src} /> + {src ? ( + <img + alt='체험 베너 이미지' + className='h-full w-140 rounded-l-none rounded-r-2xl object-cover' + src={src} + onError={(e) => { + e.currentTarget.style.display = 'none'; + }} + /> + ) : ( + <div className='h-full w-140 rounded-l-none rounded-r-2xl bg-gray-100' /> + )}
🧹 Nitpick comments (7)
packages/design-system/src/components/skeleton/OngoingExperienceCardSkeleton.tsx (3)
3-5: 중복된 애니메이션 클래스 제거 필요부모 요소(3번 줄)와 자식 요소(5번 줄)에 모두
animate-pulse가 적용되어 있습니다. 부모에만 적용하면 충분합니다.- <div className='h-full w-full animate-pulse rounded-t-2xl rounded-b-3xl bg-gray-100' /> + <div className='h-full w-full rounded-t-2xl rounded-b-3xl bg-gray-100' />
11-15: 자식 요소의 중복 애니메이션 제거이미 부모 컨테이너에
animate-pulse가 적용되어 있으므로 자식 요소들의 애니메이션은 불필요합니다.- <div className='h-16 w-5/6 animate-pulse rounded bg-gray-100' /> - <div className='h-16 w-3/4 animate-pulse rounded bg-gray-100' /> + <div className='h-16 w-5/6 rounded bg-gray-100' /> + <div className='h-16 w-3/4 rounded bg-gray-100' /> </div> {/* 가격 라인 */} - <div className='h-16 w-1/2 animate-pulse rounded bg-gray-100' /> + <div className='h-16 w-1/2 rounded bg-gray-100' />
3-3: 반응형 디자인 고려 필요고정 너비
w-150은 작은 화면에서 문제가 될 수 있습니다. 반응형 클래스나 최대 너비 제한을 고려해보세요.- <div aria-hidden className='relative h-170 w-150 shrink-0 animate-pulse'> + <div aria-hidden className='relative h-170 w-150 max-w-full shrink-0 animate-pulse'>packages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsx (1)
8-24: 하드코딩된 크기 값을 props로 받도록 개선 고려현재 모든 크기가 하드코딩되어 있어 재사용성이 제한적입니다. 다양한 레이아웃에서 사용할 수 있도록 선택적 props를 추가하는 것을 고려해보세요.
-export default function UpcomingScheduleItemSkeleton() { +interface UpcomingScheduleItemSkeletonProps { + height?: string; + imageWidth?: string; +} + +export default function UpcomingScheduleItemSkeleton({ + height = 'h-120', + imageWidth = 'w-140' +}: UpcomingScheduleItemSkeletonProps = {}) { return ( <div aria-hidden className='flex flex-col gap-8'> {/* 날짜 라벨 스켈레톤 */} <div className='h-18 w-80 animate-pulse rounded bg-gray-100 md:h-21' /> {/* 카드 스켈레톤 (UpcomingSchedule 레이아웃 매칭) */} - <div className='flex h-120 w-full items-center justify-between'> + <div className={`flex ${height} w-full items-center justify-between`}> {/* 좌측 텍스트 영역 */} <div className='flex h-full flex-1 flex-col justify-center rounded-l-2xl rounded-r-none border border-r-0 border-gray-100 p-16 px-24'> {/* 제목 */} <div className='mb-6 h-24 w-2/3 rounded bg-gray-100' /> {/* 시간 */} <div className='mb-8 h-20 w-1/3 rounded bg-gray-100' /> {/* 가격/인원 */} <div className='flex items-center gap-6'> <div className='h-20 w-60 rounded bg-gray-100' /> <div className='h-20 w-30 rounded bg-gray-100' /> </div> </div> {/* 우측 이미지 영역 */} - <div className='h-full w-140 rounded-l-none rounded-r-2xl bg-gray-100' /> + <div className={`h-full ${imageWidth} rounded-l-none rounded-r-2xl bg-gray-100`} /> </div> </div> ); }apps/what-today/src/pages/mypage/main/index.tsx (3)
117-119: 정렬 로직 간소화 가능dayjs의
diff메서드를 사용하여 더 명확하게 정렬할 수 있습니다.- const sortedReservations = [...(confirmedData?.reservations ?? [])].sort((a, b) => - dayjs(a.date).isAfter(b.date) ? 1 : -1, - ); + const sortedReservations = [...(confirmedData?.reservations ?? [])].sort((a, b) => + dayjs(a.date).diff(dayjs(b.date)), + );
262-262: 고정 높이값 대신 반응형 처리 고려
h-210과 같은 고정 높이는 다양한 화면 크기에서 문제가 될 수 있습니다. 반응형 높이를 고려해보세요.- <div className='grid h-210 w-full grid-cols-1'> + <div className='grid min-h-210 w-full grid-cols-1'>
270-270: 반응형 높이 값 개선 제안모바일과 데스크톱에서 다른 높이를 적용하는 것이 좋을 것 같습니다.
- <div className='grid min-h-300 grid-rows-[auto_1fr] gap-8 rounded-3xl border-gray-50 bg-white md:max-h-540 md:gap-16 md:border md:px-32 md:pt-24'> + <div className='grid min-h-[200px] md:min-h-300 grid-rows-[auto_1fr] gap-8 rounded-3xl border-gray-50 bg-white md:max-h-540 md:gap-16 md:border md:px-32 md:pt-24'>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/what-today/src/pages/mypage/main/index.tsx(8 hunks)packages/design-system/src/components/MypageProfileHeader.tsx(1 hunks)packages/design-system/src/components/MypageSummaryCard.tsx(2 hunks)packages/design-system/src/components/OngoingExperienceCard.tsx(1 hunks)packages/design-system/src/components/UpcomingSchedule.tsx(1 hunks)packages/design-system/src/components/skeleton/OngoingExperienceCardSkeleton.tsx(1 hunks)packages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsx(1 hunks)packages/design-system/src/components/skeleton/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (12)
📓 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.763Z
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#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: 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: 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: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
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: 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: 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: 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: MyungJiwoo
PR: What-Today-FE/What-Today#63
File: packages/design-system/src/pages/NoResultDoc.tsx:8-8
Timestamp: 2025-07-17T11:29:24.913Z
Learning: MyungJiwoo indicated that code duplication in documentation files (like design system documentation) is acceptable and doesn't need to be fixed, as it's not actual service code but rather demo/documentation code with different standards.
📚 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/skeleton/index.tsxpackages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsxpackages/design-system/src/components/UpcomingSchedule.tsxapps/what-today/src/pages/mypage/main/index.tsx
📚 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/MypageProfileHeader.tsxpackages/design-system/src/components/skeleton/OngoingExperienceCardSkeleton.tsxpackages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsxpackages/design-system/src/components/MypageSummaryCard.tsxpackages/design-system/src/components/UpcomingSchedule.tsxpackages/design-system/src/components/OngoingExperienceCard.tsxapps/what-today/src/pages/mypage/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.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
packages/design-system/src/components/MypageProfileHeader.tsxpackages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsxpackages/design-system/src/components/UpcomingSchedule.tsxapps/what-today/src/pages/mypage/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/MypageProfileHeader.tsxpackages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsxpackages/design-system/src/components/UpcomingSchedule.tsxapps/what-today/src/pages/mypage/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/skeleton/OngoingExperienceCardSkeleton.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/MypageSummaryCard.tsxpackages/design-system/src/components/OngoingExperienceCard.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/mypage/main/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/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
📚 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: in korean react calendar components, it's common to use english weekday abbreviations (s, m, t, etc....
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#31
File: packages/design-system/src/components/calendar/CalendarGrid.tsx:13-13
Timestamp: 2025-07-12T16:11:37.214Z
Learning: In Korean React calendar components, it's common to use English weekday abbreviations (S, M, T, etc.) while keeping month/year displays in Korean format. CalendarGrid can use dayjs.locale('en') for weekdays while CalendarHeader uses hardcoded Korean format strings like 'YYYY년 MM월', and these don't conflict since the Korean text is hardcoded in the format string.
Applied to files:
apps/what-today/src/pages/mypage/main/index.tsx
🧬 Code Graph Analysis (1)
packages/design-system/src/components/skeleton/OngoingExperienceCardSkeleton.tsx (1)
packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx (1)
ExperienceCardSkeleton(1-18)
🔇 Additional comments (7)
packages/design-system/src/components/UpcomingSchedule.tsx (1)
1-28: 컴포넌트 단순화 잘됨복잡한 리스트 렌더링과 상태 관리를 제거하고 단일 아이템 표시에 집중한 리팩토링이 잘 되었습니다. 단일 책임 원칙을 잘 따르고 있습니다.
packages/design-system/src/components/skeleton/index.tsx (1)
1-3: 스켈레톤 컴포넌트 export 추가 완료새로운 스켈레톤 컴포넌트들이 적절히 export되었습니다. 이는 PR 목표인 스켈레톤 UI 적용과 일치합니다.
packages/design-system/src/components/MypageSummaryCard.tsx (1)
15-15: 디자인 시스템 일관성 개선패딩과 간격 조정, 그리고 시맨틱 타이포그래피 클래스 사용으로 디자인 시스템의 일관성이 향상되었습니다.
Also applies to: 26-28
packages/design-system/src/components/MypageProfileHeader.tsx (1)
14-39: UI 스케일 및 타이포그래피 개선프로필 헤더의 전반적인 스케일 조정과 시맨틱 타이포그래피 클래스 적용이 잘 되었습니다. 전체적인 마이페이지 UI 개선사항과 일관성 있게 적용되었습니다.
apps/what-today/src/pages/mypage/main/index.tsx (3)
121-163: 로딩 및 빈 상태 처리 개선됨스켈레톤 UI를 활용한 로딩 상태 처리와 조건부 렌더링이 잘 구현되었습니다. 사용자 경험이 크게 개선될 것으로 보입니다.
273-284: 타임라인 UI 구현 우수예정된 일정에 타임라인 UI를 추가한 것은 훌륭한 개선사항입니다. 시각적으로 일정의 흐름을 잘 표현하고 있습니다.
263-266: 수평 스크롤 구현 확인모집 중인 체험 섹션의 수평 스크롤이 제대로 작동하는지 확인이 필요합니다.
다양한 화면 크기에서 수평 스크롤이 잘 작동하는지, 특히 모바일에서 터치 스크롤이 원활한지 테스트해주세요.
packages/design-system/src/components/OngoingExperienceCard.tsx
Outdated
Show resolved
Hide resolved
packages/design-system/src/components/OngoingExperienceCard.tsx
Outdated
Show resolved
Hide resolved
packages/design-system/src/components/skeleton/UpcomingScheduleSkeleton.tsx
Show resolved
Hide resolved
|
🚀 오늘뭐해 Preview Deploy 완료! |
Closed
HarrySeop
approved these changes
Aug 4, 2025
| return ( | ||
| <div className='flex w-full flex-col items-center justify-center gap-20 pt-32'> | ||
| <EmptyLogo size={80} /> | ||
| <Button className='text-md w-auto font-semibold' variant='outline' onClick={() => navigate('/')}> |
| <div className='flex w-full flex-col items-center justify-center gap-20 pt-32'> | ||
| <EmptyLogo size={80} /> | ||
| <Button | ||
| className='text-md w-auto font-semibold' |
| <img alt={title} className='h-full w-full rounded-t-2xl rounded-b-3xl object-cover' src={bannerImageUrl} /> | ||
| <div className='absolute bottom-0 w-full translate-y-[40px] cursor-pointer rounded-2xl border border-gray-50 bg-white px-12 py-12'> | ||
| <p className='caption-text line-clamp-2 font-semibold'>{title}</p> | ||
| <p className='caption-text text-gray-500'>₩ {price.toLocaleString()} / 인</p> |
Contributor
Author
There was a problem hiding this comment.
엇 500으로 되어있던건, 컨벤션에 맞게 gray-400으로 적용했고, 금액까지 회색으로 처리한건 의도한게 맞습니다!
|
🚀 오늘뭐해 Preview Deploy 완료! |
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 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
UI/스타일 개선
버그 수정