[Fix]: ThemeProvider 패키지 이동, 불필요 배럴 파일 정리

[minseong0324]

관련 이슈

close: #75

변경 사항

ThemeProvider를 @repo/theme/provider로 이동하고, 불필요한 배럴 파일을 정리했어요.

추가적으로, dependencies, devDependencies를 구분했어요.

레퍼런스

Summary by CodeRabbit

릴리즈 노트

• 새로운 기능

  • Next.js 애플리케이션의 실험적 스크롤 복원 기능 추가
  • SVG 파일 처리를 위한 새로운 웹팩 구성 도입
  • 테마 제공자 모듈의 접근성 향상
  • 새로운 테마 토큰 및 변수의 세분화된 내보내기 방식 도입

• 의존성 업데이트

  • Vanilla Extract CSS 및 Recipes 라이브러리 추가
  • 테마 및 UI 패키지의 내부 모듈 구조 개선

• 테마 관리

  • 테마 관련 모듈의 경로 재구성

이러한 변경 사항은 애플리케이션의 스타일링, 테마 관리, 및 구성 옵션을 개선합니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

워크스루

이 풀 리퀘스트는 테마 및 구성 관리를 위한 광범위한 리팩토링을 포함합니다. Next.js 애플리케이션의 구성이 업데이트되고, @repo/theme 패키지의 내보내기 구조가 재구성되었습니다. ThemeProvider의 위치가 변경되었으며, 토큰 및 테마 관련 파일들의 import 경로와 내보내기 방식이 세분화되었습니다.

변경 사항

파일	변경 요약
apps/web/next.config.mjs	SVG 로더 및 스크롤 복원 기능을 위한 Webpack 구성 추가
apps/web/package.json	Vanilla Extract CSS 관련 의존성 추가
apps/web/src/components/Providers/Providers.tsx	ThemeProvider import 경로 변경
packages/theme/*	토큰, 테마, 스프링클스 관련 내보내기 구조 재구성
packages/ui/*	새로운 export 경로 및 의존성 추가

평가 대상 이슈

목표	해결 여부	설명
ThemeProvider 패키지 이동	✅
불필요한 배럴 파일 정리	✅

관련 가능성 있는 PR

• [Feat]: theme 패키지 생성 #36: 테마 패키지의 esbuild 구성 파일 추가
• [Feat] pnpm workspace 추가 #42: 웹 애플리케이션의 @repo/theme 의존성 추가
• [Fix]: theme, ui 패키지의 vanilla-extract 빌드 설정 수정 #44: Next.js 구성에 Vanilla Extract 플러그인 통합

제안된 레이블

enhancement

제안된 리뷰어

• kongnayeon

시

🐰 테마의 춤, 코드의 노래
리팩토링 바람 불어와
구조 깨끗이 다듬으니
우리의 앱은 빛나네
🌈✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5aefb14 and 542df44.

📒 Files selected for processing (1)

• packages/ui/package.json (2 hunks)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/theme/src/tokens/tokens.ts (1)

1-11: 토큰 통합이 잘 구현되었습니다!

모든 디자인 토큰을 하나의 객체로 통합한 것은 좋은 접근 방식입니다. 다만, 향후 확장성을 고려하여 JSDoc 문서화를 추가하면 좋을 것 같습니다.

예시:

+/**
+ * 전역 디자인 토큰
+ * @property {ColorsType} colors - 색상 토큰
+ * @property {RadiusType} radius - 테두리 반경 토큰
+ * @property {SpacingType} spacing - 간격 토큰
+ * @property {TypographyType} typography - 타이포그래피 토큰
+ */
 export const tokens = {
   colors,
   radius,
   spacing,
   typography,
 } as const;

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7e20960 and 21e3243.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (21)

• apps/web/next.config.mjs (1 hunks)
• apps/web/package.json (2 hunks)
• apps/web/src/components/Providers/Providers.tsx (1 hunks)
• packages/theme/package.json (1 hunks)
• packages/theme/src/index.ts (1 hunks)
• packages/theme/src/sprinkles/index.ts (0 hunks)
• packages/theme/src/sprinkles/sprinkles.css.ts (1 hunks)
• packages/theme/src/themes/contract.ts (1 hunks)
• packages/theme/src/themes/dark.ts (1 hunks)
• packages/theme/src/themes/index.ts (0 hunks)
• packages/theme/src/themes/light.ts (1 hunks)
• packages/theme/src/themes/themes.css.ts (1 hunks)
• packages/theme/src/tokens/colors.ts (1 hunks)
• packages/theme/src/tokens/index.ts (0 hunks)
• packages/theme/src/tokens/radius.ts (1 hunks)
• packages/theme/src/tokens/spacing.ts (1 hunks)
• packages/theme/src/tokens/tokens.ts (1 hunks)
• packages/theme/src/tokens/typography.ts (1 hunks)
• packages/ui/package.json (2 hunks)
• packages/ui/src/provider/ThemeProvider/ThemeProvider.tsx (1 hunks)
• packages/ui/src/provider/index.ts (1 hunks)

💤 Files with no reviewable changes (3)

• packages/theme/src/sprinkles/index.ts
• packages/theme/src/themes/index.ts
• packages/theme/src/tokens/index.ts

✅ Files skipped from review due to trivial changes (6)

• packages/ui/src/provider/index.ts
• packages/theme/src/sprinkles/sprinkles.css.ts
• packages/theme/src/themes/light.ts
• packages/theme/src/themes/dark.ts
• packages/theme/src/themes/contract.ts
• packages/ui/src/provider/ThemeProvider/ThemeProvider.tsx

🔇 Additional comments (15)

apps/web/next.config.mjs (2)

7-9: 실험적 기능 사용에 대한 검토 필요

scrollRestoration 기능은 실험적 기능으로 분류되어 있습니다. 프로덕션 환경에서 사용하기 전에 안정성 검증이 필요합니다.

---

10-16: SVG 로더 설정이 적절합니다

SVG 파일 처리를 위한 웹팩 설정이 올바르게 구성되어 있습니다.

packages/theme/package.json (1)

28-28: 의존성 위치 변경이 적절합니다

@vanilla-extract/next-plugin을 devDependencies로 이동한 것은 올바른 결정입니다. 이 패키지는 빌드 시에만 필요하고 런타임에는 필요하지 않기 때문입니다.

apps/web/package.json (1)

21-21: vanilla-extract 의존성 위치 검토 필요

@vanilla-extract/recipes가 devDependencies에 있는데, 이는 런타임에 필요한 패키지일 수 있습니다. CSS-in-JS 도구의 특성상 프로덕션 환경에서도 필요할 수 있으므로, 의존성 위치를 검토해 주세요.

Also applies to: 32-32

packages/ui/package.json (2)

13-14: 모듈 내보내기 구조가 개선되었습니다

provider와 hooks를 별도의 경로로 내보내도록 구성한 것은 좋은 접근입니다. 이를 통해 더 효율적인 트리쉐이킹이 가능해집니다.

---

31-33: 의존성 구성이 적절합니다

vanilla-extract 관련 패키지들이 dependencies에 올바르게 추가되었습니다. 이는 UI 컴포넌트의 스타일링에 필수적인 런타임 의존성이기 때문입니다.

packages/theme/src/tokens/radius.ts (1)

9-10: 타입 정의가 잘 구현되었습니다!

radius 상수로부터 타입을 추출하는 방식이 적절하며, 다른 토큰 파일들과 일관된 패턴을 따르고 있습니다.

packages/theme/src/tokens/spacing.ts (1)

14-15: 타입 정의가 일관성있게 구현되었습니다!

spacing 상수에 대한 타입 정의가 다른 토큰 파일들과 동일한 패턴을 따르고 있어 일관성이 잘 유지되었습니다.

packages/theme/src/tokens/tokens.ts (1)

13-13: 타입 정의가 적절합니다!

tokens 객체로부터 타입을 추출하는 방식이 일관성있게 적용되었습니다.

packages/theme/src/tokens/typography.ts (1)

17-18: 타입 정의가 체계적으로 구현되었습니다!

typography 상수에 대한 타입 정의가 다른 토큰 파일들과 동일한 패턴을 따르고 있으며, 중첩된 객체 구조도 잘 반영되어 있습니다.

packages/theme/src/themes/themes.css.ts (1)

8-8: 타입 선언 추가 적절합니다!

VarsType 타입 선언 추가로 테마 변수들의 타입 안정성이 향상되었습니다.

apps/web/src/components/Providers/Providers.tsx (1)

3-3: ThemeProvider 임포트 경로 변경 검증 필요

ThemeProvider의 임포트 경로가 @repo/theme에서 @repo/ui/provider로 변경되었습니다. 다른 파일들에서도 이 변경사항이 일관되게 적용되었는지 확인이 필요합니다.

✅ Verification successful

ThemeProvider 임포트 경로 변경이 확인되었습니다

코드베이스 전체 검사 결과, ThemeProvider는 @repo/ui/provider에서 올바르게 내보내지고 있으며, 이를 사용하는 모든 파일에서 새로운 임포트 경로가 일관되게 적용되어 있습니다. 추가 수정이 필요하지 않습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# ThemeProvider 임포트 사용 검색
rg "import.*ThemeProvider.*from.*@repo/(theme|ui)"

Length of output: 151

---

Script:

#!/bin/bash
# Search for any mention of ThemeProvider
rg "ThemeProvider" -A 2

Length of output: 1519

packages/theme/src/index.ts (1)

1-18: 배럴 파일 구조 변경에 따른 영향도 검토 필요

배럴 파일에서 명시적인 named export로의 변경은 코드 구조를 개선하지만, 다음 사항들을 고려해야 합니다:

1. 기존 임포트 구문에 영향을 줄 수 있으므로 관련 파일들의 수정이 필요할 수 있습니다.
2. 각 카테고리별로 잘 구조화되어 있어 가독성이 향상되었습니다.

✅ Verification successful

배럴 파일 구조 변경 검증 완료

코드베이스 검토 결과, 현재 모든 임포트가 named export 방식을 사용하고 있어 이번 구조 변경으로 인한 호환성 문제가 없음을 확인했습니다. 기존 임포트 구문이 새로운 export 구조와 일치하므로 추가 수정이 필요하지 않습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 기존 배럴 임포트 사용 검색
rg "import.*from.*@repo/theme"

Length of output: 1023

packages/theme/src/tokens/colors.ts (2)

51-52: 타입 선언 추가 적절합니다!

ColorsType 타입 선언 추가로 색상 상수의 타입 안정성이 향상되었습니다.

---

Line range hint 2-4: 삭제 예정인 색상 정리 필요

green100부터 green400까지의 색상이 삭제 예정으로 표시되어 있습니다. 이 색상들이 현재 사용되고 있는지 확인하고, 사용되지 않는다면 제거하는 것이 좋겠습니다.

[kongnayeon]

민성 님 고생 많으셨습니다!! 🥹