[Fix] WTH-396: 어드민 반응형 설정 #121
Hidden character warning
Conversation
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Warning Review limit reached
More reviews will be available in 52 minutes and 50 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 Walkthrough둘러보기반응형 디자인을 위한 미디어 쿼리 훅 추가, 다이얼로그 모바일 제어 속성 지원, 스케줄 모달의 CSS 클래스 상수화, 스케줄 및 LNB 컴포넌트의 태블릿 기준 반응형 레이아웃 조정. 변경 사항반응형 디자인 및 모달 리팩토링
예상 코드 리뷰 노력🎯 3 (보통) | ⏱️ ~25분 관련 PR
제안 레이블
제안 리뷰어
🐰 축하 시
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 |
|
구현한 기능 Preview: https://weeth-c8gp5dbxb-weethsite-4975s-projects.vercel.app |
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
1 similar comment
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 |
|
구현한 기능 Preview: https://weeth-jc66vd1dw-weethsite-4975s-projects.vercel.app |
|
구현한 기능 Preview: https://weeth-5j42j12th-weethsite-4975s-projects.vercel.app |
PR 검증 결과✅ TypeScript: 통과 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/admin/schedule/general/ScheduleItem.tsx (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winPrettier 포맷팅 이슈를 해결해주세요.
파이프라인에서 Prettier --check가 코드 스타일 이슈를 보고했습니다. 다음 명령어로 자동 수정할 수 있습니다:
pnpm format🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/admin/schedule/general/ScheduleItem.tsx` at line 1, Prettier formatting failed for ScheduleItem.tsx; run the project's formatter to fix style issues (e.g., run "pnpm format") and commit the updated file so the import line (import { cn } from '`@/lib/cn`';) and the rest of ScheduleItem component conform to Prettier rules; if your editor supports it, also enable format-on-save or run Prettier directly against src/components/admin/schedule/general/ScheduleItem.tsx to ensure the pipeline passes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/settings.local.json:
- Around line 15-17: The settings.local.json currently contains hardcoded
absolute paths inside the Bash(...) and PowerShell(...) command strings (e.g.,
the Bash("C:/Users/.../pdftotext.exe ...") entry and the
PowerShell(Get-ChildItem -Path "D:\\project\\weeth-client\\...") entries);
replace those absolute paths with environment-variable or project-relative
placeholders (e.g., use %USERPROFILE% or $env:USERPROFILE for user dirs and a
configurable PROJECT_ROOT/$env:PROJECT_ROOT for repo roots), update the commands
in the Bash(...) and PowerShell(...) values to reference those variables (or
compute paths relative to the repo), and ensure settings.local.json is treated
as per-developer local config (not committed) so each developer can set their
own env var if necessary.
In `@src/components/admin/schedule/general/SchedulePageContent.tsx`:
- Line 102: The div in SchedulePageContent.tsx uses the class token
"tablet:p-700" which is outside the project's padding token guideline (allowed
p-100..p-500); confirm whether the 32px padding from --spacing-700 is
intentionally required for this element, and if not replace "tablet:p-700" with
an appropriate in-range token such as "tablet:p-500" (or another p-100..p-500
value) in the className string; if the 700 value is intentional, add an inline
comment near the div or a short justification in the PR explaining why the
exception is needed.
In `@src/components/admin/schedule/modal/constants.ts`:
- Around line 1-2: SCHEDULE_MODAL_CONTENT_CLASS uses hardcoded calc classes
(max-h-[calc(100%-2rem)], max-w-[calc(100%-2rem)]) which violates the
token-first rule; update the constant to use existing design token classes for
max-height and max-width (replace those calc classes with the appropriate token
class names) and if no suitable tokens exist, do not hardcode new values—raise a
proposal/PR to add modal size tokens and then reference those new token classes
in SCHEDULE_MODAL_CONTENT_CLASS.
- Around line 1-2: The modal can overflow on small viewports because
SCHEDULE_MODAL_CONTENT_CLASS includes min-w-90 which can be larger than
max-w-[calc(100%-2rem)]; update the class string used by
SCHEDULE_MODAL_CONTENT_CLASS to remove or replace min-w-90 with a non-blocking
value (e.g., min-w-0 or remove the min-w utility) so the max-w-[calc(100%-2rem)]
can constrain the modal on narrow screens (this affects the schedule modal when
adminMobileFullscreen={false}).
---
Outside diff comments:
In `@src/components/admin/schedule/general/ScheduleItem.tsx`:
- Line 1: Prettier formatting failed for ScheduleItem.tsx; run the project's
formatter to fix style issues (e.g., run "pnpm format") and commit the updated
file so the import line (import { cn } from '`@/lib/cn`';) and the rest of
ScheduleItem component conform to Prettier rules; if your editor supports it,
also enable format-on-save or run Prettier directly against
src/components/admin/schedule/general/ScheduleItem.tsx to ensure the pipeline
passes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 86ba4bcd-ca86-4659-92a6-1bef64186401
📒 Files selected for processing (14)
.claude/settings.local.jsonsrc/components/admin/layout/LNB.tsxsrc/components/admin/schedule/general/ScheduleItem.tsxsrc/components/admin/schedule/general/SchedulePageContent.tsxsrc/components/admin/schedule/modal/CreateGeneralScheduleForm.tsxsrc/components/admin/schedule/modal/CreateScheduleModal.tsxsrc/components/admin/schedule/modal/CreateSessionScheduleForm.tsxsrc/components/admin/schedule/modal/EditModalShell.tsxsrc/components/admin/schedule/modal/EditScheduleModal.tsxsrc/components/admin/schedule/modal/constants.tssrc/components/admin/schedule/session/SessionTabContent.tsxsrc/components/ui/dialog.tsxsrc/hooks/index.tssrc/hooks/useMediaQuery.ts
|
|
||
| return ( | ||
| <div className="flex min-w-0 flex-col gap-400 p-700"> | ||
| <div className="tablet:p-700 flex min-w-0 flex-col gap-400 p-400"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: 프로젝트의 Tailwind 설정 및 CSS에서 p-700, gap-700 등 확장된 spacing 토큰 정의 확인
# Tailwind config 파일 확인
fd -e js -e ts 'tailwind.config' --exec cat {}
# CSS 파일에서 `@theme` 지시어나 spacing 토큰 정의 확인
rg -n '`@theme`|--spacing-700|p-700' --type=css -C3
# globals.css나 메인 스타일 파일 확인
fd 'globals.css' --exec cat {}Repository: Team-Weeth/weeth-client
Length of output: 23988
spacing 토큰 범위(가이드) 위반 여부 확인 필요
src/app/globals.css의 @theme inline에 --spacing-700: 32px가 정의되어 있어 tablet:p-700은 유효한 클래스입니다. 다만 코딩 가이드의 padding 토큰 범위(p-100~500)를 벗어나므로 tablet:p-700 사용 의도가 맞는지 확인하고(32px 필요 여부) 가능하면 p-500 이하 토큰으로 조정이 필요합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/admin/schedule/general/SchedulePageContent.tsx` at line 102,
The div in SchedulePageContent.tsx uses the class token "tablet:p-700" which is
outside the project's padding token guideline (allowed p-100..p-500); confirm
whether the 32px padding from --spacing-700 is intentionally required for this
element, and if not replace "tablet:p-700" with an appropriate in-range token
such as "tablet:p-500" (or another p-100..p-500 value) in the className string;
if the 700 value is intentional, add an inline comment near the div or a short
justification in the PR explaining why the exception is needed.
| export const SCHEDULE_MODAL_CONTENT_CLASS = | ||
| 'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
토큰 우선 규칙에 맞게 임의값(calc) 클래스 정리가 필요합니다.
max-h-[calc(100%-2rem)], max-w-[calc(100%-2rem)]는 하드코딩된 임의값입니다. 이 파일은 공용 상수화 지점이므로 토큰 클래스 우선으로 정리하거나, 토큰이 없다면 먼저 토큰 추가 합의를 거치는 편이 안전합니다.
As per coding guidelines: "Always use design token classes first; no hardcoded values. Ask user before adding new tokens".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/admin/schedule/modal/constants.ts` around lines 1 - 2,
SCHEDULE_MODAL_CONTENT_CLASS uses hardcoded calc classes
(max-h-[calc(100%-2rem)], max-w-[calc(100%-2rem)]) which violates the
token-first rule; update the constant to use existing design token classes for
max-height and max-width (replace those calc classes with the appropriate token
class names) and if no suitable tokens exist, do not hardcode new values—raise a
proposal/PR to add modal size tokens and then reference those new token classes
in SCHEDULE_MODAL_CONTENT_CLASS.
소형 화면에서 모달 가로 오버플로가 발생할 수 있습니다.
min-w-90가 max-w-[calc(100%-2rem)]보다 커지는 뷰포트(예: 360px/375px)에서는 최소 너비가 우선되어 모달이 화면을 벗어납니다. adminMobileFullscreen={false}를 쓰는 스케줄 모달 전반에 영향이 있습니다.
🔧 제안 수정안
export const SCHEDULE_MODAL_CONTENT_CLASS =
- 'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0';
+ 'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] tablet:min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const SCHEDULE_MODAL_CONTENT_CLASS = | |
| 'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0'; | |
| export const SCHEDULE_MODAL_CONTENT_CLASS = | |
| 'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] tablet:min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0'; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/admin/schedule/modal/constants.ts` around lines 1 - 2, The
modal can overflow on small viewports because SCHEDULE_MODAL_CONTENT_CLASS
includes min-w-90 which can be larger than max-w-[calc(100%-2rem)]; update the
class string used by SCHEDULE_MODAL_CONTENT_CLASS to remove or replace min-w-90
with a non-blocking value (e.g., min-w-0 or remove the min-w utility) so the
max-w-[calc(100%-2rem)] can constrain the modal on narrow screens (this affects
the schedule modal when adminMobileFullscreen={false}).
nabbang6
left a comment
nabbang6
left a comment
There was a problem hiding this comment.
확인햇습니다~!!! 어드민 페이지들 쭉 반응형으로 꽃단장시켜주니 예쁘고 좋네용...b
3 participants
✅ PR 유형
어떤 변경 사항이 있었나요?
변경, 변수명 변경)
📌 관련 이슈번호
✅ Key Changes
useMediaQuery훅 추가 —useSyncExternalStore기반SSR-safe 미디어 쿼리 구독 훅 신규 작성,
src/hooks/index.ts에 re-exportLNB가 기본으로 접힌 상태로 시작하도록
useMediaQuery와useEffect로 동기화너비 처리,
ScheduleItem액션 버튼 모바일 세로 스택,아이템/카드 패딩·간격 반응형 조정
min-w-90/max-h-[calc(100%-2rem)]추가로 소형 화면에서 모달이뷰포트를 벗어나는 현상 해소
min-h-0추가로 flexbox overflow shrink 허용, footer에shrink-0추가로 스크롤 영역에 footer가 밀려나지 않도록수정
DialogContentadminMobileFullscreenprop 추가 —admin 스코프 모바일 전체화면 전환을 인스턴스별로 제어할 수
있도록 옵션화 (기본값
true로 기존 동작 유지)SCHEDULE_MODAL_CONTENT_CLASS/SCHEDULE_MODAL_FOOTER_CLASS상수를modal/constants.ts로분리해 중복 제거
📸 스크린샷 or 실행영상
스케줄 페이지
https://github.com/user-attachments/assets/cc5feafd-203c-4ce7-9de6-0522c6c755a6
모달
https://github.com/user-attachments/assets/92aad233-b02e-4c22-8567-17ee1dad8558
🎸 기타 사항 or 추가 코멘트
게시판 페이지는 이미 반응형 적용 돼 있어서 그냥 뒀습니당!
▎ pnpm format:check 전체 실행 시 456개 파일 경고가 있으나,
▎ 이번 브랜치와 무관한 기존 문제입니다.
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항