CheckboxGroup 컴포넌트 구현 #711
Conversation
yolophg
force-pushed
the
597-implement-checkboxgroup
branch
3 times, most recently
from
4b0bd7e to
567a8f2
Compare
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
yolophg
force-pushed
the
597-implement-checkboxgroup
branch
from
567a8f2 to
43a7500
Compare
Bundle ReportBundle size has no change ✅ |
| layout: "centered", | ||
| design: { | ||
| type: "figma", | ||
| url: "https://www.figma.com/design/mQ2ETYC6LXGOwVETov3CgO/Dale-UI-Kit?node-id=851-1768", |
There was a problem hiding this comment.
체크박스 그룹이 아닌 체크박스 피그마로 링크되어있습니다.
https://www.figma.com/design/mQ2ETYC6LXGOwVETov3CgO/Dale-UI-Kit?node-id=6814-1500 로 수정부탁드립니다.
| <CheckboxGroup | ||
| name="vertical-orientation" | ||
| label="좋아하는 과일을 선택하세요 (옵션 선택)" | ||
| orientation="vertical" | ||
| defaultValue={["apple"]} | ||
| > | ||
| <CheckboxItem value="apple">사과</CheckboxItem> | ||
| <CheckboxItem value="banana">바나나</CheckboxItem> | ||
| <CheckboxItem value="orange">오렌지</CheckboxItem> | ||
| </CheckboxGroup> |
There was a problem hiding this comment.
default args에 children을 주입하고 있고 여기서 주입하는것과 동일한 형태로 보입니다.
<CheckboxGroup
name="vertical-orientation"
label="좋아하는 과일을 선택하세요 (옵션 선택)"
orientation="vertical"
defaultValue={["apple"]}
{...args}
/>
로 변경하면 children을 중복해서 선언하지않아도 되고 option을 변경하였을때 수정도 한번에 되니 유지보수에도 유리할것으로 예상됩니다.
| <div | ||
| className={css({ display: "flex", flexDirection: "column", gap: "32" })} | ||
| > |
There was a problem hiding this comment.
중앙정렬이 들어가도 괜찮다면 VStack 컴포넌트를 사용하는것이 어떨까요?
| onValueChange: (value: string, checked: boolean) => void; | ||
| } | null>(null); | ||
|
|
||
| export interface CheckboxGroupProps { |
There was a problem hiding this comment.
required는 지원안하는건지 궁금합니다.
| </ArkCheckbox.Root> | ||
| ); | ||
| } |
There was a problem hiding this comment.
한샘님이 작성하신 checkbox 컴포넌트를 import해서 사용하는것이 어떨까요?
별도의 구현체로 가다보면 관리포인트도 늘어나고 추후에 스타일이 동일하지 않는 문제가 생길거같습니다.
| /** | ||
| * 컴포넌트가 처음 렌더링될 때 선택되는 값들입니다. | ||
| * @default undefined | ||
| */ | ||
| defaultValue?: string[]; | ||
|
|
||
| /** | ||
| * 외부에서 선택 값을 직접 제어할 때 사용합니다. | ||
| * @default undefined | ||
| */ | ||
| value?: string[]; |
There was a problem hiding this comment.
string 배열인데 변수 이름은 단수라 어색하네요. 복수형으로 바꾸면 자연스러울 것 같은데 어떻게 생각하시나요?
| * true이면 모든 체크박스가 비활성화되어 상호작용이 불가합니다. | ||
| * @default false | ||
| */ | ||
| disabled?: boolean; |
There was a problem hiding this comment.
default가 false라면서 컴포넌트 함수 default parameter에는 아무것도 할당되어 있지 않은데 의도하신 건가요?
| /** | ||
| * true이면 이 체크박스가 비활성화됩니다. | ||
| * @default false | ||
| */ | ||
| disabled?: boolean; |
변경 사항
목적
리뷰어에게
PR 작성자 체크 리스트