[Fix]: Icon 컴포넌트 수정

[minseong0324]

관련 이슈

Icon 컴포넌트의 prop 타입을 export 하지 않고 있었고, 불필요한 직렬화/역직렬화 과정을 개선했어요. 그리고 조금 더 사용성이 좋도록 api를 개선했어요.

React.FC 유틸 타입을 사용하면 children이 암묵적으로 optional하게 적용될 수 있어서 변경했어요.

변경 사항

레퍼런스

Summary by CodeRabbit

• 새로운 기능

  • 아이콘 컴포넌트의 유연성 향상
  • 테마 토큰을 사용한 아이콘 색상 관리 개선

• 개선 사항

  • 아이콘 렌더링을 위한 새로운 속성 추가 (size, type, color)
  • 접근성 향상을 위한 아리아 레이블 및 역할 속성 추가

• 기술적 변경

  • 컴포넌트 내보내기 방식 최적화
  • TypeScript 컴파일러 설정 업데이트

[coderabbitai]

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/ui/src/components/Icon/Icon.tsx

Oops! Something went wrong! :(

ESLint: 9.17.0

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs
at packageResolve (node:internal/modules/esm/resolve:839:9)
at moduleResolve (node:internal/modules/esm/resolve:908:18)
at defaultResolve (node:internal/modules/esm/resolve:1038:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
at ModuleJob._link (node:internal/modules/esm/module_job:126:49)

개요

Walkthrough

이 풀 리퀘스트는 Icon 컴포넌트의 구현 및 사용 방식을 크게 변경합니다. packages/ui/src/components/Icon/Icon.tsx 파일에서 아이콘 컴포넌트의 타입과 프로퍼티를 리팩토링하고, apps/web/src/app/page.tsx에서 새로운 아이콘 사용 패턴을 도입했습니다. 또한 tsconfig.json에 컴파일러 옵션을 추가하고 내보내기 방식을 조정했습니다.

Changes

파일	변경 요약
apps/web/src/app/page.tsx	- @repo/theme에서 tokens 가져오기 추가 - Icon 컴포넌트 프로퍼티 변경 (width, height → size) - type 프로퍼티 도입
packages/ui/src/components/Icon/Icon.tsx	- FC 타입 제거 - IconName, IconProps 타입 내보내기 - 아이콘 렌더링 로직 재작성
packages/ui/src/components/index.ts	- 내보내기 방식 변경 (와일드카드 → 명시적 내보내기)
packages/ui/tsconfig.json	- "rootDir": "src" 컴파일러 옵션 추가

Possibly related PRs

• [Feat] Icon 컴포넌트 추가 #48: Icon 컴포넌트 생성 및 기능 개선과 직접적으로 관련됨

Suggested labels

enhancement

Suggested reviewers

• kongnayeon

Poem

🐰 아이콘의 춤, 새로운 스타일로
크기와 타입, 토큰의 노래
코드는 춤추고 기능은 빛나네
리팩토링의 토끼, 기쁨을 노래해! 🎨

---

🪧 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 (2)

apps/web/src/app/page.tsx (1)

2-2: Icon 컴포넌트의 새로운 API 적용이 잘 되었습니다!

기존의 width/height 속성 대신 size prop을 사용하고, type prop을 통해 fill/stroke를 구분하는 방식으로 잘 개선되었습니다. 또한 theme token을 활용하여 color를 지정한 것도 좋은 방향입니다.

다만, 접근성 향상을 위해 aria-label 속성 추가를 고려해보시면 좋을 것 같습니다.

-      <Icon size={24} name="stack" type="stroke" />
+      <Icon size={24} name="stack" type="stroke" aria-label="스택 아이콘" />

Also applies to: 7-14

packages/ui/src/components/Icon/Icon.tsx (1)

31-42: 스타일 로직이 깔끔하게 정리되었습니다!

style 객체 구성이 명확하고, assignInlineVars를 통한 CSS 변수 할당이 잘 되어있습니다. role과 aria-label 속성도 적절히 추가되었습니다.

다만, size prop의 타입이 number | string으로 되어있는데, 단위 검증을 위해 아래와 같은 타입 가드 추가를 고려해보시면 좋을 것 같습니다:

function getSizeWithUnit(size: number | string): string {
  if (typeof size === 'number') {
    return `${size}px`;
  }
  return size;
}

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2333920 and 3c44a26.

📒 Files selected for processing (4)

• apps/web/src/app/page.tsx (1 hunks)
• packages/ui/src/components/Icon/Icon.tsx (1 hunks)
• packages/ui/src/components/index.ts (1 hunks)
• packages/ui/tsconfig.json (1 hunks)

🔇 Additional comments (4)

packages/ui/src/components/index.ts (1)

2-3: 명시적인 export 구문으로의 변경이 잘 이루어졌습니다!

와일드카드 export 대신 명시적인 named export를 사용함으로써 더 명확한 public API를 제공하게 되었습니다. Icon 컴포넌트와 관련 타입들을 개별적으로 export하여 타입 안정성도 향상되었습니다.

packages/ui/src/components/Icon/Icon.tsx (2)

7-15: 타입 정의가 명확하게 개선되었습니다!

IconName과 IconProps를 export 타입으로 변경하고, 프로퍼티 구조를 단순화한 것이 좋습니다. 특히 theme token 타입과 연동하여 color 속성의 타입 안정성을 확보한 점이 인상적입니다.

---

17-25: 컴포넌트 구현이 더욱 견고해졌습니다!

기본값 설정과 props 구조분해할당이 잘 되어있습니다. 특히 aria-label을 지원하여 접근성을 고려한 점이 좋습니다.

packages/ui/tsconfig.json (1)

9-9: TypeScript 설정이 적절히 개선되었습니다!

rootDir를 src로 지정하여 소스 파일 구조를 명확히 한 것이 좋습니다. 이는 빌드 출력물의 구조를 더 예측 가능하게 만들어줄 것입니다.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/ui/src/components/Icon/Icon.tsx (1)

28-31: 타입 안전성을 개선할 수 있습니다.

스타일 로직이 깔끔하지만, 타입 안전성을 더 강화할 수 있습니다.

다음과 같이 개선해보세요:

  const colorStyle = {
-    ...(type !== 'stroke' && { [styles.fillColor]: color }),
-    ...(type !== 'fill' && { [styles.strokeColor]: color }),
+    ...(type === 'fill' && { [styles.fillColor]: color }),
+    ...(type === 'stroke' && { [styles.strokeColor]: color }),
  };

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 3c44a26 and fcaed50.

📒 Files selected for processing (1)

• packages/ui/src/components/Icon/Icon.tsx (1 hunks)

🔇 Additional comments (3)

packages/ui/src/components/Icon/Icon.tsx (3)

7-15: 타입 정의가 개선되었습니다!

타입 정의가 더 명확하고 재사용 가능하도록 개선되었습니다. 특히 다음 사항들이 긍정적입니다:

• 타입 내보내기를 통한 재사용성 향상
• type과 color 속성을 통한 유연한 스타일링
• aria-label 추가로 접근성 개선

---

17-25: 기본값 설정이 적절합니다.

컴포넌트 시그니처가 개선되었습니다:

• type, color, size에 대한 기본값 설정이 적절합니다
• 일반 함수 선언으로 변경한 것이 코드 가독성을 높입니다

---

33-46: 렌더링 로직이 잘 구현되었습니다.

접근성과 스타일링이 적절히 구현되었습니다. 다만, size 속성의 타입 검증을 추가하면 좋을 것 같습니다.

size 속성의 유효성을 검증하는 로직을 추가하는 것을 고려해보세요:

const validateSize = (size: number | string) => {
  const numSize = typeof size === 'string' ? parseInt(size, 10) : size;
  return Number.isFinite(numSize) && numSize > 0 ? size : 24;
};

[kongnayeon]

interface가 아니라 type으로 쓰시는 이유가 있을까요??

[minseong0324]

IDE에서 마우스 호버 했을 때 타입이 떠요!

[kongnayeon]

오잉 인터페이스도 뜨지 않나요?? 확장성 고려하면 interface로 쓰는 것이 좋다고 생각해서요...!!!

[minseong0324]

요거 말씀드린거였어요!

[minseong0324]

그리고 type 또한 & 사용하면 확장이 되지 않나요?

[kongnayeon]

아 저 부분 말씀하신 거군요!!!
이 글 참고해 보시면 좋을 것 같아요! 앞으로 DTO도 인터페이스를 사용해야 할 것 같아서요...!
컴포넌트 props, API request, response 관련 타입은 interface를 사용하는 게 좋지 않을까 싶어요! 미리보기 관련은 위 글에 나와 있는 Peek Type Definition을 설정해서 사용해도 좋지 않을까요??

[kongnayeon]

요렇게 내려 주는 것보다 warning300이라는 유니온 타입으로 내려 주는 게 더 편하다고 생각하는데 이렇게 바꾸신 이유가 있을까요??

[minseong0324]

의존성 관점에서 생각하면 apps/web에서도 이미 @repo/theme을 갖고 있기 때문에 문제가 되지 않고, 하나의 source에서 색상 값을 내려준다고 생각하니 오히려 더 편하다고 생각했어요.

Icon 컴포넌트 내부에서 어떻게 색상이 유니온으로 처리되는지 생각하지 않고 명시적으로 색상 주입이 가능해요!

[kongnayeon]

기존 방식도 색상은 명시적으로 주입할 수 있다고 생성되어서요!! 이미 ui 패키지가 theme 패키지에 의존성을 가진 이상 매번 theme을 import 할 필요는 없다고 생각이 되긴 하는데,,, 요건 기존 방식대로 가는 건 어떨까요?

[minseong0324]

제가 생각을 아예 잘못했네요..
colors의 타입을 @repo/theme tokens의 타입으로 고정시키는 것 자체가 문제였어요. string으로 열어두고 @repo/theme에서 Import해서 주입하여 자유도를 열어주는 것이 좋다고 생각이 들어요!

c1722db

[kongnayeon]

기존 방식대로면 아이콘 컴포넌트 사용 시 color=''라고만 명시해도 코드 값에 대한 자동완성이 떠서 사용하기 편한데, 제시해 주신 방식에서는 Icon 컴포넌트를 사용할 때마다 theme 패키지를 임포트해서 컬러 값을 직접 넣어 주게 되어야 하는 것 같아서요!
저희는 한 서비스 내부에서 사용되는 컴포넌트를 만드는 거니까 theme에 의존해서 토큰 값만 넣도록 하는 게 개발할 때도 편하지 않을까요?

[minseong0324]

그 점이 저는 유연하지 않다고 생각했어요..! Icon 컴포넌트 내에서 처리하게 되면 @packages/theme 이외의 색상을 넣지 못하게 되는데.. 예외적인 상황을 고려해야하지 않을까요?

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/ui/src/components/Icon/Icon.tsx (1)

36-44: size prop의 타입 검증이 필요할 수 있습니다.

현재 size prop이 number | string 타입을 허용하고 있는데, 유효한 CSS 크기 값인지 검증하는 것이 좋을 것 같습니다.

다음과 같은 유틸리티 함수를 추가하는 것을 고려해보세요:

const isValidSize = (size: number | string): boolean => {
  if (typeof size === 'number') return size > 0;
  return /^(\d+(\.\d+)?)(px|rem|em|%)?$/.test(size);
};

그리고 컴포넌트에서 다음과 같이 사용:

if (!isValidSize(size)) {
  console.warn(`Invalid size value: ${size}. Using default size: 24`);
  size = 24;
}

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between fcaed50 and c1722db.

📒 Files selected for processing (1)

• packages/ui/src/components/Icon/Icon.tsx (1 hunks)

🔇 Additional comments (3)

packages/ui/src/components/Icon/Icon.tsx (3)

7-15: 타입 정의가 잘 되어있습니다!

타입과 인터페이스 선택에 대한 이전 논의를 고려했을 때, IDE 호버 기능성을 위해 type을 사용한 것이 타당해 보입니다. 또한 접근성을 위한 aria-label 속성도 잘 포함되어 있습니다.

---

17-25: 컴포넌트 구조가 개선되었습니다!

• FC 타입을 제거하고 일반 함수로 변경한 것이 좋습니다
• 기본값 설정이 잘 되어있어 사용성이 향상되었습니다
• Props 분해가 깔끔하게 되어있습니다

---

28-31: 색상 처리 로직이 효율적으로 개선되었습니다!

type prop에 따라 fill과 stroke 색상을 동적으로 적용하는 로직이 매우 깔끔합니다.