refactor(badge): apply vanilla-extract#144
Conversation
froggy1014
requested review from
SEMIN-97,
bae-sh,
developerjhp,
heeji289,
hy57in,
jiji-hoon96,
kimdaeyeob and
yeojini
as code owners
|
## Walkthrough
이 변경 사항은 프로젝트 전반에 걸쳐 CSS-in-TypeScript 솔루션인 Vanilla Extract를 도입하고, 기존 CSS 모듈 및 인라인 스타일 방식을 대체하여 스타일링 시스템을 통합합니다. Avatar와 Badge 컴포넌트의 스타일이 `@vanilla-extract/css` 기반으로 리팩터링되었고, 이에 따라 관련 CSS 모듈 파일이 삭제되었습니다. 또한, 빌드 및 테스트 도구(tsup, vite, vitest) 설정이 Vanilla Extract 플러그인과 통합되도록 수정되었으며, 패키지 의존성 및 설정 파일도 이에 맞게 업데이트되었습니다.
## Changes
| 파일/경로 | 변경 요약 |
|-------------------------------------------------------------------|-----------|
| package.json, pnpm-workspace.yaml | Vanilla Extract 및 관련 플러그인, vite, tsup 버전 추가 및 업데이트 |
| tsup.config.ts, vite.config.ts, vitest.config.ts | Vanilla Extract 플러그인 통합을 위한 빌드/테스트 설정 변경 |
| packages/avatar/src/Avatar.css.ts, packages/badge/src/Badge.css.ts| Avatar, Badge 컴포넌트용 Vanilla Extract 스타일 파일 추가 |
| packages/avatar/src/Avatar.module.css, packages/badge/src/Badge.module.css | 기존 CSS 모듈 파일 삭제 |
| packages/avatar/src/Avatar.tsx, packages/badge/src/Badge.tsx | 인라인 스타일 및 CSS 모듈 사용 제거, Vanilla Extract 스타일 적용, 타입 리팩터링 |
| packages/avatar/global.d.ts | CSS 모듈 타입 선언 파일 삭제 |
| packages/avatar/package.json, packages/badge/package.json | Vanilla Extract 및 관련 패키지 의존성 추가, files 필드 포맷 변경, badge 패키지에 tokens 의존성 추가 |
| packages/avatar/tsup.config.ts, packages/avatar/vite.config.ts, packages/avatar/vitest.config.ts | Avatar 패키지의 빌드/테스트 설정을 공통 설정으로 위임 및 플러그인 통합 |
| packages/avatar/src/Avatar.test.tsx, packages/avatar/src/index.ts | import/export 경로 정리 및 코드 정렬 |
| packages/badge/src/Badge.stories.tsx | Badge 컴포넌트 스토리북에 사이즈/버전별 스토리 추가 및 argTypes 적용 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant Storybook
participant Badge
participant Styles(Badge.css.ts)
Storybook->>Badge: size, variant 등 props 전달
Badge->>Styles: size, variant 값 기반으로 클래스 조회
Badge-->>Storybook: 스타일 적용된 Badge 렌더링sequenceDiagram
participant App
participant Avatar
participant Styles(Avatar.css.ts)
App->>Avatar: size, shape 등 props 전달
Avatar->>Styles: size, shape 값 기반으로 클래스 조회
Avatar-->>App: 스타일 적용된 Avatar 렌더링
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/avatar/src/Avatar.test.tsx (1)
45-52:⚠️ Potential issue테스트 로직 업데이트 필요
Avatar 컴포넌트가 Vanilla Extract 기반 CSS 클래스로 리팩터링된 경우, 더 이상 inline style을 사용하지 않을 가능성이 큽니다.
현재toHaveStyle로 inline style을 검증하는 부분은 테스트 실패로 이어질 수 있으므로, CSS 클래스명 검증(toHaveClass) 등으로 테스트를 수정해주세요.Also applies to: 54-58
🧹 Nitpick comments (6)
packages/avatar/src/Avatar.css.ts (3)
12-33: 사이즈 변형 구현이 체계적입니다
styleVariants를 사용하여 다양한 사이즈 옵션을 정의한 접근 방식이 좋습니다. 각 사이즈 변형을AvatarSize열거형과 연결해 타입 안전성을 확보했습니다.하지만 사이즈 값이 하드코딩되어 있습니다. 설계 토큰(design tokens)을 사용하면 일관성과 유지보수성이 향상될 수 있습니다.
+import { space } from '@sipe-team/tokens'; export const size = styleVariants({ [AvatarSize.xs]: { - height: 24, - width: 24, + height: space[6], + width: space[6], }, // 나머지 사이즈 변형도 토큰을 사용하도록 업데이트 });
35-45: 모양 변형이 잘 정의되어 있습니다다양한 모양 옵션(원형, 둥근 모서리, 사각형)이 명확하게 정의되어 있습니다. 이 역시
AvatarShape열거형을 사용해 타입 안전성을 보장합니다.둥근 모서리(rounded) 값인 4px도 디자인 토큰으로 교체하는 것을 고려해보세요.
53-57: 대체 텍스트 스타일이 명확합니다이미지가 없을 때 표시되는 대체 텍스트에 대한 스타일 정의가 잘 되어 있습니다.
색상 값 '#2d3748'은 하드코딩되어 있습니다. 디자인 시스템 토큰을 사용한다면 더 일관된 스타일링이 가능할 것입니다.
packages/badge/src/Badge.css.ts (1)
26-36: 사이즈 변형 구현이 체계적입니다다양한 사이즈 옵션에 대한 패딩 설정이 잘 정의되어 있습니다. 각 사이즈별로 적절한 패딩 값을 설정했습니다.
패딩 값도 디자인 토큰을 사용하면 더 일관된 디자인 시스템을 구축할 수 있을 것입니다.
+import { space } from '@sipe-team/tokens'; export const size = styleVariants({ [BadgeSize.small]: { - padding: '4px 8px', + padding: `${space[1]} ${space[2]}`, }, // 다른 사이즈도 마찬가지로 변경 });packages/badge/src/Badge.tsx (1)
32-41: 헬퍼 함수가 잘 구현되었습니다배지 크기에 따라 Typography 컴포넌트의 크기를 결정하는 헬퍼 함수가 잘 구현되었습니다. 이 접근 방식은 컴포넌트 코드를 더 깔끔하게 유지하는 데 도움이 됩니다.
한 가지 개선점은 이 함수의 반환 타입을
fontSizeToken의 키 타입으로 명시하는 것을 고려해 볼 수 있습니다.-function getTypographySize(size: BadgeSize): 12 | 14 | 18 { +import { fontSize } from '@sipe-team/tokens'; +type FontSizeKey = keyof typeof fontSize; +function getTypographySize(size: BadgeSize): FontSizeKey { switch (size) { case 'small': return 12; case 'large': return 18; default: return 14; } }packages/avatar/src/Avatar.tsx (1)
15-29: 타입 정의 개선이전의 유니온 문자열 타입에서 상수 객체와 파생 타입을 사용하는 방식으로 변경한 것은 좋은 개선입니다. 이 방식은 타입 안전성을 높이고 자동완성 지원을 향상시킵니다.
이러한 상수 객체 정의가
Avatar.css.ts에도 있습니다. 타입 정의의 중복을 피하기 위해 한 곳에서만 정의하고 가져다 쓰는 방식도 고려해볼 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
package.json(2 hunks)packages/avatar/global.d.ts(0 hunks)packages/avatar/package.json(2 hunks)packages/avatar/src/Avatar.css.ts(1 hunks)packages/avatar/src/Avatar.module.css(0 hunks)packages/avatar/src/Avatar.test.tsx(1 hunks)packages/avatar/src/Avatar.tsx(2 hunks)packages/avatar/src/index.ts(1 hunks)packages/avatar/tsup.config.ts(1 hunks)packages/avatar/vite.config.ts(1 hunks)packages/avatar/vitest.config.ts(1 hunks)packages/badge/package.json(3 hunks)packages/badge/src/Badge.css.ts(1 hunks)packages/badge/src/Badge.module.css(0 hunks)packages/badge/src/Badge.stories.tsx(2 hunks)packages/badge/src/Badge.tsx(1 hunks)pnpm-workspace.yaml(1 hunks)tsup.config.ts(1 hunks)vite.config.ts(1 hunks)vitest.config.ts(1 hunks)
💤 Files with no reviewable changes (3)
- packages/avatar/global.d.ts
- packages/avatar/src/Avatar.module.css
- packages/badge/src/Badge.module.css
🧰 Additional context used
🧬 Code Graph Analysis (5)
packages/badge/src/Badge.css.ts (1)
packages/badge/src/Badge.tsx (2)
BadgeSize(6-6)BadgeVariant(7-7)
packages/badge/src/Badge.stories.tsx (2)
packages/badge/src/Badge.tsx (3)
Badge(14-30)BadgeSize(6-6)BadgeVariant(7-7)packages/badge/src/Badge.css.ts (4)
size(26-36)BadgeSize(5-9)variant(52-65)BadgeVariant(11-15)
packages/avatar/src/Avatar.css.ts (1)
packages/avatar/src/Avatar.tsx (4)
AvatarSize(15-21)AvatarSize(22-22)AvatarShape(24-28)AvatarShape(29-29)
packages/badge/src/Badge.tsx (1)
packages/badge/src/Badge.css.ts (4)
BadgeSize(5-9)BadgeVariant(11-15)size(26-36)variant(52-65)
packages/avatar/src/Avatar.tsx (1)
packages/avatar/src/Avatar.css.ts (2)
size(12-33)shape(35-45)
🔇 Additional comments (37)
package.json (2)
44-46: devDependencies에 Vanilla Extract 플러그인 추가
@vanilla-extract/esbuild-plugin및@vanilla-extract/vite-plugin을 devDependencies에 올바르게 추가했습니다.
44-46: 버전 표기catalog:검증 요청
"catalog:"로 지정된 의존성 버전이 실제 설치 시 올바르게 매핑되는지 확인해주세요.Also applies to: 64-64
vite.config.ts (1)
1-6: vanillaExtractPlugin() 적용 확인
vanillaExtractPlugin()을 Vite 설정의 plugins 배열에 추가하여 Vanilla Extract 스타일 처리를 활성화한 점이 적절합니다.packages/avatar/package.json (2)
12-12:files필드 포맷 정리
"files": ["dist"]로 단일 라인 포맷을 간소화하여 가독성을 향상했습니다.
40-40: @vanilla-extract/css 추가
Avatar 패키지에 Vanilla Extract CSS를 devDependencies에 추가하여 스타일 시스템이 일관되게 적용되도록 했습니다.packages/avatar/src/Avatar.test.tsx (1)
3-4: import 구문 통합
vitest에서describe,it,test,expect를 한 번에 import하고,Avatar타입을type키워드로 구분하여 정리한 점이 깔끔합니다.packages/avatar/vite.config.ts (1)
1-1: 루트 Vite 설정 재사용
../../vite.config를 re-export하여 패키지별 중복 구성을 방지한 접근이 바람직합니다.packages/avatar/src/index.ts (1)
1-2: 파일 경로 개선 사항파일 확장자를 제거하여 import 경로를 개선하였습니다. 이는 TypeScript에서 권장되는 방식이며 vanilla-extract로의 스타일 마이그레이션과 일관성을 유지하는 데 도움이 됩니다.
vitest.config.ts (1)
1-5: 테스트 환경에 vanilla-extract 설정 추가테스트 환경에 vanilla-extract 플러그인을 추가한 것은 적절합니다. 이를 통해 테스트 환경에서도 vanilla-extract 스타일이 제대로 처리될 수 있습니다. Badge 컴포넌트의 스타일링 마이그레이션에 필요한 변경사항입니다.
tsup.config.ts (1)
1-8: 빌드 설정에 vanilla-extract 통합빌드 프로세스에 vanilla-extract 플러그인을 추가하여 CSS-in-TypeScript 스타일링을 지원하도록 업데이트했습니다. 이전 CSS 모듈 방식에서 vanilla-extract로 마이그레이션하는 과정에서 필요한 적절한 변경입니다.
pnpm-workspace.yaml (2)
16-18: vanilla-extract 종속성 추가Badge 컴포넌트 리팩토링을 위해 필요한 vanilla-extract 관련 종속성들이 적절히 추가되었습니다:
- @vanilla-extract/css: 스타일 정의를 위한 코어 라이브러리
- @vanilla-extract/esbuild-plugin: 빌드 과정에서 스타일 처리를 위한 플러그인
- @vanilla-extract/vite-plugin: 개발 환경에서 스타일 처리를 위한 플러그인
이는 CSS 모듈에서 vanilla-extract로의 마이그레이션을 위해 필요한 변경사항입니다.
23-25: 빌드 도구 버전 업데이트tsup와 vite의 버전이 업데이트되었습니다. 이는 vanilla-extract 플러그인과의 호환성을 보장하기 위한 적절한 조치입니다.
packages/avatar/tsup.config.ts (1)
1-1: 공통 설정을 사용하여 코드 중복을 제거했습니다.이 변경사항은 중앙 집중화된 tsup 설정을 재사용하여 코드 중복을 줄이고 유지 관리 비용을 낮췄습니다. 이는 모든 패키지에서 동일한 빌드 구성을 유지하는 데 도움이 됩니다.
packages/badge/package.json (3)
12-12:files필드를 간결하게 정리했습니다.배포 파일을 "dist" 디렉토리로 제한하는 것은 적절합니다. 이렇게 하면 패키지를 설치할 때 불필요한 파일이 포함되지 않습니다.
24-24: 토큰 패키지 의존성이 추가되었습니다.
@sipe-team/tokens을 의존성으로 추가한 것은 vanilla-extract로 스타일링할 때 디자인 토큰을 활용하기 위한 적절한 변경입니다.
39-39: Vanilla Extract CSS 개발 의존성이 추가되었습니다.Badge 컴포넌트의 스타일링 방식을 CSS 모듈에서 vanilla-extract로 변경하는 과정에서 필요한
@vanilla-extract/css의존성을 추가했습니다.packages/avatar/vitest.config.ts (1)
1-11: 테스트 설정을 공통화하고 필요한 부분만 재정의했습니다.공통된 Vitest 설정을 import하고
mergeConfig와defineProject를 사용하여 패키지별로 필요한 부분만 재정의하는 방식은 매우 좋은 접근법입니다. 이를 통해:
- 코드 중복이 줄어듭니다
- 설정 변경 시 한 곳만 수정하면 되므로 유지보수가 용이합니다
- 모든 패키지에서 일관된 테스트 환경을 보장합니다
vanilla-extract 플러그인 설정도 공통 설정에서 상속받아 사용하게 됩니다.
packages/badge/src/Badge.stories.tsx (5)
2-3: 타입과 스타일 상수를 적절히 분리하여 임포트했습니다.Badge 컴포넌트의 타입은 Badge.tsx에서, 스타일 관련 상수는 Badge.css.ts에서 임포트하여 관심사를 명확히 분리했습니다. 이는 vanilla-extract를 사용한 스타일링 시스템의 구조적 장점을 잘 활용한 방식입니다.
11-24: Storybook argTypes를 체계적으로 정의했습니다.size와 variant 속성에 대한 argTypes 정의가 적절합니다:
- BadgeSizeEnum과 BadgeVariantEnum의 키를 옵션으로 사용하여 동적으로 선택 옵션을 구성
- 각 속성에 대한 설명 추가
- 기본값 명시
이렇게 하면 Storybook UI에서 컴포넌트 사용자가 다양한 옵션을 쉽게 테스트할 수 있습니다.
33-34: Basic 스토리의 기본값을 명시적으로 설정했습니다.size와 variant 속성의 기본값을 명시적으로 설정하여 컴포넌트의 기본 동작을 명확히 문서화했습니다.
38-48: 다양한 크기를 보여주는 스토리가 추가되었습니다.모든The Sizes 스토리는 가능한 모든 BadgeSize 옵션을 동적으로 생성하여 시각적으로 보여줍니다. 이는 다음과 같은 이점이 있습니다:
- 모든 크기 옵션을 한 번에 비교할 수 있음
- 새로운 크기가 추가되면 자동으로 스토리에 반영됨
- 각 크기의 이름을 Badge 내용으로 표시하여 어떤 크기인지 명확히 알 수 있음
이는 컴포넌트 문서화와 테스트에 매우 유용합니다.
50-60: 다양한 변형을 보여주는 스토리가 추가되었습니다.Variants 스토리는 BadgeVariant의 모든 옵션을 시각적으로 보여줍니다. 이 접근 방식은 다음과 같은 이점이 있습니다:
- 모든 변형 옵션을 한 번에 비교할 수 있음
- 새로운 변형이 추가되면 자동으로 스토리에 반영됨
- 각 변형의 이름을 Badge 내용으로 표시하여 어떤 변형인지 명확히 알 수 있음
이는 디자이너와 개발자가 컴포넌트의 다양한 스타일 옵션을 이해하는 데 도움이 됩니다.
packages/avatar/src/Avatar.css.ts (3)
1-2: 적절한 모듈 가져오기 구성Vanilla Extract에서 필요한
style과styleVariants함수를 가져오고, Avatar 컴포넌트에서 타입 정의를 가져와 스타일과 타입 시스템을 연결하는 방식이 좋습니다.
4-10: 기본 스타일 구현이 명확합니다루트 요소에 대한 기본 스타일 정의가 잘 되어 있습니다. flex 컨테이너를 사용해 내용을 중앙 정렬하고, overflow 속성으로 콘텐츠가 컨테이너를 벗어나지 않도록 처리한 것이 적절합니다.
47-51: 이미지 스타일이 적절합니다이미지가 컨테이너를 꽉 채우도록 설정하고
objectFit: 'cover'로 비율을 유지하면서 컨테이너에 맞추는 접근 방식이 좋습니다.packages/badge/src/Badge.css.ts (4)
1-3: 적절한 의존성 및 토큰 가져오기Vanilla Extract 스타일링 도구와 디자인 토큰을 올바르게 가져오고 있습니다. 폰트 사이즈에 토큰을 사용하는 것은 디자인 일관성을 유지하는 좋은 접근 방식입니다.
5-15: 상수 정의가 명확합니다
BadgeSize와BadgeVariant를 상수 객체로 정의하여 타입 안전성을 보장하는 방식이 좋습니다. 이렇게 하면 컴포넌트와 스타일 간의 일관성을 유지할 수 있습니다.
18-23: 기본 스타일 구현이 적절합니다배지의 기본 스타일을 명확하게 정의했으며, flex 레이아웃을 사용해 내용을 중앙에 배치하도록 설정한 것이 좋습니다.
39-49: 폰트 사이즈 정의가 토큰을 잘 활용하고 있습니다폰트 사이즈에 디자인 토큰을 사용하여 일관성을 유지하는 방식이 좋습니다.
packages/badge/src/Badge.tsx (5)
3-4: 적절한 import 구성React 타입을 명시적으로 가져오고, 새로 만든 스타일 모듈을 불러오는 방식이 좋습니다. 타입을 명시적으로 가져오면 코드의 가독성과 유지보수성이 향상됩니다.
6-7: 타입 정의가 스타일 모듈과 잘 연동됩니다기존 하드코딩된 타입 대신 스타일 모듈의 상수 객체 키를 타입으로 가져오는 방식이 좋습니다. 이렇게 하면 스타일과 컴포넌트 간의 타입 일관성을 보장할 수 있습니다.
15-15: 기본값이 스타일 정의와 일치합니다props의 기본 size와 variant 값이 CSS 모듈에 정의된 상수와 일치하도록 설정된 점이 좋습니다.
20-20: 클래스 이름 할당이 깔끔합니다
cx유틸리티를 사용하여 여러 클래스를 조합하는 방식이 좋습니다. 기본 스타일, 크기, 변형, 사용자 정의 클래스를 모두 적절하게 조합하고 있습니다.
25-25: Typography 컴포넌트 사용이 개선되었습니다스타일 클래스를 적용하고 크기를 결정하는 헬퍼 함수를 사용하여 Typography 컴포넌트를 더 깔끔하게 구성했습니다.
packages/avatar/src/Avatar.tsx (3)
3-4: 적절한 import 구성React 타입을 명시적으로 가져오고, 새로 만든 스타일 모듈을 불러오는 방식이 좋습니다. 타입을 정확하게 명시함으로써 코드의 가독성과 유지보수성이 향상됩니다.
38-38: 클래스 이름 할당이 깔끔합니다인라인 스타일 대신
cx유틸리티를 사용하여 여러 클래스를 조합하는 방식이 좋습니다. 기본 스타일, 크기, 모양, 사용자 정의 클래스를 모두 적절하게 조합하고 있습니다.
46-46: 스타일 클래스 적용이 적절합니다이미지와 대체 텍스트에 새로운 스타일 클래스를 적용한 방식이 좋습니다. 이전 인라인 스타일 계산 로직 대신 모듈화된 CSS를 사용함으로써 코드가 더 깔끔해졌습니다.
Also applies to: 49-49
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/badge/src/Badge.test.tsx (1)
1-87: 전체적인 리팩토링 접근 방식에 대한 피드백Badge 컴포넌트의 스타일링을 CSS 모듈에서 vanilla-extract로 마이그레이션하는 전체적인 접근 방식이 잘 이루어졌습니다. 테스트 코드도 이에 맞춰 적절히 업데이트되었습니다. 중앙 집중식 색상 토큰 시스템을 사용한 것은 디자인 시스템의 일관성을 향상시키는 좋은 변화입니다.
다만 한 가지 제안사항이 있다면, 모든 색상 값을 토큰으로 일관되게 관리하면 좋겠습니다(weak 배리언트의 배경색 관련 코멘트 참조). 이렇게 하면 나중에 테마 기능을 추가할 때 더 용이할 것입니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/badge/src/Badge.test.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/badge/src/Badge.test.tsx (2)
packages/typography/src/Typography.stories.tsx (1)
render(16-48)packages/badge/src/Badge.tsx (1)
Badge(14-30)
🔇 Additional comments (4)
packages/badge/src/Badge.test.tsx (4)
4-4: 토큰 시스템을 통한 중앙화된 색상 값 도입 👍색상 토큰을 import하여 하드코딩된 색상 값 대신 중앙화된 토큰 시스템을 사용하는 방식으로 전환하는 것은 매우 좋은 리팩토링입니다. 이는 디자인 시스템의 일관성과 유지보수성을 향상시킵니다.
18-21: 테스트 설명에 동적 토큰 값 포함 👍테스트 설명에 실제 색상 토큰 값을 템플릿 리터럴로 포함한 것은 매우 유용합니다. 개발자가 테스트를 읽을 때 실제 값을 바로 확인할 수 있어 이해도를 높입니다.
30-35: 테스트 설명과 기대값에 일관된 토큰 참조 적용 👍테스트 설명과 기대값에 일관되게 토큰 참조를 적용한 것은 좋은 접근 방식입니다. 이렇게 하면 토큰 값이 변경되더라도 테스트와 설명이 자동으로 동기화됩니다.
46-52: outline 배리언트 테스트 설명과 구현이 일관되게 개선됨 👍outline 배리언트에 대한 테스트 설명이 명확해졌고, 테두리 색상에 토큰 값을 적용한 것이 좋습니다. 이는 컴포넌트의 실제 동작과 테스트 코드 간의 일관성을 보장합니다.
| test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', () => { | ||
| render(<Badge variant="weak">테스트</Badge>); | ||
|
|
||
| expect(screen.getByRole('status')).toHaveStyle({ | ||
| backgroundColor: '#EDF2F7', | ||
| backgroundColor: '#e4e4e7', | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
weak 배리언트 테스트에서 하드코딩된 색상 값 발견
weak 배리언트 배경색을 테스트할 때 색상 값이 하드코딩되어 있습니다(#e4e4e7). 다른 테스트들은 모두 colorToken을 사용하는데 반해, 이 테스트에서만 하드코딩된 값을 사용하고 있습니다. 일관성을 위해 이 값도 토큰으로 대체하는 것이 좋을 것 같습니다.
test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', () => {
render(<Badge variant="weak">테스트</Badge>);
expect(screen.getByRole('status')).toHaveStyle({
- backgroundColor: '#e4e4e7',
+ backgroundColor: colorToken.gray200,
});
});테스트 설명도 다른 테스트와 같이 동적 값을 포함하도록 수정하는 것이 좋을 것 같습니다:
-test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', () => {
+test(`variant가 weak인 경우 배경색 gray200(${colorToken.gray200})로 형태를 적용한다.`, () => {📝 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.
| test('variant가 weak인 경우 배경색 gray200로 형태를 적용한다.', () => { | |
| render(<Badge variant="weak">테스트</Badge>); | |
| expect(screen.getByRole('status')).toHaveStyle({ | |
| backgroundColor: '#EDF2F7', | |
| backgroundColor: '#e4e4e7', | |
| }); | |
| test(`variant가 weak인 경우 배경색 gray200(${colorToken.gray200})로 형태를 적용한다.`, () => { | |
| render(<Badge variant="weak">테스트</Badge>); | |
| expect(screen.getByRole('status')).toHaveStyle({ | |
| backgroundColor: colorToken.gray200, | |
| }); | |
| }); |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
noahluftyang
left a comment
noahluftyang
left a comment
There was a problem hiding this comment.
이거 main 대신 v1 브랜치로 넣을 수 있을까?
베이스 바꿨어용 |
* refactor(badge): migrate module css to vanilla extract * chore: regenerate lock file * style(badge): apply color tokens * test(badge): color token update on test
* fix(avatar): apply vanilla-extract (#143) * fix(avatar): apply vanilla-extract * fix(avatar): type error * refactor(badge): apply vanilla-extract (#144) * refactor(badge): migrate module css to vanilla extract * chore: regenerate lock file * style(badge): apply color tokens * test(badge): color token update on test * refactor(checkbox): migrate to vanilla-extract and refactor * refactor(checkbox): apply vanilla-extract for styling * refactor(checkbox): update Checkbox component structure to use compound components * chore(checkbox): remove unused styles and constants * test(checkbox): update tests to reflect new component structure and props * chore(checkbox): delete ref on Root * chore(checkbox): add optional id prop to Checkbox component * refactor(checkbox): simplify useControllableState hook * chore(checkbox): delete unused hook * refactor(checkbox): enhance props and structure * refactor(checkbox): enhance storybook and test code * chore(checkbox): update dependency include vanilla extract recipes * chore(checkbox): add user-event package in project * chore: add module.css type declarations * refactor(checkbox): accept and update feedback * chore(checkbox): replace HTMLAttrivutes to ComponentProps * chore(checkbox): delete useless code * chore(checkbox): resolve type error --------- Co-authored-by: y09n <euihyun.yang.9x@gmail.com>
3 participants
Changes
Visuals
Checklist
Additional Discussion Points
Summary by CodeRabbit