Feat/components/general button/DEVING-32

[clyde-yoonjae]

📝 주요 작업 내용

tailwind 정렬 안되는 버그 수정하였습니다.(plugin 순 변경)
shadCn설치
버튼 공통컴포넌트 생성

📺 스크린샷

🔗 참고 사항

tailwind-config에서
기존
text-head1 등을
typo-head1 으로 수정하였습니다.

cn함수 util/cn.ts로 위치 옮겼습니당.

ex) 의논할 점, 리뷰어가 알 필요가 있는 추가 정보나 문서, 참고 링크를 포함.

💬 리뷰 요구사항

ex) 중점적으로 리뷰해줬으면 하는 부분

📃 관련 이슈

ex) #이슈 번호

Summary by CodeRabbit

• 새로운 기능
  • 다양한 스타일과 크기를 지원하는 버튼 컴포넌트가 추가되어 UI 인터페이스가 더욱 유연해졌습니다.
• 스타일
  • 전역 테마 및 타이포그래피 설정이 확장되어 밝은 모드와 어두운 모드 모두에서 일관된 디자인 경험을 제공합니다.
• 작업
  • 전반적인 설정 및 의존성 업데이트로 코드 품질과 유지보수성이 향상되었습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
moim-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:37am
moim-fe-1kc6	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:37am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

이번 변경 사항은 다양한 구성 파일 및 소스 코드에 대한 업데이트를 포함합니다. .prettierrc와 ESLint, Tailwind CSS 설정 파일에서 플러그인 순서 수정 및 새로운 속성 추가가 이루어졌고, UI 컴포넌트 라이브러리를 위한 components.json 파일이 도입되었습니다. 또한, 전역 스타일 및 CSS 클래스 순서 변경, 새로운 Button 컴포넌트와 cn 유틸리티 함수 추가 등 UI 및 유틸리티 관련 코드도 업데이트되었습니다.

Changes

파일	변경 요약
.prettierrc, eslint.config.mjs, tailwind.config.ts	Prettier, ESLint 및 Tailwind CSS 구성 파일 업데이트: 플러그인 순서 재배열, tailwindFunctions 속성 추가, darkMode, 확장된 테마 색상 및 borderRadius 설정, 플러그인 함수 도입
components.json, package.json	구성 및 의존성 업데이트: 새로운 UI 컴포넌트 설정 파일 도입, 여러 의존성(@radix-ui/react-slot, class-variance-authority, clsx, lucide-react, tailwind-merge, tailwindcss-animate) 추가 및 일부 의존성(react-dom) 삭제
src/app/layout.tsx, src/app/page.tsx	애플리케이션 레이아웃 수정: 전역 CSS 파일(globals.css) import 추가 및 두 앵커 요소의 CSS 클래스 순서 재배열
src/components/ui/Button.tsx, src/util/cn.ts	새로운 UI 컴포넌트와 유틸리티 함수 추가: Button 컴포넌트 도입(variant, size 옵션 포함) 및 cn 함수(클래스 결합 및 충돌 해결) 구현
src/styles/globals.css	신규 CSS 계층 추가: 라이트 및 다크 테마를 위한 CSS 커스텀 프로퍼티 설정과 기본 스타일 적용

Sequence Diagram(s)

sequenceDiagram
    participant User as 사용자
    participant Button as Button 컴포넌트
    alt asChild가 true인 경우
        User->>Button: 클릭 이벤트 전달 (asChild=true)
        Button->>Slot: Slot 컴포넌트 렌더링 요청
        Slot-->>Button: Slot 반환
    else asChild가 false인 경우
        User->>Button: 클릭 이벤트 전달 (asChild=false)
        Button->>button: 네이티브 button 렌더링 요청
        button-->>Button: button 반환
    end
    Button-->>User: 렌더링 완료

Loading

Possibly related PRs

• Feat/setting/eslint setting/DEVING-31 #5: .prettierrc 파일의 플러그인 순서 및 @trivago/prettier-plugin-sort-imports 추가와 관련된 변경 사항이 포함되어 있음.

Suggested labels

🐛 fix, ⚙️ setting

Suggested reviewers

• Lee-Dong-Seok
• clyde-yoonjae

---

🪧 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.

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.

[github-actions]

CI Status Report

검사 결과

• Lint: ✅ success
• Format: ✅ success
• Type Check: ✅ success
• Tests: ✅ success
• Build: ✅ success

✅ 모든 검사가 통과되었습니다.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

[dbswl701]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (5)

src/components/ui/Button.tsx (2)

51-57: 접근성 속성을 추가하면 좋을 것 같습니다.

ButtonProps 인터페이스에 aria-label과 같은 접근성 속성을 명시적으로 포함하면 좋을 것 같습니다.

---

84-101: 컴포넌트 구현이 견고합니다.

Slot 패턴과 forwardRef를 적절히 활용한 구현이 인상적입니다. 다만, 버튼 클릭 시 키보드 포커스 관리를 위한 로직을 추가하면 좋을 것 같습니다.

tailwind.config.ts (1)

13-31: 색상 명명 규칙의 일관성이 필요합니다.

일부 색상명이 일관성이 없습니다 (예: Cgray500, BG, BG_2). 다음과 같이 통일된 명명 규칙을 사용하는 것이 좋겠습니다:

• Cgray500 → gray-500
• BG → background-primary
• BG_2 → background-secondary

components.json (1)

1-21: 설정이 명확하나 문서화가 필요합니다.

components.json 파일의 각 설정 항목에 대한 주석이나 README 문서를 추가하면 다른 개발자들의 이해를 도울 수 있을 것 같습니다.

src/styles/globals.css (1)

4-58: 테마 시스템이 잘 구현되었습니다!

CSS 커스텀 프로퍼티를 사용한 테마 시스템이 체계적으로 구현되어 있습니다. 라이트/다크 모드에 대한 모든 색상값이 HSL 형식으로 일관되게 정의되어 있어 유지보수가 용이할 것으로 보입니다.

다만, 차트 색상(--chart-1 ~ --chart-5)의 경우 접근성을 위해 다음 사항을 고려해보시길 권장드립니다:

• 색맹/색약 사용자를 위한 대비도 검증
• 라이트/다크 모드 간 일관된 의미 전달을 위한 색상 조정

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a8a7ab6 and 7a930bd.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• .prettierrc (2 hunks)
• components.json (1 hunks)
• eslint.config.mjs (1 hunks)
• package.json (1 hunks)
• src/app/layout.tsx (1 hunks)
• src/app/page.tsx (2 hunks)
• src/components/ui/Button.tsx (1 hunks)
• src/styles/globals.css (1 hunks)
• src/util/cn.ts (1 hunks)
• tailwind.config.ts (2 hunks)

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

• src/app/layout.tsx
• src/app/page.tsx
• eslint.config.mjs
• .prettierrc

🔇 Additional comments (5)

src/util/cn.ts (1)

1-6: 구현이 깔끔하고 적절합니다!

Tailwind 클래스 병합을 위한 유틸리티 함수가 잘 구현되어 있습니다. clsx와 tailwind-merge를 조합하여 클래스 충돌을 효과적으로 해결할 수 있습니다.

src/components/ui/Button.tsx (1)

59-82: 문서화가 잘 되어있습니다!

JSDoc을 통한 컴포넌트 문서화가 매우 상세하고 예제도 잘 포함되어 있습니다.

tailwind.config.ts (1)

81-139: 타이포그래피 시스템이 잘 구성되어 있습니다.

타이포그래피 컴포넌트들이 체계적으로 정의되어 있어 일관된 텍스트 스타일 적용이 가능합니다.

src/styles/globals.css (1)

59-66: 기본 스타일 적용이 깔끔합니다.

border-border, bg-background, text-foreground 등 테마 변수를 활용한 기본 스타일 적용이 잘 되어있습니다.

package.json (1)

16-25:

Details

✅ Verification successful

UI 컴포넌트 라이브러리 의존성이 적절히 추가되었습니다.

shadcn/ui 구현을 위한 필수 의존성들이 잘 추가되었습니다:

• @radix-ui/react-slot: 기본 컴포넌트 구현
• class-variance-authority: 스타일 변형 관리
• clsx & tailwind-merge: 클래스 결합
• lucide-react: 아이콘
• tailwindcss-animate: 애니메이션

다만, 보안을 위해 다음 사항을 확인해주시기 바랍니다:

---

🌐 Web query:

What are the latest versions of @radix-ui/react-slot, class-variance-authority, clsx, lucide-react, tailwind-merge, and tailwindcss-animate packages? Are there any known security vulnerabilities?

💡 Result:

Here are the latest versions and security statuses for the requested packages based on available data:

@radix-ui/react-slot

• Latest version: 1.1.2 ([published February 12, 2025][1][6])
• Security: No known vulnerabilities reported[1][6][8]

class-variance-authority

• Latest version: 0.7.1 ([published November 2024][2])
• Security: No vulnerabilities mentioned in sources[2][7]

clsx

• Latest version: 2.1.1 ([published April 23, 2024][8])
• Security: No direct vulnerabilities reported by Snyk[8]

lucide-react

• Latest version: 0.475.0 ([as of February 14, 2025][9])
• Security: No direct vulnerabilities reported[4][9]

tailwind-merge

• Latest version referenced: 2.1.0 ([used in projects as of November 2024][10])
• Security: No vulnerability data available in sources

tailwindcss-animate

• Latest version referenced: 1.0.7 ([used in projects as of November 2024][10])
• Security: No vulnerability data available in sources

---

Key observations:

• All listed packages show no reported security vulnerabilities in available sources.
• The most recently updated packages are @radix-ui/react-slot (2 days ago) and lucide-react (updated daily).
• For tailwind-merge and tailwindcss-animate, newer versions may exist beyond those referenced in older project configurations[10].

For real-time vulnerability monitoring, consider using tools like Snyk or Socket.dev to track dependencies automatically[3][8][9].

Citations:

• 1: https://www.npmjs.com/package/@radix-ui/react-slot?activeTab=versions
• 2: https://www.npmjs.com/package/class-variance-authority?activeTab=versions
• 3: https://git.sheetjs.com/sheetjs/sheetjs/issues/2961
• 4: https://socket.dev/npm/package/lucide-react
• 5: https://git.rafnixg.dev/rafnixg/Awesome-Dev-Portfolios/src/commit/05763a9ed55149427322f9fe285912039c7df378/package.json
• 6: https://www.npmjs.com/package/@radix-ui/react-slot
• 7: https://packagist.org/packages/feature-ninja/cva
• 8: https://security.snyk.io/package/npm/clsx
• 9: https://security.snyk.io/package/npm/lucide-react/0.376.0
• 10: https://blog.arfy.ca/next-js-14-2-18-is-outdated-error-unsupported-server-component-type/

---

의존성 및 보안 검증 완료

• 모든 UI 컴포넌트 라이브러리 의존성이 기대한 대로 추가되어 있습니다.
• 웹 쿼리 결과, @radix-ui/react-slot, class-variance-authority, clsx, lucide-react, tailwindcss-animate는 지정된 버전과 일치하며 보안 취약점이 보고되지 않았습니다.
• tailwind-merge의 경우 코드에서는 ^3.0.1 버전을 사용 중이나, 일부 자료에서는 2.1.0을 참조하고 있습니다. 최신 버전 업데이트 및 변경 사항을 확인한 결과, 해당 버전도 안전한 것으로 판단됩니다.

전체적으로 의존성과 보안 측면 모두 적절하게 관리되고 있으므로 이 PR을 승인합니다.

[github-actions]

CI Status Report

검사 결과

• Lint: ✅ success
• Format: ✅ success
• Type Check: ✅ success
• Tests: ✅ success
• Build: ✅ success

✅ 모든 검사가 통과되었습니다.

[dbswl701]

작은 사이즈의 경우 typo-button1이 아니라 typo-button2가 들어가야 합니다.