QA: 수정된 레이아웃 반영#190
Merged
Merged
Conversation
Closed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough전역 스타일에서 mainLayout를 제거하고 maxWidth를 1200px로 상향하면서 관련 컴포넌트들이 maxWidth를 참조하도록 정리했습니다. 서브 페이지 및 네비게이션/푸터 컨테이너의 최대 너비와 정렬을 조정했고, 일부 파일은 포매팅만 변경되었습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ 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/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
This pull request (commit
|
🚀 Storybook 배포📖 Storybook: https://683d91ab23651aa0b399e435-vatuydphzm.chromatic.com/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
app/(sub)/capsule-detail/[invite-code]/[id]/page.css.ts (1)
8-10: 컨테이너 센터링 정착 OK. 가터/폭 일관성을 위해 width 추가와 값 통일 제안
- 현재 maxWidth(90rem) + margin: 0 auto로 센터링은 되지만, 레이아웃 전역에서 사용하는 패턴과 일치시키려면 width: "100%"를 추가하는 편이 안전합니다(다른 컨테이너들과의 일관성 및 예기치 않은 shrink-to-fit 방지).
- 같은 PR의 responsive-footer(md)에서 width를 calc(90rem - 3.4rem)로 계산하고 있는데, 본 컨테이너는 padding이 좌우 1.6rem(총 3.2rem)입니다. 3.4rem과 3.2rem이 섞이면 미세한 어긋남이 생길 수 있어 값 통일을 권장드립니다.
아래처럼 width를 추가하고, 이후 footer 쪽에서도 3.2rem로 통일하는 방향을 검토해주세요.
export const container = style({ display: "flex", flexDirection: "column", gap: "1.6rem", margin: "0 auto", maxWidth: "90rem", + width: "100%", padding: "0 1.6rem", });app/(main)/layout.tsx (1)
1-1: maxWidth만으로는 좌우 중앙 정렬/가터가 보장되지 않습니다 — 공용 컨테이너 유틸로 보완 제안
- 현재 maxWidth는 { maxWidth: "1200px", width: "100%" }만 제공하므로 중앙 정렬(margin: 0 auto)과 기본 가터(padding 좌우 1.6rem)가 적용되지 않을 수 있습니다. 메인 라우팅 전반의 정렬/여백 일관성을 위해 공용 "centered" 또는 "container" 유틸 클래스를 만들어 함께 적용하는 것을 권장합니다.
- 디자인 가이드가 “메인”과 “서브”를 헤더 기준으로 구분한다고 하셨으니, 메인 레이아웃에서만 해당 유틸을 결합하는 식으로 운용하면 됩니다.
예시(diff: 본 파일), 그리고 global.css.ts에 보강할 유틸 예시(참고 코드):
- import { maxWidth } from "@/shared/styles/base/global.css"; + import { maxWidth, centered } from "@/shared/styles/base/global.css"; ... - <div className={maxWidth}> + <div className={`${maxWidth} ${centered}`}> <NavbarMain /> {children} </div>global.css.ts(참고 코드):
export const centered = style({ margin: "0 auto", padding: "0 1.6rem", });메인 페이지 몇 곳에서 실제로 중앙 정렬/가터가 적용되는지 시각 확인 부탁드립니다(넓은 해상도와 모바일 모두).
Also applies to: 7-7
shared/ui/navbar/navbar-detail/navbar-detail.css.ts (1)
15-15: 서브 상세 네비 폭(120rem)과 본문 컨테이너 폭(90rem) 불일치 — 의도 확인 필요
- 현재 서브 페이지 본문은 90rem(maxWidth) 기준이고, NavbarDetail은 120rem로 더 넓습니다. 의도된 디자인(헤더는 더 넓고 본문은 좁게)이라면 OK입니다. 아니라면 서브 영역에서는 네비도 90rem에 맞춰 정렬해야 좌우 경계선이 일치합니다.
- 단위도 global은 px(1200px), 여기서는 rem(120rem)으로 혼재되어 있습니다. 한쪽으로 통일(rem 권장)을 고려해주세요.
선택지:
- 의도된 디자인: 그대로 유지.
- 본문과 정렬 일치: maxWidth를 "90rem"로 조정.
- 단위 통일: global.css.ts의 1200px → "120rem"로 변경 또는 본 파일을 px로 맞춤(전자는 반응형/접근성 측면에서 추천).
app/(sub)/capsule-detail/_components/responsive-footer/responsive-footer.css.ts (1)
14-16: md 구간에서 고정 폭 계산식 개선 제안(오버플로우 및 가터 불일치 가능성)
- width: calc(90rem - 3.4rem)는 브레이크포인트(screen.md)가 90rem 미만일 경우(프로젝트 토큰 정의에 따라) 뷰포트보다 넓어질 수 있어 수평 스크롤/잘림이 생길 수 있습니다.
- 상단 page 컨테이너의 가터는 좌우 1.6rem(총 3.2rem)인데, 여기서는 3.4rem로 달라 미세한 어긋남이 발생할 수 있습니다.
보다 견고한 폭 계산으로 아래 중 하나를 권장합니다(가터 3.2rem 기준):
...screen.md({ position: "fixed", bottom: "7rem", - left: "50%", - transform: "translateX(-50%)", - width: "calc(90rem - 3.4rem)", + left: "50%", + transform: "translateX(-50%)", + width: "100%", + maxWidth: "calc(90rem - 3.2rem)", flexDirection: "row",또는 CSS 함수 사용:
width: "min(calc(100vw - 3.2rem), 90rem)"md 기준이 90rem 이상인지도 함께 확인 부탁드립니다. 아니라면 위 개선이 특히 유효합니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
app/(main)/layout.tsx(1 hunks)app/(sub)/capsule-detail/[invite-code]/[id]/page.css.ts(1 hunks)app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx(1 hunks)app/(sub)/capsule-detail/_components/responsive-footer/responsive-footer.css.ts(1 hunks)shared/styles/base/global.css.ts(0 hunks)shared/ui/navbar/navbar-detail/navbar-detail.css.ts(1 hunks)
💤 Files with no reviewable changes (1)
- shared/styles/base/global.css.ts
🧰 Additional context used
🧬 Code graph analysis (2)
app/(main)/layout.tsx (1)
shared/styles/base/global.css.ts (1)
maxWidth(50-53)
app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx (1)
shared/utils/date.ts (1)
formatDateTime(58-68)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test
- GitHub Check: storybook-deploy
- GitHub Check: deploy
🔇 Additional comments (1)
app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx (1)
124-143: 서브 섹션을 컨테이너로 감싸며 폭/가터 일관화한 점 좋습니다
- RevealMotion/InfoTitle/CapsuleImage/섹션 구성이 기존 로직을 유지하면서 레이아웃만 정리된 것으로 보입니다. 변경 취지에 부합하고 부작용 없어 보입니다.
Member
|
좋습니다~👍 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
📌 Summary
📚 Tasks
👀 To Reviewer
main, sub는 상단 헤더 기준으로 나눠놓은거라 그대로 유지해야될 것 같습니다~!
Summary by CodeRabbit