refactor: use react catalog for efficient version management

[noahluftyang]

Changes

• use react catalog

Visuals

Checklist

• Have you written the functional specifications?
• Have you written the test code?

Additional Discussion Points

Summary by CodeRabbit

• Chores
  • React 및 관련 패키지의 버전 관리를 위해 모든 패키지에서 명시적 버전 대신 카탈로그 참조("catalog:react")로 통일되었습니다.
  • 패키지 설정 파일 내 "files" 배열이 한 줄로 간소화되었습니다.
  • 워크스페이스 설정에 React 관련 패키지 버전 그룹이 추가되어 관리가 일원화되었습니다.

[changeset-bot]

⚠️ No Changeset found

Latest commit: fdee970

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for side-design-system ready!

Name	Link
🔨 Latest commit	fdee970
🔍 Latest deploy log	https://app.netlify.com/projects/side-design-system/deploys/684273b32bc93700089da363
😎 Deploy Preview	https://deploy-preview-175--side-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

React 및 관련 타입 패키지의 버전 관리를 중앙화하기 위해 pnpm-workspace.yaml에 catalogs.react 항목을 추가하고, 각 패키지의 package.json에서 React 관련 의존성 버전을 "catalog:react"로 통일하였습니다. 또한, files 배열의 포맷을 단일 라인으로 정리하였습니다.

Changes

파일/경로 그룹	변경 요약
pnpm-workspace.yaml	catalogs.react 추가: React 및 관련 타입 패키지 버전 중앙화
.templates/component/package.json	React 관련 devDependencies 버전을 "catalog:react"로 변경
packages/*/package.json (avatar, badge, button, card, checkbox, divider, flex, grid, icon, input, radio, reset, skeleton, switch, tokens, tooltip, typography)	React 및 타입 패키지 devDependencies 버전을 "catalog:react"로 통일, files 배열을 단일 라인으로 정리

Sequence Diagram(s)

sequenceDiagram
    participant 패키지 as 각 패키지(package.json)
    participant 워크스페이스 as pnpm-workspace.yaml

    패키지->>워크스페이스: "catalog:react" 의존성 요청
    워크스페이스-->>패키지: catalogs.react에서 버전 정보 제공
    패키지->>패키지: React 및 타입 패키지 버전 통일 적용

Loading

Suggested labels

documentation

Suggested reviewers

• kimdaeyeobbb
• hy57in
• developerjhp
• bae-sh
• froggy1014
• heeji289
• synuns
• yeojini
• SEMIN-97
• jiji-hoon96

Poem

🐇
리액트 버전, 여기저기 달랐지,
이제는 카탈로그로 한 번에 맞추니,
패키지마다 통일감이 넘치네!
files 배열도 깔끔하게 한 줄로,
토끼도 춤추는 코드 정리의 기쁨이여!
🥕✨

---

📜 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 6135f3d and fdee970.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (19)

• .templates/component/package.json (1 hunks)
• packages/avatar/package.json (2 hunks)
• packages/badge/package.json (2 hunks)
• packages/button/package.json (2 hunks)
• packages/card/package.json (2 hunks)
• packages/checkbox/package.json (2 hunks)
• packages/divider/package.json (2 hunks)
• packages/flex/package.json (2 hunks)
• packages/grid/package.json (2 hunks)
• packages/icon/package.json (2 hunks)
• packages/input/package.json (1 hunks)
• packages/radio/package.json (2 hunks)
• packages/reset/package.json (2 hunks)
• packages/skeleton/package.json (2 hunks)
• packages/switch/package.json (2 hunks)
• packages/tokens/package.json (2 hunks)
• packages/tooltip/package.json (2 hunks)
• packages/typography/package.json (2 hunks)
• pnpm-workspace.yaml (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: CI

🔇 Additional comments (60)

pnpm-workspace.yaml (1)

24-29: React 카탈로그 중앙 버전 관리 추가: catalogs.react 섹션을 통해 @types/react, @types/react-dom, react, react-dom 버전을 중앙 관리하도록 구성되었습니다. PNPM 워크스페이스가 catalogs 키를 올바르게 인식하는지 확인해 주세요.

packages/switch/package.json (2)

12-12: files 배열 단일 라인 포맷 통일: "files": ["dist"]로 변경되어 패키징 시 포함 파일 지정이 간결해졌습니다.

---

39-42: React 의존성 카탈로그 참조 적용: devDependencies의 @types/react, react, react-dom를 catalog:react로 대체해 중앙 버전 관리가 적용되었습니다. 추가로 @types/react-dom의 포함 여부를 검토해 주세요.

packages/tokens/package.json (2)

12-12: files 배열 단일 라인 포맷 통일: "files": ["dist"]로 변경되어 단일 라인으로 통일되었습니다.

---

28-30: React 의존성 카탈로그 참조 적용: devDependencies에서 React 관련 패키지를 catalog:react로 참조하도록 업데이트되었습니다. 필요 시 @types/react-dom 포함 여부를 확인하세요.

packages/icon/package.json (2)

12-12: files 배열 단일 라인 포맷 통일: "files": ["dist"]로 변경되어 일관된 파일 포함 설정이 적용되었습니다.

---

34-34: React 의존성 카탈로그 참조 적용: devDependencies의 @types/react, react, react-dom를 catalog:react로 참조하도록 업데이트되었습니다. @types/react-dom이 필요한지 검토해 주세요.

Also applies to: 36-37

packages/flex/package.json (2)

12-12: files 배열 단일 라인 포맷 통일: "files": ["dist"]로 변경되어 단일 라인 포맷이 통일되었습니다.

---

38-38: React 의존성 카탈로그 참조 적용: devDependencies의 @types/react, react, react-dom를 catalog:react로 대체해 중앙 버전 관리가 적용되었습니다. @types/react-dom 포함 여부를 확인해 주세요.

Also applies to: 40-41

packages/radio/package.json (3)

12-12: 단일 라인 files 배열 포맷 적용
"files" 배열을 단일 라인으로 정리하여 일관된 코드 스타일을 유지했습니다.

---

34-35: @types/react 및 @types/react-dom 버전을 중앙화
devDependencies의 타입 정의 버전을 catalog:react로 통일해 버전 관리를 효율화했습니다.

---

37-38: react 및 react-dom 버전을 카탈로그 참조로 전환
react와 react-dom을 catalog:react로 참조해 워크스페이스 수준의 버전 중앙화를 달성했습니다.

packages/typography/package.json (3)

12-12: 단일 라인 files 배열 포맷 적용
files 배열을 단일 라인으로 통일해 파일 목록 가독성을 개선했습니다.

---

39-39: @types/react 버전을 카탈로그 참조로 전환
@types/react를 catalog:react로 참조해 버전 관리 일관성을 유지했습니다.

---

41-42: react 및 react-dom 버전을 중앙 카탈로그로 통일
react와 react-dom을 catalog:react로 전환해 중복 버전 충돌을 방지했습니다.

packages/skeleton/package.json (3)

12-12: 단일 라인 files 배열 적용
files 항목을 한 줄로 정렬해 스키마 가독성을 향상시켰습니다.

---

37-37: @types/react 카탈로그 참조로 변경
devDependencies의 @types/react를 catalog:react로 전환했습니다.

---

39-40: react 및 react-dom 버전 관리 통일
react와 react-dom을 catalog:react로 일괄 참조해 워크스페이스 버전 일관성을 유지합니다.

packages/avatar/package.json (3)

12-12: 단일 라인 files 배열 포맷
files 배열을 단순화해 패키지 파일 배포 구성을 정리했습니다.

---

37-37: @types/react 카탈로그 참조 적용
@types/react 의존성을 catalog:react로 통일해 버전 중복을 제거했습니다.

---

41-42: React 및 React-DOM 버전 중앙화
react와 react-dom을 catalog:react로 참조해 의존성 충돌 위험을 줄였습니다.

packages/reset/package.json (3)

12-12: 단일 라인 files 배열 적용
files 배열을 한 줄로 통일해 일관된 패키징 구성을 유지했습니다.

---

37-37: @types/react 카탈로그 참조로 변경
@types/react를 catalog:react로 전환해 타입 정의 버전을 중앙에서 관리합니다.

---

39-39: ⚠️ Potential issue

react-dom devDependencies 누락
devDependencies에 react-dom이 catalog:react로 추가되지 않아 타입 검사 또는 테스트 시 오류가 발생할 수 있습니다.

react-dom을 다음과 같이 추가하는 것을 권장합니다:

 "devDependencies": {
-  "@types/react": "catalog:react",
+  "@types/react": "catalog:react",
+  "react-dom": "catalog:react",
   ...
 }

Likely an incorrect or invalid review comment.

packages/grid/package.json (3)

12-12: 파일 배열 포맷 단일 행으로 통일
"files": ["dist"]로 멀티라인에서 단일라인으로 정리된 것은 가독성 및 일관성 유지에 도움이 됩니다.

---

38-38: @types/react 버전 카탈로그로 중앙화
버전을 "catalog:react"로 통일해 중앙에서 관리하도록 변경한 것은 적절합니다.
PNPM 워크스페이스의 catalogs.react 정의에 해당 패키지가 포함되어 있는지 확인해주세요.

---

40-40: react 버전 카탈로그로 중앙화
"react": "catalog:react"로 변경해 버전 일관성을 확보했습니다.
catalogs.react 설정이 올바른지 검증해 주세요.

packages/button/package.json (4)

12-12: 파일 배열 단일 행으로 통일
"files": ["dist"] 포맷 정리는 일관성 및 가독성을 높여줍니다.

---

39-39: @types/react 버전 카탈로그로 중앙화
카탈로그 참조 "catalog:react"로 변경된 것은 적절합니다.
PNPM 워크스페이스에 catalogs.react가 올바르게 정의되어 있는지 확인 바랍니다.

---

41-41: react 버전 카탈로그로 중앙화
"react": "catalog:react"으로 일관성 있는 버전 관리가 적용되었습니다.
catalogs.react 설정 유효성을 점검해 주세요.

---

42-42: react-dom 버전 카탈로그로 중앙화
"react-dom": "catalog:react"로 변경하여 버전이 동기화됩니다.
워크스페이스 설정(pnpm-workspace.yaml)의 catalogs.react에 포함 여부를 확인하십시오.

.templates/component/package.json (3)

33-33: @types/react 카탈로그 참조 적용
템플릿에 들어가는 기본 컴포넌트에도 "catalog:react"를 사용해 React 타입 버전을 중앙 관리하도록 변경한 것은 적절합니다.
관련 catalogs.react 정의가 누락되지 않았는지 확인하세요.

---

35-35: react 카탈로그 참조 적용
템플릿이 사용하는 React 버전을 "catalog:react"로 일관성 있게 관리합니다.
워크스페이스 설정의 catalogs.react가 올바르게 구성되어 있는지 검증이 필요합니다.

---

36-36: react-dom 카탈로그 참조 적용
"react-dom": "catalog:react"로 변경하여 버전 동기화가 향상되었습니다.
pnpm-workspace.yaml 내 catalogs.react 항목에 포함되어 있는지 확인하세요.

packages/checkbox/package.json (4)

12-12: 파일 배열 포맷 단일 행으로 통일
"files": ["dist"]로 포맷을 정리해 가독성과 일관성을 높였습니다.

---

38-38: @types/react 버전 카탈로그로 중앙화
카탈로그 참조 "catalog:react"를 적용한 것은 적절합니다.
pnpm-workspace.yaml의 catalogs.react 정의를 검토해주세요.

---

40-40: react 버전 카탈로그로 중앙화
"react": "catalog:react"로 통일된 버전 관리를 도입했습니다.
catalogs.react 설정 유효성을 확인해야 합니다.

---

41-41: react-dom 버전 카탈로그로 중앙화
"react-dom": "catalog:react"으로 변경하여 React 중심 생태계 버전 동기화를 강화했습니다.
워크스페이스 카탈로그에서 해당 항목이 누락되지 않았는지 확인 부탁드립니다.

packages/card/package.json (4)

12-12: 파일 배열 포맷 단일 행으로 통일
"files": ["dist"] 포맷 변경은 가독성과 유지보수성을 개선합니다.

---

38-38: @types/react 버전 카탈로그로 중앙화
템플릿 및 패키지 전반에 "catalog:react"를 사용해 TypeScript 타입 의존성을 중앙 관리합니다.
pnpm-workspace.yaml의 해당 카탈로그 정의를 확인해 주세요.

---

40-40: react 버전 카탈로그로 중앙화
"react": "catalog:react"로 통일된 버전 명시가 유지보수에 유리합니다.
카탈로그 설정(catalogs.react)이 최신으로 반영되었는지 검증 바랍니다.

---

41-41: react-dom 버전 카탈로그로 중앙화
"react-dom": "catalog:react"로 변경하여 React 렌더러 간 버전 호환성을 확보합니다.
워크스페이스 내 catalogs.react 설정을 최종 점검해 주세요.

packages/badge/package.json (4)

12-12: files 배열 단일 라인 통합
files 배열을 단일 행으로 통합해 가독성과 일관성이 향상되었습니다.

---

37-37: @types/react 카탈로그 버전 참조
@types/react를 catalog:react로 변경해 버전 관리가 일원화되었습니다.

---

39-39: react 카탈로그 참조 적용
react를 catalog:react로 지정해 중앙화된 버전 관리 체계에 맞췄습니다.

---

40-40: react-dom 카탈로그 참조 적용
react-dom도 catalog:react로 변경해 전체 의존성과 버전 일관성을 확보했습니다.

packages/input/package.json (4)

12-12: files 배열 단일 라인 통합
파일 배열을 한 줄로 통합해 일관성과 간결함을 높였습니다.

---

38-38: @types/react 카탈로그 참조 적용
@types/react를 catalog:react로 변경해 버전 중앙화 정책에 맞췄습니다.

---

40-40: react 카탈로그 참조 적용
react를 catalog:react로 지정해 모든 패키지 간 버전 일관성을 확보했습니다.

---

41-41: react-dom 카탈로그 참조 적용
react-dom도 catalog:react로 변경해 동일한 카탈로그에서 관리되도록 했습니다.

packages/divider/package.json (4)

12-12: files 배열 단일 라인 통합
files 배열을 인덴트 없이 한 줄에 배치해 포맷팅이 간결해졌습니다.

---

37-37: @types/react 카탈로그 참조 적용
@types/react를 catalog:react로 변경해 의존성 버전이 통일되었습니다.

---

39-39: react 카탈로그 참조 적용
react 의존성을 중앙 관리하는 catalog:react로 대체했습니다.

---

40-40: react-dom 카탈로그 참조 적용
react-dom도 catalog:react로 지정해 버전 일관성을 유지합니다.

packages/tooltip/package.json (6)

12-12: files 배열 단일 라인 통합
files 설정을 단일 라인으로 정리해 파싱 및 유지보수가 용이해졌습니다.

---

38-38: @testing-library/user-event 복원
인터랙션 테스트 재현을 위해 user-event를 devDependencies에 추가한 변경이 적절합니다.

---

39-39: @types/react 카탈로그 참조 적용
타입 정의 의존성을 catalog:react로 변경해 일관성 있는 버전 관리가 이루어집니다.

---

40-40: @types/react-dom 카탈로그 참조 적용
@types/react-dom도 catalog:react로 지정하여 타입 패키지를 중앙화합니다.

---

42-42: react 카탈로그 참조 적용
react를 카탈로그 참조로 대체해 패키지 간 버전 불일치를 방지합니다.

---

43-43: react-dom 카탈로그 참조 적용
react-dom 또한 catalog:react로 변경해 전체 종속성을 통합 관리합니다.

---

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.

❤️ 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.
  • Explain this complex logic.
  • 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 explain this code block.
  • @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 explain its main purpose.
  • @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.

Support

Need 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)

• @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.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[froggy1014]

release/v1 쪽에 머지하는게 낫지않을까요 ?

conflict 잡을때 뭔가 힘들거 같다는 생각이 드네요 ㅎㅎㅎ...

[synuns]

catalog로 리액트 버전 통일하는게 일관성게 관리할 수 있어서 좋을 것 같네요~