[Fix] Spacing 컴포넌트 수정

[kongnayeon]

관련 이슈

#39

변경 사항

• 컴포넌트 Prop 타입 선언 시 type 키워드 수정하도록 수정
• Prop 타입 export
• React.FC 제거
• function 함수 사용

수정했습니다~!

레퍼런스

Summary by CodeRabbit

• 접근성 개선
  • 새로운 접근성 속성 추가: role 및 aria-label 지원
• 코드 구조 개선
  • 컴포넌트 타입 및 함수 선언 방식 최적화
• 스타일링
  • 인라인 스타일 할당 방식 간소화
• 내보내기 개선
  • Spacing 컴포넌트 및 관련 타입의 명시적 내보내기 추가

[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/Spacing/Spacing.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)

워크스루

이 변경 사항은 Spacing 컴포넌트의 구조를 개선하고 접근성을 향상시키는 것에 중점을 두고 있습니다. SpacingProps를 타입 별칭으로 변경하고, 컴포넌트의 내보내기 방식을 함수형 컴포넌트에서 표준 함수 선언으로 수정했습니다. 새로운 접근성 속성인 role과 aria-label을 추가하여 컴포넌트의 사용성을 개선했습니다.

변경 사항

파일	변경 요약
packages/ui/src/components/Spacing/Spacing.tsx	- SpacingProps를 타입 별칭으로 변경 - direction의 타입을 SpacingDirection으로 수정 - 컴포넌트 내보내기 방식 수정 - 접근성 속성 추가
packages/ui/src/components/index.ts	- Spacing 컴포넌트의 내보내기 방식을 수정 - SpacingDirection 및 SpacingProps 타입을 명시적으로 내보내기 추가

관련 가능한 PR

• [Feat] Spacing 컴포넌트 추가 #49: 새로운 Spacing 컴포넌트 도입 및 SpacingProps 인터페이스 업데이트

제안된 레이블

enhancement

제안된 리뷰어

• minseong0324

시 (詩)

🐰 간격의 춤, 컴포넌트의 노래
타입은 유연하게, 접근성은 맑게
한 줄 한 줄 개선된 코드
토끼의 눈빛으로 바라보네
더 나은 UI의 작은 혁명 🌈

Finishing Touches

• 📝 Generate Docstrings (Beta)

---

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

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

10-10: 함수 선언 방식이 개선되었습니다!

React.FC를 제거하고 일반 함수로 변경한 것이 최신 React 패턴에 잘 부합합니다.

추가로 고려해볼 만한 사항:

// 타입 안전성을 더욱 높이기 위해 direction을 상수로 정의하는 것을 고려해보세요
const DIRECTIONS = ['row', 'column'] as const;
type Direction = typeof DIRECTIONS[number];

---

21-28: 스타일 할당 방식과 접근성이 개선되었습니다!

assignInlineVars를 사용한 스타일 할당이 더 명확해졌고, 접근성 속성 추가는 훌륭한 개선입니다.

접근성 개선을 위한 제안:

-      aria-label="space"
+      aria-label={`${direction} 방향 ${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 08232ee and 17f9565.

📒 Files selected for processing (1)

• packages/ui/src/components/Spacing/Spacing.tsx (2 hunks)

🔇 Additional comments (2)

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

5-8: 타입 정의가 깔끔하게 개선되었습니다!

React.HTMLAttributes<HTMLDivElement>를 확장한 것이 좋은 접근 방식입니다. 이를 통해 div 요소의 모든 기본 속성을 자연스럽게 지원할 수 있습니다.

---

Line range hint 1-32: 전반적으로 잘 구현된 컴포넌트입니다!

코드가 더 깔끔해졌고, 타입 안전성과 접근성이 개선되었습니다. PR의 목표를 잘 달성했습니다.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

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

Line range hint 11-17: sizeValue 계산 로직을 단순화할 수 있습니다.

현재 조건문이 불필요하게 복잡합니다. direction이 'row'와 'column' 모두 같은 값을 반환하고 있습니다.

다음과 같이 단순화하는 것을 제안드립니다:

-  const sizeValue =
-    direction === 'row'
-      ? tokens.spacing[size]
-      : direction === 'column'
-        ? tokens.spacing[size]
-        : 'auto';
+  const sizeValue = ['row', 'column'].includes(direction)
+    ? tokens.spacing[size]
+    : 'auto';

---

22-29: 접근성 속성을 더 의미있게 개선할 수 있습니다.

현재 aria-label이 "space"로 설정되어 있는데, 이는 스크린 리더 사용자에게 충분한 정보를 제공하지 않을 수 있습니다.

다음과 같이 방향과 크기 정보를 포함하는 것을 제안드립니다:

-      aria-label="space"
+      aria-label={`${direction} 방향 ${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 17f9565 and ad14118.

📒 Files selected for processing (1)

• packages/ui/src/components/Spacing/Spacing.tsx (2 hunks)

🔇 Additional comments (1)

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

6-9: 타입 정의가 깔끔하게 잘 되어있습니다!

HTMLAttributes를 확장하여 재사용성을 높이고, 필요한 속성들을 명확하게 정의했습니다.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

1-2: 명시적인 내보내기로 변경한 것이 좋습니다!

와일드카드 내보내기(export *) 대신 명시적인 내보내기를 사용하고 타입을 명확하게 내보내도록 변경한 것이 코드의 가독성과 타입 안정성을 향상시켰습니다.

추가적인 제안: 모든 컴포넌트의 내보내기를 일관성 있게 유지하기 위해 Icon 관련 내보내기도 같은 스타일로 그룹화하는 것이 좋을 것 같습니다:

export { Spacing } from './Spacing/Spacing';
export type { SpacingDirection, SpacingProps } from './Spacing/Spacing';
-export { Icon } from './Icon/Icon';
-export type { IconName, IconProps } from './Icon/Icon';
+export { Icon } from './Icon/Icon';
+export type { IconName, IconProps } from './Icon/Icon';

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between ad14118 and 71b2aa8.

📒 Files selected for processing (2)

• packages/ui/src/components/Spacing/Spacing.tsx (2 hunks)
• packages/ui/src/components/index.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/ui/src/components/Spacing/Spacing.tsx

[minseong0324]

고생하셨습니다 나연님~!