Repository navigation
Conversation
WalkthroughCheckbox, Chip, Tooltip 디자인 시스템 컴포넌트가 새로 추가되었으며, 각 컴포넌트에 대한 Storybook 스토리와 index 재-export가 함께 포함됩니다. Providers 트리에 TooltipProvider가 삽입되었고, globals.css에 새 아이콘 색상 토큰이 추가되었습니다. Changes디자인 시스템 컴포넌트 추가
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![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
🧹 Nitpick comments (3)
src/shared/ui/chip/Chip.tsx (1)
13-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
default/sm사이즈의 패딩 값이 동일함
sizevariant의default와sm모두px-1.5 py-0.5로 패딩이 동일하고 텍스트 크기(text-label2vstext-caption1)만 다릅니다. 의도된 설계라면 문제없지만, "크기" variant라는 이름에 비해 실제 크기 차이가 폰트 크기로 국한되어 있어 추후 디자인 요구사항(더 작은 패딩 등)이 추가될 때 혼동을 줄 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/shared/ui/chip/Chip.tsx` around lines 13 - 16, The Chip size variants currently use the same padding for both default and sm, so the visible size difference in Chip.tsx is only the text style. Review the size variant definitions in Chip and decide whether sm should have smaller spacing; if so, update the variant classes so default and sm differ in padding as well as typography, and keep the sizing tokens consistent across the component.src/shared/ui/checkbox/Checkbox.tsx (1)
15-15: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
name,value등 폼 관련 prop 전달 확인
CheckboxPrimitive.Root를 그대로 spread하므로name,value,required등의 폼 관련 prop은 이미 전파됩니다. 특별한 이슈는 없으나, 컴포넌트 JSDoc(6~14번째 줄)에 폼 통합 관련 prop 설명이 없어 사용자가 놓치기 쉽습니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/shared/ui/checkbox/Checkbox.tsx` at line 15, The Checkbox component already forwards form-related props through CheckboxPrimitive.Root, but its JSDoc does not document that behavior. Update the documentation for Checkbox and its prop description so users can see that name, value, required, and similar form integration props are supported and passed through, and keep the guidance aligned with the CheckboxPrimitive.Root spread in Checkbox.tsx.src/shared/ui/tooltip/Tooltip.tsx (1)
19-21: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winHelpTooltip 트리거 버튼에 접근 가능한 이름이 없습니다.
CircleQuestionMark아이콘만 표시되고 텍스트 대체(aria-label등)가 없어, 스크린리더 사용자는 이 버튼의 목적을 알 수 없습니다.🛠️ 제안 수정
- <button type="button" data-slot="tooltip-trigger" className="text-icon-gray-light hover:bg-element-gray-light rounded-full p-1.5"> + <button + type="button" + aria-label="도움말" + data-slot="tooltip-trigger" + className="text-icon-gray-light hover:bg-element-gray-light rounded-full p-1.5" + > <CircleQuestionMark size={12} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/shared/ui/tooltip/Tooltip.tsx` around lines 19 - 21, The HelpTooltip trigger button in Tooltip lacks an accessible name, so add a screen-reader label to the button using its existing tooltip-trigger element and CircleQuestionMark icon. Update the Tooltip component’s trigger button to expose a clear purpose with an aria-label (or equivalent accessible text) that describes the help action, while keeping the visual icon unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/shared/ui/checkbox/Checkbox.tsx`:
- Around line 19-32: The checked-state styles in Checkbox are using a
non-existent variant, so they never apply. Update the className in Checkbox.tsx
to use an existing checked selector such as data-[state=checked]:... or add the
missing data-checked custom variant in the global styles, and make sure the
checked styling is aligned with the Checkbox component’s actual state source.
In `@src/shared/ui/tooltip/Tooltip.tsx`:
- Around line 86-96: Update Tooltip.Content styling in Tooltip to use the actual
Radix state attributes exposed by the component: replace the non-matching
data-open and data-closed animation selectors with data-[state=closed], and add
data-[state=instant-open] so immediate openings also animate. Keep the existing
delayed-open behavior and make the change in the className block inside
Tooltip.Content.
---
Nitpick comments:
In `@src/shared/ui/checkbox/Checkbox.tsx`:
- Line 15: The Checkbox component already forwards form-related props through
CheckboxPrimitive.Root, but its JSDoc does not document that behavior. Update
the documentation for Checkbox and its prop description so users can see that
name, value, required, and similar form integration props are supported and
passed through, and keep the guidance aligned with the CheckboxPrimitive.Root
spread in Checkbox.tsx.
In `@src/shared/ui/chip/Chip.tsx`:
- Around line 13-16: The Chip size variants currently use the same padding for
both default and sm, so the visible size difference in Chip.tsx is only the text
style. Review the size variant definitions in Chip and decide whether sm should
have smaller spacing; if so, update the variant classes so default and sm differ
in padding as well as typography, and keep the sizing tokens consistent across
the component.
In `@src/shared/ui/tooltip/Tooltip.tsx`:
- Around line 19-21: The HelpTooltip trigger button in Tooltip lacks an
accessible name, so add a screen-reader label to the button using its existing
tooltip-trigger element and CircleQuestionMark icon. Update the Tooltip
component’s trigger button to expose a clear purpose with an aria-label (or
equivalent accessible text) that describes the help action, while keeping the
visual icon unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3cfe4d3b-442d-41f2-b3b5-84d36bef8654
📒 Files selected for processing (11)
src/app/provider/index.tsxsrc/app/style/globals.csssrc/shared/ui/checkbox/Checkbox.stories.tsxsrc/shared/ui/checkbox/Checkbox.tsxsrc/shared/ui/checkbox/index.tssrc/shared/ui/chip/Chip.stories.tsxsrc/shared/ui/chip/Chip.tsxsrc/shared/ui/chip/index.tssrc/shared/ui/tooltip/Tooltip.stories.tsxsrc/shared/ui/tooltip/Tooltip.tsxsrc/shared/ui/tooltip/index.ts
| className={cn( | ||
| // Base | ||
| 'peer border-border-subtle text-icon-gray-lighter relative flex size-4 shrink-0 items-center justify-center rounded-xs border transition-colors outline-none', | ||
| 'after:absolute after:-inset-x-3 after:-inset-y-2', | ||
| // checked | ||
| 'data-checked:border-border-primary data-checked:bg-element-primary data-checked:text-icon-inverse', | ||
| // focus | ||
| 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3', | ||
| // invalid | ||
| 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary aria-invalid:ring-3', | ||
| // disabled | ||
| 'group-has-disabled/field:opacity-50 disabled:cursor-not-allowed disabled:opacity-50', | ||
| className | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check whether a custom Tailwind variant for data-checked is defined
rg -n "data-checked" src/app/style/globals.css
rg -n "custom-variant" src/app/style/globals.cssRepository: YAPP-Github/28th-Web-Team-1-FE
Length of output: 208
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Checkbox component\n'
sed -n '1,120p' src/shared/ui/checkbox/Checkbox.tsx
printf '\n## Tailwind/globals references\n'
rg -n "data-checked|data-\\[state=checked\\]|`@custom-variant`|CheckboxPrimitive|aria-checked" src . -g '!node_modules' -g '!dist' -g '!build' || true
printf '\n## Tailwind package/version hints\n'
rg -n "\"tailwindcss\"|`@tailwindcss`|tailwindcss" package.json pnpm-lock.yaml yarn.lock package-lock.json . -g '!node_modules' -g '!dist' -g '!build' || trueRepository: YAPP-Github/28th-Web-Team-1-FE
Length of output: 13708
data-checked:는 현재 정의돼 있지 않습니다
src/app/style/globals.css에는 @custom-variant data-checked (...)가 없어서 이 스타일은 체크 상태에 적용되지 않습니다. data-[state=checked]:...로 바꾸거나 data-checked variant를 추가해야 합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/shared/ui/checkbox/Checkbox.tsx` around lines 19 - 32, The checked-state
styles in Checkbox are using a non-existent variant, so they never apply. Update
the className in Checkbox.tsx to use an existing checked selector such as
data-[state=checked]:... or add the missing data-checked custom variant in the
global styles, and make sure the checked styling is aligned with the Checkbox
component’s actual state source.
| className={cn( | ||
| // 기본 레이아웃 및 색상 | ||
| 'bg-black-75 text-text-bolder-inverse text-caption1 z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-sm p-2', | ||
| // 열림/닫힘 애니메이션 | ||
| 'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', | ||
| // 방향별 슬라이드 모션 | ||
| 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', | ||
| // kbd 조합 시 스타일 | ||
| 'has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm', | ||
| className | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the tooltip component and relevant Radix usage.
git ls-files | rg '^src/shared/ui/tooltip/Tooltip\.tsx$|^package\.json$|^pnpm-lock\.yaml$|^yarn\.lock$|^package-lock\.json$'
echo '--- Tooltip.tsx outline ---'
ast-grep outline src/shared/ui/tooltip/Tooltip.tsx --view expanded || true
echo '--- Tooltip.tsx relevant lines ---'
nl -ba src/shared/ui/tooltip/Tooltip.tsx | sed -n '1,220p'
echo '--- Search for data-open/data-closed usage in repo ---'
rg -n --hidden --glob '!**/node_modules/**' 'data-(open|closed):|data-\[state=closed\]|data-\[state=delayed-open\]|Tooltip\.Content|TooltipContent' src package.json . || true
echo '--- Radix tooltip dependency versions ---'
python3 - <<'PY'
import json, pathlib
for p in ['package.json','pnpm-lock.yaml','yarn.lock','package-lock.json']:
path = pathlib.Path(p)
if path.exists() and p == 'package.json':
data=json.loads(path.read_text())
deps={**data.get('dependencies',{}), **data.get('devDependencies',{}), **data.get('peerDependencies',{})}
for k,v in deps.items():
if '`@radix-ui/react-tooltip`' in k or 'tailwindcss' in k:
print(p, k, v)
PYRepository: YAPP-Github/28th-Web-Team-1-FE
Length of output: 896
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect package metadata for Radix tooltip if present.
python3 - <<'PY'
import json, pathlib
path = pathlib.Path('package.json')
if path.exists():
data = json.loads(path.read_text())
for section in ['dependencies', 'devDependencies', 'peerDependencies', 'resolutions', 'overrides']:
items = data.get(section, {})
for k, v in items.items():
if 'radix-ui/react-tooltip' in k or 'tailwindcss' in k:
print(section, k, v)
PY
# Show any imported Radix tooltip symbols in the component file.
rg -n 'radix-ui/react-tooltip|Tooltip' src/shared/ui/tooltip/Tooltip.tsxRepository: YAPP-Github/28th-Web-Team-1-FE
Length of output: 2403
🌐 Web query:
Radix UI Tooltip.Content data-state delayed-open instant-open closed data-open data-closed documentation
💡 Result:
In Radix UI, the Tooltip.Content component utilizes a data-state attribute to expose its current visibility and transition status for styling purposes [1][2]. The possible values for data-state are "closed", "delayed-open", and "instant-open" [1][2]. Data-State Values: 1. closed: The tooltip is currently not visible [1][2]. 2. delayed-open: The tooltip is open after the configured delay duration [1][2]. 3. instant-open: The tooltip is open immediately, typically triggered by keyboard interaction or after a preceding tooltip has already opened [1][3][2]. Styling Usage: You can target these states in your CSS or styling framework to apply transitions, animations, or other visual changes [1][3]. Because these attributes exist on the Tooltip.Content element at runtime, they are ideal for defining entry and exit animations [3][2]. Example CSS targeting these states:.TooltipContent[data-state='delayed-open'],.TooltipContent[data-state='instant-open'] { animation: fadeIn 200ms ease; }.TooltipContent[data-state='closed'] { animation: fadeOut 200ms ease; } Note: Radix UI does not use separate attributes like data-open or data-closed; the data-state attribute is the standard implementation across their primitives for representing these conditions [4][5]. When styling, you can also combine data-state with other exposed attributes like data-side (top, right, bottom, left) and data-align (start, center, end) to create complex, collision-aware animations [1][3][2].
Citations:
- 1: https://www.radix-ui.com/primitives/docs/components/tooltip
- 2: https://radix.rustforweb.org/primitives/components/tooltip.html
- 3: https://www.radix-ui.com/primitives/docs/components/tooltip.md
- 4: https://www.radix-ui.com/primitives/docs/guides/styling
- 5: https://radix-ui-primitives.mintlify.app/concepts/state-management
data-[state=closed]로 바꾸고 instant-open도 포함하세요
Tooltip.Content는 closed | delayed-open | instant-open만 노출하므로 data-open/data-closed는 매칭되지 않습니다. 닫힘 애니메이션은 data-[state=closed]로 옮기고, 즉시 열림 상태도 애니메이션하려면 data-[state=instant-open]을 함께 추가하세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/shared/ui/tooltip/Tooltip.tsx` around lines 86 - 96, Update
Tooltip.Content styling in Tooltip to use the actual Radix state attributes
exposed by the component: replace the non-matching data-open and data-closed
animation selectors with data-[state=closed], and add data-[state=instant-open]
so immediate openings also animate. Keep the existing delayed-open behavior and
make the change in the className block inside Tooltip.Content.
2 participants
#️⃣연관된 이슈
📝작업 내용
TooltipProvider를app/provider/index.tsx에 추가했습니다.HelpTooltip컴포넌트는 기본적으로 ? 아이콘을 갖고있으며, hover시 children의 메시지를 노출합니다.내부 API는
TooltipContent와 동일합니다💬리뷰 요구사항(선택)
Summary by CodeRabbit
New Features
Documentation