Conversation
Walkthrough이번 변경에서는 전체적으로 글로벌 스타일 시스템과 테마 구조를 재정비하고, 내비게이션 컴포넌트와 스프링클 애니메이션 UI를 추가했으며, Storybook 및 VSCode 설정, 테스트 코드, 타입 선언 등 개발 환경도 개선되었습니다. 또한, 기존 About 페이지를 제거하고, 메인 레이아웃 및 라우팅 구조를 확장했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NavHome
participant NextRouter
User->>NavHome: 햄버거 메뉴 버튼 클릭
NavHome->>NavHome: isMenuOpen 상태 토글
NavHome-->>User: 메뉴 오픈/클로즈 UI 반영
User->>NavHome: 메뉴 내 링크 클릭
NavHome->>NextRouter: Link를 통한 라우팅
NavHome->>NavHome: isMenuOpen=false로 메뉴 닫기
sequenceDiagram
participant App
participant SprinkleContainer
participant motion
App->>SprinkleContainer: 컴포넌트 렌더링
SprinkleContainer->>motion: 각 dot에 애니메이션 적용
motion-->>SprinkleContainer: fade-in/out 반복 애니메이션
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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). (2)
✨ 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. 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)
Other keywords and placeholders
Documentation and Community
|
🚀 Storybook 배포📖 Storybook: https://683d91ab23651aa0b399e435-liomxrkacb.chromatic.com/ |
|
This pull request (commit
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 21
♻️ Duplicate comments (2)
app/explore/page.tsx (1)
5-8: 중복 레이아웃/스타일 추출 권장
app/my/page.tsx코멘트 참고.app/setting/page.tsx (1)
5-8: 중복 레이아웃/스타일 추출 권장
app/my/page.tsx코멘트 참고.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlshared/assets/svgs/search.svgis excluded by!**/*.svg
📒 Files selected for processing (24)
.storybook/main.ts(1 hunks).storybook/preview.tsx(1 hunks).vscode/settings.json(1 hunks)app/about/page.tsx(0 hunks)app/explore/page.tsx(1 hunks)app/layout.tsx(2 hunks)app/my/page.tsx(1 hunks)app/page.tsx(1 hunks)app/setting/page.tsx(1 hunks)package.json(2 hunks)shared/styles/base/global.css.ts(1 hunks)shared/styles/tokens/color.css.ts(0 hunks)shared/styles/tokens/color.ts(1 hunks)shared/styles/tokens/index.ts(1 hunks)shared/styles/tokens/screen.ts(1 hunks)shared/styles/tokens/text.ts(2 hunks)shared/styles/tokens/z-index.ts(1 hunks)shared/ui/button/Button.stories.ts(1 hunks)shared/ui/nav-home/nav-home.css.ts(1 hunks)shared/ui/nav-home/nav-home.tsx(1 hunks)shared/ui/sprinkle-container/sprinkle-container.css.ts(1 hunks)shared/ui/sprinkle-container/sprinkle-container.stories.tsx(1 hunks)shared/ui/sprinkle-container/sprinkle-container.tsx(1 hunks)tests/example.spec.ts(1 hunks)
💤 Files with no reviewable changes (2)
- app/about/page.tsx
- shared/styles/tokens/color.css.ts
🧰 Additional context used
🧬 Code Graph Analysis (4)
shared/ui/sprinkle-container/sprinkle-container.stories.tsx (1)
shared/styles/tokens/color.ts (1)
colorTheme(1-62)
app/layout.tsx (1)
shared/styles/base/global.css.ts (1)
rootStyle(28-37)
shared/ui/nav-home/nav-home.tsx (1)
shared/utils/cn.ts (1)
cn(3-5)
shared/styles/base/global.css.ts (1)
shared/styles/tokens/color.ts (1)
colorTheme(1-62)
🪛 GitHub Check: build
shared/ui/nav-home/nav-home.tsx
[failure] 3-3:
Cannot find module '@/shared/assets/svgs/search.svg' or its corresponding type declarations.
🪛 GitHub Actions: Build Check
shared/ui/nav-home/nav-home.tsx
[error] 3-3: TypeScript error TS2307: Cannot find module '@/shared/assets/svgs/search.svg' or its corresponding type declarations.
⏰ 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). (1)
- GitHub Check: test
🔇 Additional comments (17)
.vscode/settings.json (1)
3-4: 자동 저장 시 Biome 포맷팅 설정 – 팀 합의 및 성능 확인 권장현재 .vscode/settings.json에 아래 옵션이 항상 적용되도록 설정되어 있습니다:
"source.organizeImports.biome": "always", "source.fixAll.biome": "always"
- 프로젝트에 Prettier 설정 파일이나
package.json내 Prettier 키가 없어 다른 포매터와 충돌 가능성은 낮습니다.- 다만, 대용량 파일 편집 후 저장 시 자동 포맷으로 인한 지연이 발생할 수 있으니 실제 대형 파일에서 성능 저하 여부를 확인해 주세요.
- 팀 전체가 Biome을 유일한 포맷터로 사용하는 것에 동의했는지도 함께 검토 부탁드립니다.
tests/example.spec.ts (1)
1-8: E2E 테스트 공백 발생, 회복 계획 필요
About페이지 제거로 테스트를 전부 주석 처리했습니다. 당장은 빌드 통과용으로 이해되지만, E2E 커버리지가 0%가 됩니다.
- 새로 추가된 홈·Explore·My·Setting 페이지 중 최소 1-2개에 대해 smoke test를 빠르게 만들어 두는 편이 좋습니다.
- Playwright fixture만 남겨 두고
test.skip()으로 관리하면 CI 이탈 없이 추후 복구가 수월합니다..storybook/preview.tsx (1)
3-5:@/경로 별칭이 Storybook 빌드에서 인식되는지 확인하세요Next.js 앱에선
paths설정으로 동작하지만, Storybook은 별도로 alias를 주입해야 합니다. 로컬에서 Storybook 실행 시Module not found: Error: Can't resolve '@/shared/styles/...가 발생하지 않는지 확인이 필요합니다. 필요한 경우.storybook/main.ts에 아래와 같이 alias를 추가하세요.import path from "path"; webpackFinal: async (config) => { config.resolve ??= {}; config.resolve.alias ??= {}; config.resolve.alias["@"] = path.resolve(__dirname, "../"); /* 기존 VanillaExtractPlugin... */ return config; };shared/ui/button/Button.stories.ts (1)
8-9: 스토리 그룹 변경 확인 완료스토리북 상단 트리 정리가 목적이라면 LGTM입니다. 기존 링크 경로가 깨지지 않는지만 한번 더 확인해 주세요.
.storybook/main.ts (1)
8-8: Docs 애드온 추가 👍
@storybook/addon-docs추가로 컴포넌트 문서화가 가능해졌습니다. MDX 스토리 렌더링에 필요한@mdx-js/react등이 peer dependency로 요구될 수 있으니 빌드 로그를 한번 체크해 주세요.package.json (2)
26-26:motion패키지 추가 시 번들 크기 검토 필요
motion(Framer Motion) 은 기능이 풍부한 대신 번들 크기가 상당합니다. 페이지 단위 애니메이션에만 일부 API가 필요하다면import { m } from "motion"등 tree-shaking 이 가능한 경로를 사용하고, 불필요한 전역 import를 피해주세요.빌드 후
next build --profile로motion모듈 크기를 확인해 보시길 권장합니다.
38-40: Storybook 9 +@storybook/addon-docs버전 호환성 확인
현재 core(storybook),@storybook/nextjs,@storybook/addon-docs를 모두 9.x 로 맞춰두셨지만, 9 beta 단계에서는 마이너 버전 간 깨지는 경우가 있습니다. CI 에서storybook build가 통과하는지 한 번 더 확인해주세요.shared/styles/tokens/index.ts (1)
1-4: 좋은 디자인 토큰 구조입니다.barrel export 패턴을 사용하여 디자인 토큰에 대한 중앙화된 접근점을 제공하는 것은 모범 사례입니다. 모듈화된 구조로 유지보수성이 향상됩니다.
shared/styles/tokens/screen.ts (1)
3-21: 미디어 쿼리 헬퍼 함수가 잘 구현되었습니다.
as const사용으로 타입 안전성이 확보되었고, 반응형 스타일링을 위한 깔끔한 API를 제공합니다.app/layout.tsx (1)
7-9: 글로벌 CSS 임포트 순서가 적절합니다.reset.css → global.css 순서로 임포트하여 스타일 적용 우선순위가 올바르게 설정되었습니다.
shared/ui/sprinkle-container/sprinkle-container.stories.tsx (2)
6-32: 잘 구성된 Storybook 스토리입니다.적절한 메타데이터 설정, 컴포넌트 설명, 그리고 전체 뷰포트를 활용한 데코레이터를 통해 SprinkleContainer 컴포넌트를 효과적으로 시연하고 있습니다. 새로운 디자인 토큰 시스템과의 연동도 잘 되어 있습니다.
13-15: 한국어 컴포넌트 설명이 유용합니다.개발자들이 컴포넌트의 목적을 명확히 이해할 수 있도록 도와주는 좋은 문서화입니다.
shared/styles/base/global.css.ts (1)
1-37: 글로벌 스타일 구조가 잘 설계되었습니다.CSS 변수 사용, 색상 테마 통합, 반응형 고려사항이 모두 잘 적용되었습니다.
100dvh사용으로 모바일 뷰포트 이슈도 적절히 해결했습니다.shared/ui/nav-home/nav-home.css.ts (4)
1-7: 의존성 구조가 잘 정리되어 있습니다.토큰 기반 스타일 시스템을 잘 활용하고 있어 일관성 있는 디자인을 유지할 수 있습니다.
22-41: 반응형 네비게이션 구조가 잘 설계되었습니다.모바일에서는 숨기고 중간 사이즈 이상에서 표시하는 패턴이 적절합니다.
55-73: 버튼 크기가 일관성 있게 설정되어 있습니다.44px 크기는 터치 인터페이스에 적합한 최소 크기를 만족합니다.
9-20: 네비게이션 바--max-width변수 정의 확인 완료확인 결과,
shared/styles/base/global.css.ts의:root전역 스타일에서
"--max-width": "1200px"로 정의되어 있어 별도 수정이 필요 없습니다.
|
This pull request (commit
|
|
This pull request (commit
|
|
This pull request (commit
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
shared/styles/tokens/z-index.ts (1)
1-5: z-index 값을 숫자로 변경해주세요이전 리뷰에서 지적된 것과 동일한 문제입니다. z-index 값을 문자열로 저장하면 숫자 연산 시 매번 파싱이 필요하고 타입 추론이 복잡해집니다.
- content: "99", + content: 99,
🧹 Nitpick comments (1)
.storybook/preview.tsx (1)
2-2: 경로 별칭 일관성을 위해 @/ 사용을 권장합니다.다른 임포트에서는
@/별칭을 사용하고 있는데, themeClass 임포트에서만 상대경로를 사용하고 있습니다. 프로젝트 전반의 일관성을 위해 별칭 사용을 고려해보세요.-import { themeClass } from "../shared/styles/base/theme.css"; +import { themeClass } from "@/shared/styles/base/theme.css";
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.storybook/preview.tsx(1 hunks)app/layout.tsx(2 hunks)shared/styles/base/global.css.ts(1 hunks)shared/styles/base/theme.css.ts(1 hunks)shared/styles/tokens/screen.ts(1 hunks)shared/styles/tokens/z-index.ts(1 hunks)shared/ui/nav-home/nav-home.css.ts(1 hunks)shared/ui/nav-home/nav-home.tsx(1 hunks)tests/example.spec.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- shared/styles/base/theme.css.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- tests/example.spec.ts
- shared/styles/tokens/screen.ts
- shared/ui/nav-home/nav-home.tsx
- app/layout.tsx
- shared/ui/nav-home/nav-home.css.ts
- shared/styles/base/global.css.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
.storybook/preview.tsx (1)
shared/styles/base/theme.css.ts (1)
themeClass(14-14)
⏰ 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: deploy
- GitHub Check: storybook-deploy
🔇 Additional comments (1)
.storybook/preview.tsx (1)
8-24: Storybook 설정이 잘 구성되어 있습니다.
- controls matchers 설정이 적절하고 표준적입니다
- themeClass decorator를 통한 전역 테마 적용이 올바르게 구현되었습니다
- TypeScript 타입 정의도 정확합니다
|
This pull request (commit
|
|
This pull request (commit
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
shared/ui/hamburger-menu-button/hamburger-menu-button.tsx (1)
11-35: 불필요한 Fragment 제거를 권장합니다.컴포넌트 로직과 조건부 스타일링은 잘 구현되어 있으나, 단일 요소만 반환하므로 Fragment가 불필요합니다.
다음과 같이 수정하는 것을 권장합니다:
- return ( - <> - {/* 메뉴버튼 클릭시 햄버거바 -> x버튼으로 rotate */} - <button className={styles.menuButtonStyle} {...props}> - <div className={styles.hamburgerIcon}> - <div - className={cn( - styles.hamburgerLineTop, - isMenuOpen ? styles.xIconTop : "", - )} - ></div> - <div - className={cn( - styles.hamburgerLineMiddle, - isMenuOpen ? styles.xIconMiddle : "", - )} - ></div> - <div - className={cn( - styles.hamburgerLineBottom, - isMenuOpen ? styles.xIconBottom : "", - )} - ></div> - </div> - </button> - </> - ); + return ( + // 메뉴버튼 클릭시 햄버거바 -> x버튼으로 rotate + <button className={styles.menuButtonStyle} {...props}> + <div className={styles.hamburgerIcon}> + <div + className={cn( + styles.hamburgerLineTop, + isMenuOpen ? styles.xIconTop : "", + )} + ></div> + <div + className={cn( + styles.hamburgerLineMiddle, + isMenuOpen ? styles.xIconMiddle : "", + )} + ></div> + <div + className={cn( + styles.hamburgerLineBottom, + isMenuOpen ? styles.xIconBottom : "", + )} + ></div> + </div> + </button> + );
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
shared/ui/hamburger-menu-button/hamburger-menu-button.css.ts(1 hunks)shared/ui/hamburger-menu-button/hamburger-menu-button.stories.tsx(1 hunks)shared/ui/hamburger-menu-button/hamburger-menu-button.tsx(1 hunks)shared/ui/nav-home/nav-home.css.ts(1 hunks)shared/ui/nav-home/nav-home.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- shared/ui/hamburger-menu-button/hamburger-menu-button.stories.tsx
- shared/ui/hamburger-menu-button/hamburger-menu-button.css.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- shared/ui/nav-home/nav-home.tsx
- shared/ui/nav-home/nav-home.css.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
shared/ui/hamburger-menu-button/hamburger-menu-button.tsx (1)
shared/utils/cn.ts (1)
cn(3-5)
⏰ 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: comment-pr
- GitHub Check: deploy
- GitHub Check: test
🔇 Additional comments (3)
shared/ui/hamburger-menu-button/hamburger-menu-button.tsx (3)
1-3: 임포트 구조가 깔끔합니다.필요한 의존성만 정확히 임포트하고 있으며, 타입 임포트와 유틸리티 임포트가 적절히 구분되어 있습니다.
5-7: 인터페이스 정의가 우수합니다.
HTMLAttributes<HTMLButtonElement>을 확장하여 button 요소의 모든 네이티브 속성을 지원하면서도 커스텀isMenuOpen프로퍼티를 추가한 것이 좋은 설계입니다.
9-37: 컴포넌트 구현이 견고합니다.props 스프레딩, 조건부 스타일링, 그리고 접근성을 고려한 구조가 잘 구현되어 있습니다.
cn유틸리티를 사용한 조건부 클래스 적용도 적절합니다.
|
This pull request (commit
|
|
엄청 많은 내용 반영하시느라 고생하셨습니다~!~! |
shared/styles/tokens/text.ts
Outdated
| sm: "(min-width: 345px)", | ||
| md: "(min-width: 800px)", | ||
| lg: "(min-width: 1200px)", | ||
| } as const; |
There was a problem hiding this comment.
이 screenBreakpoints 가 screen.ts에 있는 거랑 동일한 내용같은데 따로 constants에 빼서 관리하는거 어떤가요??
There was a problem hiding this comment.
향후 breakpoint 변경 시 파일하나만 수정하면되도록 screen.ts에서 관리하는 것이 응집성 측면에서 좋을 것 같다는 생각입니다! text.ts에서는 import하여 사용하도록 수정했습니다👍
|
This pull request (commit
|
2 participants
📌 Summary
📚 Tasks
👀 To Reviewer
⓵ breakpoint에 따른 screen token 추가
디자인 요구사항에 따른 breakpoint는 다음과 같습니다.
선언적으로 미디어쿼리 적용할 수 있게끔 screen token 추가했어요. 대부분의 페이지가 800이 기준이라, 아래와 같이
md(800px 이상)일 때 스타일을 적용해주시면 됩니다.⓶ 수정된 타이포/컬러 시스템 반영 및 폰트사이즈 반응형 대응
토큰 단에서 미디어쿼리를 적용하여 반응형 폰트 사이즈도 이미 반영해두었으니, 스타일 작성 시 폰트 반응형은 신경 쓰지 않으셔도 됩니다!
그라디언트 색상 종류가 많고 미세한 차이가 있으니, 적용 시 실제 색상과 맞는지 꼭 확인해주세요!
screen 토큰은 미디어 쿼리 함수가 포함되어 있어 createTheme에 포함시키기 어려워 별도로 export했습니다. 토큰 사용할 때 themevars import 후 사용할 토큰에 접근해서 사용하시면 될 것 같아요. (screen 토큰은 따로 import 필요)
⓷ sprinkle-container 컴포넌트 구현
⓸ nav-home 구현
스토리북, 테스트 코드 관련..
추가적인 설명이 필요한 부분 편하게 물어봐주세요!
Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
스타일
버그 수정
문서화
기타