refactor: JDS Code 컴포넌트 vanilla-extract 마이그레이션

[areumH]

💡 작업 내용

• emtion 의존성 제거
• Code vanilla-extract 마이그레이션

💡 자세한 설명

Code 컴포넌트 스타일을 vanilla-extract로 마이그레이션하였습니다. 피그마로 확인하였을 때 스타일에 변경 사항이 없어 기존 디자인 스펙을 그대로 유지하였으며, emotion 의존성만 제거하였습니다!

+) 파일명 대소문자 관련하여 질문드렸을 때 ts 파일은 소문자로 통일하는 것이 좋겠다는 답변을 받아 파일명 수정하였으니 확인 부탁드립니다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

✅ 셀프 체크리스트

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

closes #434

Summary by CodeRabbit

• Refactor
  • Code 컴포넌트의 내부 스타일링 구현이 개선되어 유지보수성이 향상되었습니다. 사용자에게 보이는 동작이나 외형에는 변화가 없습니다.
• Documentation
  • Storybook 설명 문구가 한국어로 업데이트되었습니다.
• 호환성
  • 공개 API/동작에는 영향이 없습니다.

[vercel]

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:10am

[ccconac]

단순한 컴포넌트라 간단하게만 코멘트 남겨 두었습니다.
시간 괜찮으실 때 확인 부탁드려요. 수고하셨습니다! 👏

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1f9b0a8b-c464-4ce0-8df4-925588441bf9

📥 Commits

Reviewing files that changed from the base of the PR and between 382a351 and 0ed4501.

📒 Files selected for processing (1)

• packages/jds/src/components/Code/code.css.ts

---

Walkthrough

Code 컴포넌트를 Emotion 기반 스타일에서 vanilla-extract 기반 스타일로 전환합니다. 새로운 타입 정의와 CSS recipe를 도입하고, 컴포넌트를 forwardRef로 리팩토링하여 네이티브 <code> 요소를 사용하며, 모듈 경로와 Storybook 문서를 업데이트합니다.

Changes

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

Layer / File(s)	Summary
타입 계약 및 vanilla-extract 스타일 정의 packages/jds/src/components/Code/code.types.ts, packages/jds/src/components/Code/code.css.ts	CodeSize 타입과 CodeProps 인터페이스를 새로 정의하고, vanilla-extract recipe(code)와 codeTypographyClassName 매핑을 통해 크기별 타이포그래피 클래스를 연결한 스타일을 추가함.
컴포넌트 구현 및 forwardRef 적용 packages/jds/src/components/Code/Code.tsx	Code 컴포넌트를 forwardRef 기반으로 리팩토링하여 네이티브 <code>를 렌더링하고, Emotion StyledCode 대신 code.css의 클래스와 clsx를 사용해 스타일을 적용하도록 변경함. displayName은 유지됨.
모듈 재익스포트 및 Storybook 문서 업데이트 packages/jds/src/components/Code/index.ts, packages/jds/src/components/Code/Code.stories.tsx	재익스포트 경로를 ./code.types로 변경하고 Storybook meta의 컴포넌트 설명 문자열을 한국어로 수정함.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 감정은 내려놓고 바닐라로,
코드 한 줄에 새 옷을 입혔네.
타입은 단단히, 스타일은 가볍게,
ref는 앞으로, 렌더는 깔끔히.
토끼가 박수로 축하하네 🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확히 반영하고 있습니다. Code 컴포넌트의 vanilla-extract 마이그레이션이라는 주요 변경 사항을 간결하게 요약했습니다.
Description check	✅ Passed	PR 설명에는 작업 내용, 상세 설명, 셀프 체크리스트가 포함되어 있으며 이슈 번호(#434)가 명시되어 있습니다. 템플릿의 대부분 필수 항목이 작성되었습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 링크된 이슈 #434의 요구사항을 충족합니다. emotion 의존성이 제거되었고 vanilla-extract으로 마이그레이션 되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 Code 컴포넌트의 vanilla-extract 마이그레이션과 emotion 의존성 제거라는 정의된 범위 내에 있습니다. 범위를 벗어난 변경이 없습니다.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/434-jds-code-migration

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.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[itwillbeoptimal]

확인이 늦었습니다 🥲 소희님께서 이미 대부분 언급해주신 것 같아서 추가로 코멘트 드릴 부분은 없는 것 같습니다~ 고생하셨습니다

[itwillbeoptimal]

(단순 의견) 마이그레이션 진행하면서 ../../처럼 부모 경로가 여러 단계 중첩되는 import가 종종 보이는데, 가독성이나 경로 관리 측면에서 단축 경로로 통일하는 것도 괜찮을 것 같습니다

import { vars } from "tokens";

[areumH]

0ed4501 수정했습니다!