[Refactor] Spinner 컴포넌트 css 방식으로 변경

[kongnayeon]

관련 이슈

close #87
#69

변경 사항

성능을 위해 Spinner 컴포넌트를 기존의 lottie 애니메이션으로 사용하던 방식에서 css로 변경했습니다. 디자이너 분께 애니메이션 확인도 받았어요!
그리고 버튼의 isLoading 상태에도 스피너 추가해 뒀어요!

레퍼런스

Summary by CodeRabbit

• 새로운 기능

  • 스피너 컴포넌트의 크기와 색상 옵션 추가
  • 버튼의 로딩 상태 표시 기능 개선

• 버그 수정

  • 스피너 컴포넌트의 렌더링 방식 최적화

• 스타일 변경

  • 버튼 변형 옵션 'terminal'에서 'text'로 변경
  • 버튼 및 스피너의 스타일 세부 조정

• 기타 개선

  • 컴포넌트 타입 정의 및 가독성 향상
  • 로딩 상태 시각적 표현 개선

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

apps/web/src/app/page.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)

워크스루

이 풀 리퀘스트는 Spinner 컴포넌트를 Lottie 애니메이션에서 CSS 기반 SVG 스피너로 리팩토링하는 변경 사항을 포함하고 있습니다. UI 패키지의 Spinner 컴포넌트가 완전히 재설계되어 크기와 색상 변형을 지원하며, 버튼 컴포넌트와 통합되어 로딩 상태를 시각적으로 표현할 수 있게 되었습니다.

변경 사항

파일	변경 요약
apps/web/src/app/page.tsx	Spinner 컴포넌트 직접 가져오기, 버튼 로딩 상태 및 스피너 속성 업데이트
packages/ui/package.json	Spinner 익스포트에 타입 정의 파일 추가
packages/ui/src/components/Button/*	버튼 스타일 및 로딩 상태 변경, 버튼 변형 업데이트
packages/ui/src/components/Spinner/*	Lottie에서 SVG 기반 스피너로 완전 재구현

이슈 평가

목표	해결 여부	설명
Lottie에서 CSS 기반 스피너로 변경 [#87]	✅

관련될 수 있는 PR

• [Feat] Spinner 컴포넌트 추가 #69: 스피너 컴포넌트 기능 확장
• [Feat] 스켈레톤 컴포넌트 #84: 스켈레톤 컴포넌트 추가로 로딩 상태 개선

제안된 레이블

enhancement

제안된 리뷰어

• minseong0324

시

🐰 스피너 돌아간다, 원을 그리며
CSS의 마법으로 생명을 얻어
로딩의 춤을, 부드럽게 추네
애니메이션의 새로운 이야기 🌀

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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.
  • 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 (5)

packages/ui/src/components/Button/Button.css.ts (4)

29-38: 사이즈 변경에 대한 문서화가 필요합니다.

padding과 fontSize의 변경이 스피너 컴포넌트 통합을 위한 것으로 보입니다. 이러한 변경사항과 그 이유를 코드 주석으로 문서화하면 좋을 것 같습니다.

    size: {
      large: {
        gap: '0.8rem',
+       // 스피너 통합을 위해 패딩 조정됨 (1.8rem → 1.2rem)
        padding: '1.2rem 1.8rem',
        borderRadius: tokens.radius[12],
+       // 스피너 통합을 위해 폰트 크기 조정됨
        fontSize: tokens.typography.fontSize[20],
        fontWeight: tokens.typography.fontWeight.semibold,
      },

---

Line range hint 72-87: variant 이름 변경이 적절하며, TODO 항목 추적이 필요합니다.

1. 'terminal'에서 'text'로의 이름 변경은 버튼의 용도를 더 명확하게 표현합니다.
2. disabled 상태의 스타일링에 대한 TODO 항목이 있습니다.

디자이너의 피드백을 기다리는 TODO 항목을 이슈로 생성하여 추적하면 좋을 것 같습니다. 이슈를 생성해드릴까요?

---

89-95: 로딩 상태 처리가 적절하나 개선의 여지가 있습니다.

로딩 중 사용자 상호작용을 비활성화하는 것은 좋은 접근입니다. 다만, false 상태가 빈 객체인 경우는 불필요할 수 있습니다.

    isLoading: {
      true: {
        cursor: 'not-allowed',
        pointerEvents: 'none',
      },
-     false: {},
    },

---

98-111: 로딩 상태의 패딩값을 디자인 토큰으로 관리하면 좋을 것 같습니다.

현재 하드코딩된 패딩값(5.45rem, 0.7rem 등)을 디자인 토큰으로 추출하여 관리하면 일관성 있는 유지보수가 가능할 것 같습니다.

+ // In tokens.ts
+ export const buttonLoadingPadding = {
+   large: {
+     vertical: '0.7rem',
+     horizontal: '5.45rem'
+   },
+   small: {
+     vertical: '0.55rem',
+     horizontal: '2rem'
+   }
+ };

  compoundVariants: [
    {
      variants: { size: 'large', isLoading: true },
      style: {
-       padding: '0.7rem 5.45rem',
+       padding: `${tokens.buttonLoadingPadding.large.vertical} ${tokens.buttonLoadingPadding.large.horizontal}`,
      },
    },

packages/ui/src/components/Spinner/Spinner.css.ts (1)

59-78: 원 스타일 레시피가 잘 구현되었습니다.

기본 스타일과 색상 변형이 잘 정의되었습니다. 디자인 토큰을 활용한 색상 정의가 좋습니다.

한 가지 제안: strokeWidth 값도 디자인 토큰으로 관리하는 것을 고려해보세요.

 base: {
   fill: 'none',
   stroke: '#000',
-  strokeWidth: '2.5',
+  strokeWidth: tokens.borderWidths.spinner,
   strokeLinecap: 'round',

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 73d07f8 and a9a57f9.

📒 Files selected for processing (7)

• apps/web/src/app/page.tsx (5 hunks)
• packages/ui/package.json (1 hunks)
• packages/ui/src/components/Button/Button.css.ts (4 hunks)
• packages/ui/src/components/Button/Button.tsx (3 hunks)
• packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx (1 hunks)
• packages/ui/src/components/Spinner/Spinner.css.ts (1 hunks)
• packages/ui/src/components/Spinner/Spinner.tsx (1 hunks)

🔇 Additional comments (14)

packages/ui/src/components/Button/Button.css.ts (2)

12-13: 텍스트 스타일링이 적절히 개선되었습니다!

lineHeight와 textAlign 속성이 추가되어 버튼 내 텍스트의 가독성과 정렬이 향상되었습니다.

---

118-119: 애드온 크기 조정이 적절합니다.

버튼 크기 조정에 맞춰 애드온의 크기도 적절히 조정되었습니다.

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

5-6: Props 인터페이스가 개선되었습니다!

타입 정의가 명확하고 간단해졌습니다. 직접적인 색상과 크기 값을 사용하는 것이 더 직관적입니다.

---

14-30: SVG 기반 스피너 구현이 잘 되었습니다!

Lottie 애니메이션에서 CSS 기반 SVG 애니메이션으로의 전환이 성공적으로 이루어졌습니다. 이는 다음과 같은 이점이 있습니다:

• 더 나은 성능
• 더 작은 번들 크기
• 더 간단한 유지보수

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

16-20: SpinnerColor 매핑이 적절합니다.

각 버튼 변형에 대한 스피너 색상 매핑이 디자인 시스템과 일관성 있게 정의되었습니다.

---

43-43: 스피너 통합이 잘 구현되었습니다.

로딩 상태에서의 스피너 표시가 적절하게 구현되었습니다. 버튼의 크기와 변형에 따라 스피너의 크기와 색상이 자동으로 조정됩니다.

---

6-6: ButtonVariant 타입 변경 사항을 확인해주세요.

'terminal'에서 'text'로의 변경이 의도적인지 확인이 필요합니다. 이 변경으로 인해 기존 코드에서 'terminal' 변형을 사용하는 부분이 있다면 수정이 필요할 수 있습니다.

✅ Verification successful

ButtonVariant 타입 변경이 안전하게 확인되었습니다.

'terminal' 변형을 사용하는 코드가 발견되지 않아 'text'로의 변경이 안전한 것으로 확인됩니다. 추가 수정이 필요하지 않습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining usage of 'terminal' variant
rg -i "terminal.*variant" -A 3 -B 3

Length of output: 37

---

Script:

#!/bin/bash
# Search for any 'terminal' string in Button-related files
echo "=== Searching in Button-related files ==="
fd "Button" | xargs rg "terminal" -l

# Search for Button component usage with variant prop
echo -e "\n=== Searching for Button usage with variants ==="
ast-grep --pattern 'Button $$$variant="terminal"$$$'

# Search for any 'terminal' string in tsx/ts files
echo -e "\n=== Searching for 'terminal' in tsx/ts files ==="
fd -e tsx -e ts | xargs rg "terminal" -l

Length of output: 455

packages/ui/src/components/Spinner/Spinner.css.ts (2)

5-20: 애니메이션 키프레임이 최적화되어 있습니다!

회전과 대시 애니메이션이 부드럽고 효율적으로 구현되었습니다. 특히 대시 애니메이션의 타이밍이 자연스럽습니다.

---

31-51: 스피너 크기 변형이 잘 정의되었습니다.

크기별 변형이 디자인 시스템과 일관성 있게 정의되었습니다. 패딩 값도 적절하게 조정되었습니다.

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

32-37: 동적 임포트 제거가 적절합니다.

Spinner 컴포넌트의 동적 임포트를 제거한 것이 좋습니다. 이는 다음과 같은 이점이 있습니다:

• 더 간단한 코드
• 더 빠른 초기 로딩

---

137-144: 버튼 로딩 상태 구현이 잘 되었습니다.

각 버튼 변형에 대한 로딩 상태가 적절하게 구현되었습니다. 사용자 피드백이 개선될 것으로 예상됩니다.

Also applies to: 151-153, 160-162

---

287-290: 스피너 변형 테스트가 잘 구현되었습니다.

모든 크기와 색상 조합에 대한 테스트 케이스가 포함되어 있습니다. 이는 컴포넌트의 신뢰성을 높입니다.

packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx (1)

20-20: 변경사항이 적절해 보입니다!

취소 버튼의 variant가 'terminal'에서 'text'로 변경된 것은 Button 컴포넌트의 전반적인 업데이트와 일치하며, 이는 적절한 변경으로 보입니다.

packages/ui/package.json (1)

28-31: 타입 안정성이 개선되었습니다!

Spinner 컴포넌트의 export 구성이 개선되어 타입 정의가 명확해졌습니다. 다만, 빌드 후 타입 정의 파일이 올바르게 생성되는지 확인이 필요합니다.

다음 스크립트를 실행하여 타입 정의 파일이 올바르게 생성되는지 확인하세요:

✅ Verification successful

타입 정의 설정이 올바르게 구성되어 있습니다

빌드 설정이 정확히 구성되어 있으며, 타입스크립트 설정(declaration: true)과 디렉토리 구조가 올바르게 설정되어 있습니다. 현재는 빌드가 실행되지 않아 타입 정의 파일이 없는 상태입니다. npm run build 명령어를 실행하면 타입 정의 파일이 자동으로 생성될 것입니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify type definition files are generated correctly

# Check if type definition files exist
echo "Checking type definition files..."
fd -e d.ts -p "dist/components/Spinner/"

# Verify the content of index.d.ts
echo -e "\nVerifying type definitions content..."
cat dist/components/Spinner/index.d.ts 2>/dev/null || echo "index.d.ts not found"

Length of output: 300

---

Script:

#!/bin/bash
# Check build configuration
echo "Checking package.json build scripts..."
cat packages/ui/package.json | grep -A 5 '"scripts"'

echo -e "\nChecking tsconfig settings..."
cat packages/ui/tsconfig.json 2>/dev/null || echo "tsconfig.json not found"

echo -e "\nChecking if source files exist..."
fd -e tsx -e ts -p "src/components/Spinner/"

Length of output: 1321

[minseong0324]

고생하셨습니다~