[Feat] Icon 컴포넌트 추가 #40
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/next.config.mjsOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 개요이 풀 리퀘스트는 웹 애플리케이션의 테마, UI 컴포넌트, 빌드 구성 및 모듈 시스템을 개선하는 광범위한 변경 사항을 포함하고 있습니다. 워크스루이 풀 리퀘스트는 프로젝트의 모듈 시스템을 ECMAScript 모듈로 전환하고, Vanilla Extract를 사용한 테마 및 스타일링 시스템을 도입하며, 새로운 UI 컴포넌트(Button, Icon)를 추가합니다. 주요 변경 사항은 패키지 구성, 빌드 스크립트, 테마 프로바이더, 타입스크립트 설정 등을 포함하여 전반적인 개발 환경을 현대화하는 데 중점을 두고 있습니다. 변경 사항
시퀀스 다이어그램sequenceDiagram
participant App as Web Application
participant ThemeProvider as Theme Provider
participant Layout as Root Layout
participant Page as Home Page
App->>ThemeProvider: Wrap with light theme
ThemeProvider->>Layout: Apply theme context
Layout->>Page: Render page components
Page->>Button: Create button
Page->>Icon: Render icon
관련 가능성이 있는 PR
시 🐰
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (20)
packages/ui/src/icons/StackIcon.tsx (1)
13-30: SVG Path 속성에 대한 상세 검토
fill-rule,clip-rule등을 포함해 SVG Path 속성이 매우 꼼꼼히 설정되어 있습니다. 이러한 세밀한 설정은 복잡한 아이콘 형태에서도 정확한 렌더링을 지원합니다. 다만, 프로젝트 내에서 일관된 스타일을 유지하기 위해fill,stroke,width,height등 속성을 어떻게 다룰지 가이드를 마련해두면 좋겠습니다.packages/ui/src/icons/SendIcon.tsx (1)
3-19: 기본 크기 및 색상 사용에 대한 선택 검토
현재 아이콘의 크기(width,height)가 32로 고정되어 있으며, 경로의fill색상이#0E0F15로 설정되어 있습니다. 디자인 시스템 또는 프로젝트 전반의 스타일 가이드와 일관된 색상 및 크기를 유지하는지 확인이 필요합니다. 필요하다면 props를 통해 동적으로 변경할 수 있도록 옵션을 확장하는 방안을 고려해 보셔도 좋습니다.packages/ui/src/index.ts (1)
2-2: 와일드카드 익스포트가 적절한지 검토 권장
현재 전 아이콘을 간편하게 가져올 수 있다는 장점이 있지만, 아이콘 개수가 많아지거나 네이밍 충돌이 발생할 가능성이 있는 경우, 개별 익스포트 방식으로 전환하여 추적성을 높이는 방안을 고려해볼 수 있습니다.packages/ui/src/icons/StarIcon.tsx (1)
16-17: 아이콘 컬러를 동적으로 제어할 방법 고려
지금은fill="#A3ADBD"로 고정되어 있지만, 향후 다양한 환경에서 색상을 변경해야 할 수도 있습니다.props를 통해 fill 색상을 주입받고 기본값을 지정하면 유연성이 높아집니다.packages/ui/src/icons/CheckIcon.tsx (2)
14-16: React 표준 네이밍 규칙(camelCase)으로 수정 권장
JSX에서 속성 이름은 일반적으로 camelCase를 따릅니다.fill-rule,clip-rule대신fillRule,clipRule사용을 권장합니다.아래와 같이 수정 가능합니다:
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"
17-17: 아이콘 색상 동적 변경 고려
항상 고정 색상(#E6FF79)을 사용하기보다는,currentColor또는 props를 통해 색상을 동적으로 변경할 수 있어 테마 대응에 유리합니다.packages/ui/src/icons/NoticeIcon.tsx (1)
14-15: React 속성 표기(CamelCase) 권장
fill-rule,clip-rule는 React에서fillRule,clipRule처럼 camelCase로 작성해주는 편이 좋습니다. 브라우저에서 동작에는 큰 문제가 없을 수 있으나, React 컨벤션을 지킴으로써 경고 로그를 방지하고 가독성을 유지할 수 있습니다.- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"packages/ui/src/icons/PictureIcon.tsx (2)
14-16: React JSX에서는fillRule/clipRule속성을 권장합니다.
React에서 SVG 속성은 일반적으로 카멜 케이스(camelCase) 형태로 표현됩니다. 기존 HTML 표준 속성명(fill-rule,clip-rule) 대신 카멜 케이스(fillRule,clipRule)를 사용하면 콘솔 경고나 예기치 않은 동작을 피할 수 있습니다.다음과 같이 수정 제안을 드립니다:
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"
17-17: 아이콘 색상을 동적으로 변경할 수 있도록 고려해보세요.
현재fill="#A3ADBD"로 고정 색상이 설정되어 있지만, 프로젝트 스타일링이나 테마 컬러에 따라 색상 변경이 필요할 수 있습니다. 예:fill="currentColor"형태를 사용하거나, props로 color 값을 받아서 처리하는 방식을 통해 재사용성과 확장성을 높일 수 있습니다.packages/ui/src/icons/XCircleIcon.tsx (2)
13-18: SVG 속성 표기 방식 주의React에서 SVG 속성은 일반적으로 react-dom 사양에 따라
fillRule,clipRule처럼 카멜 케이스로 표기하는 것이 권장됩니다. 일부 빌드 환경에서는fill-rule,clip-rule등의 케밥 케이스 사용 시 경고나 에러가 발생할 수 있으므로 유의하시기 바랍니다.-<path - fill-rule="evenodd" - clip-rule="evenodd" +<path + fillRule="evenodd" + clipRule="evenodd"
19-22: 시각적 일관성과 접근성 고려두 번째
<path>요소가 완전히 하얀색 배경을 제공하기 때문에, 다크 모드 등 컬러 스킴에서 예상치 못한 시각적 충돌이 생길 수 있습니다. 필요하다면fill값을 외부에서 조정 가능하도록 Prop 제어 방식을 고려해 보세요. 그리고 접근성 측면에서role="img"또는aria-label을 부여해 Screen Reader 사용자에게 의미 전달이 가능하도록 해주는 것도 좋겠습니다.packages/ui/src/icons/XIcon.tsx (1)
14-18: SVG 속성 키 표기 방식 통일 제안
React에서는 일반적으로 SVG 속성의 CamelCase 표기를 권장합니다(stroke-width→strokeWidth,stroke-linecap→strokeLinecap등). 현재도 정상 작동하겠지만, 일관성 유지를 위해 React 권장 표기 방식을 따르는 것이 좋겠습니다.예시 코드 변경:
- stroke-width="3" - stroke-linecap="round" + strokeWidth="3" + strokeLinecap="round"Also applies to: 20-24
packages/ui/src/icons/PlusIcon.tsx (1)
17-17: 아이콘 색상 변경 가능성 고려
SVG 파일 내부의fill="#5A6471"속성은 임베디드 색상으로 고정됩니다. UI 변경 요구나 다크 테마 지원 등을 고려하여,fill속성을prop으로 제어할 수 있도록 개선하면 유연성이 높아집니다.packages/ui/src/icons/LineThreeIcon.tsx (2)
14-15: React 속성 네이밍 권장사항 준수 제안
React에서는fill-rule,clip-rule대신fillRule,clipRule처럼 camelCase 네이밍을 권장합니다.아래와 같은 방식으로 수정할 수 있습니다:
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"
16-21: 색상 하드코딩에 대한 확장성 고려
현재 fill 색상인#A3ADBD가 하드코딩되어 있어, 테마 변경 등 디자인 요구 사항이 변경될 경우 유연성이 떨어질 수 있습니다. props로 색상을 전달받도록 변경을 고려해 보시는 것을 권장드립니다.packages/ui/src/icons/CheckCalendarIcon.tsx (2)
3-21: React 속성 표준에 따라 속성명을 카멜케이스로 변경하는 방안을 고려해보세요.
fill-rule,clip-rule속성은 HTML 표준 속성명이지만, React JSX에서는fillRule,clipRule처럼 카멜케이스를 사용하는 것이 일반적입니다. React는 DOM 속성을 소문자-하이픈 표기법 대신 카멜케이스로 처리하기 때문에, 일관성과 IDE 자동완성을 위해 변경해둘 것을 권장합니다.아래와 같은 형태로 수정 가능합니다:
-<path - fill-rule="evenodd" - clip-rule="evenodd" - ... -/> +<path + fillRule="evenodd" + clipRule="evenodd" + ... +/>
3-21: 테마 적용 가능성 고려
현재fill="#A3ADBD"로 고정되어 있는데, 디자인 시스템이나 테마가 도입될 경우 동적으로 색상을 적용할 여지를 만들어두면 재사용성과 유지보수성에 도움이 됩니다. 예를 들어, styled-components나 theme 객체를 참조할 수 있게 하여 색상을 유연하게 변경 가능하도록 설계할 수 있습니다.packages/ui/src/icons/CalendarIcon.tsx (1)
14-15: React(jsx) 속성 표기에 대한 권장사항
fill-rule,clip-rule와 같은 SVG 속성들은 React 컴포넌트 내부에서는fillRule,clipRule처럼 camelCase로 작성하는 것이 권장됩니다. 향후 JSX에서 경고가 발생할 수 있으므로 확인 부탁드립니다.packages/ui/src/icons/DocumentIcon.tsx (2)
14-15: 속성 이름을 camelCase로 변경 고려React JSX에서는
fill-rule,clip-rule같은 SVG 속성을fillRule,clipRule처럼 camelCase로 사용하는 것을 권장합니다. 빌드 및 린팅 도구 설정에 따라 경고가 발생할 수도 있으니, 프로젝트 룰에 맞게 확인해 보세요.- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"Also applies to: 20-21
17-17: 색상 스타일링 유연성 제고 제안아이콘의
fill속성을 프로젝트 테마 컬러나currentColor사용으로 변경하면 재사용성과 확장성이 높아집니다. 지금처럼 고정된 색상을 쓰면 추후 테마 변경 시에 유연성이 떨어질 수 있으니, 필요에 따라 고려해 보세요.Also applies to: 23-23
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
packages/ui/src/icons/ArrowIcon.tsx(1 hunks)packages/ui/src/icons/CalendarIcon.tsx(1 hunks)packages/ui/src/icons/CheckCalendarIcon.tsx(1 hunks)packages/ui/src/icons/CheckIcon.tsx(1 hunks)packages/ui/src/icons/DocumentIcon.tsx(1 hunks)packages/ui/src/icons/LineThreeIcon.tsx(1 hunks)packages/ui/src/icons/NoticeIcon.tsx(1 hunks)packages/ui/src/icons/PencilIcon.tsx(1 hunks)packages/ui/src/icons/PictureIcon.tsx(1 hunks)packages/ui/src/icons/PlusIcon.tsx(1 hunks)packages/ui/src/icons/SendIcon.tsx(1 hunks)packages/ui/src/icons/StackIcon.tsx(1 hunks)packages/ui/src/icons/StarIcon.tsx(1 hunks)packages/ui/src/icons/XCircleIcon.tsx(1 hunks)packages/ui/src/icons/XIcon.tsx(1 hunks)packages/ui/src/icons/index.ts(1 hunks)packages/ui/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/icons/index.ts
🔇 Additional comments (28)
packages/ui/src/icons/StackIcon.tsx (3)
1-2: import 구문에 대한 긍정적인 코멘트
이 부분에서는 React의SVGProps<SVGSVGElement>타입을 정확히 사용하고 있어 SVG를 재사용하는 데 많은 이점이 있습니다. 타입 정의가 명확하여 유지 보수 측면에서도 좋습니다.
3-11: React 컴포넌트 형태로 구현된 점
StackIcon을 React 함수형 컴포넌트로 선언해 SVG 속성을 받을 수 있도록 한 것은 재사용성과 확장성이 높아, 아이콘 라이브러리 구성에 적합합니다.
31-33: SVG 종결 및 컴포넌트 반환
SVG 태그가 정상적으로 닫히며, 추가적으로{...props}구문으로 외부 속성을 주입할 수 있어 유연하게 사용할 수 있습니다. 전반적으로 완성도가 높습니다.packages/ui/src/icons/SendIcon.tsx (1)
1-2: SVG Props 활용 좋습니다
코드에서SVGProps<SVGSVGElement>를 사용하여 추가 props를 유연하게 받을 수 있도록 한 점이 좋습니다. 이는 다양한 상황에서 아이콘을 재사용하기에 유리합니다.packages/ui/src/icons/StarIcon.tsx (2)
1-2: SVGProps 사용에 대한 안정성 확인
SVGProps을 사용하여 표준 SVG 속성을 수용하는 방식은 매우 적절합니다. 컴파일타임에 타입 체크가 가능하므로, 재사용성 및 유지보수에 유리합니다.
3-21: 전반적인 구현 및 구조에 대한 긍정적 평가
React 함수형 컴포넌트로 아이콘을 구현한 방식은 간결하며,props전개({...props})가 있어 접근성 기반 속성이나 추가 스타일링도 쉽게 전달할 수 있습니다. 전반적으로 구조가 적절하여 유지보수에 용이해 보입니다.packages/ui/src/icons/CheckIcon.tsx (1)
1-2: 문제없이 정상적으로 import되었음
React의SVGProps을 사용해 SVG 속성들을 관리하는 방식이 적절해 보입니다.packages/ui/src/icons/NoticeIcon.tsx (2)
1-2: 타입 임포트 구문의 적절성
이 코드는 런타임 영향 없이 타입만 가져오기 때문에 안전합니다. 프로젝트 규모가 커져도 유지 보수에 유리하므로 좋은 접근입니다.
3-21: SVGProps 활용 및 디자인 규칙 준수
SVGProps<SVGSVGElement>를 사용하여 SVG 관련 속성을 확장 가능하도록 한 부분은 적절합니다. 아이콘의 크기와 viewBox 설정도 표준 규격(24x24)에 부합해 일관성이 좋습니다.packages/ui/src/icons/PictureIcon.tsx (2)
1-2: 타입 임포트 사용이 적절합니다.
SVGProps를 사용하여 컴포넌트에 전달할 수 있는 SVG 속성을 폭넓게 허용하는 접근이 좋아 보입니다.
3-21: 테스트 및 문서화를 위한 대응방안을 마련해 주세요.
새 아이콘 컴포넌트가 여러 곳에서 사용될 가능성이 있으므로, Storybook 등에서 실제 렌더링을 확인하거나 테스트를 작성하여 동작을 보장하는 것이 좋습니다.테스트 코드를 생성하거나 Storybook 구성을 위한 샘플 코드를 원하시면 알려주세요. 필요하다면 신규 이슈를 만들어 Tracking할 수 있습니다.
packages/ui/src/icons/PencilIcon.tsx (1)
1-2: React에서의 SVG 타입 적용이 적절합니다.
TypeScript의SVGProps<SVGSVGElement>를 사용해 아이콘 컴포넌트를 유연하게 확장할 수 있도록 구현한 점이 좋습니다.packages/ui/src/icons/XCircleIcon.tsx (3)
1-2: SVGProps 사용 및 의존성 임포트 확인이 파일에서
react패키지의SVGProps타입을 정상적으로 임포트하고 있으므로 파일 독립적으로 사용 시 문제가 없어 보입니다.
3-11: 컴포넌트 설계와 프로퍼티 확장성React 함수형 컴포넌트 구조가 간단하며,
...props를 통해 SVG 속성을 자유롭게 전달받을 수 있어 유연성이 높습니다. 향후 아이콘 색상 혹은 크기를 외부에서 재정의할 수 있어 현명한 설계입니다.
23-25: 마무리전체적으로 아이콘 컴포넌트가 잘 구성되어 있습니다. 아이콘 컴포넌트의 성능 및 확장성을 위해 스프라이트 기법 도입이 예정되었다고 하셨으므로, 추후에 병렬 로딩이나 Lazy-loading 전략 등으로 최적화할 계획을 고려하신다면 더욱 완성도가 높아질 것입니다.
packages/ui/src/icons/XIcon.tsx (2)
1-2: Props 타입 사용 적절성 확인 완료
패키지react에서 제공하는SVGProps<SVGSVGElement>를 사용해 SVG 전용 프로퍼티를 명시적으로 받도록 한 점이 매우 적절합니다. 추가적인 확장성도 확보할 수 있어 좋습니다.
3-11:XIcon컴포넌트 기본 구조 적절성
React 함수형 컴포넌트로서 구조가 단순하고 가독성이 좋습니다.props를 전개 연산자로 넘겨주어 추가 커스터마이징을 가능케 하는 구현도 합리적입니다.packages/ui/src/icons/PlusIcon.tsx (1)
1-2: 불필요한 React import 확인 필요
React 17 이상에서는 JSX 변환 시 별도의 React import가 필수가 아니지만, 하위 버전 호환성 등을 고려해import React from 'react'를 사용하는지 확인해 주세요. 현재 설정상 큰 문제는 없어 보이지만 호환성을 확인하시길 권장드립니다.packages/ui/src/icons/LineThreeIcon.tsx (2)
1-2: import 구문 사용이 적절합니다
import type { SVGProps } from 'react';구문을 통해 React에서 SVGProps 타입을 명확하게 참조하고 있어 문제가 없어 보입니다.
3-13: React 컴포넌트 형태로의 SVG 래핑이 잘 구현되었습니다
SVGProps를 활용해 외부에서 필요한 속성을 유연하게 전달받도록 한 점이 좋습니다. 해당 컴포넌트가 다른 아이콘들과도 일관성 있게 사용될 것으로 보입니다.packages/ui/src/icons/CheckCalendarIcon.tsx (1)
1-1: 타입 임포트 방식을 잘 활용하고 있습니다.
type { SVGProps }를 사용하여 SVG 속성을 체계적으로 가져오는 방식이 명확하며, 빌드 시점에 불필요한 타입 정보가 제거됩니다.packages/ui/src/icons/CalendarIcon.tsx (3)
1-2: 간결한 import 구문에 대한 긍정적인 피드백!
React에서SVGProps<SVGSVGElement>를 명시적으로 가져오는 방식이 명확하고 유지 보수에 용이해 보입니다.
3-13: SVGProps를 활용한 확장성 높은 컴포넌트 구현
(props: SVGProps<SVGSVGElement>)로 받는 방식이 아이콘에 다양한 속성을 유연하게 적용할 수 있게 해줍니다. 동일한 패턴을 다른 아이콘에도 일관되게 적용한다면, 전반적인 재사용성이 좋아질 것입니다.
16-21: SVG 경로 정의 적합
경로(path) 정의가 명확하고,fill="#494E50"색상 설정도 적절해 보입니다. 아이콘의 해상도(24×24) 역시 일관성 있게 다른 컴포넌트와 맞출 수 있어 용도상 적합해 보입니다.packages/ui/src/icons/DocumentIcon.tsx (1)
1-1: SVGProps 사용법 확인해당 import 구문은
react에서 제공하는SVGProps<SVGSVGElement>를 적절히 사용하고 있어 적합해 보입니다. 특별한 문제는 없습니다.packages/ui/src/icons/ArrowIcon.tsx (3)
23-41: 동일한 fill-rule/camelCase 이슈 반복이 컴포넌트에서도
fill-rule,clip-rule속성의 표기가 동일하게 camelCase로 변경되어야 합니다. 다른 개선점은 위와 동일합니다.
43-61: 동일한 fill-rule/camelCase 이슈 반복이 컴포넌트 역시 동일한 이슈가 존재하며, 개선 방법은 위와 동일합니다.
63-81: 동일한 fill-rule/camelCase 이슈 반복동일한 패턴이므로,
ArrowLeftIcon에서도fill-rule,clip-rule를 camelCase로 고쳐야 합니다.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/ui/src/icons/ArrowIcon.tsx (1)
14-15:⚠️ Potential issueSVG 속성의 명명 규칙이 일관되지 않습니다
현재
ArrowLeftIcon은 camelCase를 사용하고 있으나, 다른 컴포넌트들은 kebab-case를 사용하고 있습니다. React에서는 camelCase 사용을 권장합니다.아래와 같이 모든 컴포넌트의 속성을 camelCase로 통일해주세요:
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"Also applies to: 34-35, 54-55, 74-75
🧹 Nitpick comments (3)
packages/ui/src/icons/ArrowIcon.tsx (1)
6-11: 컴포넌트의 재사용성 개선을 위한 제안현재 모든 아이콘이 고정된 크기(24x24)와 색상(#8B95A1)을 사용하고 있습니다. 더 유연한 사용을 위해 다음과 같은 개선을 고려해보세요:
- 크기와 색상을 props로 받아 커스터마이징할 수 있도록 수정
- 공통 SVG 속성을 별도의 상수나 기본 컴포넌트로 추출하여 코드 중복 감소
예시 구현:
interface IconProps extends SVGProps<SVGSVGElement> { size?: number; color?: string; } const defaultIconProps = { size: 24, color: '#8B95A1' }; export const ArrowBottomIcon = ({ size = 24, color = '#8B95A1', ...props }: IconProps) => { return ( <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M3.8986 8.63847C3.8986..." fill={color} /> </svg> ); };Also applies to: 26-31, 46-51, 66-71
packages/ui/src/icons/XCircleIcon.tsx (2)
3-11: 컴포넌트 구조가 간단명료합니다
화살표 함수를 사용해 불필요한 복잡도가 없으며, SVG 요소에...props를 spread 하여 사용자 정의 속성을 유연하게 적용할 수 있도록 처리한 점이 좋습니다. 다만, SVG의 고정 폭·높이가 필요 없는 경우에는width·height도 props로 확장 가능하도록 열어두는 방안을 고려해볼 수 있습니다.
13-18: SVG 경로(fill="#293342") 색상 제어 확인
해당 경로의 fill 속성이 하드코딩되어 있습니다. 만약 테마나 색상 변경이 필요하다면, 속성으로 color를 전달받아fill에 적용하는 방안을 검토해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
packages/ui/src/icons/ArrowIcon.tsx(1 hunks)packages/ui/src/icons/CalendarIcon.tsx(1 hunks)packages/ui/src/icons/CheckCalendarIcon.tsx(1 hunks)packages/ui/src/icons/CheckIcon.tsx(1 hunks)packages/ui/src/icons/DocumentIcon.tsx(1 hunks)packages/ui/src/icons/LineThreeIcon.tsx(1 hunks)packages/ui/src/icons/NoticeIcon.tsx(1 hunks)packages/ui/src/icons/PencilIcon.tsx(1 hunks)packages/ui/src/icons/PictureIcon.tsx(1 hunks)packages/ui/src/icons/PlusIcon.tsx(1 hunks)packages/ui/src/icons/StackIcon.tsx(1 hunks)packages/ui/src/icons/StarIcon.tsx(1 hunks)packages/ui/src/icons/XCircleIcon.tsx(1 hunks)packages/ui/src/icons/XIcon.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/ui/src/icons/LineThreeIcon.tsx
- packages/ui/src/icons/CalendarIcon.tsx
- packages/ui/src/icons/XIcon.tsx
- packages/ui/src/icons/CheckIcon.tsx
- packages/ui/src/icons/PlusIcon.tsx
- packages/ui/src/icons/CheckCalendarIcon.tsx
- packages/ui/src/icons/PictureIcon.tsx
- packages/ui/src/icons/StackIcon.tsx
- packages/ui/src/icons/StarIcon.tsx
- packages/ui/src/icons/PencilIcon.tsx
- packages/ui/src/icons/NoticeIcon.tsx
- packages/ui/src/icons/DocumentIcon.tsx
🔇 Additional comments (3)
packages/ui/src/icons/ArrowIcon.tsx (1)
1-2: 구현이 깔끔하고 일관성이 있습니다!각 화살표 컴포넌트가 React 컴포넌트의 모범 사례를 잘 따르고 있으며, SVG 속성과 props 전달이 올바르게 구현되어 있습니다.
Also applies to: 3-21, 23-41, 43-61, 63-81
packages/ui/src/icons/XCircleIcon.tsx (2)
1-2: 잘 사용된 SVGProps 임포트
이 파일에서react모듈로부터SVGProps를 명확히 임포트해 사용하신 점이 적절해 보입니다. 다른 아이콘들과의 일관성도 잘 유지되고 있습니다.
23-25: 아이콘 컴포넌트 최종 구조
마지막에export const XCircleIcon으로 내보내는 방식이 타 아이콘들과 동일하여 일관성이 유지되고 있습니다. 현재로서는 큰 문제가 없어 보입니다.
|
고생하셨어요 나연님! Icon이 각각 리액트 컴포넌트로 래핑되어있는데, Icon이라는 리액트 컴포넌트를 만들고, icon 이름, svg 경로를 key-value 쌍으로 관리하는건 어떨까요? |
packages/ui/src/index.ts
Outdated
| @@ -1 +1,2 @@ | |||
| export * from './components'; | |||
| export * from './icons'; | |||
There was a problem hiding this comment.
고생하셨어요 나연님!
Icon이 각각 리액트 컴포넌트로 래핑되어있는데, Icon이라는 리액트 컴포넌트를 만들고, icon 이름, svg 경로를 key-value 쌍으로 관리하는건 어떨까요?
assets/icon 하위에 svg 파일들을 넣고, Icon.tsx 라는 컴포넌트를 만들면 될 것 같아요. 그렇게 되면 이런식으로 components와도 따로 분리할 필요가 없어지구요!
There was a problem hiding this comment.
아니면 좀 더 간단하게, Icon이라는 컴포넌트 내에서 svg 이름들을 타입으로 관리하고, prop으로 받은 svg 이름에 맞게 조건부로 랜더링 하는게 어떨까요?
* fix(apps/web, packages/theme, packages/ui): theme, ui 패키지의 vanilla-extract 빌드 설정, css 관련 수정 * chore(packages/theme, packages/ui): build 스크립트 수정 * chore(packages/theme, packages/ui): exports 수정 * chore(packages/theme, packages/ui): exports 수정 * wip * chore(packages/theme, packages/ui): 불필요 dependency 제거 * chore(packages/theme, packages/ui): 불필요 필드 제거 * fix: 공통 패키지 루트로 끌어올리기, 패키지 버전 의존성 적용 * fix: 테스트 컴포넌트 제거 * fix: 테스트 컴포넌트 제거 * chore(apps/web): 주석처리 * chore: 빌드 테스트 * chore: 테스트용 컴포넌트 제거 --------- Co-authored-by: kangnayeon <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (17)
packages/ui/tsconfig.json (1)
12-12: 설정이 올바르게 추가되었습니다!
global.d.ts를 포함하도록 설정을 업데이트한 것이 적절합니다. SVG 파일을 React 컴포넌트로 사용하기 위한 타입 선언이 필요하기 때문입니다.
global.d.ts파일에 주석을 추가하여 SVG 모듈 선언의 목적을 문서화하는 것이 좋을 것 같습니다. 이는 다른 개발자들이 설정의 의도를 쉽게 이해하는 데 도움이 될 것입니다.packages/ui/global.d.ts (1)
1-4: SVG 타입 선언에 문서화를 추가하면 좋을 것 같습니다.SVG 파일을 React 컴포넌트로 처리하는 타입 선언이 잘 되어있습니다. 다만, 다음과 같은 JSDoc 문서화를 추가하면 더 좋을 것 같습니다:
+/** + * SVG 파일을 React 컴포넌트로 임포트하기 위한 타입 선언 + * @example + * import Icon from './icon.svg'; + * const MyComponent = () => <Icon width={24} height={24} />; + */ declare module '*.svg' { const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>; export default content; }packages/theme/src/themes/index.ts (2)
1-1: 테마 타입 내보내기를 더 명시적으로 만들면 좋을 것 같습니다.현재 구조는 작동하지만, 타입 내보내기를 더 명시적으로 만들어 가독성을 높일 수 있습니다.
import { vars } from './themes.css'; export * from './themes.css'; -export type { ThemeContract } from './contract'; +// 테마 시스템 타입 정의 +export type { + ThemeContract, + // 다른 테마 관련 타입들도 여기에 추가 +} from './contract';Also applies to: 3-4
4-5: Vars 타입 정의 위치를 재고해보세요.
Vars타입을 별도의 타입 정의 파일로 이동하는 것을 고려해보세요. 현재는 인라인으로 정의되어 있어 재사용이 어려울 수 있습니다.-export type Vars = typeof vars;새로운 파일
types.ts를 만들어 다음과 같이 정의하는 것을 추천드립니다:// types.ts import { vars } from './themes.css'; export type Vars = typeof vars;그리고 index.ts에서:
+export type { Vars } from './types';apps/web/src/app/page.tsx (1)
5-9: 시맨틱 HTML 구조 개선 제안현재 단순
div로 감싸진 구조를 시맨틱한 HTML 구조로 개선하면 좋을 것 같습니다.예시:
- <div> + <main> + <section> 웹 1팀 파이팅! <Icon /> <Button>jdlaifjdjlsaifj</Button> + </section> + </main> - </div>packages/theme/src/themes/themes.css.ts (1)
6-7: 테마 타입 문서화 및 유효성 검증 추가 제안현재 구현은 잘 되어있지만, 다음과 같은 개선사항을 고려해보세요:
- 테마 변수와 클래스에 대한 JSDoc 문서화
- 테마 계약(contract)에 대한 런타임 유효성 검증
예시:
/** 라이트 테마 클래스와 변수 */ export const [lightThemeClass, vars] = createTheme<ThemeContract>(lightTheme); /** 다크 테마 클래스 */ export const darkThemeClass = createTheme(vars, darkTheme); // 테마 유효성 검증 const validateTheme = (theme: unknown): theme is ThemeContract => { // 구현 필요 };apps/web/next.config.mjs (2)
4-4: TODO 코멘트 추적 필요디자인 시스템 패키지 추가에 대한 TODO 항목이 있습니다. 이를 이슈로 생성하여 추적하면 좋을 것 같습니다.
이슈를 생성해드릴까요?
6-8: Next.js 설정 강화 제안현재 기본적인 설정만 되어있습니다. 다음과 같은 추가 설정을 고려해보세요:
- 환경 변수 검증
- 번들 분석 설정
- 성능 최적화 설정
예시:
const nextConfig = { transpilePackages: ['@repo/ui', '@repo/theme'], poweredByHeader: false, reactStrictMode: true, compiler: { removeConsole: process.env.NODE_ENV === 'production', }, // ... 추가 설정 };packages/theme/src/components/ThemeProvider.tsx (2)
15-15: div 대신 Fragment를 사용하는 것이 좋아 보입니다.불필요한 DOM 계층 구조를 피하기 위해 div 대신 Fragment를 사용하고 className을 부모 요소에 전달하는 것이 좋겠습니다.
- return <div className={themeClass}>{children}</div>; + return <>{children}</>;그리고 테마 관리를 위해 Context API를 활용하는 것을 고려해보세요. 이를 통해 테마 값과 테마 변경 함수를 하위 컴포넌트에서 쉽게 사용할 수 있습니다.
4-7: 테마 변경 콜백 함수 추가를 제안드립니다.현재는 테마를 props로만 받고 있는데, 테마 변경 기능을 위한 콜백 함수를 추가하면 좋겠습니다.
type ThemeProviderProps = { children: ReactNode; theme?: 'light' | 'dark'; + onThemeChange?: (theme: 'light' | 'dark') => void; };apps/web/src/app/layout.tsx (1)
32-33: 시스템 테마 감지 기능 구현이 필요합니다.현재는 하드코딩된 'light' 테마를 사용하고 있습니다. TODO 코멘트에 명시된 대로 시스템 테마 감지 기능을 구현하면 좋겠습니다.
다음과 같은 구현을 제안드립니다:
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)'); const systemTheme = prefersDarkMode.matches ? 'dark' : 'light';또한 에러 바운더리 컴포넌트를 추가하여 런타임 에러 처리를 개선하는 것도 좋겠습니다.
packages/ui/esbuild.config.mjs (1)
34-40: CommonJS 빌드 이슈 해결 방안 제시현재 주석 처리된 CommonJS 빌드 관련하여 다음과 같은 해결 방안을 제안드립니다:
- 두 가지 별도의 빌드 설정 파일을 만들어 관리
- 조건부 내보내기(conditional exports)를 package.json에 추가하여 ESM/CJS 호환성 확보
CJS 빌드 설정에 대한 상세한 구현 방안이 필요하시다면 제안드리도록 하겠습니다.
packages/ui/src/components/Icon/Icon.tsx (1)
29-33: 색상 처리 로직 최적화 제안현재 주석 처리된
getColor함수의 구현을 다음과 같이 개선하는 것을 제안드립니다:const getColor = (color?: ColorType): string => { if (!color) return 'currentColor'; const [category, key] = color.split('.') as [keyof Colors, string]; - return tokens.colors[category][key as keyof Colors[typeof category]]; + return tokens.colors[category]?.[key as keyof Colors[typeof category]] ?? 'currentColor'; };이렇게 하면 잘못된 색상 값이 전달되었을 때의 폴백 처리가 가능합니다.
packages/ui/src/components/Icon/assets.ts (1)
24-47: 아이콘 객체 타입 안정성 개선 필요
icons객체에 대한 타입 안정성을 높이기 위해 다음과 같은 개선을 제안드립니다:type IconComponent = FC<SVGProps<SVGSVGElement>>; export const icons: Record<string, IconComponent> = { arrowBottom: IconArrowBottom, // ... 나머지 아이콘들 };이렇게 하면 타입 안정성이 향상되고 자동완성 기능도 개선됩니다.
packages/ui/src/scripts/generate-icon-map.ts (2)
17-24: 경로 설정 개선 필요하드코딩된 경로들을 설정 파일로 분리하는 것을 추천드립니다. 다음과 같은 방식을 고려해보세요:
// config.ts export const PATHS = { ICONS_DIR: path.resolve(__dirname, '../../src/assets/icons'), OUTPUT_PATH: path.resolve(__dirname, '../../src/components/Icon/icons.ts'), } as const;이렇게 하면 경로 관리가 용이해지고 유지보수성이 향상됩니다.
71-77: 생성된 파일에 대한 문서화 추가 필요생성된 파일의 상단에 자동 생성 파일임을 명시하는 주석을 추가하는 것이 좋습니다:
const fileContent = ` + /** + * @generated + * 이 파일은 자동으로 생성되었습니다. + * 직접 수정하지 마세요. + */ ${importStatements.join('\n')} export const icons = { ${iconMapping.join(',\n')} }; `;packages/ui/package.json (1)
19-20: 아이콘 관련 스크립트 추가에 대한 제안아이콘 맵 생성을 위한 스크립트가 추가되었네요. 향후 스프라이트 최적화를 고려하고 계신다고 하셨는데, 이를 위한 준비가 잘 되어있습니다.
하지만 minseong0324님이 제안하신 것처럼 key-value 쌍으로 아이콘을 관리하는 방식을 도입하시면 좋을 것 같습니다. 이는 아이콘 관리를 더욱 효율적으로 만들 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (23)
packages/ui/src/assets/icons/IconArrowBottom.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowLeft.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowRight.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowTop.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconChat.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheck.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheckCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconDocument.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconLineThree.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconNotice.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPencil.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlus.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlusPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSend.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconShopping.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSmile.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStack.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconX.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconXCircle.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (31)
apps/web/next.config.js(0 hunks)apps/web/next.config.mjs(1 hunks)apps/web/package.json(2 hunks)apps/web/src/app/layout.tsx(2 hunks)apps/web/src/app/page.tsx(1 hunks)next.config.js(0 hunks)package.json(1 hunks)packages/eslint-config/package.json(0 hunks)packages/theme/esbuild.config.js(0 hunks)packages/theme/esbuild.config.mjs(1 hunks)packages/theme/package.json(1 hunks)packages/theme/src/components/ThemeProvider.tsx(1 hunks)packages/theme/src/index.ts(1 hunks)packages/theme/src/sprinkles/index.ts(1 hunks)packages/theme/src/sprinkles/sprinkles.css.ts(1 hunks)packages/theme/src/themes/index.ts(1 hunks)packages/theme/src/themes/themes.css.ts(1 hunks)packages/typescript-config/base.json(1 hunks)packages/ui/esbuild.config.js(0 hunks)packages/ui/esbuild.config.mjs(1 hunks)packages/ui/global.d.ts(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/Button/Button.css.ts(1 hunks)packages/ui/src/components/Button/Button.tsx(1 hunks)packages/ui/src/components/Icon/Icon.css.ts(1 hunks)packages/ui/src/components/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.ts(1 hunks)packages/ui/tsconfig.json(1 hunks)turbo.json(1 hunks)
💤 Files with no reviewable changes (5)
- next.config.js
- packages/theme/esbuild.config.js
- packages/ui/esbuild.config.js
- packages/eslint-config/package.json
- apps/web/next.config.js
✅ Files skipped from review due to trivial changes (3)
- packages/theme/src/sprinkles/sprinkles.css.ts
- packages/theme/src/sprinkles/index.ts
- packages/ui/src/components/Button/Button.css.ts
🔇 Additional comments (15)
packages/ui/src/components/index.ts (1)
1-2: 깔끔한 컴포넌트 내보내기 구조입니다!Icon과 Button 컴포넌트를 명확하게 내보내고 있습니다. TestComponent를 제거하고 실제 사용할 컴포넌트들로 대체한 것이 좋습니다.
packages/theme/src/index.ts (1)
2-4: 테마 관련 내보내기가 체계적으로 구성되었습니다!sprinkles, tokens, ThemeProvider를 순차적으로 내보내는 구조가 명확하며, 특히 ThemeProvider 컴포넌트를 추가한 것이 테마 관리에 도움이 될 것 같습니다.
apps/web/src/app/page.tsx (1)
8-8: 의미 없는 버튼 텍스트 수정 필요"jdlaifjdjlsaifj"는 의미 없는 텍스트로 보입니다. 실제 사용될 텍스트로 변경이 필요합니다.
packages/ui/src/components/Icon/Icon.css.ts (1)
13-17: 주석 처리된 globalStyle 코드를 활성화하는 것이 필요해 보입니다.Icon 컴포넌트의 stroke와 fill 스타일링을 위해 주석 처리된 코드가 필요해 보입니다. 불필요한 코드라면 제거하고, 필요한 코드라면 활성화해주세요.
또한 backgroundColor 값이 테스트용으로 보이는데 (#ffdafd), 이 값이 필요한지 확인해주세요.
apps/web/src/app/layout.tsx (1)
5-5: UI 스타일 임포트가 주석 처리된 이유를 확인해주세요.
@repo/ui/styles임포트가 주석 처리되어 있습니다. 필요하지 않은 것인지, 아니면 추후 활성화할 예정인지 명확히 해주세요.packages/ui/esbuild.config.mjs (1)
12-12:platform설정 검토 필요UI 컴포넌트 라이브러리의 경우
platform: 'node'대신platform: 'browser'를 사용하는 것이 더 적절할 수 있습니다. 브라우저 환경에서 실행되는 컴포넌트이므로 브라우저 플랫폼으로 설정하는 것을 고려해보세요.turbo.json (1)
8-8: 빌드 출력 구성이 적절합니다!워크스페이스 패키지의
dist디렉토리를 빌드 출력에 포함시킨 것은 적절한 변경사항입니다.packages/typescript-config/base.json (1)
4-8: 경로 매핑 설정을 확인해주세요.
baseUrl과paths설정이 추가되었습니다. 다음 사항들을 확인해주세요:
- 각 패키지의
src디렉토리가 실제로 존재하는지- 매핑된 경로에 실제 소스 파일들이 있는지
✅ Verification successful
경로 매핑이 올바르게 구성되었습니다 ✅
packages/theme/src와packages/ui/src디렉토리가 모두 존재하며, 각각 적절한 TypeScript 소스 파일들을 포함하고 있습니다. 경로 매핑 설정이 정상적으로 작동할 것으로 확인됩니다.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 패키지 소스 디렉토리 존재 여부 확인 echo "패키지 소스 디렉토리 확인 중..." fd -t d "^src$" packages/theme packages/uiLength of output: 130
Script:
#!/bin/bash # 소스 파일 존재 여부 확인 echo "packages/theme/src의 소스 파일:" fd -e ts -e tsx -e js -e jsx . packages/theme/src echo -e "\npackages/ui/src의 소스 파일:" fd -e ts -e tsx -e js -e jsx . packages/ui/srcLength of output: 1078
packages/theme/package.json (2)
30-30: esbuild 버전 다운그레이드에 대해 확인이 필요합니다.
esbuild가 최신 버전(^0.24.0)에서 이전 버전(^0.21.0)으로 다운그레이드되었습니다. 이는 잠재적인 문제를 일으킬 수 있습니다.다운그레이드의 이유를 명확히 하고, 호환성 문제가 없는지 확인해주세요.
9-14: exports 설정이 적절합니다!패키지의 진입점과 스타일 파일에 대한 exports 설정이 명확하게 정의되어 있습니다.
package.json (1)
38-40: vanilla-extract 의존성 추가가 적절합니다!테마 시스템 구현을 위한 vanilla-extract 관련 패키지들이 적절하게 추가되었습니다.
packages/ui/package.json (4)
5-14: 모듈 설정이 적절하게 구성되었습니다.ESM 모듈 시스템으로의 전환과 exports 필드 구성이 잘 되어있습니다. 스타일 파일도 별도로 export하여 필요한 경우에만 import할 수 있도록 한 점이 좋습니다.
34-35: 새로운 esbuild 플러그인 추가에 대한 검토SVG 처리를 위한
esbuild-plugin-svgr와esbuild-plugin-preserve-directives가 추가되었습니다. 이는 아이콘 컴포넌트 구현에 필요한 적절한 선택으로 보입니다.
39-40: peer 의존성 추가가 적절합니다.React DOM을 peer 의존성으로 추가한 것이 적절합니다. 이는 호스트 애플리케이션과의 버전 충돌을 방지하는 좋은 방법입니다.
33-33: esbuild 버전 다운그레이드에 대한 확인 필요esbuild 버전이 0.24.0에서 0.21.0으로 다운그레이드되었습니다. 특별한 이유가 있는지 확인이 필요합니다.
| return ( | ||
| <div> | ||
| 웹 1팀 파이팅! | ||
| <Icon /> |
There was a problem hiding this comment.
Icon 컴포넌트의 필수 props 누락
Icon 컴포넌트가 props 없이 사용되고 있습니다. 아이콘을 정상적으로 표시하기 위해서는 필요한 props를 전달해야 합니다.
| interface ButtonProps { | ||
| children: React.ReactNode; | ||
| onClick?: () => void; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Button 컴포넌트 기능 확장 필요
현재 구현된 기본적인 props 외에 다음과 같은 추가 기능이 필요해 보입니다:
- type, disabled 등 일반적인 button 속성
- aria-label, role 등 접근성 속성
- variant, size 등 스타일 변형 옵션
예시:
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
type?: 'button' | 'submit' | 'reset';
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'text';
size?: 'small' | 'medium' | 'large';
ariaLabel?: string;
}| backgroundColor: '#3498db', | ||
| width: '100px', | ||
| height: '100px', | ||
| padding: '10px 20px', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
하드코딩된 스타일 값들을 테마 변수로 교체해주세요.
현재 backgroundColor, width, height 등이 하드코딩되어 있어 컴포넌트의 재사용성이 제한될 수 있습니다. 테마 시스템을 활용하여 이 값들을 변수화하는 것이 좋겠습니다.
export const parent = style({
- backgroundColor: '#3498db',
- width: '100px',
- height: '100px',
+ backgroundColor: 'var(--background-color)',
+ width: 'fit-content',
+ height: 'fit-content',
padding: '10px 20px',
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| backgroundColor: '#3498db', | |
| width: '100px', | |
| height: '100px', | |
| padding: '10px 20px', | |
| backgroundColor: 'var(--background-color)', | |
| width: 'fit-content', | |
| height: 'fit-content', | |
| padding: '10px 20px', |
| .build({ | ||
| entryPoints: ['./src/index.ts'], | ||
| bundle: true, | ||
| plugins: [ | ||
| vanillaExtractPlugin(), | ||
| preserveDirectivesPlugin({ | ||
| directives: ['use client', 'use strict'], | ||
| include: /\.(js|ts|jsx|tsx)$/, | ||
| exclude: /node_modules/, | ||
| }), | ||
| ], | ||
| format: 'esm', | ||
| loader: { '.css': 'file' }, | ||
| outdir, | ||
| external: ['react', 'react-dom'], | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
빌드 설정 최적화가 필요해 보입니다.
현재 빌드 설정에 다음 사항들이 누락되어 있습니다:
- 소스맵 생성
- 프로덕션 환경을 위한 코드 최소화
- 개발 환경을 위한 watch 모드
다음과 같이 설정을 개선해보세요:
.build({
entryPoints: ['./src/index.ts'],
bundle: true,
+ sourcemap: true,
+ minify: process.env.NODE_ENV === 'production',
+ watch: process.env.NODE_ENV === 'development',
plugins: [📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .build({ | |
| entryPoints: ['./src/index.ts'], | |
| bundle: true, | |
| plugins: [ | |
| vanillaExtractPlugin(), | |
| preserveDirectivesPlugin({ | |
| directives: ['use client', 'use strict'], | |
| include: /\.(js|ts|jsx|tsx)$/, | |
| exclude: /node_modules/, | |
| }), | |
| ], | |
| format: 'esm', | |
| loader: { '.css': 'file' }, | |
| outdir, | |
| external: ['react', 'react-dom'], | |
| }) | |
| .build({ | |
| entryPoints: ['./src/index.ts'], | |
| bundle: true, | |
| sourcemap: true, | |
| minify: process.env.NODE_ENV === 'production', | |
| watch: process.env.NODE_ENV === 'development', | |
| plugins: [ | |
| vanillaExtractPlugin(), | |
| preserveDirectivesPlugin({ | |
| directives: ['use client', 'use strict'], | |
| include: /\.(js|ts|jsx|tsx)$/, | |
| exclude: /node_modules/, | |
| }), | |
| ], | |
| format: 'esm', | |
| loader: { '.css': 'file' }, | |
| outdir, | |
| external: ['react', 'react-dom'], | |
| }) |
| export const Icon: FC<IconProps> = ({ | ||
| name, | ||
| stroke, | ||
| fill, | ||
| ...rest | ||
| }: IconProps) => { |
There was a problem hiding this comment.
미구현된 아이콘 렌더링 로직 구현 필요
현재 컴포넌트가 실제 아이콘을 렌더링하지 않고 있습니다. 다음 사항들을 구현해주세요:
- 주석 처리된 SVG 렌더링 로직 활성화
- name prop 타입 정의 활성화
- 불필요한 props 제거 (현재 사용되지 않는 경우)
| return ( | ||
| <div className={styles.parent}> | ||
| {/* <SVG {...rest} /> */} | ||
| hi | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
임시 구현 코드 수정 필요
현재 hi 텍스트를 렌더링하는 임시 구현을 실제 아이콘 렌더링 로직으로 교체해주세요. 다음과 같이 수정하는 것을 제안드립니다:
return (
<div className={styles.parent}>
- {/* <SVG {...rest} /> */}
- hi
+ <SVG fill={resolvedFill} stroke={resolvedStroke} {...rest} />
</div>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <div className={styles.parent}> | |
| {/* <SVG {...rest} /> */} | |
| hi | |
| </div> | |
| ); | |
| return ( | |
| <div className={styles.parent}> | |
| <SVG fill={resolvedFill} stroke={resolvedStroke} {...rest} /> | |
| </div> | |
| ); |
| // 파일 생성/덮어쓰기 | ||
| fs.writeFileSync(OUTPUT_PATH, fileContent, 'utf-8'); | ||
|
|
There was a problem hiding this comment.
파일 시스템 작업 에러 처리 추가 필요
파일 시스템 작업에 대한 에러 처리가 누락되어 있습니다. 다음과 같은 방식으로 에러 처리를 추가해주세요:
try {
fs.writeFileSync(OUTPUT_PATH, fileContent, 'utf-8');
console.log(`아이콘 생성: ${OUTPUT_PATH}`);
} catch (error) {
console.error('아이콘 맵 생성 중 오류 발생:', error);
process.exit(1);
}| "@repo/theme": "workspace:^", | ||
| "@repo/ui": "workspace:^", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
의존성 중복을 제거해주세요.
@repo/theme와 @repo/ui 패키지가 dependencies와 devDependencies 모두에 선언되어 있습니다. 이는 불필요한 중복입니다.
다음과 같이 수정해주세요:
"dependencies": {
"@repo/theme": "workspace:^",
"@repo/ui": "workspace:^",
"next": "14.2.21",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
- "@repo/theme": "workspace:*",
- "@repo/ui": "workspace:*",
"@types/node": "^20.11.24",
"@types/react": "18.3.0",
"@types/react-dom": "18.3.1",Also applies to: 23-24
관련 이슈
#39
변경 사항
sprite 사용해서 최적화 해 보면 좋을 것 같은데, 개발이 조금 진행된 후 번들 사이즈 비교해 보는 것이 더욱 유의미할 것 같아 후순위로 미뤄 뒀습니다!
우선 리액트 컴포넌트로 감싸는 것만 해 뒀어요. 모든 아이콘 import 테스트 해서 잘 되는 것 확인했습니다!
그리고 고민되는 지점이 있어요! 아이콘들이 stroke 속성 또는 fill 속성으로 색상을 채우는데, 각 아이콘마다 어떤 속성을 사용하는지 매번 확인하기가 번거로울 것 같아요. 모두 fill로 통일할까 싶은데 혹시 어떻게 생각하시나요?
레퍼런스
Summary by CodeRabbit
릴리즈 노트
새로운 기능
개선 사항
변경 사항