Skip to content

Conversation

@Taeil08
Copy link
Contributor

@Taeil08 Taeil08 commented Aug 4, 2025

🧩 관련 이슈 번호

📌 작업 내용

  • 스켈레톤 실제 카드크기랑 동일하게 수정
  • 인기체험 양쪽 여백 해결

✅ 체크리스트

  • PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다
    • 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
  • PR을 보내는 브랜치가 올바른지 확인했습니다.
  • 팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
  • 변경사항을 충분히 테스트 했습니다.
  • (함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
  • 컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

2025-08-04.1.07.51.mov
2025-08-04.1.07.13.mov
2025-08-04.1.06.44.mov

❓무슨 문제가 발생했나요? (선택)

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

  • 신규 기능

    • 인기 체험 캐러셀에서 기기별로 보여지는 카드 개수가 화면 크기에 따라 자동으로 조정됩니다.
  • 스타일

    • 캐러셀 내비게이션 버튼이 좌우 끝에 고정 배치되어 사용성이 향상되었습니다.
    • 메인 카드 및 스켈레톤 컴포넌트의 패딩과 높이 등 반응형 스타일이 일부 개선되었습니다.
    • 캐러셀 아이템 간 간격 및 이미지 크기 반응형 기준이 조정되었습니다.
    • 검색 입력창 내 아이콘 위치 및 스타일이 변경되어 UI가 깔끔해졌습니다.
  • 버그 수정

    • 없음
  • 기타

    • 내비게이션 버튼에 외부에서 스타일을 추가할 수 있도록 className 속성이 추가되었습니다.

@Taeil08 Taeil08 added this to the 프로젝트 마감 milestone Aug 4, 2025
@Taeil08 Taeil08 self-assigned this Aug 4, 2025
@Taeil08 Taeil08 added the ♻️ Refactor 코드 리팩토링 label Aug 4, 2025
@coderabbitai
Copy link

coderabbitai bot commented Aug 4, 2025

📝 Walkthrough

Walkthrough

이 변경사항은 인기 체험 캐러셀의 카드 수를 반응형으로 계산하는 새로운 함수와 상태를 추가합니다. 또한 캐러셀 컴포넌트와 내비게이션 버튼의 레이아웃을 수정하고, 카드 및 스켈레톤 컴포넌트의 스타일과 구조를 조정합니다. 각 컴포넌트의 스타일링과 반응형 동작이 개선되었습니다.

Changes

Cohort / File(s) Change Summary
메인 페이지 인기 캐러셀 반응형 카드 수 및 상태 추가
apps/what-today/src/pages/main/index.tsx
인기 체험 캐러셀의 카드 수를 디바이스 크기에 따라 동적으로 계산하는 함수와 상태(popularPerPage)를 추가하고, 윈도우 리사이즈 시 해당 값을 갱신하도록 로직을 수정. JSX에서 캐러셀에 동적 카드 수를 적용. 불필요한 CSS 클래스 제거.
캐러셀 컴포넌트 리팩토링 및 내비게이션 버튼 스타일 변경
packages/design-system/src/components/Carousel/Carousel.tsx, packages/design-system/src/components/Carousel/NavigationButton.tsx
내비게이션 버튼을 절대 위치로 이동시키고, 버튼에 외부에서 클래스명을 전달할 수 있도록 className prop 추가. 데스크탑/태블릿 캐러셀 구조를 간소화하고, 아이템 래핑 및 패딩 로직을 개선. 모바일 캐러셀은 기존 구조 유지.
메인 카드 및 이미지 스타일 수정
packages/design-system/src/components/MainCard/Content.tsx, packages/design-system/src/components/MainCard/Image.tsx
메인 카드 컨텐츠의 세로 패딩 및 브레이크포인트 조정. 이미지의 높이 적용 브레이크포인트를 lg에서 xl로 변경.
메인 페이지 스켈레톤 구조 및 스타일 개선
packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx
카드 스켈레톤의 레이아웃을 더 계층적으로 재구성하고, 브레이크포인트별 높이 및 간격을 조정. 캐러셀 스켈레톤의 아이템 폭 계산 및 패딩 로직을 변수화하여 가독성 향상.
메인 검색 입력창 스타일 및 구조 변경
packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx
검색 아이콘을 Input.Wrapper 내로 이동시키고, 그림자 스타일 제거 및 테두리 색상 변경. 입력 필드에 수평 패딩 추가 및 JSX 포맷 수정.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MainPage
    participant Carousel

    User->>MainPage: 페이지 진입/리사이즈
    MainPage->>MainPage: getPopularPerPage()로 popularPerPage 계산
    MainPage->>Carousel: popularPerPage를 props로 전달
    Carousel->>User: popularPerPage 만큼의 카드 렌더링
    User->>Carousel: 내비게이션 버튼 클릭
    Carousel->>Carousel: 카드 슬라이드/이동
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • 메인페이지 카드 개수 수정  #215: 메인 페이지에서 인기 체험 캐러셀의 카드 수 로직을 리팩토링한 PR로, 본 PR과 카드 수 및 캐러셀 로직 변경이 직접적으로 연관됨.
  • 메인페이지 스켈레톤 구현 #229: 메인 페이지의 반응형 카드 수 로직과 스켈레톤 컴포넌트 도입 관련 PR로, 본 PR과 일부 영역에서 관련성이 있음.
  • 캐러셀 구현 #82: 캐러셀 컴포넌트의 최초 도입 및 반응형 아이템 수 로직 구현 PR로, 본 PR에서 해당 컴포넌트 사용 및 로직을 확장함.

Suggested labels

🎨 Design

Suggested reviewers

  • kjhyun0830
  • MyungJiwoo

Poem

🐇
캐러셀 위를 빙글빙글,
카드 수는 똑똑하게 척척!
버튼은 양옆에 살포시,
스켈레톤도 한층 더 멋지게.
반응형 변화 속에서
오늘도 토끼는 춤을 추네!
🎠✨


📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 229a34c and ddcb592.

📒 Files selected for processing (1)
  • packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/taeil/236

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link

github-actions bot commented Aug 4, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

Copy link
Member

@HarrySeop HarrySeop left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

남은 기간도 화이팅! 화이팅!

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
packages/design-system/src/components/Carousel/Carousel.tsx (1)

58-83: 모바일 스크롤바 숨김 처리 개선 권장

인라인 스타일 태그를 사용한 스크롤바 숨김 처리가 구현되어 있습니다. 하지만 이 방식은 전역 CSS에 영향을 줄 수 있습니다.

CSS 모듈이나 styled-components를 사용하여 스타일을 격리하는 것을 권장합니다:

-      <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 scrollbar-hide md:hidden'>

그리고 전역 CSS에 다음을 추가:

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e72a75c and 037b16c.

📒 Files selected for processing (6)
  • apps/what-today/src/pages/main/index.tsx (3 hunks)
  • packages/design-system/src/components/Carousel/Carousel.tsx (1 hunks)
  • packages/design-system/src/components/Carousel/NavigationButton.tsx (1 hunks)
  • packages/design-system/src/components/MainCard/Content.tsx (1 hunks)
  • packages/design-system/src/components/MainCard/Image.tsx (1 hunks)
  • packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx (3 hunks)
🧰 Additional context used
🧠 Learnings (12)
📓 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: 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: 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/MainCard/Content.tsx
  • packages/design-system/src/components/MainCard/Image.tsx
  • apps/what-today/src/pages/main/index.tsx
  • packages/design-system/src/components/Carousel/Carousel.tsx
  • packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.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/MainCard/Content.tsx
  • packages/design-system/src/components/MainCard/Image.tsx
  • packages/design-system/src/components/Carousel/NavigationButton.tsx
  • packages/design-system/src/components/Carousel/Carousel.tsx
  • packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.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/NavigationButton.tsx
  • packages/design-system/src/components/Carousel/Carousel.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:

  • packages/design-system/src/components/Carousel/NavigationButton.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.

Applied to files:

  • packages/design-system/src/components/Carousel/NavigationButton.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/NavigationButton.tsx
  • packages/design-system/src/components/Carousel/Carousel.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), when using type=...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:33:19.860Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), when using type="checkbox" for toggle behavior, adding role="radio" maintains proper semantic meaning for screen readers while preserving the desired UX functionality where users can click to deselect options.

Applied to files:

  • packages/design-system/src/components/Carousel/NavigationButton.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:

  • packages/design-system/src/components/Carousel/NavigationButton.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:

  • apps/what-today/src/pages/main/index.tsx
  • packages/design-system/src/components/Carousel/Carousel.tsx
  • 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: 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.tsx
🧬 Code Graph Analysis (2)
apps/what-today/src/pages/main/index.tsx (1)
packages/design-system/src/components/Carousel/Carousel.tsx (1)
  • Carousel (8-94)
packages/design-system/src/components/Carousel/Carousel.tsx (2)
packages/design-system/src/components/Carousel/NavigationButton.tsx (1)
  • NavigationButton (32-44)
packages/design-system/src/components/MainCard/index.ts (1)
  • MainCard (5-9)
🔇 Additional comments (18)
packages/design-system/src/components/MainCard/Image.tsx (1)

11-11: 반응형 브레이크포인트 조정이 적절합니다.

이미지 높이 브레이크포인트를 lg에서 xl로 변경한 것이 다른 컴포넌트들과 일관성을 유지하며, 전체적인 반응형 디자인 개선에 기여합니다.

packages/design-system/src/components/MainCard/Content.tsx (1)

27-27: 패딩 조정이 반응형 디자인 개선에 적합합니다.

중간 브레이크포인트에서 패딩을 줄이고 xl 브레이크포인트로 변경한 것이 카드 컨텐츠의 시각적 균형을 개선합니다.

packages/design-system/src/components/Carousel/NavigationButton.tsx (2)

21-24: className 속성 추가가 적절합니다.

컴포넌트의 재사용성과 유연성을 높이는 좋은 개선사항이며, JSDoc 문서화도 잘 되어있습니다.


32-37: className 속성 구현이 올바릅니다.

템플릿 리터럴을 사용한 클래스 병합 방식이 깔끔하며, 기본값 설정도 적절합니다.

apps/what-today/src/pages/main/index.tsx (6)

29-29: 함수명과 주석이 명확합니다.

getCount 함수의 용도를 명확히 하는 주석이 추가되어 코드 가독성이 향상되었습니다.


37-46: 인기 체험용 반응형 로직이 잘 구현되었습니다.

별도의 함수로 분리하여 관심사를 명확히 구분했으며, 브레이크포인트 상수 정의와 함께 유지보수성이 좋습니다.


51-51: 상태 관리가 적절합니다.

popularPerPage 상태를 별도로 관리하여 각 캐러셀의 독립적인 반응형 동작을 보장합니다.


58-62: resize 핸들러 업데이트가 올바릅니다.

두 캐러셀의 반응형 상태를 모두 업데이트하도록 핸들러가 적절히 수정되었습니다.


182-186: 동적 itemsPerPage 적용이 적절합니다.

인기 체험 캐러셀에 popularPerPage 상태를 적용하여 반응형 동작이 올바르게 구현되었습니다.


173-173: CSS 클래스(mt-40) 제거 여부 확인 필요
apps/what-today/src/pages/main/index.tsx (173번째 줄)에서 mt-40 클래스가 삭제되었습니다. 의도된 마진 조정인지 확인 부탁드립니다.

  • 변경 전/후 비교:
- <div className='relative z-10 flex h-auto flex-col gap-60 mt-40'>
+ <div className='relative z-10 flex h-auto flex-col gap-60'>
  • 다른 문서 페이지에서 mt-40 사용 예시:
    • packages/design-system/src/pages/RadioGroupDoc.tsx (<h2 className='mt-40 text-2xl'>…)
    • packages/design-system/src/pages/ExperienceImageUploadDoc.tsx (<h2 className='mt-40 text-2xl font-semibold'>…)

위 클래스를 제거해도 레이아웃이 의도한 대로 유지되는지 재검토 부탁드립니다.

packages/design-system/src/components/MainPageSkeleton/MainPageSkeleton.tsx (5)

15-15: 브레이크포인트 일관성이 향상되었습니다.

스켈레톤의 높이 브레이크포인트를 xl로 변경하여 실제 MainCard 컴포넌트와 일치시킨 것이 좋습니다.


20-21: 패딩 값이 실제 컴포넌트와 일치합니다.

MainCard/Content.tsx의 패딩 변경사항과 동일하게 적용하여 스켈레톤과 실제 컴포넌트 간의 일관성을 보장합니다.


23-36: 스켈레톤 레이아웃 구조가 개선되었습니다.

중첩된 flex 컨테이너와 적절한 gap 값으로 실제 카드 구조를 더 정확하게 반영하도록 개선되었습니다.


85-85: 상수 분리로 코드 가독성이 향상되었습니다.

itemWidthPercent 상수를 도입하여 인라인 계산을 제거하고 실제 Carousel 컴포넌트와의 일관성을 높였습니다.


102-103: 템플릿 리터럴 사용이 더 깔끔합니다.

twMerge 대신 템플릿 리터럴과 모듈로 연산을 사용한 것이 코드를 단순화하고 성능도 향상시킵니다.

packages/design-system/src/components/Carousel/Carousel.tsx (3)

28-34: 모션 애니메이션 구현이 적절함

데스크탑/태블릿 뷰에서 페이지네이션 기반 슬라이딩 애니메이션이 잘 구현되었습니다. pointerEvents: 'auto' 설정으로 애니메이션 중에도 상호작용이 가능하도록 했습니다.


79-79: 모바일에서만 이미지 필터 적용하는 이유 확인 필요

모바일 뷰에서만 brightness-90 contrast-125 필터가 적용되고 데스크탑에서는 적용되지 않습니다. 이는 의도된 디자인인지 확인이 필요합니다.

디자인 시스템의 일관성을 위해 다음을 확인해주세요:

  1. 모바일과 데스크탑에서 다른 이미지 스타일이 의도된 것인지
  2. 브랜드 가이드라인에 따른 것인지
  3. 사용자 경험 측면에서 적절한지

만약 일관성이 필요하다면 데스크탑에도 동일한 필터를 적용하거나, 모바일에서 필터를 제거하는 것을 고려해보세요.


35-54: 카드 간격 로직: 정상 동작 확인

itemsPerPage가 4일 때 테스트한 결과,
idx % itemsPerPage !== itemsPerPage - 1 조건이 각 페이지의 마지막 아이템(예: idx 3, 7)에만 오른쪽 패딩을 제거하도록 의도대로 작동함을 확인했습니다.
해당 로직은 그대로 유지하셔도 됩니다.

@github-actions
Copy link

github-actions bot commented Aug 4, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 037b16c and 229a34c.

📒 Files selected for processing (1)
  • packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx (1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 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: 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: 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/MainSearchInput/MainSearchInput.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/MainSearchInput/MainSearchInput.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/MainSearchInput/MainSearchInput.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:

  • packages/design-system/src/components/MainSearchInput/MainSearchInput.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/MainSearchInput/MainSearchInput.tsx

@github-actions
Copy link

github-actions bot commented Aug 4, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

@Taeil08 Taeil08 merged commit 02b28b1 into develop Aug 4, 2025
2 checks passed
@Taeil08 Taeil08 deleted the refactor/taeil/236 branch August 4, 2025 04:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♻️ Refactor 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants