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

[areumH]

💡 작업 내용

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

💡 자세한 설명

스타일 변경사항

• 텍스트 스타일이 semantic-textStyle-body-sm-normal에서 semantic-textStyle-label-sm-normal로 변경되었습니다.
• 긴 텍스트가 들어와도 안정적으로 표시되도록 최대 너비를 280px로 제한했습니다. 텍스트는 자동 줄바꿈되며 중앙 정렬됩니다. 디자이너님께 확인받은 사항입니다!

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

✅ 셀프 체크리스트

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

closes #440

Summary by CodeRabbit

• 리팩토링
  • 툴팁의 트리거·콘텐츠 렌더링 방식이 정리되어 동작이 더 일관되고 유지보수성이 향상되었습니다.
  • 전역 지연 설정 전달이 제거되어 툴팁 동작 제어가 명확해졌습니다.
• 스타일
  • 툴팁 스타일이 새로운 방식으로 마이그레이션되어 애니메이션 및 레이아웃이 개선되었습니다.
• 문서
  • Storybook 예제와 설명 문구가 간결하고 명확하게 업데이트되었습니다.
• 접근성
  • 아이콘·입력 트리거에 접근성 레이블이 추가되어 보조기기 지원이 향상되었습니다.

[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	Jun 9, 2026 8:24am

[ccconac]

간단하게 코멘트 남겨 두었으니 시간 괜찮으실 때 확인 부탁드려요.
작업하시느라 수고 많으셨습니다~! 👏

[coderabbitai]

Warning

Review limit reached

@areumH, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 5 minutes and 24 seconds. Learn how PR review limits work.

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

⌛ How to resolve this issue?

After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e76d887-7225-4729-b70b-b0c4dc023ddd

📥 Commits

Reviewing files that changed from the base of the PR and between 18bef9c and 0c826c0.

📒 Files selected for processing (2)

• packages/jds/src/components/Tooltip/Tooltip.tsx
• packages/jds/src/components/Tooltip/tooltip.css.ts

Walkthrough

Tooltip 스타일을 Vanilla Extract로 옮기고 컴포넌트를 forwardRef로 리팩터링했습니다. Trigger/Content 동작과 Storybook 예제가 asChild 패턴과 접근성 라벨로 업데이트되었으며 앱의 툴팁 트리거 마크업도 정리되었습니다.

변경 사항

Tooltip 컴포넌트 Vanilla Extract 마이그레이션

Layer / File(s)	Summary
Vanilla Extract 스타일 정의 packages/jds/src/components/Tooltip/tooltip.css.ts	tooltipFadeIn/tooltipFadeOut 키프레임, tooltipTransition 구성, contentTextStyle 및 content 스타일(배경/패딩/최대너비/데이터 상태 애니메이션)을 추가했습니다.
컴포넌트 API 및 구현 리팩토링 packages/jds/src/components/Tooltip/Tooltip.tsx	TooltipRoot에서 delayDuration 기본 제거. Tooltip.Trigger를 forwardRef로 변경하고 기본 asChild를 false로 변경. Tooltip.Content를 forwardRef로 변경해 Portal/Content를 직접 사용하고 Vanilla Extract 클래스명을 적용; 기존 StyledTooltipContent 경로 제거.
스토리 예제 업데이트 packages/jds/src/components/Tooltip/Tooltip.stories.tsx	Default, AllSides, LongContent, WithCustomOffset, CustomTrigger 스토리의 트리거를 Tooltip.Trigger asChild로 조정하고 아이콘 트리거에 aria-label을 추가·문구 및 일부 마크업 정리.
앱 사용처 접근성/마크업 조정 apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx	툴팁 트리거 마크업을 다중 줄로 정리하고 aria-label='직무 관련 경험 기간 안내'를 명시적으로 추가함.

Sequence Diagram

sequenceDiagram
  participant Consumer
  participant TooltipRoot
  participant TooltipTrigger
  participant TooltipContent
  participant TooltipPrimitive
  Consumer->>TooltipRoot: children, ...radixProps (no delayDuration default)
  TooltipRoot->>TooltipPrimitive.Root: spread props directly
  Consumer->>TooltipTrigger: ref, asChild=false (default changed)
  TooltipTrigger->>TooltipPrimitive.Trigger: forwardRef and props
  Consumer->>TooltipContent: ref, forceMount, side, sideOffset
  TooltipContent->>TooltipPrimitive.Portal: render with forceMount
  TooltipContent->>TooltipPrimitive.Content: apply vanilla-extract className via clsx

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• WonJuneKim
• itwillbeoptimal
• ccconac

Poem

"🐰
바람결에 흩어진 Emotion 옷자락,
새 깃발 Vanilla Extract로 달아입었네.
asChild로 손 내밀고 aria로 인사하며,
툴팁은 부드럽게 반짝이네.
당근 한 입, 코드도 한숨 돌렸네."

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항(vanilla-extract 마이그레이션)을 명확하고 간결하게 요약합니다.
Description check	✅ Passed	PR 설명이 작업 내용, 상세 설명, 체크리스트를 포함하여 템플릿 구조를 잘 따릅니다.
Linked Issues check	✅ Passed	PR의 모든 변경사항이 #440 이슈의 요구사항(emotion 의존성 제거, vanilla-extract 마이그레이션)을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 Tooltip 컴포넌트의 vanilla-extract 마이그레이션에 직접 관련되어 있으며 범위 내입니다.

_{✏️ 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/440-jds-tooltip-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

• X
• Mastodon
• Reddit
• LinkedIn

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