[Design/#394] 타임라인/워크스페이스/설정/알림 tablet/Desktop/mobile 반응형 - #395
Conversation
|
Warning Review limit reached
Next review available in: 42 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough설정, 타임라인, 워크스페이스 화면과 관련 모달에 태블릿 반응형 스타일을 적용했습니다. 태블릿에서 요소를 세로 배치하고, 입력 영역과 버튼의 전체 너비 사용을 조정했습니다. 텍스트 줄바꿈과 상태 라벨 잘림도 수정했습니다. Changes설정 화면 반응형 조정
타임라인 반응형 조정
워크스페이스 반응형 조정
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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 |
📚 Storybook 배포 완료
|
![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
🤖 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 `@src/components/timeline/TimelinePerformancePanel.tsx`:
- Around line 314-320: Update the KPI card wrapper section in the metrics
mapping to use a flex display while retaining full width, gap, and tablet
wrapping; keep the child metric card classes unchanged so their existing flex
sizing produces the intended two-column tablet layout.
In `@src/components/workspace/MemberItem.tsx`:
- Line 78: Update the className on the div in MemberItem so the responsive
utility is written as the single class tablet:justify-end, removing the space
that currently separates tablet: from justify-end while preserving the other
classes.
In `@src/pages/setting/Setting.tsx`:
- Around line 734-737: Update the button container near the Setting component’s
action buttons so tablet layouts use flex-col instead of
tablet:flex-col-reverse, keeping the visual and DOM/tab order aligned with the
save button before the destructive 회원 탈퇴 button. Preserve the desktop ordering
behavior via existing order utilities if needed, and maintain semantic button
accessibility.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e1269671-118a-4bda-8e23-13cd0c5bfb1a
📒 Files selected for processing (22)
src/components/setting/NotificationSection.tsxsrc/components/setting/PasswordSection.tsxsrc/components/setting/ProfileSection.tsxsrc/components/setting/ProfileSectionSkeleton.tsxsrc/components/setting/WithdrawConfirmModal.tsxsrc/components/sidebar/LogoutConfirmModal.tsxsrc/components/timeline/TimelineBar.tsxsrc/components/timeline/TimelineCreateModal.tsxsrc/components/timeline/TimelineGrid.tsxsrc/components/timeline/TimelinePerformancePanel.tsxsrc/components/timeline/TimelinePeriodSelector.tsxsrc/components/timeline/TimelineStatusLegend.tsxsrc/components/timeline/skeleton/TimelineSkeleton.tsxsrc/components/workspace/InviteMemberModal.tsxsrc/components/workspace/MemberItem.tsxsrc/components/workspace/MemberList.tsxsrc/components/workspace/PermissionTable.tsxsrc/components/workspace/TransferOwnerModal.tsxsrc/pages/dashboard/timeline/Timeline.tsxsrc/pages/setting/Setting.tsxsrc/pages/workspace/Workspace.tsxsrc/pages/workspace/WorkspaceSetting.tsx
2 participants
🚨 관련 이슈
Closed #394
✨ 변경사항
✏️ 작업 내용
담당 파트(워크스페이스/타임라인/설정/알림)에서
tablet:(≤1280) 기준 반응형을 적용했습니다.모바일은 사이드바 개편 없이 가능한 범위(패딩·스택·줄바꿈·truncate 등)만 반영했습니다.
사이드바가 화면에서 많이 차지해 작업이 바로 어려워서, 추후 사이드바 반응형 작업 완료 후에 담당페이지들 필요한 추가 모바일 반응형 작업 진행할 예정입니다.
타임라인
/timeline툴바·생성 버튼·보기 단위를 tablet에서 세로 스택으로 정리grid-cols-2+grid-mobile-1truncate처리bg-surface-200/min-h-full)워크스페이스
break-keep설정/알림
p-8로 통일fullWidth세로 스택😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
tablet:기준.mobile:variant는 추가하지 않았고 기존grid-mobile-1/break-keep컨벤션에 맞춰 진행하였습니다.Summary by CodeRabbit