[UI/#17] 공용 chip/input/checkbox 컴포넌트 추가 - #18
Conversation
WalkthroughChip, Input, Checkbox 공용 컴포넌트를 추가했다. 관련 아이콘을 확장하고 FolderColorDot의 Changes공용 UI 컴포넌트
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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
components/common/Input/Input.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. components/icons/send.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. Comment |
🤖 PR Checks 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
components/common/Chip/Chip.tsx (1)
68-79: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winProps 타입을 파일 상단으로 이동하세요.
두 컴포넌트는 props 타입을 스타일 상수 뒤에 선언합니다. import 아래로 이동하세요.
components/common/Chip/Chip.tsx#L68-L79:ChipProps를 import 아래로 이동하세요.components/common/FolderColorDot/FolderColorDot.tsx#L6-L10:FolderColorDotProps를 import 아래로 이동하세요.As per path instructions,
props 타입은 파일 상단에 type XxxProps = {} 형태로 선언을 적용하세요.🤖 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 `@components/common/Chip/Chip.tsx` around lines 68 - 79, Move the ChipProps declaration in components/common/Chip/Chip.tsx to immediately after the imports and before style constants, preserving its existing fields. Apply the same change to FolderColorDotProps in components/common/FolderColorDot/FolderColorDot.tsx, using the type XxxProps = {} form required by the path instructions.Source: Path instructions
components/common/Input/Input.tsx (1)
63-83: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
onFocus/onBlur를 외부에 노출하는 것을 검토하십시오.
InputBase는RNTextInputProps에서onFocus와onBlur를 완전히 제외합니다. 호출부는 포커스/블러 이벤트에 훅을 걸 수 없습니다.Input은 내부적으로 포커스 상태만 관리하고 외부 콜백을 호출하지 않습니다.PR 설명에 따르면 실제 화면 적용은 후속 작업입니다. 블러 시 유효성 검사(예:
line모양의 과제명 입력)가 필요해지면, 지금 이 타입 계약을 변경해야 합니다. 지금 내부 상태 갱신과 함께 외부 콜백을 호출하도록 만들면, 나중에 호출부 API를 깨지 않고 확장할 수 있습니다.♻️ 제안하는 리팩터링
type InputBase = Omit< RNTextInputProps, | "style" | "className" | "value" | "onChangeText" | "placeholder" - | "onFocus" - | "onBlur" | "secureTextEntry" > & { value: string; onChangeText: (text: string) => void; placeholder: string; className?: string; };export function Input({ value, onChangeText, placeholder, shape = "box", timerLabel, onSend, className, + onFocus, + onBlur, ...rest }: InputProps) {<TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} - onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(false)} + onFocus={(e) => { + setIsFocused(true); + onFocus?.(e); + }} + onBlur={(e) => { + setIsFocused(false); + onBlur?.(e); + }} secureTextEntry={hasPasswordToggle ? isSecure : undefined}Also applies to: 137-149
🤖 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 `@components/common/Input/Input.tsx` around lines 63 - 83, Update the InputBase contract to retain onFocus and onBlur from RNTextInputProps, then update Input’s focus and blur handlers to invoke the supplied callbacks while preserving its internal focus-state updates. Ensure the callbacks remain optional and receive the native event 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.
Nitpick comments:
In `@components/common/Chip/Chip.tsx`:
- Around line 68-79: Move the ChipProps declaration in
components/common/Chip/Chip.tsx to immediately after the imports and before
style constants, preserving its existing fields. Apply the same change to
FolderColorDotProps in components/common/FolderColorDot/FolderColorDot.tsx,
using the type XxxProps = {} form required by the path instructions.
In `@components/common/Input/Input.tsx`:
- Around line 63-83: Update the InputBase contract to retain onFocus and onBlur
from RNTextInputProps, then update Input’s focus and blur handlers to invoke the
supplied callbacks while preserving its internal focus-state updates. Ensure the
callbacks remain optional and receive the native event unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 8f16c595-0a01-462b-8415-89ff6a5f6213
📒 Files selected for processing (11)
components/common/Checkbox/Checkbox.stories.tsxcomponents/common/Checkbox/Checkbox.tsxcomponents/common/Chip/Chip.stories.tsxcomponents/common/Chip/Chip.tsxcomponents/common/FolderColorDot/FolderColorDot.stories.tsxcomponents/common/FolderColorDot/FolderColorDot.tsxcomponents/common/Input/Input.stories.tsxcomponents/common/Input/Input.tsxcomponents/icons/check-box.tsxcomponents/icons/index.tscomponents/icons/send.tsx
There was a problem hiding this comment.
피그마와 같은 이름으로 아이콘을 사용하기로 해서 send.tsx를 따로 만드는 것보다 up.tsx를 커스텀하는걸로 바꿔주세요 !!
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@components/icons/send.tsx`:
- Around line 32-33: Replace the raw palette classes in the disabled and enabled
branches of bgClassName and arrowClassName with the existing semantic color
tokens, preserving their current visual states. Do not add dark: variants; if an
appropriate semantic token is missing, define it through the project’s
established token system before using it here.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 018be5c5-159c-4583-92b5-8da08bf97970
📒 Files selected for processing (2)
components/common/Input/Input.tsxcomponents/icons/send.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- components/common/Input/Input.tsx
| const bgClassName = disabled ? "text-gray-200" : "text-primary"; | ||
| const arrowClassName = disabled ? "text-gray-400" : "text-gray-0"; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
색상 클래스를 semantic token으로 교체하세요.
Line 32-33에서 text-gray-200, text-gray-400, text-gray-0를 직접 사용합니다. components 하위 컴포넌트에서는 raw palette 클래스 대신 semantic token을 사용해야 합니다. 기존 token으로 교체하세요. 필요한 token이 없으면 token을 먼저 추가하세요.
As per coding guidelines: {app,components,screens}/**/*.{ts,tsx} 경로의 화면과 컴포넌트에서는 dark: variant를 사용하지 않고 semantic token 클래스만 사용합니다.
🤖 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 `@components/icons/send.tsx` around lines 32 - 33, Replace the raw palette
classes in the disabled and enabled branches of bgClassName and arrowClassName
with the existing semantic color tokens, preserving their current visual states.
Do not add dark: variants; if an appropriate semantic token is missing, define
it through the project’s established token system before using it here.
Source: Coding guidelines
2 participants
📌 [UI/#17] 공용 컴포넌트 구현
📌 관련 이슈번호
📌 PR 유형
어떤 변경 사항이 있나요?
📌 PR 요약
Figma 디자인 시스템의 공용 컴포넌트 3종을 구현했습니다 (
components/common).Chip
(mobile) chip의100%/40%/fillvariant를 외형 기준으로 옮김 (default/muted/fill)FolderColor토큰(sub-01~sub-05,sub-null) 재사용FolderColorDot에 없던 10px이라2xs사이즈 추가Input
(mobile) input box의 13개 variant를shape(box/box-password/box-timer/modal/modal-password/line/comment) 축으로 정리default/focus는 실제TextInput포커스 상태로 구현 (별도 variant 없음)Send아이콘 신규 추가 (배경·화살표 색을 독립적으로 지정해야 해서 기존Up/CheckCircleFill패턴으로는 불가능했음)Checkbox
checkbox.mp4
(mobile) checkbox의icon-box/icon-check boxvariant를checkedboolean으로 구현CheckBox아이콘에서 체크마크만 쓸 수 있도록CheckBoxMark분리, 박스 테두리는 항상 하나만 그리고 체크마크만 겹쳐서 페이드AnimatedAPI —react-native-reanimated는 Storybook Vite 빌더에서 worklet 컴파일이 안 돼 제외)공통
Test plan
npm run typecheck,npm run lint통과📌 작업 세부 내용
1. chip
Figma
(mobile) chip디자인에 맞춰 공용Chip컴포넌트를 만들었고,FolderColorDot에 사이즈 하나를 추가했습니다.components/common/Chip/Chip.tsx— 점 + 라벨로 된 알약 모양 칩color?: FolderColor(sub-01~sub-05,sub-null) — Figma 칩의 점 색이 폴더 색상 팔레트와 그대로 일치해서 같은 토큰을 재사용variant?: "default" | "muted" | "fill"— 100% / 40% / fill 세 상태에 대응. "선택됨"의 의미가 화면마다 달라서(홈에서는default가 선택 상태, 폴더 모달에서는fill이 선택 상태) 역할이 아니라 겉모습 기준으로 이름을 붙임. 어떤 의미로 쓸지는 호출하는 화면이 결정label,onPress?,className?(항상 마지막) 순서로 props 구성components/common/Chip/Chip.stories.tsx— Default/Muted/Fill/NotPressable + 전체 색상 매트릭스 스토리FolderColorDot에2xs(10px) 사이즈 추가 — 칩의 점이 기존 12px/16px과 달리 10px이라, 색상 로직을 새로 만들지 않고 기존 컴포넌트를 재사용2. input
(mobile) input box구현 (components/common/Input)shape:box/box-password/box-timer/modal/modal-password/line/comment7종default/focusvariant는 실제TextInput포커스 상태로 구현 (별도 prop 없음)box-timer), 댓글 전송 버튼(comment, 입력값 유무로 활성화) 포함components/icons/send.tsx신규 추가Up/CheckCircleFill아이콘은 배경색만 바꿀 수 있고 글자(화살표)는 흰색 고정이라, 배경·화살표 색을 독립적으로 지정해야 하는 이 케이스엔 맞지 않아 별도 아이콘으로 분리gray-200/화살표gray-400(비활성), 배경primary/화살표gray-0(활성)Test plan
npm run typecheck통과npm run lint통과Common/Input)에서 7개 shape 전부 확인3. checkbox
(mobile) checkbox구현 (components/common/Checkbox)checked(필수) /onPress(선택) /accessibilityLabel(선택) propsaccessibilityRole="checkbox"+accessibilityState={{ checked }}CheckBox아이콘(박스+체크마크 통합)에서 체크마크만 따로 쓸 수 있도록CheckBoxMark신규 exportAnimatedAPI 사용 —react-native-reanimated는 Storybook의 Vite 빌더에서 worklet 컴파일이 안 돼 크래시나서 제외)Test plan
npm run typecheck통과npm run lint통과Common/Checkbox)에서 Unchecked/Checked/Interactive 확인📸 스크린샷
🔗 기타 (공유사항)