@wishket/design-system 3.7.0 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai/components/AutoCompleteList.md +1 -0
- package/dist/ai/components/Autocomplete.md +1 -0
- package/dist/ai/components/Calendar.md +24 -17
- package/dist/ai/components/Checkbox.md +28 -18
- package/dist/ai/components/CheckboxCard.md +18 -16
- package/dist/ai/components/CheckboxList.md +25 -17
- package/dist/ai/components/ChoiceChip.md +1 -0
- package/dist/ai/components/CommentArea.md +1 -0
- package/dist/ai/components/FileUploader.md +1 -0
- package/dist/ai/components/FilterChip.md +1 -0
- package/dist/ai/components/FilterList.md +1 -0
- package/dist/ai/components/IconButton.md +23 -15
- package/dist/ai/components/IconButtonDropdown.md +103 -0
- package/dist/ai/components/InputChip.md +1 -0
- package/dist/ai/components/List.md +1 -0
- package/dist/ai/components/MultiColumnList.md +1 -0
- package/dist/ai/components/Radio.md +140 -0
- package/dist/ai/components/RadioCard.md +134 -0
- package/dist/ai/components/RadioList.md +150 -0
- package/dist/ai/components/RangeSlider.md +139 -0
- package/dist/ai/components/SearchField.md +1 -0
- package/dist/ai/components/SegmentedControl.md +131 -0
- package/dist/ai/components/Switch.md +114 -0
- package/dist/ai/components/TextButton.md +35 -23
- package/dist/ai/components/TextButtonDropdown.md +101 -0
- package/dist/ai/components/TextField.md +1 -0
- package/dist/ai/components/TextFieldDropdown.md +123 -0
- package/dist/ai/components/index.json +185 -26
- package/dist/ai/tokens.json +1 -1
- package/dist/config/tailwind.config.js +15 -15
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: INPUT-09
|
|
3
3
|
component: Calendar
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.3
|
|
5
5
|
status: draft
|
|
6
|
+
figma.componentKey: edb2350acdd51938f97839bdf7a168262c2c949d
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# 9. Calendar
|
|
@@ -11,20 +12,23 @@ status: draft
|
|
|
11
12
|
|
|
12
13
|
- v0.0.1 (2026.09.22): 초안 작성
|
|
13
14
|
- v0.0.2 (2026.09.30): 미결 항목(Date Picker 신설)을 `Z. 미결`로 분리 (#1292 리뷰 반영)
|
|
15
|
+
- v0.0.3 (2026.10.16): Property 이름을 소문자로 통일 (피그마 전용 속성 포함)
|
|
14
16
|
|
|
15
17
|
## A. Anatomy
|
|
16
18
|
|
|
17
19
|
Calendar는 날짜를 표시하는 **Container(입력 필드)** 와, Focused 상태에서 아래에 열리는 **Calendar Panel**로 구성됩니다.
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
| ├
|
|
27
|
-
|
|
|
21
|
+
|
|
22
|
+
| 요소 | 필수 여부 | 설명 |
|
|
23
|
+
| ------------------ | ----- | ------------------------------------ |
|
|
24
|
+
| Container | 필수 | 배경·테두리·패딩을 담당하는 입력 영역. 클릭/포커스 영역의 기준 |
|
|
25
|
+
| Icon | 필수 | 좌측의 달력 아이콘. 날짜 입력임을 알려줍니다 |
|
|
26
|
+
| Placeholder / Text | 필수 | 선택 전에는 Placeholder, 선택 후에는 날짜 텍스트 |
|
|
27
|
+
| Calendar Panel | 조건부 | Focused 상태에서 필드 아래 열리는 달력 |
|
|
28
|
+
| ├ Selection Row | 필수 | 연·월 표시와 이전·다음 이동 버튼 |
|
|
29
|
+
| ├ Week | 필수 | 요일 헤더 (일\~토) |
|
|
30
|
+
| └ Item | 필수 | 날짜 셀. 선택 대상 |
|
|
31
|
+
|
|
28
32
|
|
|
29
33
|
## B. Description
|
|
30
34
|
|
|
@@ -32,8 +36,7 @@ Calendar는 날짜를 표시하는 **Container(입력 필드)** 와, Focused 상
|
|
|
32
36
|
|
|
33
37
|
사용자가 날짜를 선택할 수 있도록 제공하는 일정 선택용 컴포넌트입니다.
|
|
34
38
|
|
|
35
|
-
> 현재 Figma에는 **단일 날짜 선택만** 정의되어 있습니다. 기간(
|
|
36
|
-
>
|
|
39
|
+
> 현재 Figma에는 **단일 날짜 선택만** 정의되어 있습니다. 기간(시작일\~종료일) 선택은 컴포넌트에 없습니다.
|
|
37
40
|
|
|
38
41
|
### 2. 사용 시점
|
|
39
42
|
|
|
@@ -70,15 +73,19 @@ Calendar, 캘린더, 달력, 날짜 선택, 날짜 입력, Date Picker, 일정
|
|
|
70
73
|
|
|
71
74
|
## C. Properties
|
|
72
75
|
|
|
76
|
+
Property 이름은 **소문자로 시작**하게 적었습니다. 피그마에만 있는 속성도 같은 방식으로 적습니다.
|
|
77
|
+
|
|
73
78
|
| Property | Type | Values | 비고 |
|
|
74
79
|
| --- | --- | --- | --- |
|
|
75
|
-
|
|
|
76
|
-
|
|
|
80
|
+
| disabled | Boolean | True / False | |
|
|
81
|
+
| variant | Variant | Placeholder/Text | 스토리북 수정 |
|
|
77
82
|
| isError | Boolean | True / False | 초안 `isError` → 피그마 표기와 통일 |
|
|
78
|
-
|
|
|
83
|
+
| state | Variant | Enabled/Hovered/Focused | 스토리북 수정 |
|
|
84
|
+
|
|
79
85
|
|
|
80
86
|
## Z. 미결 (구현하지 말 것)
|
|
81
87
|
|
|
82
|
-
> 아래는 **결정되지 않은 제안**입니다. 구현 기준은 위 A
|
|
88
|
+
> 아래는 **결정되지 않은 제안**입니다. 구현 기준은 위 A\~C입니다.
|
|
89
|
+
|
|
90
|
+
1. **Date Picker 컴포넌트 신설**: 기간(시작일\~종료일) 선택 등 Calendar가 다루지 않는 입력을 별도 컴포넌트로 둘지 검토
|
|
83
91
|
|
|
84
|
-
1. **Date Picker 컴포넌트 신설**: 기간(시작일~종료일) 선택 등 Calendar가 다루지 않는 입력을 별도 컴포넌트로 둘지 검토
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: INPUT-11
|
|
3
3
|
component: Checkbox
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
status: draft
|
|
6
|
+
figma.componentKey: 1fd62bfde1a415fe3d026e0980f1986a5e8216f5
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# 11. Checkbox
|
|
@@ -12,15 +13,18 @@ status: draft
|
|
|
12
13
|
- v0.0.1 (2026.09.23): 초안 작성
|
|
13
14
|
- v0.0.2 (2026.10.01): 프론트매터 추가, Type 값을 스토리북 기준(`box` / `circle` / `sub`)으로 통일 (피그마 `Ghost` = `sub`), 미결 항목을 `Z. 미결`로 분리
|
|
14
15
|
- v0.0.3 (2026.10.02): Properties 안내 문구 추가, `Is Error` → `IsError` 표기 통일, `onChange` · `className` 추가 (#1295 리뷰 반영)
|
|
16
|
+
- v0.0.4 (2026.10.16): Property 이름을 소문자로 통일 (피그마 전용 속성 포함), `type` 이름 방향과 `checked` 개명 질문을 `Z. 미결`로 이동 (#1306 리뷰 반영)
|
|
15
17
|
|
|
16
18
|
## A. Anatomy
|
|
17
19
|
|
|
18
20
|
Checkbox는 **Container**와 그 안의 **체크 아이콘**으로 구성됩니다. 개별 컴포넌트로 제공되어 자유롭게 조합해 사용할 수 있으며, **Label과 함께 쓰면 CheckboxList**가 됩니다.
|
|
19
21
|
|
|
20
|
-
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
22
|
+
|
|
23
|
+
| 요소 | 필수 여부 | 설명 |
|
|
24
|
+
| ------------ | ----- | ---------------------- |
|
|
25
|
+
| Container | 필수 | 배경·테두리·모서리를 담당하는 사각 영역 |
|
|
26
|
+
| System Icons | 조건부 | 선택되었을 때만 나타나는 체크 표시 |
|
|
27
|
+
|
|
24
28
|
|
|
25
29
|
## B. Description
|
|
26
30
|
|
|
@@ -40,11 +44,13 @@ Checkbox는 **Container**와 그 안의 **체크 아이콘**으로 구성됩니
|
|
|
40
44
|
|
|
41
45
|
Checkbox와 Switch는 모두 사용자의 선택 여부를 표시하는 컴포넌트입니다.
|
|
42
46
|
|
|
43
|
-
|
|
44
|
-
|
|
|
45
|
-
|
|
|
47
|
+
|
|
48
|
+
| 속성 | Checkbox | Switch |
|
|
49
|
+
| -------- | -------------------------- | ------------------ |
|
|
50
|
+
| 선택값 적용 | 저장하기 등의 액션을 수행해야 값이 저장됨 | 별다른 액션 없이 즉시 적용됨 |
|
|
46
51
|
| 항목 구성 방식 | 하나의 카테고리에 여러 항목으로 나열할 수 있음 | 개별 항목으로 구성하는 것을 권장 |
|
|
47
|
-
| 하위 항목 구성 | 부모가 모든 하위 항목을 선택·해제할 수 있음
|
|
52
|
+
| 하위 항목 구성 | 부모가 모든 하위 항목을 선택·해제할 수 있음 | 부모와 하위 항목 간 관계가 없음 |
|
|
53
|
+
|
|
48
54
|
|
|
49
55
|
### 3. 키워드
|
|
50
56
|
|
|
@@ -67,20 +73,24 @@ Checkbox, 체크박스, 다중 선택, 복수 선택, 동의, Rectangular Checkb
|
|
|
67
73
|
|
|
68
74
|
## C. Properties
|
|
69
75
|
|
|
70
|
-
스토리북(코드) 이름 기준입니다.
|
|
76
|
+
스토리북(코드) 이름 기준입니다. Property 이름은 **코드에 쓰는 이름 그대로**(소문자로 시작) 적었고, 피그마에만 있는 속성도 같은 방식으로 적습니다. 화면에 보이는 속성뿐 아니라 **동작용(`on…`)·개발용 prop도 적습니다.** 비고에 피그마 이름을 함께 적었습니다.
|
|
71
77
|
|
|
72
78
|
| Property | Type | Values | 비고 |
|
|
73
79
|
| --- | --- | --- | --- |
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
80
|
+
| checked | Boolean | True / False | 이름을 `selected`로 바꿀지 검토 중 (Z-3) |
|
|
81
|
+
| disabled | Boolean | True / False | state의 Disabled 값과 중복 (Z-1) |
|
|
82
|
+
| isError | Boolean | True / False | 피그마 `Is Error` |
|
|
83
|
+
| type | Variant | `box` / `circle` / `sub` | 기본값 `box`. 피그마 `Ghost` = 코드 `sub` · 어느 이름으로 맞출지 미정 (Z-2) |
|
|
84
|
+
| onChange | Function | | 체크 상태가 바뀔 때 호출 · 동작용, 시각 변화 없음 |
|
|
85
|
+
| className | String | | 개발용 스타일 지정 |
|
|
86
|
+
| state | Variant | Enabled / Hovered / Disabled | 피그마에만 존재. Hovered는 마우스 hover로 자동 처리 |
|
|
87
|
+
|
|
81
88
|
|
|
82
89
|
## Z. 미결 (구현하지 말 것)
|
|
83
90
|
|
|
84
|
-
> 아래는 **결정되지 않은 제안**입니다. 구현 기준은 위 A
|
|
91
|
+
> 아래는 **결정되지 않은 제안**입니다. 구현 기준은 위 A\~C입니다. 결정되면 본문으로 옮기고 여기서 지웁니다.
|
|
85
92
|
|
|
86
93
|
1. **Disabled 중복**: 코드는 `disabled` Boolean으로 다룹니다. 피그마 `State`의 `Disabled` 값을 제거하고 Boolean으로 통일할지 검토
|
|
94
|
+
2. **`type` 값 이름 (Ghost ↔ sub)**: 피그마는 `Ghost`, 코드는 `sub`입니다. 지금 기록(`mapping.md`)은 "피그마 이름을 `sub`로 바꾼다"입니다. 반대로 코드를 `ghost`로 바꾸려면 `type="sub"`를 쓰는 소비처가 전부 깨지는 **breaking change(major)**입니다 → 방향을 정하고, 정해지면 `mapping.md`도 같은 PR에서 고침
|
|
95
|
+
3. **`checked` → `selected` 개명**: 이름을 `selected`로 바꿀지 검토. `checked`는 네이티브 `<input>` 속성이라, 바꾸면 Radio · CheckboxList · RadioList까지 함께 바뀌고 breaking change입니다
|
|
96
|
+
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: INPUT-12
|
|
3
3
|
component: CheckboxCard
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
status: draft
|
|
6
|
+
figma.componentKey: f2b81355906ad8da0dd818bd7b9ba32849e07be2
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# 12. CheckboxCard
|
|
@@ -12,6 +13,7 @@ status: draft
|
|
|
12
13
|
- v0.0.1 (2026.09.23): 초안 작성
|
|
13
14
|
- v0.0.2 (2026.10.01): 프론트매터 추가, Properties를 코드(`CheckboxCardProps`)와 일치시킴, Type 행 제거(피그마·코드 모두 없음), RadioCard와 공통 규칙 관계 명시, 미결 항목을 `Z. 미결`로 분리
|
|
14
15
|
- v0.0.3 (2026.10.02): Properties 안내 문구 추가, 누락 prop(`onChange` · `name` · `value` · `className` · `containerClassName` · `testId`) 추가, `iconName` 기본값(`receipt`) 명시 (#1295 리뷰 반영)
|
|
16
|
+
- v0.0.4 (2026.10.16): Property 이름을 소문자로 통일 (피그마 전용 속성 포함), `isWide` 비고 정정
|
|
15
17
|
|
|
16
18
|
## A. Anatomy
|
|
17
19
|
|
|
@@ -86,24 +88,24 @@ CheckboxCard, 체크박스 카드, 카드형 선택, 다중 선택, 선택 카
|
|
|
86
88
|
|
|
87
89
|
## C. Properties
|
|
88
90
|
|
|
89
|
-
스토리북(코드) 이름 기준입니다.
|
|
91
|
+
스토리북(코드) 이름 기준입니다. Property 이름은 **코드에 쓰는 이름 그대로**(소문자로 시작) 적었고, 피그마에만 있는 속성도 같은 방식으로 적습니다. 화면에 보이는 속성뿐 아니라 **동작용(`on…`)·개발용 prop도 적습니다.** 비고에 피그마 이름을 함께 적었습니다.
|
|
90
92
|
|
|
91
93
|
| Property | Type | Values | 비고 |
|
|
92
94
|
| --- | --- | --- | --- |
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
95
|
+
| title | String | | **필수.** 카드 제목 |
|
|
96
|
+
| description | String | | 피그마 `supporting text` → **`description`으로 이름 통일** |
|
|
97
|
+
| iconName | Instance | Product Icon 이름 | 기본형 필수 · Wide형 선택. **비우면 `receipt` 아이콘이 들어갑니다** · 피그마 `icon`(Boolean) → `iconName` |
|
|
98
|
+
| checked | Boolean | True / False | |
|
|
99
|
+
| disabled | Boolean | True / False | state의 Disabled 값과 중복 (Checkbox 문서와 동일 이슈, Z-1) |
|
|
100
|
+
| isError | Boolean | True / False | |
|
|
101
|
+
| isWide | Boolean | True / False | 피그마 `isWide` (Variant) |
|
|
102
|
+
| onChange | Function | | 체크 상태가 바뀔 때 호출 · 동작용, 시각 변화 없음 |
|
|
103
|
+
| name | String | | 폼 전송용 이름 · 개발용 |
|
|
104
|
+
| value | String | | 폼 전송용 값 · 개발용 |
|
|
105
|
+
| className | String | | 개발용 스타일 지정 |
|
|
106
|
+
| containerClassName | String | | 카드 바깥 영역 스타일 지정 · 개발용 |
|
|
107
|
+
| testId | String | | 테스트용 ID · 개발용 |
|
|
108
|
+
| state | Variant | Enabled / Hovered / Disabled | 피그마에만 존재. Hovered는 마우스 hover로 자동 처리 |
|
|
107
109
|
|
|
108
110
|
> **Type 속성은 없습니다** (피그마·코드 모두). 카드 안의 Checkbox는 항상 기본 `box`로 렌더됩니다. 하나만 고르는 카드가 필요하면 **RadioCard**를 사용합니다.
|
|
109
111
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: INPUT-10
|
|
3
3
|
component: CheckboxList
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.3
|
|
5
5
|
status: draft
|
|
6
|
+
figma.componentKey: 3758852dd6de0bcb75c13107ef3b693c454ea15f
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# 10. CheckboxList
|
|
@@ -11,16 +12,19 @@ status: draft
|
|
|
11
12
|
|
|
12
13
|
- v0.0.1 (2026.09.22): 초안 작성
|
|
13
14
|
- v0.0.2 (2026.10.02): Properties를 코드(`CheckboxListProps`)와 일치시킴 — 필수 `data` · `type` 추가, 컴포넌트 속성(C-1)과 항목 속성(C-2) 분리 (#1292 리뷰 반영)
|
|
15
|
+
- v0.0.3 (2026.10.16): Property 이름을 소문자로 통일 (피그마 전용 속성 포함), 피그마 전용 `errorText` · `supportingText` 행 추가
|
|
14
16
|
|
|
15
17
|
## A. Anatomy
|
|
16
18
|
|
|
17
19
|
CheckboxList는 **Checkbox(Checkmark)** 와 **Label**로 구성되며, 선택적으로 **Supporting Text**를 가집니다. Checkbox는 개별 컴포넌트로 제공되어 자유롭게 조합해 사용할 수 있습니다.
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
21
|
+
|
|
22
|
+
| 요소 | 필수 여부 | 설명 |
|
|
23
|
+
| --------------- | ----- | --------------------------------- |
|
|
24
|
+
| Checkbox | 필수 | 선택 여부를 나타내는 체크 표시. 별도 컴포넌트 |
|
|
25
|
+
| Label | 필수 | 무엇을 선택하는지 설명하는 텍스트 |
|
|
26
|
+
| Supporting Text | 선택 | 라벨 아래 보조 설명. 선택의 결과나 조건을 덧붙일 때 사용 |
|
|
27
|
+
|
|
24
28
|
|
|
25
29
|
## B. Description
|
|
26
30
|
|
|
@@ -64,27 +68,30 @@ CheckboxList, 체크박스, 체크리스트, 다중 선택, 복수 선택, Check
|
|
|
64
68
|
|
|
65
69
|
## C. Properties
|
|
66
70
|
|
|
67
|
-
CheckboxList는 **항목 목록(`data`)** 을 넘겨 씁니다. 컴포넌트 자체 속성과 **항목 하나하나의 속성**을 나눠 적었습니다.
|
|
71
|
+
CheckboxList는 **항목 목록(`data`)** 을 넘겨 씁니다. 컴포넌트 자체 속성과 **항목 하나하나의 속성**을 나눠 적었습니다. Property 이름은 **코드에 쓰는 이름 그대로**(소문자로 시작) 적었고, 피그마에만 있는 속성도 같은 방식으로 적습니다.
|
|
68
72
|
|
|
69
73
|
### C-1. 컴포넌트 속성
|
|
70
74
|
|
|
71
75
|
| Property | Type | Values | 비고 |
|
|
72
76
|
| --- | --- | --- | --- |
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
77
|
+
| data | 항목 목록 | | **필수.** 아래 C-2 속성을 가진 항목들의 목록 |
|
|
78
|
+
| type | Variant | `box` / `circle` / `sub` | 체크박스 모양 (Checkbox 문서와 동일) |
|
|
79
|
+
| className | String | | 개발용 · 시각 변화는 지정에 따라 |
|
|
76
80
|
|
|
77
81
|
### C-2. 항목(`data` 안) 속성
|
|
78
82
|
|
|
79
83
|
| Property | Type | Values | 비고 |
|
|
80
84
|
| --- | --- | --- | --- |
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
85
|
+
| label | String | | 항목 라벨 · 피그마 추가 |
|
|
86
|
+
| description | String | | 라벨 아래 보조 설명 · 피그마 `Supporting Text`(Boolean)에 해당 → 텍스트 속성으로 수정 |
|
|
87
|
+
| checked | Boolean | True / False | |
|
|
88
|
+
| disabled | Boolean | True / False | |
|
|
89
|
+
| isError | Boolean | True / False | |
|
|
90
|
+
| errorMessage | String | | 오류 문구 · 코드에만 존재 |
|
|
91
|
+
| state | Variant | Enabled / Hovered | 피그마에만 존재. Hovered는 마우스 hover로 자동 처리 |
|
|
92
|
+
| errorText | Boolean | | 피그마에만 존재 (피그마 `Error Text`). 코드는 `errorMessage`에 문구를 넣으면 표시 |
|
|
93
|
+
| supportingText | Boolean | | 피그마에만 존재 (피그마 `Supporting Text`). 코드는 `description`에 문구를 넣으면 표시 |
|
|
94
|
+
|
|
88
95
|
|
|
89
96
|
> ```tsx
|
|
90
97
|
> <CheckboxList data={[
|
|
@@ -92,3 +99,4 @@ CheckboxList는 **항목 목록(`data`)** 을 넘겨 씁니다. 컴포넌트 자
|
|
|
92
99
|
> { label: '야간 알림 받기', description: '22시~08시', disabled: true },
|
|
93
100
|
> ]} />
|
|
94
101
|
> ```
|
|
102
|
+
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: INPUT-07
|
|
3
3
|
component: IconButton
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
status: draft
|
|
6
|
+
figma.componentKey: 1c474f68b330cd24b07deeb4db5ecd0727cfa1c3
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# 7. IconButton
|
|
@@ -12,16 +13,19 @@ status: draft
|
|
|
12
13
|
- v0.0.1 (2026.09.22): 초안 작성
|
|
13
14
|
- v0.0.2 (2026.09.30): New Badge 색상을 토큰명으로 표기 (#1293 리뷰 반영)
|
|
14
15
|
- v0.0.3 (2026.10.02): Properties를 코드(`IconButtonProps`)와 일치시킴 — `Outlined` → `outline`, Icon 행 제거(children 사용), Disabled 추가 (#1292 리뷰 반영)
|
|
16
|
+
- v0.0.4 (2026.10.16): Property 이름을 코드 이름 그대로 소문자로 통일 (피그마 전용 속성 포함)
|
|
15
17
|
|
|
16
18
|
## A. Anatomy
|
|
17
19
|
|
|
18
20
|
IconButton은 **Icon**을 감싸는 **Container**로 구성되며, 선택적으로 **New Badge**를 가집니다.
|
|
19
21
|
|
|
20
|
-
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
22
|
+
|
|
23
|
+
| 요소 | 필수 여부 | 설명 |
|
|
24
|
+
| --------- | ----- | -------------------------------------- |
|
|
25
|
+
| Container | 필수 | 배경·테두리·모서리를 담당하는 영역. 터치/클릭 영역의 기준 |
|
|
26
|
+
| Icon | 필수 | 액션을 의미하는 아이콘. 라벨이 없으므로 의미를 단독으로 전달해야 함 |
|
|
27
|
+
| New Badge | 선택 | 우측 상단의 점 표시. 확인하지 않은 변화가 있음을 알림 |
|
|
28
|
+
|
|
25
29
|
|
|
26
30
|
## B. Description
|
|
27
31
|
|
|
@@ -37,10 +41,12 @@ IconButton은 **Icon**을 감싸는 **Container**로 구성되며, 선택적으
|
|
|
37
41
|
- 화면의 주요 액션(Primary)에는 사용하지 않습니다. 라벨이 있는 Button을 사용합니다.
|
|
38
42
|
- 의미가 즉시 통하지 않는 아이콘에는 **Tooltip을 반드시 함께** 제공합니다.
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
|
44
|
+
|
|
45
|
+
| Variant | 형태 | 사용 상황 |
|
|
46
|
+
| ------------ | -------------- | --------------------------------- |
|
|
42
47
|
| **Outlined** | 흰 배경 + 1px 테두리 | 버튼임을 분명히 알려야 할 때. 카드·리스트 위의 독립 액션 |
|
|
43
|
-
| **Filled**
|
|
48
|
+
| **Filled** | 배경·테두리 없이 아이콘만 | 이미 버튼임이 문맥으로 드러날 때. 툴바, 모달 닫기 |
|
|
49
|
+
|
|
44
50
|
|
|
45
51
|
### 3. 키워드
|
|
46
52
|
|
|
@@ -70,15 +76,16 @@ IconButton, 아이콘 버튼, 아이콘, Icon, 뱃지, Badge, Icon Only
|
|
|
70
76
|
|
|
71
77
|
## C. Properties
|
|
72
78
|
|
|
73
|
-
|
|
79
|
+
Property 이름은 **코드에 쓰는 이름 그대로**(소문자로 시작) 적었습니다. 피그마에만 있는 속성도 같은 방식으로 적고, 비고에 `피그마에만 존재`라고 표시했습니다.
|
|
74
80
|
|
|
75
81
|
| Property | Type | Values | 비고 |
|
|
76
82
|
| --- | --- | --- | --- |
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
83
|
+
| size | Variant | `sm` / `md` / `lg` | 24 / 36 / 50 · 피그마 Small / Medium / Large 로 수정 |
|
|
84
|
+
| outline | Boolean | True / False | `Outlined` 아님 · 피그마 수정 |
|
|
85
|
+
| hasNew | Boolean | True / False | New Badge 표시 · 피그마 이름 **New Badge** 와 통일 필요 |
|
|
86
|
+
| disabled | Boolean | True / False | |
|
|
87
|
+
| state | Variant | Enabled / Hovered / Pressed / Disabled | 피그마에만 존재. Hovered·Pressed는 마우스 동작으로 자동 처리 |
|
|
88
|
+
|
|
82
89
|
|
|
83
90
|
> **아이콘은 prop이 아닙니다.** `icon` 같은 prop은 코드에 없습니다. 아이콘은 **children으로** 넣습니다.
|
|
84
91
|
>
|
|
@@ -87,3 +94,4 @@ IconButton, 아이콘 버튼, 아이콘, Icon, 뱃지, Badge, Icon Only
|
|
|
87
94
|
> <SystemIcon name="medium_delete" />
|
|
88
95
|
> </IconButton>
|
|
89
96
|
> ```
|
|
97
|
+
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: INPUT-21
|
|
3
|
+
component: IconButtonDropdown
|
|
4
|
+
version: 0.0.2
|
|
5
|
+
status: draft
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# 21. IconButtonDropdown
|
|
9
|
+
|
|
10
|
+
**개정 이력**
|
|
11
|
+
|
|
12
|
+
- v0.0.1 (2026.10.02): 초안 작성
|
|
13
|
+
- v0.0.2 (2026.10.16): 선택된 항목 표시를 코드에 맞춤 — 색만 바뀌고 굵기는 그대로 (#1299 리뷰 반영)
|
|
14
|
+
|
|
15
|
+
## A. Anatomy
|
|
16
|
+
|
|
17
|
+
IconButtonDropdown은 **Icon Button**과, 버튼을 누르면 그 아래 8px 간격으로 열리는 **List**로 구성됩니다. 두 요소 모두 기존 컴포넌트(**IconButton**, **List**)를 그대로 씁니다.
|
|
18
|
+
|
|
19
|
+
| 요소 | 필수 여부 | 설명 |
|
|
20
|
+
| --- | --- | --- |
|
|
21
|
+
| Icon Button | 필수 | 목록을 여는 버튼. 24×24만 사용 (`size = sm`), 아이콘은 System Icon Small(14) |
|
|
22
|
+
| List | 조건부 | 버튼을 눌렀을 때만 표시. 최소 너비 160, 버튼 사이 간격 8px |
|
|
23
|
+
| List Item | 필수 | 목록의 선택지. 텍스트 + 선택적 Leading Icon(Medium 16) |
|
|
24
|
+
| Leading Icon | 선택 | 항목별로 지정. 없으면 텍스트만 표시 |
|
|
25
|
+
|
|
26
|
+
**항목 상태** (List 컴포넌트 기준)
|
|
27
|
+
|
|
28
|
+
| 상태 | 표시 |
|
|
29
|
+
| --- | --- |
|
|
30
|
+
| 기본 | 텍스트 `w-gray-600`, Regular |
|
|
31
|
+
| 선택됨 | 텍스트 `primary-500`. **굵기는 기본과 같은 Regular** (색만 바뀜) |
|
|
32
|
+
| Hover / 키보드 포커스 | 배경 `primary-10` |
|
|
33
|
+
|
|
34
|
+
## B. Description
|
|
35
|
+
|
|
36
|
+
### 1. 정의
|
|
37
|
+
|
|
38
|
+
아이콘 클릭을 통해 드롭다운을 표시하는 선택형 컴포넌트입니다. 라벨 없이 아이콘 하나만 보여 공간을 적게 차지하고, 누르면 선택지 목록이 열립니다.
|
|
39
|
+
|
|
40
|
+
### 2. 사용 시점
|
|
41
|
+
|
|
42
|
+
- 공간이 좁아 **텍스트 없이 아이콘만** 두고 선택지를 숨길 때 사용합니다. (카드·테이블 행의 더보기 `⋯`, 목록 상단의 정렬)
|
|
43
|
+
- 목록에서 **하나를 골라 즉시 반영**할 때 사용합니다. 항목을 고르면 목록이 닫힙니다.
|
|
44
|
+
- 현재 선택값을 버튼에 **텍스트로 보여야** 한다면 **TextButtonDropdown**을 사용합니다.
|
|
45
|
+
- 폼 안에서 값을 고르게 한다면 **TextFieldDropdown**을 사용합니다.
|
|
46
|
+
- 선택지가 2~4개로 적고 항상 보여도 된다면 **SegmentedControl**이나 **ChoiceChip**을 사용합니다.
|
|
47
|
+
|
|
48
|
+
**유형**
|
|
49
|
+
|
|
50
|
+
| 유형 | 설명 |
|
|
51
|
+
| --- | --- |
|
|
52
|
+
| **Left** | 목록의 왼쪽 끝을 버튼 왼쪽에 맞춥니다. 기본값. 화면 왼쪽에 놓인 버튼에 씁니다. |
|
|
53
|
+
| **Right** | 목록의 오른쪽 끝을 버튼 오른쪽에 맞춥니다. 화면·카드 오른쪽 끝에 놓인 버튼에 써서 목록이 밖으로 잘리지 않게 합니다. |
|
|
54
|
+
| **Disabled** | 버튼을 눌러도 목록이 열리지 않고, 아이콘이 `w-gray-300`으로 표시됩니다. 키보드(`Tab` · `Enter`)로도 열리지 않습니다. |
|
|
55
|
+
|
|
56
|
+
### 3. 키워드
|
|
57
|
+
|
|
58
|
+
IconButtonDropdown, 아이콘 버튼 드롭다운, 드롭다운, Dropdown, 더보기, More, 옵션 메뉴
|
|
59
|
+
|
|
60
|
+
### 4. Do / Don't
|
|
61
|
+
|
|
62
|
+
**Do**
|
|
63
|
+
|
|
64
|
+
- 아이콘은 **무엇이 열릴지 알 수 있는 것**을 씁니다. (더보기 `⋯`, 정렬, 필터)
|
|
65
|
+
- 버튼이 화면·카드의 오른쪽 끝에 있으면 `align = right`를 씁니다.
|
|
66
|
+
- 항목 텍스트는 짧은 한 줄로 씁니다. (`금액 높은 순`, `마감 임박 순`)
|
|
67
|
+
- Leading Icon을 쓸 거면 **모든 항목에** 넣어 텍스트 시작 위치를 맞춥니다.
|
|
68
|
+
|
|
69
|
+
**Don't**
|
|
70
|
+
|
|
71
|
+
- 항목을 너무 많이 넣지 않습니다. 목록에 높이 제한과 스크롤이 없어 항목 수만큼 길어집니다. (피그마 예시 최대 10개, Z-2)
|
|
72
|
+
- 버튼을 누르자마자 실행되는 동작에 쓰지 않습니다. 그 경우는 **IconButton**입니다.
|
|
73
|
+
- 삭제처럼 되돌릴 수 없는 동작을 항목 선택만으로 바로 실행하지 않습니다. 확인 **Dialog**를 한 번 더 띄웁니다.
|
|
74
|
+
|
|
75
|
+
## C. Properties
|
|
76
|
+
|
|
77
|
+
스토리북(코드) 이름 기준입니다. 표의 Property는 읽기 쉽게 첫 글자를 대문자로 적었고, **코드에서는 첫 글자가 소문자**입니다 (`SelectedItem` → `selectedItem`). 화면에 보이는 속성뿐 아니라 **동작용(`on…`)·개발용 prop도 적습니다.** 비고에 피그마 이름을 함께 적었습니다.
|
|
78
|
+
|
|
79
|
+
| Property | Type | Values | 비고 |
|
|
80
|
+
| --- | --- | --- | --- |
|
|
81
|
+
| Icon | Instance | System Icon 이름 (Small) | **필수.** 피그마에 속성 없음 · 인스턴스 교체로만 바꿈 → Instance 속성 추가 필요 |
|
|
82
|
+
| Items | Array | `{ key, value, leadingIcon? }` 목록 | **필수.** `value` = 항목 텍스트, `leadingIcon` = System Icon 이름 (Medium) |
|
|
83
|
+
| SelectedItem | Object | Items 중 하나 | **필수.** 선택된 항목을 강조 표시. 피그마는 첫 항목이 선택된 모습으로 고정 |
|
|
84
|
+
| Align | Variant | `left` / `right` | 기본값 `left`. 피그마 `Variant` (Left / Right) → **`Align`으로 개명 필요** |
|
|
85
|
+
| Size | Variant | `sm` / `md` / `lg` | **드롭다운은 `sm`(24)만 사용** (기본값). 아이콘을 감싼 **버튼 영역** 크기이며, 아이콘 크기는 `icon`에 넣는 아이콘으로 정해짐 · 코드는 `md`(36) · `lg`(50)도 받지만 쓰지 않음 |
|
|
86
|
+
| Disabled | Boolean | True / False | 피그마 `Disabled` · 키보드로도 열리면 안 됨. **현재 코드는 Tab 포커스 후 `Enter`로 열림 → 수정 요청 필요** |
|
|
87
|
+
| OnItemClick | Function | | **필수.** 항목을 고를 때 호출 · 동작용 |
|
|
88
|
+
| State | Variant | Enabled / Focused | 피그마에만 존재. Focused = 목록이 열린 모습. 코드는 클릭으로 자동 처리 (Z-1) |
|
|
89
|
+
|
|
90
|
+
> `ClassName` · `TestId`는 이 컴포넌트에 **없습니다.** 다른 Input 컴포넌트와 달리 바깥에서 스타일을 지정할 수 없습니다.
|
|
91
|
+
>
|
|
92
|
+
> ```tsx
|
|
93
|
+
> <IconButtonDropdown icon="small_more_options" align="right"
|
|
94
|
+
> items={items} selectedItem={selected} onItemClick={setSelected} />
|
|
95
|
+
> ```
|
|
96
|
+
|
|
97
|
+
## Z. 미결 (구현하지 말 것)
|
|
98
|
+
|
|
99
|
+
> 아래는 **결정되지 않은 제안**입니다. 구현 기준은 위 A~C입니다. 결정되면 본문으로 옮기고 여기서 지웁니다.
|
|
100
|
+
|
|
101
|
+
1. **State 중복**: 피그마 `State = Focused`는 목록이 열린 모습을 그린 것이고, 코드에는 넣는 값이 없습니다. 이름을 `Open`으로 바꿀지 검토 (키보드 포커스와 헷갈림)
|
|
102
|
+
2. **목록 최대 높이 지정 필요**: List 기본값(최대 240, 스크롤)을 이 컴포넌트가 끄고 있어 항목 수만큼 길어집니다. 최대 높이는 지정하기로 했고, 값(List 기본 240을 따를지 등)은 미정
|
|
103
|
+
3. **선택 표시가 필요 없는 메뉴**: 더보기(`⋯`) 메뉴는 '현재 선택값'이 없지만 `selectedItem`이 필수라 어떤 항목이든 강조됩니다. 선택 없는 메뉴 용도를 지원할지 결정
|