refactor: JDS Kbd 컴포넌트 vanilla-extract 마이그레이션 by areumH · Pull Request #439 · JECT-Study/JECT-Official-WebSite-Client

areumH · 2026-05-15T09:08:09Z

💡 작업 내용

emtion 의존성 제거
kbd 컴포넌트 vanilla-extract 마이그레이션

💡 자세한 설명

kbdPaddingXMap 분리

기존 kbdSizeMap은 모든 size에서 paddingX: 6을 가지고 있어, 사실상 size가 아닌 type별 속성이었지만, Figma 확인 결과 function 타입의 paddingX는 4px, 나머지는 6px로 size가 아닌 type에 의해 결정됨을 확인하여 kbdPaddingXMap을 별도로 추출했습니다.

// kbd.variant.ts
export const kbdPaddingXMap: Record<KbdType, number> = {
  function: 4,
  key: 6,
  text: 6,
};

// kbd.css.ts
const typeVariants = styleVariants(kbdPaddingXMap, paddingX => ({
  paddingLeft: pxToRem(paddingX),
  paddingRight: pxToRem(paddingX),
}));

스타일 변경

Kbd 컴포넌트의 배경색이 삭제되었습니다. 디자이너님께 질문드려 확인한 사항이며, 변경된 스타일에 맞게 배경색 제거 후 내부 텍스트 색상 변경했습니다!

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

✅ 셀프 체크리스트

머지할 브랜치 확인했나요?
이슈는 close 했나요?
Reviewers, Labels, Projects를 등록했나요?
기능이 잘 동작하나요?
불필요한 코드는 제거했나요?

closes #436

Summary by CodeRabbit

릴리스 노트

Refactor
- Kbd 컴포넌트의 스타일링 시스템을 개선하고 ref 지원을 추가했습니다.
- 컴포넌트 구조를 최적화하여 더 안정적인 동작을 제공합니다.

…s 파일명 변경

vercel · 2026-05-15T09:08:14Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ject-official-web-site-client-web	Ready	Preview, Comment	May 24, 2026 8:13am

ccconac

간단하게 코멘트 남겨 두었습니다~
다른 PR과 공통되는 것들도 많아서 참고 부탁드립니다. 수고하셨습니다!

ccconac · 2026-05-20T02:36:25Z

+import { kbd } from "./kbd.css";
+import type { KbdProps } from "./kbd.types";

 export const Kbd = ({


#438 (comment) 잊은 게 있어서 추가적으로 코멘트 남깁니다!

기존에는 Code 컴포넌트가 forwardRef를 지원하지 않았는데요. 다른 JDS 컴포넌트들과의 인터페이스 통일성 측면에서도 그렇고, 소비자가 <code> 태그의 ref를 활용해 DOM 제어를 시도할 가능성을 배제할 수 없어 보여요. 때문에 원시 컴포넌트로서의 활용성을 높이기 위해 forwardRef 적용이 필요해 보입니다.

같은 맥락으로 참고 부탁드려요.

2cfbc06 적용했습니다!! 옵셔널로 선언되어있던 aria-label은 kbd의 props에 포함되므로 제거했습니다 😊

ccconac · 2026-05-20T04:13:20Z

+
+export const kbd = recipe({
+  base: {
+    boxSizing: "initial",


해당 스타일 속성이 기존 키보드 컴포넌트에 선언되어 있었는데, 이 때문에 높이가 실제 렌더 높이를 보장하지 않아서 제거하는 것이 좋아 보여요.

아마 당시에 border가 영역을 차지하면서 padding이 좁아지는 것처럼 보이는 이슈 때문에 이렇게 해결했었던 듯한데, 지금 보니 좋은 방식이 아닌 것 같고 제거해도 피그마와 시각적인 차이가 없어 코멘트 남깁니다.

ccconac · 2026-05-20T04:25:47Z

+  text: 6,
 };

 export const typographyMap: Record<KbdType, Record<KbdSize, string>> = {


(참고) 이전에 작업되어 있던 내용이지만, 최근에 토큰이 자주 변경되면서 이슈가 우려되어 남깁니다.
타입이 string으로만 선언되어 있어 토큰명이 변경되어도 컴파일러가 이슈를 잡을 수 없을 걸로 보여요.

엄격하게 satisfies로 객체 리터럴 타입을 보존하는 방법도 있겠네요.

5269403 tokens/textStyles.css.ts의 상수값을 사용하여 satisfies 적용해보았습니다!

ccconac · 2026-05-20T04:48:02Z

+  defaultVariants: {
+    type: "key",
+    size: "md",
+    muted: false,
+  },


#438 (comment) 같은 맥락이라 참고 부탁드려요!

coderabbitai · 2026-05-20T06:57:56Z

Warning

Review limit reached

@areumH, we couldn't start this review because you've used your available PR reviews for now.

Your plan currently allows 1 review/hour. Refill in 54 minutes and 45 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f12f49ac-c136-43b0-bb9a-4f36a59258c6

📥 Commits

Reviewing files that changed from the base of the PR and between e886aac and 15325ef.

📒 Files selected for processing (2)

packages/jds/src/components/Kbd/kbd.css.ts
packages/jds/src/components/Kbd/kbd.variants.ts

개요

Kbd 컴포넌트가 Emotion 기반 스타일링 시스템에서 vanilla-extract 기반 시스템으로 완전 마이그레이션됩니다. 새로운 타입 구조, vanilla-extract recipe 스타일 시스템, forwardRef 기반 컴포넌트 구현, 그리고 문서 업데이트가 포함됩니다.

변경 사항

Kbd 컴포넌트 vanilla-extract 마이그레이션

Layer / File(s)	Summary
타입 정의 재구성 및 variants 업데이트 `packages/jds/src/components/Kbd/kbd.types.ts`, `packages/jds/src/components/Kbd/kbd.variants.ts`	새로운 `kbd.types.ts`에서 `KbdSize`, `KbdType`, `KbdProps` 타입을 정의하고, `kbd.variants.ts`에서 `TextStyleClassName` 타입 제약을 도입하여 typography 매핑의 타입 안정성을 강화합니다. `kbdPaddingXMap`이 새로 추가됩니다.
vanilla-extract recipe 기반 스타일링 시스템 `packages/jds/src/components/Kbd/kbd.css.ts`	`vanilla-extract` recipe를 사용해 `kbd` 스타일을 구성하고, `type`/`size`/`muted` variants와 typography 기반 `compoundVariants`를 정의합니다. muted 상태에서 테두리 및 텍스트 색상을 토큰 값으로 변경합니다.
Kbd 컴포넌트를 forwardRef로 리팩토링 `packages/jds/src/components/Kbd/Kbd.tsx`	`StyledKbd`에서 네이티브 `<kbd>` 요소로 변경하고, `forwardRef<HTMLElement, KbdProps>` 패턴을 적용합니다. 스타일은 `kbd.css`의 recipe와 `clsx`를 통해 합성된 클래스명으로 적용됩니다.
배럴 export 경로 및 스토리 문서 업데이트 `packages/jds/src/components/Kbd/index.ts`, `packages/jds/src/components/Kbd/Kbd.stories.tsx`	`index.ts`의 타입 export 경로를 `./Kbd.types`에서 `./kbd.types`로 변경하고, `Kbd.stories.tsx`의 문서 설명을 업데이트하며, muted 상태 스토리의 export 이름을 `isMuted`에서 `IsMuted`로 변경합니다.

🎯 코드 리뷰 난이도

🎯 3 (보통) | ⏱️ ~25분

🐰 호미 컴포넌트 새 옷 입고
Emotion 벗고 Vanilla 단장
타입도 맞춰 리팩토링 완성
forwardRef로 우아해지고
테마 토큰 깊숙이 박혀라 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 PR의 주요 변경사항인 vanilla-extract 마이그레이션을 명확히 나타내며, 간결하고 구체적입니다.
Description check	✅ Passed	설명에 작업 내용, 자세한 설명(kbdPaddingXMap 분리, 스타일 변경), 체크리스트, 이슈 연결이 포함되어 있습니다.
Linked Issues check	✅ Passed	PR의 변경사항이 `#436의` 요구사항을 모두 충족합니다: emotion 의존성 제거, vanilla-extract 마이그레이션 완료, 관련 리팩토링 작업 완료.
Out of Scope Changes check	✅ Passed	모든 변경사항이 Kbd 컴포넌트의 vanilla-extract 마이그레이션과 관련되어 있으며, `#436의` 요구사항 범위 내에 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch refactor/436-jds-kbd-migration

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

itwillbeoptimal

고생하셨습니다~

itwillbeoptimal · 2026-05-23T07:43:13Z

+import { vars } from "../../tokens/vars.css";
+import { pxToRem } from "../../utils/cssUnit";


#438 (comment) 같은 의견입니다! 참고 부탁드려요

15325ef 수정했습니다~

areumH added 3 commits May 15, 2026 15:50

rename: Kbd.types.ts → kbd.types.ts, Kbd.variants.ts → kbd.variants.t…

913a097

…s 파일명 변경

refactor: Kbd 컴포넌트 VE 마이그레이션

6d0b21c

docs: Kbd 컴포넌트 스토리 description 문구 수정

1d9ce01

areumH requested review from WonJuneKim, ccconac and itwillbeoptimal May 15, 2026 09:08

areumH self-assigned this May 15, 2026

areumH added the ♻refactor 리팩토링 label May 15, 2026

style: Kbd 컴포넌트 스타일 수정

f09a4ab

vercel Bot deployed to Preview May 16, 2026 06:15 View deployment

style: Kbd 스토리 이름을 PascalCase로 변경

f8b8167

vercel Bot deployed to Preview May 19, 2026 17:02 View deployment

ccconac approved these changes May 20, 2026

View reviewed changes

areumH added 3 commits May 20, 2026 14:22

refactor: Kbd 타이포그래피 토큰 타입 강화

5269403

refactor: Kbd 컴포넌트에 ref 전달 지원

2cfbc06

refactor: 렌더링 높이 정리 및 recipe defaultVariants 삭제

e886aac

vercel Bot deployed to Preview May 20, 2026 06:58 View deployment

itwillbeoptimal approved these changes May 23, 2026

View reviewed changes

refactor: Kbd import 정리

15325ef

vercel Bot deployed to Preview May 24, 2026 08:13 View deployment

areumH merged commit 6e30ea8 into dev Jun 2, 2026
5 of 6 checks passed

		import { vars } from "../../tokens/vars.css";
		import { pxToRem } from "../../utils/cssUnit";

Conversation

areumH commented May 15, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💡 작업 내용

💡 자세한 설명

kbdPaddingXMap 분리

스타일 변경

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

✅ 셀프 체크리스트

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ccconac left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

개요

변경 사항

🎯 코드 리뷰 난이도

Uh oh!

itwillbeoptimal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

areumH commented May 15, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented May 15, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading