@wishket/design-system 2.2.1 → 3.0.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 +58 -0
- package/dist/Components/Base/Layouts/Box/Box.d.ts +5 -5
- package/dist/Components/Base/Layouts/Box/Box.js +3 -2
- package/dist/Components/Base/Typography/Typography.d.ts +6 -1
- package/dist/Components/Base/Typography/Typography.js +4 -3
- package/dist/Components/Base/Typography/Typography.types.d.ts +4 -5
- package/dist/Components/DataDisplays/ImageLabel/ImageLabel.js +1 -1
- package/dist/Components/Feedbacks/Tooltip/Tooltip.js +3 -3
- package/dist/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +1 -1
- package/dist/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js +1 -1
- package/dist/Components/Inputs/RadioCard/RadioCard.parts.js +1 -1
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +2 -2
- package/dist/Components/Navigations/GNBList/GNBList.d.ts +1 -1
- package/dist/Components/Navigations/GNBList/GNBList.parts.d.ts +3 -2
- package/dist/Components/Navigations/GNBList/GNBList.parts.js +10 -10
- package/dist/Components/Navigations/GNBList/GNBList.types.d.ts +8 -3
- package/dist/Components/Navigations/Menu/Menu.types.d.ts +53 -0
- package/dist/Components/Navigations/Menu/MenuBase.d.ts +21 -0
- package/dist/Components/Navigations/Menu/MenuBase.js +3 -0
- package/dist/Components/Navigations/Menu/MenuButton.d.ts +40 -0
- package/dist/Components/Navigations/Menu/MenuButton.js +39 -0
- package/dist/Components/Navigations/Menu/MenuLink.d.ts +43 -0
- package/dist/Components/Navigations/Menu/MenuLink.js +42 -0
- package/dist/Components/Navigations/Menu/index.d.ts +3 -1
- package/dist/Components/Navigations/TextLink/TextLink.d.ts +13 -35
- package/dist/Components/Navigations/TextLink/TextLink.js +11 -34
- package/dist/Components/Utils/BackDrop/BackDrop.js +1 -1
- package/dist/Components/Utils/BottomModalContainer/BottomModalContainer.js +2 -2
- package/dist/Components/Utils/FullModalContainer/FullModalContainer.js +1 -1
- package/dist/Components/Utils/Modal/Modal.js +2 -2
- package/dist/Components/Utils/ModalContainer/ModalContainer.js +2 -2
- package/dist/Components/Wrappers/WithBadge/WithBadge.js +1 -1
- package/dist/Components/Wrappers/WithSnackBar/WithSnackBar.js +1 -1
- package/dist/cjs/Components/Base/Layouts/Box/Box.js +3 -2
- package/dist/cjs/Components/Base/Typography/Typography.js +4 -3
- package/dist/cjs/Components/DataDisplays/ImageLabel/ImageLabel.js +1 -1
- package/dist/cjs/Components/Feedbacks/Tooltip/Tooltip.js +3 -3
- package/dist/cjs/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +1 -1
- package/dist/cjs/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js +1 -1
- package/dist/cjs/Components/Inputs/RadioCard/RadioCard.parts.js +1 -1
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +2 -2
- package/dist/cjs/Components/Navigations/GNBList/GNBList.parts.js +11 -11
- package/dist/cjs/Components/Navigations/Menu/MenuBase.js +3 -0
- package/dist/cjs/Components/Navigations/Menu/MenuButton.js +39 -0
- package/dist/cjs/Components/Navigations/Menu/MenuLink.js +42 -0
- package/dist/cjs/Components/Navigations/TextLink/TextLink.js +11 -34
- package/dist/cjs/Components/Utils/BackDrop/BackDrop.js +1 -1
- package/dist/cjs/Components/Utils/BottomModalContainer/BottomModalContainer.js +3 -3
- package/dist/cjs/Components/Utils/FullModalContainer/FullModalContainer.js +1 -1
- package/dist/cjs/Components/Utils/Modal/Modal.js +2 -2
- package/dist/cjs/Components/Utils/ModalContainer/ModalContainer.js +2 -2
- package/dist/cjs/Components/Wrappers/WithBadge/WithBadge.js +1 -1
- package/dist/cjs/Components/Wrappers/WithSnackBar/WithSnackBar.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +7 -5
- package/scripts/codemods/README.md +178 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/already-has-as.input.tsx +6 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/already-has-as.output.tsx +6 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/basic.input.tsx +9 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/basic.output.tsx +10 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/existing-next-link-import.input.tsx +9 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/existing-next-link-import.output.tsx +9 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/menu-button-fallback.input.tsx +5 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/menu-button-fallback.output.tsx +5 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/unrelated-import.input.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/add-as-link/unrelated-import.output.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/basic.input.tsx +8 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/basic.output.tsx +8 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/conflict.input.tsx +5 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/conflict.output.tsx +6 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/href-only.input.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/href-only.output.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/onclick-only.input.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/onclick-only.output.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/spread-props.input.tsx +3 -0
- package/scripts/codemods/__tests__/__fixtures__/menu-split/spread-props.output.tsx +4 -0
- package/scripts/codemods/__tests__/run-fixtures.cjs +100 -0
- package/scripts/codemods/add-as-link.ts +110 -0
- package/scripts/codemods/menu-split.ts +252 -0
- package/dist/Components/Navigations/Menu/Menu.d.ts +0 -81
- package/dist/Components/Navigations/Menu/Menu.js +0 -62
- package/dist/cjs/Components/Navigations/Menu/Menu.js +0 -2
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{MenuBase as t}from"./MenuBase.js";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}
|
|
2
|
+
/**
|
|
3
|
+
* 네비게이션에서 사용되는 링크형 메뉴 항목.
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
* - 기본은 `<a>` 태그이며, `as` prop으로 Next.js의 Link 등 임의의 컴포넌트를 주입할 수 있습니다.
|
|
7
|
+
* - `href`가 반드시 필요합니다. 클릭 핸들러만 필요한 경우 `MenuButton`을 사용하세요.
|
|
8
|
+
*
|
|
9
|
+
* @param {Object} props
|
|
10
|
+
* @param {string} props.href - 메뉴 링크 주소 (필수)
|
|
11
|
+
* @param {ElementType} [props.as='a'] - anchor 자리에 렌더할 컴포넌트 (예: next/link)
|
|
12
|
+
* @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입
|
|
13
|
+
* @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
|
|
14
|
+
* @param {string} props.name - 메뉴에 표시될 텍스트
|
|
15
|
+
* @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
|
|
16
|
+
* @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
|
|
17
|
+
* @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
|
|
18
|
+
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
|
|
19
|
+
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
|
|
20
|
+
* @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
|
|
21
|
+
* @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
|
|
22
|
+
* @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // 기본 사용 (일반 <a>)
|
|
26
|
+
* <MenuLink href="/projects" name="프로젝트" />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // Next.js Link 주입
|
|
30
|
+
* import Link from 'next/link';
|
|
31
|
+
* <MenuLink as={Link} href="/projects" name="프로젝트" />
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // 외부 링크
|
|
35
|
+
* <MenuLink
|
|
36
|
+
* href="https://example.com"
|
|
37
|
+
* name="외부 사이트"
|
|
38
|
+
* target="_blank"
|
|
39
|
+
* rel="noopener noreferrer"
|
|
40
|
+
* />
|
|
41
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const i=n=>{var{type:i,variant:c,name:a,badgeCount:l,isSelected:u,leadingIcon:m,iconButtonName:f,onOptionClick:s,items:p,selectedItem:b,onItemClick:O,href:y,as:d="a",children:g}=n,j=o(n,["type","variant","name","badgeCount","isSelected","leadingIcon","iconButtonName","onOptionClick","items","selectedItem","onItemClick","href","as","children"]);/*#__PURE__*/
|
|
42
|
+
return e(t,{type:i,variant:c,name:a,badgeCount:l,isSelected:u,leadingIcon:m,iconButtonName:f,onOptionClick:s,items:p,selectedItem:b,onItemClick:O,as:d,wrapperProps:r({href:y},j)})};export{i as MenuLink};
|
|
@@ -1,66 +1,44 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ComponentProps } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, ElementType } from 'react';
|
|
3
2
|
import { TextWithIconsProps } from '../../Base/TextWithIcons/TextWithIcons';
|
|
4
|
-
interface TextLinkProps extends
|
|
3
|
+
interface TextLinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'>, TextWithIconsProps {
|
|
4
|
+
href: string;
|
|
5
|
+
as?: ElementType;
|
|
5
6
|
}
|
|
6
7
|
/**
|
|
7
8
|
* 텍스트 기반의 링크 컴포넌트입니다.
|
|
8
9
|
*
|
|
9
10
|
* @description
|
|
10
|
-
* TextButton과 동일한 스타일을 가지지만 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
11
|
-
* Next.js의 Link
|
|
11
|
+
* TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
12
|
+
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수 있습니다.
|
|
12
13
|
*
|
|
13
14
|
* @component
|
|
14
15
|
* @param {Object} props - TextLink 컴포넌트의 props
|
|
15
16
|
* @param {string} props.href - 링크 대상 URL (필수)
|
|
16
17
|
* @param {string} props.text - 표시할 텍스트 (필수)
|
|
18
|
+
* @param {ElementType} [props.as='a'] - 렌더링할 요소/컴포넌트
|
|
17
19
|
* @param {SystemIconName} [props.leadingIcon] - 텍스트 앞에 표시할 아이콘
|
|
18
20
|
* @param {SystemIconName} [props.trailingIcon] - 텍스트 뒤에 표시할 아이콘
|
|
19
21
|
* @param {boolean} [props.isTextSmall=false] - 작은 텍스트 크기 사용 여부
|
|
20
22
|
* @param {boolean} [props.isGray=false] - 텍스트 색상을 회색으로 사용 여부
|
|
21
23
|
* @param {boolean} [props.isUnderline=false] - 텍스트에 밑줄 스타일 적용 여부
|
|
22
|
-
* @param {ComponentProps<typeof Link>} props - Next.js Link 컴포넌트의 모든 props 지원
|
|
23
24
|
*
|
|
24
25
|
* @example
|
|
25
|
-
* // 기본 사용법
|
|
26
|
+
* // 기본 사용법 (일반 <a>)
|
|
26
27
|
* <TextLink href="/about" text="소개 페이지로 이동" />
|
|
27
28
|
*
|
|
28
29
|
* @example
|
|
29
|
-
* //
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* text="자세히 보기"
|
|
33
|
-
* trailingIcon="medium_arrow_right"
|
|
34
|
-
* />
|
|
30
|
+
* // Next.js Link와 함께 사용
|
|
31
|
+
* import Link from 'next/link';
|
|
32
|
+
* <TextLink as={Link} href="/about" text="소개" />
|
|
35
33
|
*
|
|
36
34
|
* @example
|
|
37
|
-
* // 외부
|
|
35
|
+
* // 외부 링크
|
|
38
36
|
* <TextLink
|
|
39
37
|
* href="https://example.com"
|
|
40
38
|
* text="외부 사이트 방문"
|
|
41
39
|
* target="_blank"
|
|
42
40
|
* rel="noopener noreferrer"
|
|
43
41
|
* />
|
|
44
|
-
*
|
|
45
|
-
* @example
|
|
46
|
-
* // 작은 텍스트 크기로 사용
|
|
47
|
-
* <TextLink
|
|
48
|
-
* href="/help"
|
|
49
|
-
* text="도움말"
|
|
50
|
-
* isTextSmall
|
|
51
|
-
* leadingIcon="small_help"
|
|
52
|
-
* />
|
|
53
|
-
*
|
|
54
|
-
* @example
|
|
55
|
-
* // 프로그래매틱 네비게이션과 함께
|
|
56
|
-
* <TextLink
|
|
57
|
-
* href="/dashboard"
|
|
58
|
-
* text="대시보드"
|
|
59
|
-
* onClick={(e) => {
|
|
60
|
-
* // 추가 로직 실행 가능
|
|
61
|
-
* console.log('대시보드로 이동');
|
|
62
|
-
* }}
|
|
63
|
-
* />
|
|
64
42
|
*/
|
|
65
|
-
declare const TextLink: ({ href, text, leadingIcon, trailingIcon, isTextSmall, isGray, isUnderline, className, ...rest }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
declare const TextLink: ({ as: Component, href, text, leadingIcon, trailingIcon, isTextSmall, isGray, isUnderline, className, ...rest }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
66
44
|
export { TextLink };
|
|
@@ -1,61 +1,38 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{TextWithIcons as r}from"../../Base/TextWithIcons/TextWithIcons.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function o(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}
|
|
2
2
|
/**
|
|
3
3
|
* 텍스트 기반의 링크 컴포넌트입니다.
|
|
4
4
|
*
|
|
5
5
|
* @description
|
|
6
|
-
* TextButton과 동일한 스타일을 가지지만 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
7
|
-
* Next.js의 Link
|
|
6
|
+
* TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
7
|
+
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수 있습니다.
|
|
8
8
|
*
|
|
9
9
|
* @component
|
|
10
10
|
* @param {Object} props - TextLink 컴포넌트의 props
|
|
11
11
|
* @param {string} props.href - 링크 대상 URL (필수)
|
|
12
12
|
* @param {string} props.text - 표시할 텍스트 (필수)
|
|
13
|
+
* @param {ElementType} [props.as='a'] - 렌더링할 요소/컴포넌트
|
|
13
14
|
* @param {SystemIconName} [props.leadingIcon] - 텍스트 앞에 표시할 아이콘
|
|
14
15
|
* @param {SystemIconName} [props.trailingIcon] - 텍스트 뒤에 표시할 아이콘
|
|
15
16
|
* @param {boolean} [props.isTextSmall=false] - 작은 텍스트 크기 사용 여부
|
|
16
17
|
* @param {boolean} [props.isGray=false] - 텍스트 색상을 회색으로 사용 여부
|
|
17
18
|
* @param {boolean} [props.isUnderline=false] - 텍스트에 밑줄 스타일 적용 여부
|
|
18
|
-
* @param {ComponentProps<typeof Link>} props - Next.js Link 컴포넌트의 모든 props 지원
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
|
-
* // 기본 사용법
|
|
21
|
+
* // 기본 사용법 (일반 <a>)
|
|
22
22
|
* <TextLink href="/about" text="소개 페이지로 이동" />
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
|
-
* //
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* text="자세히 보기"
|
|
29
|
-
* trailingIcon="medium_arrow_right"
|
|
30
|
-
* />
|
|
25
|
+
* // Next.js Link와 함께 사용
|
|
26
|
+
* import Link from 'next/link';
|
|
27
|
+
* <TextLink as={Link} href="/about" text="소개" />
|
|
31
28
|
*
|
|
32
29
|
* @example
|
|
33
|
-
* // 외부
|
|
30
|
+
* // 외부 링크
|
|
34
31
|
* <TextLink
|
|
35
32
|
* href="https://example.com"
|
|
36
33
|
* text="외부 사이트 방문"
|
|
37
34
|
* target="_blank"
|
|
38
35
|
* rel="noopener noreferrer"
|
|
39
36
|
* />
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
* // 작은 텍스트 크기로 사용
|
|
43
|
-
* <TextLink
|
|
44
|
-
* href="/help"
|
|
45
|
-
* text="도움말"
|
|
46
|
-
* isTextSmall
|
|
47
|
-
* leadingIcon="small_help"
|
|
48
|
-
* />
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* // 프로그래매틱 네비게이션과 함께
|
|
52
|
-
* <TextLink
|
|
53
|
-
* href="/dashboard"
|
|
54
|
-
* text="대시보드"
|
|
55
|
-
* onClick={(e) => {
|
|
56
|
-
* // 추가 로직 실행 가능
|
|
57
|
-
* console.log('대시보드로 이동');
|
|
58
|
-
* }}
|
|
59
|
-
* />
|
|
60
|
-
*/(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const l=l=>{var{href:a,text:s,leadingIcon:f,trailingIcon:p,isTextSmall:u=!1,isGray:O=!1,isUnderline:b=!1,className:y}=l,m=c(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
|
|
61
|
-
return e(t,o(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:a,className:r("flex min-h-6 w-fit items-center justify-center",u?"gap-x-0.5":"gap-x-1",y)},m),{children:/*#__PURE__*/e(n,{text:s,leadingIcon:f,trailingIcon:p,isTextSmall:u,isUnderline:b,isGray:O})}))};export{l as TextLink};
|
|
37
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const c=c=>{var{as:l="a",href:a,text:s,leadingIcon:f,trailingIcon:u,isTextSmall:p=!1,isGray:O=!1,isUnderline:b=!1,className:y}=c,m=o(c,["as","href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
|
|
38
|
+
return e(l,i(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){n(e,t,r[t])}))}return e}({href:a,className:t("flex min-h-6 w-fit items-center justify-center",p?"gap-x-0.5":"gap-x-1",y)},m),{children:/*#__PURE__*/e(r,{text:s,leadingIcon:f,trailingIcon:u,isTextSmall:p,isUnderline:b,isGray:O})}))};export{c as TextLink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{twMerge as o}from"tailwind-merge";import{usePreventScroll as e}from"@wishket/yogokit";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{twMerge as o}from"tailwind-merge";import{usePreventScroll as e}from"@wishket/yogokit";import"react";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const i=({isBlack:i,preventScroll:s,onClick:a})=>(e(s),/*#__PURE__*/t(r,{"data-testid":"design-system--backdrop",onClick:a,className:o("fixed top-0 left-0 z-30 h-dvh w-dvw",i?"bg-black/50":"bg-transparent")}));export{i as BackDrop};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{useBottomModalContainer as s}from"./useBottomModalContainer.js";const a=({children:a,onClose:l,isFixedHeight:
|
|
2
|
-
return e(r,{ref:m,style:{transform:`translateY(${d}px)`},className:o("bg-w-white z-30 w-full rounded-t-3xl",
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"react";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{useBottomModalContainer as s}from"./useBottomModalContainer.js";const a=({children:a,onClose:l,isFixedHeight:i=!0,className:n})=>{const{containerRef:m,currentTranslate:d}=s({onClose:l});/*#__PURE__*/
|
|
2
|
+
return e(r,{ref:m,style:{transform:`translateY(${d}px)`},className:o("bg-w-white z-30 w-full rounded-t-3xl",i?"h-[60dvh]":"h-fit",n),"data-testid":"design-system--bottom-modal-container",children:[
|
|
3
3
|
/*#__PURE__*/t(r,{className:"flex items-center justify-center pt-2 pb-5","data-testid":"design-system--bottom-modal-container-header",id:"bottom-modal-header",children:/*#__PURE__*/t(r,{className:"bg-w-gray-200 h-1 w-8 rounded-full"})}),a]})};export{a as BottomModalContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{twMerge as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import"react";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const r=({children:r,className:a})=>/*#__PURE__*/e(o,{"data-testid":"design-system--full-modal-container",className:t("bg-w-white h-dvh w-dvw overflow-auto",a),children:r});export{r as FullModalContainer};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as o,jsxs as e}from"react/jsx-runtime";import{twMerge as
|
|
1
|
+
import{jsx as o,jsxs as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{BackDropLiftContainer as l}from"../BackDropLiftContainer/BackDropLiftContainer.js";import{BottomModalContainer as r}from"../BottomModalContainer/BottomModalContainer.js";import{FullModalContainer as i}from"../FullModalContainer/FullModalContainer.js";import{ModalContainer as a}from"../ModalContainer/ModalContainer.js";import{Portal as n}from"../Portal/Portal.js";import"react";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";
|
|
2
2
|
/**
|
|
3
3
|
* 모달 창을 표시하는 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -33,4 +33,4 @@ import{jsx as o,jsxs as e}from"react/jsx-runtime";import{twMerge as l}from"tailw
|
|
|
33
33
|
* <div>바텀 시트 내용</div>
|
|
34
34
|
* </Modal>
|
|
35
35
|
*/const d=({isOpen:d,rootId:m,variant:c="default",size:u="md",overflow:f="auto",isBackgroundBlack:p=!0,isFixedHeight:B,isPreventScroll:C=!0,className:h,onClose:j,needCleanup:x=!0,children:g})=>{const F="bottom"===c,k="full"===c;/*#__PURE__*/
|
|
36
|
-
return o(n,{rootId:m,needCleanup:x&&!m,children:/*#__PURE__*/e(
|
|
36
|
+
return o(n,{rootId:m,needCleanup:x&&!m,children:/*#__PURE__*/e(l,{isOpen:d,onClose:j,testId:"design-system--modal",isBackgroundBlack:p,isPreventScroll:C,isBottomSheet:F,isFullSize:"full"===u,children:["default"===c&&/*#__PURE__*/o(s,{"data-testid":"design-system--modal-container--box",className:t("full"===u&&"w-full px-5",h),children:/*#__PURE__*/o(a,{size:u,overflow:f,children:g})}),k&&/*#__PURE__*/o(i,{className:h,children:g}),F&&j&&/*#__PURE__*/o(r,{onClose:j,isFixedHeight:B,className:h,children:g})]})})};export{d as Modal};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const t=({size:t="md",overflow:r="auto",children:
|
|
2
|
-
"flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[t],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[r]),children:
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"react";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const t=({size:t="md",overflow:r="auto",children:i})=>/*#__PURE__*/e(l,{"data-testid":"design-system--modal-container",className:o("bg-w-white shadow-modal h-fit max-w-[calc(100vw-40px)] rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
|
|
2
|
+
"flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[t],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[r]),children:i});export{t as ModalContainer};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as a,jsx as t}from"react/jsx-runtime";import{twMerge as s}from"tailwind-merge";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{CountBadge as e}from"../../DataDisplays/CountBadge/CountBadge.js";import"
|
|
1
|
+
import{jsxs as a,jsx as t}from"react/jsx-runtime";import{twMerge as s}from"tailwind-merge";import"react";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{CountBadge as e}from"../../DataDisplays/CountBadge/CountBadge.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{NewBadge as o}from"../../DataDisplays/NewBadge/NewBadge.js";import"../../DataDisplays/Accordion/Accordion.js";
|
|
2
2
|
/**
|
|
3
3
|
* 자식 요소의 우측 상단에 뱃지를 표시하는 래퍼 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,jsx as a}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import{Box as e}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"
|
|
1
|
+
import{jsxs as t,jsx as a}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"react";import{Box as e}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{SnackBar as o}from"../../Feedbacks/SnackBar/SnackBar.js";import"../../Inputs/Button/Button.js";import"@wishket/yogokit";import"react-dom";import"../../Feedbacks/Tooltip/Tooltip.js";import"../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js";
|
|
2
2
|
/**
|
|
3
3
|
* 스낵바를 포함하는 래퍼 컴포넌트입니다.
|
|
4
4
|
* 자식 컴포넌트 상단에 알림 메시지를 표시할 수 있습니다.
|
|
@@ -4,5 +4,6 @@
|
|
|
4
4
|
* @param {ReactNode} props.children - 박스 내부에 렌더링할 컨텐츠
|
|
5
5
|
* @param {ElementType} [props.as='div'] - 렌더링할 HTML 요소
|
|
6
6
|
* @param {string} [props.className] - 추가적인 CSS 클래스
|
|
7
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const c=/*#__PURE__*/require("react").forwardRef(((c
|
|
8
|
-
|
|
7
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const c=/*#__PURE__*/require("react").forwardRef(((c,// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
|
+
i)=>{var{as:l,className:u,children:a}=c,s=o(c,["as","className","children"]);const b=null!=l?l:"div";/*#__PURE__*/
|
|
9
|
+
return e.jsx(b,n(function(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(r){t(e,r,n[r])}))}return e}({ref:i,className:r.twMerge("box-border",u)},s),{children:a}))}));c.displayName="Box",exports.Box=c;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");function n(e,t,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("react");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const c=[{name:"title48",class:"typo-title48"},{name:"title32",class:"typo-title32"},{name:"title28",class:"typo-title28"},{name:"title24",class:"typo-title24"},{name:"subTitle20",class:"typo-subTitle20"},{name:"subTitle18",class:"typo-subTitle18"},{name:"contents18",class:"typo-contents18"},{name:"contents16",class:"typo-contents16"},{name:"body16",class:"typo-body16"},{name:"body14",class:"typo-body14"},{name:"body13",class:"typo-body13"},{name:"caption12",class:"typo-caption12"},{name:"caption11",class:"typo-caption11"}],s=/*#__PURE__*/r.forwardRef(((r,s)=>{var l,{children:i,variant:p,className:y,as:u}=r,b=a(r,["children","variant","className","as"]);const f=null!=u?u:"span",O=(null===(l=c.find((e=>e.name===p)))||void 0===l?void 0:l.class)||"";/*#__PURE__*/
|
|
2
|
+
return e.jsx(f,o(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({ref:s,className:t.twMerge("tracking-default",O,y)},b),{children:i}))}));
|
|
2
3
|
/**
|
|
3
4
|
* Typography
|
|
4
5
|
* @param {Object} props
|
|
@@ -6,5 +7,5 @@
|
|
|
6
7
|
* @param {string} props.variant - 텍스트 스타일 variant ('title48' | 'title32' | 'title24' | 'subTitle20' | 'subTitle18' | 'contents18' | 'contents16' | 'body16' | 'body14' | 'body13' | 'caption12' | 'caption11')
|
|
7
8
|
* @param {string} [props.className] - 추가적인 CSS 클래스
|
|
8
9
|
* @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
* @param {Ref} [props.ref] - 렌더된 요소로 forward되는 ref. as에 따라 추론
|
|
11
|
+
*/exports.Typography=s;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge")
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("react");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var t=require("./parts/NewCircle.js"),a=require("./parts/New.js"),i=require("./parts/Beta.js"),u=require("./parts/Ai.js");exports.ImageLabel=({type:l})=>{const c=()=>{switch(l){case"new_circle":/*#__PURE__*/
|
|
2
2
|
return e.jsx(t.NewCircle,{});case"new":/*#__PURE__*/
|
|
3
3
|
return e.jsx(a.New,{});case"beta":/*#__PURE__*/
|
|
4
4
|
return e.jsx(i.Beta,{});case"ai":/*#__PURE__*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),i=require("tailwind-merge")
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),i=require("tailwind-merge");require("react");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("./PlainTooltip/PlainTooltip.js"),l=require("./RichTooltip/RichTooltip.js");
|
|
2
2
|
/**
|
|
3
3
|
* 툴팁의 루트 컴포넌트입니다.
|
|
4
4
|
* CSS 기반 hover와 focus로 동작합니다.
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* <Tooltip.Plain variant="up" text="간단한 툴팁" />
|
|
15
15
|
* </Tooltip>
|
|
16
16
|
*/
|
|
17
|
-
const
|
|
17
|
+
const s=({children:r,className:l})=>/*#__PURE__*/e.jsx(t.Box,{className:i.twMerge("group relative inline-block h-fit w-fit",l),"data-testid":"design-system-tooltip",children:r});
|
|
18
18
|
/**
|
|
19
19
|
* 툴팁 트리거 컴포넌트입니다.
|
|
20
20
|
* 데스크톱에서는 CSS hover로, 모바일에서는 터치(focus)로 툴팁을 표시합니다.
|
|
@@ -23,4 +23,4 @@ const o=({children:l,className:s})=>/*#__PURE__*/e.jsx(t.Box,{className:i.twMerg
|
|
|
23
23
|
* <Tooltip.Trigger>
|
|
24
24
|
* <SystemIcon name="medium_information" />
|
|
25
25
|
* </Tooltip.Trigger>
|
|
26
|
-
*/
|
|
26
|
+
*/s.Trigger=({children:i})=>/*#__PURE__*/e.jsx(t.Box,{"data-testid":"design-system-tooltip--trigger",className:"h-fit w-fit focus:outline-hidden",tabIndex:0,children:i}),s.Plain=r.PlainTooltip,s.Rich=l.RichTooltip,exports.Tooltip=s;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js"),require("react");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var o=require("../../DataDisplays/ProductIcon/ProductIcon.js");require("../../DataDisplays/Accordion/Accordion.js");var i=require("../Checkbox/Checkbox.js");function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}exports.CheckboxCardContainer=t=>{var{children:o,isWide:i,checked:n,isError:l,disabled:u,className:d}=t,p=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
|
|
2
2
|
return e.jsx("div",c(s({className:r.twMerge("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 pt-4 pb-6",!u&&!l&&"group-focus-within:border-primary-500",(()=>{const e=n&&!l;return u?r.twMerge("cursor-not-allowed",e?"border-primary-100":"border-w-gray-200"):l?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary"})(),u?n&&!l?"bg-primary-10":"bg-w-gray-10":n?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},p),{children:o}))},exports.CheckboxCardIcon=({iconName:t,disabled:i,checked:n,isError:s})=>{const c=s||!n;/*#__PURE__*/
|
|
3
3
|
return e.jsx("div",{className:r.twMerge("flex size-[60px] shrink-0 items-center justify-center",i&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e.jsx(o.ProductIcon,{name:t,disabled:c})})},exports.StyledCheckbox=o=>{var{isWide:n,className:c}=o,l=a(o,["isWide","className"]);const u=!n;/*#__PURE__*/
|
|
4
4
|
return e.jsx(t.Box,{className:r.twJoin(u&&"absolute top-[17px] left-[17px]"),children:/*#__PURE__*/e.jsx(i.Checkbox,s({className:r.twMerge(u&&"group-hover:border-primary-500",c)},l))})},exports.TitleContainer=({isWide:t,children:o})=>/*#__PURE__*/e.jsx("div",{className:r.twMerge("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:o});
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js")
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js"),require("react"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var t=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var i=require("../IconButton/IconButton.js"),n=require("../List/List.js"),o=require("../../../hooks/useDropdown.js");exports.IconButtonDropdown=({icon:a,items:r,selectedItem:l,onItemClick:c,size:d="sm",align:u="left",disabled:m=!1})=>{const{isListOpen:y,ref:I,focusedIndex:j,handleItemClick:x,toggleListOpen:w,handleKeyDown:p}=o.useDropdown({items:r,onItemClick:c});/*#__PURE__*/
|
|
2
2
|
return e.jsxs("div",{"data-testid":"design-system-icon-button-dropdown",className:"relative w-fit outline-hidden",ref:I,onKeyDown:p,tabIndex:0,children:[
|
|
3
3
|
/*#__PURE__*/e.jsx(i.IconButton,{onClick:w,size:d,className:"outline-hidden",disabled:m,children:/*#__PURE__*/e.jsx(t.SystemIcon,{name:a,className:s.twJoin(m&&"text-w-gray-300")})}),y&&/*#__PURE__*/e.jsx("div",{"data-testid":"design-system-icon-button-dropdown--list-container",className:s.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all","right"===u?"right-0":"left-0"),children:/*#__PURE__*/e.jsx(n.List.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:r.map(((s,t)=>/*#__PURE__*/e.jsx(n.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>x(s),selected:s.key===(null==l?void 0:l.key),isFocused:t===j},s.key)))})})]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js"),require("react"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var t=require("../../DataDisplays/ProductIcon/ProductIcon.js");require("../../DataDisplays/Accordion/Accordion.js");var i=require("../Radio/Radio.js");function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){o(e,r,t[r])}))}return e}function n(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,i,o=function(e,r){if(null==e)return{};var t,i,o={},s=Object.keys(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}exports.RadioCardContainer=t=>{var{children:i,isWide:o,checked:c,isError:l,disabled:d,className:u}=t,p=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
|
|
2
2
|
return e.jsx("div",n(s({className:r.twMerge("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",o?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 py-6",!d&&!l&&"group-focus-within:border-primary-500",d&&c&&!l?"cursor-not-allowed border-primary-100":d?"cursor-not-allowed border-w-gray-200":l?"border-w-red-500":c?"border-primary-500":"border-w-gray-200 group-hover:border-primary",d?c&&!l?"bg-primary-10":"bg-w-gray-10":c?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",u)},p),{children:i}))},exports.RadioCardIcon=({iconName:i,disabled:o,checked:s,isError:n})=>{const a=n||!s;/*#__PURE__*/
|
|
3
3
|
return e.jsx("div",{className:r.twMerge("flex size-[60px] shrink-0 items-center justify-center",o&&"opacity-30"),"data-testid":"design-system-radioCard--icon",children:/*#__PURE__*/e.jsx(t.ProductIcon,{name:i,disabled:a})})},exports.StyledRadio=t=>{var{isWide:o,disabled:n,isError:c,checked:l}=t,d=a(t,["isWide","disabled","isError","checked"]);const u=!o,p=c&&l&&n;/*#__PURE__*/
|
|
4
4
|
return e.jsx(i.Radio,s({className:r.twMerge(u&&"absolute top-[17px] left-[17px]"),disabled:n||p,checked:!p&&l,isError:c},d))},exports.TitleContainer=({isWide:t,children:i})=>/*#__PURE__*/e.jsx("div",{className:r.twJoin("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:i});
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime");require("tailwind-merge");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("../List/List.js"),l=require("../SupportTextContainer/SupportTextContainer.js"),
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime");require("tailwind-merge"),require("react");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("../List/List.js"),l=require("../SupportTextContainer/SupportTextContainer.js"),t=require("../../../hooks/useDropdown.js"),i=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:o,items:a,onItemClick:n,placeholder:d,disabled:u,isError:c,errorMessage:p,supportMessage:x,className:m})=>{const{isListOpen:g,focusedIndex:j,ref:v,handleItemClick:I,toggleListOpen:w,handleKeyDown:h}=t.useDropdown({items:a,onItemClick:n,disabled:u}),k=!!x||!!p;/*#__PURE__*/
|
|
2
2
|
return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:v,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:h,tabIndex:0,children:[
|
|
3
|
-
/*#__PURE__*/e.jsx(
|
|
3
|
+
/*#__PURE__*/e.jsx(i.SelectBox,{placeholder:d,value:null==o?void 0:o.value,leadingIcon:null==o?void 0:o.leadingIcon,disabled:u,isListOpen:g,onClick:w,error:c,className:m}),k&&/*#__PURE__*/e.jsx(l.SupportTextContainer,{errorMessage:p,supportMessage:x}),g&&/*#__PURE__*/e.jsx(s.Box,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/e.jsx(r.List.Root,{children:a.map(((s,l)=>/*#__PURE__*/e.jsx(r.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>I(s),selected:s.key===(null==o?void 0:o.key),isFocused:l===j},s.key)))})})]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),a=require("tailwind-merge"),t=require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),a=require("tailwind-merge"),t=require("../../DataDisplays/Avatar/Avatar.js"),l=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var i=require("../../DataDisplays/NewBadge/NewBadge.js"),n=require("../../DataDisplays/Divider/Divider.js");function o(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function c(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{},t=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),t.forEach((function(r){o(e,r,a[r])}))}return e}function u(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r.push.apply(r,a)}return r}(Object(r)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(r,a))})),e}function p(e,r){if(null==e)return{};var a,t,l=function(e,r){if(null==e)return{};var a,t,l={},s=Object.keys(e);for(t=0;t<s.length;t++)a=s[t],r.indexOf(a)>=0||(l[a]=e[a]);return l}
|
|
2
2
|
/**
|
|
3
3
|
* GNB 리스트의 루트 컴포넌트
|
|
4
4
|
*
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
* <Item href="/logout">로그아웃</Item>
|
|
32
32
|
* </SubList>
|
|
33
33
|
* </Root>
|
|
34
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(t=0;t<s.length;t++)a=s[t],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}require("../../DataDisplays/Accordion/Accordion.js");exports.Item=r=>{var{hasNew:
|
|
35
|
-
return e.jsx(
|
|
36
|
-
/*#__PURE__*/e.jsx(
|
|
37
|
-
/*#__PURE__*/e.jsx(
|
|
38
|
-
return e.jsx(
|
|
39
|
-
/*#__PURE__*/e.jsxs(
|
|
40
|
-
/*#__PURE__*/e.jsx(
|
|
41
|
-
/*#__PURE__*/e.jsxs(
|
|
42
|
-
/*#__PURE__*/e.jsx(
|
|
43
|
-
/*#__PURE__*/e.jsx(
|
|
34
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(t=0;t<s.length;t++)a=s[t],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}require("../../DataDisplays/Accordion/Accordion.js");exports.Item=r=>{var{hasNew:t=!1,children:n,className:o,textClassName:y,href:x,as:f="a"}=r,d=p(r,["hasNew","children","className","textClassName","href","as"]);/*#__PURE__*/
|
|
35
|
+
return e.jsx(s.Box,{as:"li",children:/*#__PURE__*/e.jsxs(f,u(c({href:x,className:a.twMerge("hover:bg-primary-10 flex w-full cursor-pointer gap-1 px-6 py-2",o)},d),{children:[
|
|
36
|
+
/*#__PURE__*/e.jsx(l.Typography,{variant:"body14",className:y,children:n}),t&&/*#__PURE__*/e.jsx(i.NewBadge,{className:"mt-1","aria-label":"새 소식"})]}))})},exports.List=({children:r})=>/*#__PURE__*/e.jsx(s.Box,{as:"ul","aria-label":"메인 메뉴",className:"text-w-gray-900 w-full",children:r}),exports.Root=({withUserInfo:t=!1,children:l,className:i})=>{const o=r.Children.map(l,((a,t)=>0===t?a:/*#__PURE__*/e.jsxs(r.Fragment,{children:[
|
|
37
|
+
/*#__PURE__*/e.jsx(n.Divider,{className:"my-2"}),a]}))),c=t?"w-[280px] pb-3 pt-5":"h-auto w-[200px] overflow-hidden py-3";/*#__PURE__*/
|
|
38
|
+
return e.jsx(s.Box,{as:"nav","aria-label":"네비게이션 메뉴",className:a.twMerge("absolute flex flex-col rounded-xl bg-w-white shadow-graymedium",c,i),children:o})},exports.SubList=({children:r})=>/*#__PURE__*/e.jsx(s.Box,{as:"ul","aria-label":"서브 메뉴",className:"text-w-gray-600 w-full",children:r}),exports.UserInfo=({imgUrl:r,username:a,email:i,children:n,onClick:o})=>/*#__PURE__*/e.jsxs(s.Box,{role:"region","aria-label":"사용자 정보",className:"flex w-full flex-col gap-4 px-6 pb-4",children:[
|
|
39
|
+
/*#__PURE__*/e.jsxs(s.Box,{className:"flex w-full items-center gap-4",children:[
|
|
40
|
+
/*#__PURE__*/e.jsx(t.Avatar,{size:"lg",isEditable:!0,imgUrl:r,onClick:o}),
|
|
41
|
+
/*#__PURE__*/e.jsxs(s.Box,{className:"flex w-full flex-col gap-0.5",children:[
|
|
42
|
+
/*#__PURE__*/e.jsx(l.Typography,{variant:"body16",className:"text-w-gray-900 font-medium",children:a}),
|
|
43
|
+
/*#__PURE__*/e.jsx(l.Typography,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:i})]})]}),n&&/*#__PURE__*/e.jsx(s.Box,{className:"flex w-full flex-col gap-2",children:n})]});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var r=require("../../DataDisplays/CountBadge/CountBadge.js"),n=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js"),require("@wishket/yogokit"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LabelInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"),require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js");var o=require("../../Inputs/IconButton/IconButton.js");require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js");var i=require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js");function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}require("../../Inputs/FilterChip/FilterChip.js");const p=(e,r,n)=>{const s="sub"===e?"pl-12":"",o={white:t.twJoin("hover:bg-w-gray-50",n&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("hover:bg-w-gray-100",n&&"bg-w-gray-100 hover:bg-w-gray-100")};return t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",s,o[r])},c=(e,t)=>"white"!==e?"white_gray":t?"primary":"gray";exports.MenuBase=({type:l="main",variant:y="white",name:m,isSelected:j=!1,badgeCount:d,leadingIcon:g,iconButtonName:I,onOptionClick:b,items:w,selectedItem:h,onItemClick:q,as:x,wrapperProps:O})=>{const f=!!(I&&w&&q&&h),C=!!I&&!!b;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(x,u(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}({"data-testid":"design-system-menu",className:p(l,y,j)},O),{children:[g&&/*#__PURE__*/e.jsx(s.SystemIcon,{testId:"design-system-menu-leading-icon",name:g,className:t.twJoin("white"===y&&j&&"text-primary")}),
|
|
3
|
+
/*#__PURE__*/e.jsx(n.Typography,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:m}),d&&/*#__PURE__*/e.jsx(r.CountBadge,{variant:c(y,j),text:d,className:"relative",showZero:!0}),f&&/*#__PURE__*/e.jsx(i.IconButtonDropdown,{size:"sm",icon:I,items:w,selectedItem:h,onItemClick:q}),C&&/*#__PURE__*/e.jsx(o.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),b()},children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:I})})]}))};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("./MenuBase.js");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}
|
|
2
|
+
/**
|
|
3
|
+
* 네비게이션에서 사용되는 버튼형 메뉴 항목.
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
* - 항상 `<button>`으로 렌더링됩니다.
|
|
7
|
+
* - `onClick`이 반드시 필요합니다. 페이지 이동을 위한 anchor가 필요한 경우 `MenuLink`를 사용하세요.
|
|
8
|
+
*
|
|
9
|
+
* @param {Object} props
|
|
10
|
+
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수 (필수)
|
|
11
|
+
* @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 (HTML `<button>`의 native `type`과는 무관. native `type`을 지정하려면 `htmlType` prop 사용)
|
|
12
|
+
* @param {'button' | 'submit' | 'reset'} [props.htmlType] - `<button>`의 native `type` 속성
|
|
13
|
+
* @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
|
|
14
|
+
* @param {string} props.name - 메뉴에 표시될 텍스트
|
|
15
|
+
* @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
|
|
16
|
+
* @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
|
|
17
|
+
* @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
|
|
18
|
+
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
|
|
19
|
+
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
|
|
20
|
+
* @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
|
|
21
|
+
* @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
|
|
22
|
+
* @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // 기본 사용
|
|
26
|
+
* <MenuButton name="설정" onClick={() => openModal()} />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // IconButtonDropdown과 함께
|
|
30
|
+
* <MenuButton
|
|
31
|
+
* name="옵션"
|
|
32
|
+
* onClick={() => {}}
|
|
33
|
+
* iconButtonName="small_more_options"
|
|
34
|
+
* items={items}
|
|
35
|
+
* selectedItem={selectedItem}
|
|
36
|
+
* onItemClick={onItemClick}
|
|
37
|
+
* />
|
|
38
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}exports.MenuButton=n=>{var{type:i,variant:c,name:l,badgeCount:a,isSelected:u,leadingIcon:s,iconButtonName:m,onOptionClick:p,items:b,selectedItem:y,onItemClick:f,onClick:O,htmlType:d,children:g}=n,j=o(n,["type","variant","name","badgeCount","isSelected","leadingIcon","iconButtonName","onOptionClick","items","selectedItem","onItemClick","onClick","htmlType","children"]);/*#__PURE__*/
|
|
39
|
+
return e.jsx(t.MenuBase,{type:i,variant:c,name:l,badgeCount:a,isSelected:u,leadingIcon:s,iconButtonName:m,onOptionClick:p,items:b,selectedItem:y,onItemClick:f,as:"button",wrapperProps:r({onClick:O,type:d},j)})};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("./MenuBase.js");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}
|
|
2
|
+
/**
|
|
3
|
+
* 네비게이션에서 사용되는 링크형 메뉴 항목.
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
* - 기본은 `<a>` 태그이며, `as` prop으로 Next.js의 Link 등 임의의 컴포넌트를 주입할 수 있습니다.
|
|
7
|
+
* - `href`가 반드시 필요합니다. 클릭 핸들러만 필요한 경우 `MenuButton`을 사용하세요.
|
|
8
|
+
*
|
|
9
|
+
* @param {Object} props
|
|
10
|
+
* @param {string} props.href - 메뉴 링크 주소 (필수)
|
|
11
|
+
* @param {ElementType} [props.as='a'] - anchor 자리에 렌더할 컴포넌트 (예: next/link)
|
|
12
|
+
* @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입
|
|
13
|
+
* @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
|
|
14
|
+
* @param {string} props.name - 메뉴에 표시될 텍스트
|
|
15
|
+
* @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
|
|
16
|
+
* @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
|
|
17
|
+
* @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
|
|
18
|
+
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
|
|
19
|
+
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
|
|
20
|
+
* @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
|
|
21
|
+
* @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
|
|
22
|
+
* @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // 기본 사용 (일반 <a>)
|
|
26
|
+
* <MenuLink href="/projects" name="프로젝트" />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // Next.js Link 주입
|
|
30
|
+
* import Link from 'next/link';
|
|
31
|
+
* <MenuLink as={Link} href="/projects" name="프로젝트" />
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // 외부 링크
|
|
35
|
+
* <MenuLink
|
|
36
|
+
* href="https://example.com"
|
|
37
|
+
* name="외부 사이트"
|
|
38
|
+
* target="_blank"
|
|
39
|
+
* rel="noopener noreferrer"
|
|
40
|
+
* />
|
|
41
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}exports.MenuLink=n=>{var{type:i,variant:c,name:a,badgeCount:l,isSelected:u,leadingIcon:s,iconButtonName:f,onOptionClick:m,items:p,selectedItem:b,onItemClick:O,href:y,as:d="a",children:g}=n,j=o(n,["type","variant","name","badgeCount","isSelected","leadingIcon","iconButtonName","onOptionClick","items","selectedItem","onItemClick","href","as","children"]);/*#__PURE__*/
|
|
42
|
+
return e.jsx(t.MenuBase,{type:i,variant:c,name:a,badgeCount:l,isSelected:u,leadingIcon:s,iconButtonName:f,onOptionClick:m,items:p,selectedItem:b,onItemClick:O,as:d,wrapperProps:r({href:y},j)})};
|