@idbrnd/design-system 1.4.0 → 1.5.1
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/README.md +103 -36
- package/dist/components/Content/Avatar/Avatar.d.ts +43 -0
- package/dist/components/Content/AvatarStack/AvatarStack.d.ts +34 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1208 -1097
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -59,6 +59,8 @@ export default function App() {
|
|
|
59
59
|
- [Select](#select)
|
|
60
60
|
- [Dropdown](#dropdown)
|
|
61
61
|
- [Content](#content)
|
|
62
|
+
- [Avatar](#avatar)
|
|
63
|
+
- [AvatarStack](#avatarstack)
|
|
62
64
|
- [ContentBadge](#contentbadge)
|
|
63
65
|
- [StateBadge](#statebadge)
|
|
64
66
|
- [기타](#기타)
|
|
@@ -490,7 +492,7 @@ import { Tooltip } from "@idbrnd/design-system";
|
|
|
490
492
|
|
|
491
493
|
<Tooltip content="안녕하세요!" position="top">
|
|
492
494
|
<button>Hover me</button>
|
|
493
|
-
</Tooltip
|
|
495
|
+
</Tooltip>;
|
|
494
496
|
```
|
|
495
497
|
|
|
496
498
|
**클릭 트리거 + render function**
|
|
@@ -514,25 +516,31 @@ import { Tooltip } from "@idbrnd/design-system";
|
|
|
514
516
|
|
|
515
517
|
```tsx
|
|
516
518
|
<Tooltip content="긴 텍스트 전체 내용" visibleOnEllipsis>
|
|
517
|
-
<span
|
|
519
|
+
<span
|
|
520
|
+
style={{
|
|
521
|
+
overflow: "hidden",
|
|
522
|
+
textOverflow: "ellipsis",
|
|
523
|
+
whiteSpace: "nowrap",
|
|
524
|
+
}}
|
|
525
|
+
>
|
|
518
526
|
긴 텍스트 전체 내용
|
|
519
527
|
</span>
|
|
520
528
|
</Tooltip>
|
|
521
529
|
```
|
|
522
530
|
|
|
523
|
-
| Prop
|
|
524
|
-
|
|
|
525
|
-
| `content`
|
|
526
|
-
| `trigger`
|
|
527
|
-
| `variant`
|
|
528
|
-
| `position`
|
|
529
|
-
| `arrow`
|
|
530
|
-
| `as`
|
|
531
|
-
| `visibleOnEllipsis
|
|
532
|
-
| `backgroundColor`
|
|
533
|
-
| `contentColor`
|
|
534
|
-
| `customStyle`
|
|
535
|
-
| `children`
|
|
531
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
532
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
|
|
533
|
+
| `content` | `ReactNode \| ((close: () => void) => ReactNode)` | — | **(필수)** 툴팁에 표시할 내용. render function 전달 시 `close` 콜백 사용 가능 |
|
|
534
|
+
| `trigger` | `"hover"` \| `"click"` | `"hover"` | 트리거 방식 |
|
|
535
|
+
| `variant` | `"default"` \| `"compact"` | `"default"` | 크기 변형. default: 8px 12px, compact: 4px 12px |
|
|
536
|
+
| `position` | `"top"` \| `"top-left"` \| `"top-right"` \| `"bottom"` \| `"bottom-left"` \| `"bottom-right"` \| `"left"` \| `"left-top"` \| `"left-bottom"` \| `"right"` \| `"right-top"` \| `"right-bottom"` | `"top"` | 툴팁 표시 위치 (12방향) |
|
|
537
|
+
| `arrow` | `boolean` | `true` | 화살표(꼬리표) 표시 여부 |
|
|
538
|
+
| `as` | `keyof JSX.IntrinsicElements` | `"span"` | 트리거 래퍼 HTML 태그 |
|
|
539
|
+
| `visibleOnEllipsis` | `boolean` | `false` | `true` 시 자식에 말줄임이 발생했을 때만 툴팁 표시 |
|
|
540
|
+
| `backgroundColor` | `string` | — | 툴팁 배경색 커스터마이징 |
|
|
541
|
+
| `contentColor` | `string` | — | 툴팁 텍스트 색상 커스터마이징 |
|
|
542
|
+
| `customStyle` | `CSSProperties` | — | 툴팁 박스에 적용할 추가 인라인 스타일 |
|
|
543
|
+
| `children` | `ReactNode` | — | **(필수)** 툴팁을 트리거할 자식 엘리먼트 |
|
|
536
544
|
|
|
537
545
|
유의사항:
|
|
538
546
|
|
|
@@ -602,26 +610,26 @@ function SelectExample() {
|
|
|
602
610
|
/>
|
|
603
611
|
```
|
|
604
612
|
|
|
605
|
-
| Prop
|
|
606
|
-
|
|
|
607
|
-
| `options`
|
|
608
|
-
| `selectedValue`
|
|
609
|
-
| `onSelect`
|
|
610
|
-
| `variant`
|
|
611
|
-
| `size`
|
|
612
|
-
| `heading`
|
|
613
|
-
| `required`
|
|
614
|
-
| `leadingContent`
|
|
615
|
-
| `description`
|
|
616
|
-
| `placeholder`
|
|
617
|
-
| `disabled`
|
|
618
|
-
| `type`
|
|
619
|
-
| `align`
|
|
620
|
-
| `content`
|
|
621
|
-
| `buttonWidth`
|
|
622
|
-
| `descriptionWidth` | `number`
|
|
623
|
-
| `textColor`
|
|
624
|
-
| `customStyle`
|
|
613
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
614
|
+
| ------------------ | -------------------------------------------------------- | ----------------- | ------------------------------------------------------------- |
|
|
615
|
+
| `options` | `DropdownOption[]` | `[]` | 드롭다운에 표시할 옵션 배열. `{ label, value, icon? }` 형태 |
|
|
616
|
+
| `selectedValue` | `DropdownOption \| null` | — | 현재 선택된 옵션 |
|
|
617
|
+
| `onSelect` | `(option: DropdownOption) => void` | — | 옵션 선택 시 호출되는 콜백 |
|
|
618
|
+
| `variant` | `"default"` \| `"choosing"` \| `"error"` \| `"selected"` | `"default"` | 트리거 상태. `choosing`/`selected`는 자동 적용 |
|
|
619
|
+
| `size` | `"large"` \| `"medium"` \| `"small"` | `"medium"` | 트리거 높이. large: 44px, medium: 40px, small: 36px |
|
|
620
|
+
| `heading` | `string` | — | 상단 라벨 텍스트. 미지정 시 라벨 미표시 |
|
|
621
|
+
| `required` | `boolean` | `false` | 라벨 우측 `*` 표시 여부 |
|
|
622
|
+
| `leadingContent` | `ReactNode` | — | 트리거 텍스트 좌측에 표시할 아이콘 등 |
|
|
623
|
+
| `description` | `ReactNode` | — | 하단 안내 문구 |
|
|
624
|
+
| `placeholder` | `ReactNode` | `"선택해주세요."` | 미선택 시 표시할 콘텐츠. 문자열 또는 JSX 전달 가능 |
|
|
625
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
626
|
+
| `type` | `"basic"` \| `"search"` | `"basic"` | `"search"` 시 드롭다운 상단에 검색 입력란 표시, 실시간 필터링 |
|
|
627
|
+
| `align` | `"left"` \| `"center"` | `"left"` | 옵션 텍스트 정렬 |
|
|
628
|
+
| `content` | `boolean` | `false` | `true` 시 옵션의 `icon`이 라벨 좌측에 표시 |
|
|
629
|
+
| `buttonWidth` | `number` | — | 트리거 버튼 너비(px). 미지정 시 부모 너비를 따름 |
|
|
630
|
+
| `descriptionWidth` | `number` | — | 하단 안내 문구 너비(px). 미지정 시 부모 너비를 따름 |
|
|
631
|
+
| `textColor` | `string` | — | 옵션 라벨 텍스트 색상 커스터마이징 (예: `"#6366f1"`) |
|
|
632
|
+
| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
|
|
625
633
|
|
|
626
634
|
유의사항:
|
|
627
635
|
|
|
@@ -734,6 +742,65 @@ function SearchDropdown() {
|
|
|
734
742
|
|
|
735
743
|
## Content
|
|
736
744
|
|
|
745
|
+
### Avatar
|
|
746
|
+
|
|
747
|
+
사용자 아바타 이미지를 표시하는 컴포넌트입니다.
|
|
748
|
+
이미지 경로를 전달하지 않으면 기본 아바타 이미지를 사용합니다.
|
|
749
|
+
|
|
750
|
+
```tsx
|
|
751
|
+
import { Avatar } from "@idbrnd/design-system";
|
|
752
|
+
|
|
753
|
+
<Avatar />
|
|
754
|
+
<Avatar src={user.thumbnail} />
|
|
755
|
+
<Avatar size="xlarge" circular />
|
|
756
|
+
<Avatar size="xlarge" interactionActive onClick={() => console.log("click")} />
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
760
|
+
| ------------------- | -------------------------------------------------- | --------- | ---------------------------------------------------------------- |
|
|
761
|
+
| `src` | `string` | — | 표시할 아바타 이미지 경로. 미지정 시 기본 아바타 사용 |
|
|
762
|
+
| `size` | `"small"` \| `"medium"` \| `"large"` \| `"xlarge"` | `"small"` | 크기. small: 24x24, medium: 32x32, large: 40x40, xlarge: 48x48 |
|
|
763
|
+
| `circular` | `boolean` | `false` | `true`면 원형(`border-radius: 50%`)으로 표시 |
|
|
764
|
+
| `interactionActive` | `boolean` | `false` | `true`면 바깥 2px 인터랙션 영역과 hover/focus/active 상태를 적용 |
|
|
765
|
+
| `onClick` | `MouseEventHandler<HTMLElement>` | — | 클릭 시 호출되는 콜백 |
|
|
766
|
+
| `customStyle` | `CSSProperties` | — | 이미지에 적용할 추가 인라인 스타일 |
|
|
767
|
+
|
|
768
|
+
유의사항:
|
|
769
|
+
|
|
770
|
+
- `alt`는 public prop으로 받지 않습니다. 내부적으로 고정된 `"User avatar"`를 사용합니다.
|
|
771
|
+
- `interactionActive={true}`일 때만 포인터 커서가 적용됩니다.
|
|
772
|
+
|
|
773
|
+
### AvatarStack
|
|
774
|
+
|
|
775
|
+
작은 아바타를 최대 5개까지 겹쳐서 보여주는 컴포넌트입니다.
|
|
776
|
+
내부적으로 `Avatar`의 기본 `small` 형태를 사용하며, 각 아바타는 내부 1px 흰색 여백을 가진 상태로 렌더링됩니다.
|
|
777
|
+
|
|
778
|
+
```tsx
|
|
779
|
+
import { AvatarStack } from "@idbrnd/design-system";
|
|
780
|
+
|
|
781
|
+
<AvatarStack srcList={[memberA.thumbnail, memberB.thumbnail, memberC.thumbnail]} />
|
|
782
|
+
|
|
783
|
+
<AvatarStack
|
|
784
|
+
srcList={[
|
|
785
|
+
memberA.thumbnail,
|
|
786
|
+
undefined,
|
|
787
|
+
memberC.thumbnail,
|
|
788
|
+
]}
|
|
789
|
+
/>
|
|
790
|
+
|
|
791
|
+
<AvatarStack srcList={visibleMembers.map((user) => user.thumbnail)} />
|
|
792
|
+
```
|
|
793
|
+
|
|
794
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
795
|
+
| --------- | --------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
|
|
796
|
+
| `srcList` | `(string \| null \| undefined)[]` | `[]` | 아바타 슬롯 목록. 각 항목이 한 명의 사용자 슬롯을 의미하며, `undefined`/`null`이면 기본 아바타를 표시 |
|
|
797
|
+
| `size` | `"small"` | `"small"` | 크기. 현재는 `small`만 지원 |
|
|
798
|
+
|
|
799
|
+
유의사항:
|
|
800
|
+
|
|
801
|
+
- `srcList`를 3개 주면 3개만 표시하고, 6개 이상 주면 앞 5개만 표시합니다.
|
|
802
|
+
- 이미지가 없는 사용자도 `srcList`에 `undefined`를 넣으면 기본 아바타로 포함할 수 있습니다.
|
|
803
|
+
|
|
737
804
|
### ContentBadge
|
|
738
805
|
|
|
739
806
|
텍스트에 variant와 size를 적용하는 인라인 배지 컴포넌트입니다.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { CSSProperties, ImgHTMLAttributes, MouseEventHandler } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Avatar 크기 옵션.
|
|
4
|
+
* @defaultValue `'small'`
|
|
5
|
+
*/
|
|
6
|
+
export type AvatarSize = "small" | "medium" | "large" | "xlarge";
|
|
7
|
+
/** `Avatar` 컴포넌트 public props. */
|
|
8
|
+
export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "style" | "width" | "height" | "draggable" | "onClick" | "tabIndex" | "className" | "alt"> {
|
|
9
|
+
/**
|
|
10
|
+
* 표시할 이미지 경로.
|
|
11
|
+
* `svg`, `png`, `jpg`, `webp` 등 브라우저가 렌더링할 수 있는 이미지 URL 문자열을 전달할 수 있다.
|
|
12
|
+
* 미지정 시 기본 아바타 이미지를 사용한다.
|
|
13
|
+
*/
|
|
14
|
+
src?: string;
|
|
15
|
+
/**
|
|
16
|
+
* 아바타 크기.
|
|
17
|
+
* - `small`: 24x24
|
|
18
|
+
* - `medium`: 32x32
|
|
19
|
+
* - `large`: 40x40
|
|
20
|
+
* - `xlarge`: 48x48
|
|
21
|
+
* @defaultValue `'small'`
|
|
22
|
+
*/
|
|
23
|
+
size?: AvatarSize;
|
|
24
|
+
/**
|
|
25
|
+
* 아바타를 원형으로 표시할지 여부.
|
|
26
|
+
* `true`면 `border-radius: 50%`가 적용된다.
|
|
27
|
+
* @defaultValue `false`
|
|
28
|
+
*/
|
|
29
|
+
circular?: boolean;
|
|
30
|
+
/** 아바타 이미지에 적용할 추가 인라인 스타일. */
|
|
31
|
+
customStyle?: CSSProperties;
|
|
32
|
+
/**
|
|
33
|
+
* 인터랙션 상태를 활성화할지 여부.
|
|
34
|
+
* `true`면 아바타 바깥에 2px 인터랙션 영역이 생기고, hover/focus/active 시각 상태가 적용된다.
|
|
35
|
+
* @defaultValue `false`
|
|
36
|
+
*/
|
|
37
|
+
interactionActive?: boolean;
|
|
38
|
+
/** 아바타 클릭 시 호출되는 콜백. */
|
|
39
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
40
|
+
}
|
|
41
|
+
/** 기본 아바타 또는 전달받은 이미지 경로를 렌더링하는 Avatar 컴포넌트. */
|
|
42
|
+
declare function Avatar({ src, size, circular, interactionActive, onClick, customStyle, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export default Avatar;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AvatarStack 크기 옵션.
|
|
3
|
+
* 현재는 `small`만 지원한다.
|
|
4
|
+
* @defaultValue `'small'`
|
|
5
|
+
*/
|
|
6
|
+
export type AvatarStackSize = "small";
|
|
7
|
+
/**
|
|
8
|
+
* AvatarStack 슬롯에 들어갈 아바타 이미지 경로.
|
|
9
|
+
* `null`, `undefined`, 빈 문자열(`""`)이면 기본 아바타를 렌더링한다.
|
|
10
|
+
*/
|
|
11
|
+
export type AvatarStackSrc = string | null | undefined;
|
|
12
|
+
/** `AvatarStack` 컴포넌트 public props. */
|
|
13
|
+
export interface AvatarStackProps {
|
|
14
|
+
/**
|
|
15
|
+
* 스택에 표시할 아바타 슬롯 목록.
|
|
16
|
+
* - 배열의 각 항목이 한 명의 사용자 슬롯을 의미한다.
|
|
17
|
+
* - 항목 값이 `null`, `undefined`, 빈 문자열(`""`)이면 해당 사용자 자리에 기본 아바타를 표시한다.
|
|
18
|
+
* - 전달한 개수만큼만 표시한다.
|
|
19
|
+
* - 5개보다 많이 전달하면 앞의 5개만 표시한다.
|
|
20
|
+
* - 이미지가 있는 사용자는 `src` 문자열을, 없는 사용자는 `undefined` 또는 빈 문자열을 전달하면 된다.
|
|
21
|
+
* @defaultValue `[]`
|
|
22
|
+
*/
|
|
23
|
+
srcList?: AvatarStackSrc[];
|
|
24
|
+
/**
|
|
25
|
+
* 아바타 스택 크기.
|
|
26
|
+
* 현재는 `small`만 지원한다.
|
|
27
|
+
* - `small`: 24x24
|
|
28
|
+
* @defaultValue `'small'`
|
|
29
|
+
*/
|
|
30
|
+
size?: AvatarStackSize;
|
|
31
|
+
}
|
|
32
|
+
/** 여러 개의 아바타를 겹쳐서 보여주는 AvatarStack 컴포넌트. */
|
|
33
|
+
declare function AvatarStack({ srcList, size, }: AvatarStackProps): import("react/jsx-runtime").JSX.Element | null;
|
|
34
|
+
export default AvatarStack;
|
package/dist/index.d.ts
CHANGED
|
@@ -32,6 +32,10 @@ export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/Pu
|
|
|
32
32
|
export type { ToastShowOptions, ToastVariant, } from "./components/Feedback/Toast/Toast";
|
|
33
33
|
export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";
|
|
34
34
|
export type { ClipProps, CustomSpinnerProps, FadeSpinnerProps, } from "./components/Spinner/Spinner";
|
|
35
|
+
export { default as Avatar } from "./components/Content/Avatar/Avatar";
|
|
36
|
+
export type { AvatarProps, AvatarSize } from "./components/Content/Avatar/Avatar";
|
|
37
|
+
export { default as AvatarStack } from "./components/Content/AvatarStack/AvatarStack";
|
|
38
|
+
export type { AvatarStackProps, AvatarStackSrc, AvatarStackSize, } from "./components/Content/AvatarStack/AvatarStack";
|
|
35
39
|
export { default as ContentBadge } from "./components/Content/ContentBadge/ContentBadge";
|
|
36
40
|
export type { ContentBadgeProps, ContentBadgeVariant, ContentBadgeSize, } from "./components/Content/ContentBadge/ContentBadge";
|
|
37
41
|
export { default as StateBadge } from "./components/Content/StateBadge/StateBadge";
|