반응형 수정 및 리팩토링#447
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough랜딩 페이지 레이아웃과 타이포그래피 조정, 테마 간격 토큰 추가, 헤더 및 모바일 메뉴 드로어 스타일 업데이트, 사용자 이미지 prop 추가, 그룹 스터디 폼 컴포넌트 이름 변경 및 유효성 검사 개선, 알림 드롭다운 및 목록 처리 개선, 프리미엄 스터디 상세 페이지 레이아웃 조정. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/common/layout/home-header.tsx (1)
57-59: Arbitrary value 사용 검토 필요
border-[0.5px]와text-[7.5px]는 Tailwind arbitrary value입니다. 자주 사용되는 값이라면global.css에 커스텀 유틸리티로 정의하는 것을 권장합니다.♻️ 제안: 커스텀 유틸리티 정의
/* global.css에 추가 */ `@utility` border-half { border-width: 0.5px; } `@utility` text-beta-badge { font-size: 7.5px; }- <span className="rounded-full border-[0.5px] border-border-default px-75 py-25 text-center text-[7.5px] leading-normal font-medium"> + <span className="rounded-full border-half border-border-default px-75 py-25 text-center text-beta-badge leading-normal font-medium">As per coding guidelines: "Forbidden: Tailwind arbitrary values (e.g.,
p-[4px],w-[320px]). Use only project custom design tokens."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/layout/home-header.tsx` around lines 57 - 59, The span in home-header.tsx uses Tailwind arbitrary values `border-[0.5px]` and `text-[7.5px]`; define project custom utilities in global.css (e.g., `border-half` for 0.5px border-width and `text-beta-badge` for 7.5px font-size) and replace those arbitrary classes in the span's className with the new utility class names (update the element that renders the BETA badge accordingly).src/components/common/modals/notification-dropdown.tsx (1)
66-70: Arbitrary value 사용 검토 필요
w-[min(520px,calc(100vw-32px))]는 Tailwind arbitrary value입니다. 코딩 가이드라인에 따르면 프로젝트 커스텀 디자인 토큰만 사용해야 합니다.복잡한 반응형 계산이 필요한 경우,
global.css에 새로운 유틸리티를 정의하는 것을 권장합니다:♻️ 제안: 커스텀 유틸리티 정의
/* global.css에 추가 */ `@utility` w-dropdown-responsive { width: min(520px, calc(100vw - 32px)); }- className="shadow-2 rounded-100 border-border-default bg-background-default w-[min(520px,calc(100vw-32px))] border" + className="shadow-2 rounded-100 border-border-default bg-background-default w-dropdown-responsive border"As per coding guidelines: "Forbidden: Tailwind arbitrary values (e.g.,
p-[4px],w-[320px]). Use only project custom design tokens."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/modals/notification-dropdown.tsx` around lines 66 - 70, The component uses a Tailwind arbitrary width value in DropdownMenuContent's className ("w-[min(520px,calc(100vw-32px))]"), which violates the project rule against arbitrary values; fix it by adding a custom utility in global.css (define a responsive width utility, e.g., w-dropdown-responsive, using width: min(520px, calc(100vw - 32px)) within the project's utilities layer) and then replace the arbitrary token in DropdownMenuContent's className with that new utility (remove the w-[...] arbitrary string and use the custom utility class name).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/common/layout/home-header.tsx`:
- Around line 57-59: The span in home-header.tsx uses Tailwind arbitrary values
`border-[0.5px]` and `text-[7.5px]`; define project custom utilities in
global.css (e.g., `border-half` for 0.5px border-width and `text-beta-badge` for
7.5px font-size) and replace those arbitrary classes in the span's className
with the new utility class names (update the element that renders the BETA badge
accordingly).
In `@src/components/common/modals/notification-dropdown.tsx`:
- Around line 66-70: The component uses a Tailwind arbitrary width value in
DropdownMenuContent's className ("w-[min(520px,calc(100vw-32px))]"), which
violates the project rule against arbitrary values; fix it by adding a custom
utility in global.css (define a responsive width utility, e.g.,
w-dropdown-responsive, using width: min(520px, calc(100vw - 32px)) within the
project's utilities layer) and then replace the arbitrary token in
DropdownMenuContent's className with that new utility (remove the w-[...]
arbitrary string and use the custom utility class name).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2faf0f4d-60c5-4536-9910-08143f633be9
📒 Files selected for processing (12)
src/app/(landing)/page.tsxsrc/app/global.csssrc/components/common/layout/home-header.tsxsrc/components/common/layout/mobile-menu-drawer.tsxsrc/components/common/modals/notification-dropdown.tsxsrc/components/forms/group-study-form.tsxsrc/components/forms/group-study-steps/group-study-step-application.tsxsrc/components/forms/group-study-steps/group-study-step-basic-info.tsxsrc/components/forms/group-study-steps/group-study-step-introduction.tsxsrc/components/home/study-matching-toggle.tsxsrc/components/lists/notification-list.tsxsrc/components/pages/premium-study-detail-page.tsx
🌱 연관된 이슈
☘️ 작업 내용
🍀 참고사항
스크린샷 (선택)
Summary by CodeRabbit
릴리스 노트
새로운 기능
버그 수정
스타일