@wishket/design-system 3.0.1 → 3.2.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/Components/DataDisplays/ProductIcon/Icons/WebSearch.d.ts +4 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +25 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/index.d.ts +1 -0
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.d.ts +1 -1
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.d.ts +18 -3
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +17 -5
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.d.ts +5 -2
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/dist/Components/Navigations/GNBList/GNBList.d.ts +1 -1
- package/dist/Components/Navigations/GNBList/GNBList.parts.d.ts +2 -2
- package/dist/Components/Navigations/GNBList/GNBList.parts.js +7 -7
- package/dist/Components/Navigations/GNBList/GNBList.types.d.ts +11 -5
- package/dist/Components/Navigations/Menu/Menu.types.d.ts +4 -3
- package/dist/Components/Navigations/Menu/MenuLink.d.ts +2 -1
- package/dist/Components/Navigations/Menu/MenuLink.js +2 -2
- package/dist/Components/Navigations/TextLink/TextLink.d.ts +10 -7
- package/dist/Components/Navigations/TextLink/TextLink.js +6 -5
- package/dist/cjs/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +25 -0
- package/dist/cjs/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +3 -3
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/dist/cjs/Components/Navigations/GNBList/GNBList.parts.js +7 -7
- package/dist/cjs/Components/Navigations/Menu/MenuLink.js +2 -2
- package/dist/cjs/Components/Navigations/TextLink/TextLink.js +6 -5
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";const r=({disabled:r})=>/*#__PURE__*/t("svg",r?{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/t("g",{transform:"translate(18.36 22.36)",children:[
|
|
8
|
+
/*#__PURE__*/e("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
11
|
+
/*#__PURE__*/t("g",{transform:"translate(24.3 27.3)",children:[
|
|
12
|
+
/*#__PURE__*/e("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
13
|
+
/*#__PURE__*/e("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]}:{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
14
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
15
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
16
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
18
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
19
|
+
/*#__PURE__*/t("g",{transform:"translate(18.36 22.36)",children:[
|
|
20
|
+
/*#__PURE__*/e("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
22
|
+
/*#__PURE__*/e("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
23
|
+
/*#__PURE__*/t("g",{transform:"translate(24.3 27.3)",children:[
|
|
24
|
+
/*#__PURE__*/e("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
25
|
+
/*#__PURE__*/e("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]});export{r as WebSearch};
|
|
@@ -2,6 +2,7 @@ export { WebDevelopment } from './WebDevelopment';
|
|
|
2
2
|
export { WebDomain } from './WebDomain';
|
|
3
3
|
export { WebSecurity } from './WebSecurity';
|
|
4
4
|
export { WebPayment } from './WebPayment';
|
|
5
|
+
export { WebSearch } from './WebSearch';
|
|
5
6
|
export { WidePaperStructure } from './WidePaperStructure';
|
|
6
7
|
export { WidePaperPlan } from './WidePaperPlan';
|
|
7
8
|
export { WidePaperPayment } from './WidePaperPayment';
|
|
@@ -4,7 +4,7 @@ export declare const SmallProductIconNames: readonly ["bookmark", "download", "w
|
|
|
4
4
|
export type SmallProductIconName = (typeof SmallProductIconNames)[number];
|
|
5
5
|
export declare const MediumProductIconNames: readonly ["person_smile", "lock", "logout", "contract_pen", "paper_pen", "paper_hold", "person_office_confirm", "paper_payment_confirm", "search", "search_confirm", "won", "connect", "security", "service", "package", "bubble_person", "write"];
|
|
6
6
|
export type MediumProductIconName = (typeof MediumProductIconNames)[number];
|
|
7
|
-
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
7
|
+
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "web_search", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
8
8
|
export type LargeProductIconName = (typeof LargeProductIconNames)[number];
|
|
9
9
|
export type ProductIconName = SmallProductIconName | MediumProductIconName | LargeProductIconName;
|
|
10
10
|
export declare const productIcons: Map<ProductIconName, (props: ProductIconPartProps) => React.JSX.Element>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as c}from"./Icons/WebPayment.js";import{WebSearch as p}from"./Icons/WebSearch.js";import{WidePaperStructure as i}from"./Icons/WidePaperStructure.js";import{WidePaperPlan as s}from"./Icons/WidePaperPlan.js";import{WidePaperPayment as m}from"./Icons/WidePaperPayment.js";import{WidePaperConfirm as t}from"./Icons/WidePaperConfirm.js";import{PaperProject as a}from"./Icons/PaperProject.js";import{PaperContract as f}from"./Icons/PaperContract.js";import{PaperCertify as _}from"./Icons/PaperCertify.js";import{PaperSecurity as l}from"./Icons/PaperSecurity.js";import{PaperClock as j}from"./Icons/PaperClock.js";import{PaperConfirm as d}from"./Icons/PaperConfirm.js";import{PaperClip as b}from"./Icons/PaperClip.js";import{PaperOverlap as I}from"./Icons/PaperOverlap.js";import{PaperHold as u}from"./Icons/PaperHold.js";import{MemoWrite as h}from"./Icons/MemoWrite.js";import{Receipt as w}from"./Icons/Receipt.js";import{DocumentSuccess as P}from"./Icons/DocumentSuccess.js";import{DocumentCloud as y}from"./Icons/DocumentCloud.js";import{PersonFreelancer as g}from"./Icons/PersonFreelancer.js";import{PersonOffice as k}from"./Icons/PersonOffice.js";import{PersonSmile as C}from"./Icons/PersonSmile.js";import{Building as S}from"./Icons/Building.js";import{HandShake as v}from"./Icons/HandShake.js";import{HandThumb as W}from"./Icons/HandThumb.js";import{Search as O}from"./Icons/Search.js";import{SearchConfirm as D}from"./Icons/SearchConfirm.js";import{Design as B}from"./Icons/Design.js";import{Repair as H}from"./Icons/Repair.js";import{CardConfirm as M}from"./Icons/CardConfirm.js";import{CardWrite as x}from"./Icons/CardWrite.js";import{Bookmark as E}from"./Icons/Bookmark.js";import{Idea as L}from"./Icons/Idea.js";import{MobileConfirm as R}from"./Icons/MobileConfirm.js";import{Database as A}from"./Icons/Database.js";import{Email as F}from"./Icons/Email.js";import{Credit as T}from"./Icons/Credit.js";import{ShieldConfirm as q}from"./Icons/ShieldConfirm.js";import{ShieldWon as z}from"./Icons/ShieldWon.js";import{Shopping as G}from"./Icons/Shopping.js";import{BubbleStar as J}from"./Icons/BubbleStar.js";import{BubbleStars as K}from"./Icons/BubbleStars.js";import{Calendar as N}from"./Icons/Calendar.js";import{Lock as Q}from"./Icons/Lock.js";import{Logout as U}from"./Icons/Logout.js";import{Congrats as V}from"./Icons/Congrats.js";import{Discount as X}from"./Icons/Discount.js";import{PersonOfficeConfirm as Y}from"./Icons/PersonOfficeConfirm.js";import{PaperPaymentConfirm as Z}from"./Icons/PaperPaymentConfirm.js";import{Won as $}from"./Icons/Won.js";import{Connect as oo}from"./Icons/Connect.js";import{Security as ro}from"./Icons/Security.js";import{Service as eo}from"./Icons/Service.js";import{Download as no}from"./Icons/Download.js";import{Waiting as co}from"./Icons/Waiting.js";import{Achieve as po}from"./Icons/Achieve.js";import{ContractPen as io}from"./Icons/ContractPen.js";import{Package as so}from"./Icons/Package.js";import{PaperClipClock as mo}from"./Icons/PaperClipClock.js";import{PaperPen as to}from"./Icons/PaperPen.js";import{Public as ao}from"./Icons/Public.js";import{BubblePerson as fo}from"./Icons/BubblePerson.js";import{Write as _o}from"./Icons/Write.js";function lo(o,r,e){return r in o?Object.defineProperty(o,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[r]=e,o}function jo(o){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),n.forEach((function(r){lo(o,r,e[r])}))}return o}const bo=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],Io=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],uo=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],ho=new Map([["web_development",e=>/*#__PURE__*/o(r,jo({},e))],["web_domain",r=>/*#__PURE__*/o(e,jo({},r))],["web_security",r=>/*#__PURE__*/o(n,jo({},r))],["web_payment",r=>/*#__PURE__*/o(c,jo({},r))],["web_search",r=>/*#__PURE__*/o(p,jo({},r))],["wide_paper_structure",r=>/*#__PURE__*/o(i,jo({},r))],["wide_paper_plan",r=>/*#__PURE__*/o(s,jo({},r))],["wide_paper_payment",r=>/*#__PURE__*/o(m,jo({},r))],["wide_paper_confirm",r=>/*#__PURE__*/o(t,jo({},r))],["paper_project",r=>/*#__PURE__*/o(a,jo({},r))],["paper_contract",r=>/*#__PURE__*/o(f,jo({},r))],["paper_certify",r=>/*#__PURE__*/o(_,jo({},r))],["paper_security",r=>/*#__PURE__*/o(l,jo({},r))],["paper_clock",r=>/*#__PURE__*/o(j,jo({},r))],["paper_confirm",r=>/*#__PURE__*/o(d,jo({},r))],["paper_clip",r=>/*#__PURE__*/o(b,jo({},r))],["paper_overlap",r=>/*#__PURE__*/o(I,jo({},r))],["paper_hold",r=>/*#__PURE__*/o(u,jo({},r))],["memo_write",r=>/*#__PURE__*/o(h,jo({},r))],["receipt",r=>/*#__PURE__*/o(w,jo({},r))],["document_success",r=>/*#__PURE__*/o(P,jo({},r))],["document_cloud",r=>/*#__PURE__*/o(y,jo({},r))],["person_freelancer",r=>/*#__PURE__*/o(g,jo({},r))],["person_office",r=>/*#__PURE__*/o(k,jo({},r))],["person_smile",r=>/*#__PURE__*/o(C,jo({},r))],["building",r=>/*#__PURE__*/o(S,jo({},r))],["hand_shake",r=>/*#__PURE__*/o(v,jo({},r))],["hand_thumb",r=>/*#__PURE__*/o(W,jo({},r))],["search",r=>/*#__PURE__*/o(O,jo({},r))],["search_confirm",r=>/*#__PURE__*/o(D,jo({},r))],["design",r=>/*#__PURE__*/o(B,jo({},r))],["repair",r=>/*#__PURE__*/o(H,jo({},r))],["card_confirm",r=>/*#__PURE__*/o(M,jo({},r))],["card_write",r=>/*#__PURE__*/o(x,jo({},r))],["bookmark",r=>/*#__PURE__*/o(E,jo({},r))],["idea",r=>/*#__PURE__*/o(L,jo({},r))],["mobile_confirm",r=>/*#__PURE__*/o(R,jo({},r))],["database",r=>/*#__PURE__*/o(A,jo({},r))],["email",r=>/*#__PURE__*/o(F,jo({},r))],["credit",r=>/*#__PURE__*/o(T,jo({},r))],["shield_confirm",r=>/*#__PURE__*/o(q,jo({},r))],["shield_won",r=>/*#__PURE__*/o(z,jo({},r))],["shopping",r=>/*#__PURE__*/o(G,jo({},r))],["bubble_star",r=>/*#__PURE__*/o(J,jo({},r))],["bubble_stars",r=>/*#__PURE__*/o(K,jo({},r))],["calendar",r=>/*#__PURE__*/o(N,jo({},r))],["lock",r=>/*#__PURE__*/o(Q,jo({},r))],["logout",r=>/*#__PURE__*/o(U,jo({},r))],["congrats",r=>/*#__PURE__*/o(V,jo({},r))],["discount",r=>/*#__PURE__*/o(X,jo({},r))],["person_office_confirm",()=>/*#__PURE__*/o(Y,{})],["paper_payment_confirm",()=>/*#__PURE__*/o(Z,{})],["won",r=>/*#__PURE__*/o($,jo({},r))],["connect",()=>/*#__PURE__*/o(oo,{})],["security",()=>/*#__PURE__*/o(ro,{})],["service",()=>/*#__PURE__*/o(eo,{})],["download",()=>/*#__PURE__*/o(no,{})],["waiting",()=>/*#__PURE__*/o(co,{})],["achieve",r=>/*#__PURE__*/o(po,jo({},r))],["contract_pen",r=>/*#__PURE__*/o(io,jo({},r))],["package",r=>/*#__PURE__*/o(so,jo({},r))],["paper_clip_clock",r=>/*#__PURE__*/o(mo,jo({},r))],["paper_pen",r=>/*#__PURE__*/o(to,jo({},r))],["public",r=>/*#__PURE__*/o(ao,jo({},r))],["bubble_person",()=>/*#__PURE__*/o(fo,{})],["write",()=>/*#__PURE__*/o(_o,{})]]);export{uo as LargeProductIconNames,Io as MediumProductIconNames,bo as SmallProductIconNames,ho as productIcons};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
import { SelectBoxVariant } from './TextFieldDropdown.parts';
|
|
2
3
|
export type Item = {
|
|
3
4
|
key: number | string;
|
|
4
5
|
value: string;
|
|
@@ -6,14 +7,16 @@ export type Item = {
|
|
|
6
7
|
};
|
|
7
8
|
export interface TextFieldDropdownProps {
|
|
8
9
|
items: Item[];
|
|
9
|
-
placeholder: string;
|
|
10
10
|
onItemClick: (item: Item) => void;
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
selectedItem?: Item;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
supportMessage?: string;
|
|
14
15
|
errorMessage?: string;
|
|
15
16
|
className?: string;
|
|
16
17
|
isError?: boolean;
|
|
18
|
+
variant?: SelectBoxVariant;
|
|
19
|
+
label?: string;
|
|
17
20
|
}
|
|
18
21
|
/**
|
|
19
22
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
@@ -22,14 +25,16 @@ export interface TextFieldDropdownProps {
|
|
|
22
25
|
*
|
|
23
26
|
* @param {Object} props
|
|
24
27
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
25
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
26
28
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
29
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
27
30
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
28
31
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
29
32
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
30
33
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
31
34
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
32
35
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
36
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
37
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
33
38
|
*
|
|
34
39
|
* @example
|
|
35
40
|
* ```tsx
|
|
@@ -38,6 +43,7 @@ export interface TextFieldDropdownProps {
|
|
|
38
43
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
39
44
|
* ];
|
|
40
45
|
*
|
|
46
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
41
47
|
* <TextFieldDropdown
|
|
42
48
|
* items={items}
|
|
43
49
|
* placeholder="옵션을 선택하세요"
|
|
@@ -45,7 +51,16 @@ export interface TextFieldDropdownProps {
|
|
|
45
51
|
* selectedItem={items[0]}
|
|
46
52
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
47
53
|
* />
|
|
54
|
+
*
|
|
55
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
56
|
+
* <TextFieldDropdown
|
|
57
|
+
* variant="label"
|
|
58
|
+
* label="업종"
|
|
59
|
+
* items={items}
|
|
60
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
61
|
+
* selectedItem={items[0]}
|
|
62
|
+
* />
|
|
48
63
|
* ```
|
|
49
64
|
*/
|
|
50
|
-
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, variant, label, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
66
|
export { TextFieldDropdown };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as
|
|
1
|
+
"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import{twJoin as l}from"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as r}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as i}from"../../../hooks/useDropdown.js";import{SelectBox as a}from"./TextFieldDropdown.parts.js";
|
|
2
2
|
/**
|
|
3
3
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -6,14 +6,16 @@
|
|
|
6
6
|
*
|
|
7
7
|
* @param {Object} props
|
|
8
8
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
9
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
10
9
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
10
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
11
11
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
12
12
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
13
13
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
14
14
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
15
15
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
16
16
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
17
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
18
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
17
19
|
*
|
|
18
20
|
* @example
|
|
19
21
|
* ```tsx
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
23
25
|
* ];
|
|
24
26
|
*
|
|
27
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
25
28
|
* <TextFieldDropdown
|
|
26
29
|
* items={items}
|
|
27
30
|
* placeholder="옵션을 선택하세요"
|
|
@@ -29,7 +32,16 @@
|
|
|
29
32
|
* selectedItem={items[0]}
|
|
30
33
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
31
34
|
* />
|
|
35
|
+
*
|
|
36
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
37
|
+
* <TextFieldDropdown
|
|
38
|
+
* variant="label"
|
|
39
|
+
* label="업종"
|
|
40
|
+
* items={items}
|
|
41
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
42
|
+
* selectedItem={items[0]}
|
|
43
|
+
* />
|
|
32
44
|
* ```
|
|
33
|
-
*/const n=({selectedItem:n,items:
|
|
34
|
-
return e("div",{"data-testid":"design-system--textFieldDropdown",ref:
|
|
35
|
-
/*#__PURE__*/o(
|
|
45
|
+
*/const n=({selectedItem:n,items:d,onItemClick:p,placeholder:m,disabled:c,isError:u,errorMessage:f,supportMessage:x,className:g,variant:I="default",label:v})=>{const{isListOpen:h,focusedIndex:k,ref:b,handleItemClick:w,toggleListOpen:y,handleKeyDown:j}=i({items:d,onItemClick:p,disabled:c}),C=!!x||!!f;/*#__PURE__*/
|
|
46
|
+
return e("div",{"data-testid":"design-system--textFieldDropdown",ref:b,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:j,tabIndex:0,children:[
|
|
47
|
+
/*#__PURE__*/o(a,{placeholder:m,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:c,isListOpen:h,onClick:y,error:u,className:g,variant:I,label:v}),C&&/*#__PURE__*/o(r,{errorMessage:f,supportMessage:x}),h&&/*#__PURE__*/o(t,{className:l("absolute z-40 w-full","label"===I?"top-[72px]":"top-[54px]"),children:/*#__PURE__*/o(s.Root,{children:d.map(((e,l)=>/*#__PURE__*/o(s.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>w(e),selected:e.key===(null==n?void 0:n.key),isFocused:l===k},e.key)))})})]})};export{n as TextFieldDropdown};
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
export type SelectBoxVariant = 'default' | 'label';
|
|
2
3
|
interface SelectBoxProps {
|
|
3
|
-
placeholder: string;
|
|
4
4
|
isListOpen: boolean;
|
|
5
|
+
placeholder?: string;
|
|
5
6
|
value?: string;
|
|
6
7
|
leadingIcon?: SystemIconName;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
error?: boolean;
|
|
9
10
|
onClick?: () => void;
|
|
10
11
|
className?: string;
|
|
12
|
+
variant?: SelectBoxVariant;
|
|
13
|
+
label?: string;
|
|
11
14
|
}
|
|
12
|
-
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, variant, label, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as
|
|
2
|
-
/*#__PURE__*/e(
|
|
3
|
-
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as a,twMerge as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as r}from"../../Base/Typography/Typography.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";const n=({placeholder:s="",value:o="",isListOpen:n,disabled:c=!1,error:m,onClick:y,className:p,variant:x="default",label:g})=>/*#__PURE__*/t(l,{isDisabled:c,isFocused:n,isError:m,testId:"design-system--selectBox",onClick:y,className:p,children:["label"===x?/*#__PURE__*/e(d,{label:g,value:o,placeholder:s,isFocused:n,isError:m,disabled:c}):/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(c&&o?"text-w-gray-300":c&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
2
|
+
/*#__PURE__*/e("div",{className:a("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e(i,{name:"medium_arrow_down",className:c?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]}),d=({label:i,value:l,placeholder:n,isFocused:d,isError:c,disabled:m})=>{const y=!!n;/*#__PURE__*/
|
|
3
|
+
return t(o,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
4
|
+
/*#__PURE__*/e("div",{className:s("tracking-default absolute",m?"text-w-gray-400":c?"text-w-red-500":d?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",y?"typo-caption11":d||l?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:i}),
|
|
5
|
+
/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(y?n:"")})]})};export{n as SelectBox};
|
|
@@ -51,6 +51,6 @@ declare const GNBList: {
|
|
|
51
51
|
UserInfo: ({ imgUrl, username, email, children, onClick, }: import("./GNBList.types").UserInfoProps) => import("react/jsx-runtime").JSX.Element;
|
|
52
52
|
List: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
|
|
53
53
|
SubList: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
-
Item: ({ hasNew, children, className, textClassName, href, as
|
|
54
|
+
Item: <T extends import("react").ElementType = "a">({ hasNew, children, className, textClassName, href, as, ...rest }: import("./GNBList.types").GNBListItemProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
55
55
|
};
|
|
56
56
|
export { GNBList };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
1
|
+
import { ElementType, PropsWithChildren } from 'react';
|
|
2
2
|
import { GNBListRootProps, GNBListItemProps, UserInfoProps } from './GNBList.types';
|
|
3
3
|
/**
|
|
4
4
|
* GNB 리스트의 루트 컴포넌트
|
|
@@ -132,5 +132,5 @@ declare const SubList: ({ children }: PropsWithChildren) => import("react/jsx-ru
|
|
|
132
132
|
* 특별 메뉴
|
|
133
133
|
* </Item>
|
|
134
134
|
*/
|
|
135
|
-
declare const Item: ({ hasNew, children, className, textClassName, href, as
|
|
135
|
+
declare const Item: <T extends ElementType = "a">({ hasNew, children, className, textClassName, href, as, ...rest }: GNBListItemProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
136
136
|
export { Root, UserInfo, List, SubList, Item };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment as l}from"react";import{twMerge as t}from"tailwind-merge";import{Avatar as n}from"../../DataDisplays/Avatar/Avatar.js";import{Typography as o}from"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{NewBadge as i}from"../../DataDisplays/NewBadge/NewBadge.js";import{Divider as c}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";function m(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function p(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{},l=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),l.forEach((function(r){m(e,r,a[r])}))}return e}function f(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 u(e,r){if(null==e)return{};var a,l,t=function(e,r){if(null==e)return{};var a,l,t={},n=Object.keys(e);for(l=0;l<n.length;l++)a=n[l],r.indexOf(a)>=0||(t[a]=e[a]);return t}
|
|
2
2
|
/**
|
|
3
3
|
* GNB 리스트의 루트 컴포넌트
|
|
4
4
|
*
|
|
@@ -31,16 +31,16 @@ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment
|
|
|
31
31
|
* <Item href="/logout">로그아웃</Item>
|
|
32
32
|
* </SubList>
|
|
33
33
|
* </Root>
|
|
34
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(
|
|
34
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(l=0;l<n.length;l++)a=n[l],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(t[a]=e[a])}return t}const y=({withUserInfo:n=!1,children:o,className:i})=>{const m=a.map(o,((a,t)=>0===t?a:/*#__PURE__*/r(l,{children:[
|
|
35
35
|
/*#__PURE__*/e(c,{className:"my-2"}),a]})));/*#__PURE__*/
|
|
36
|
-
return e(s,{as:"nav","aria-label":"네비게이션 메뉴",className:
|
|
36
|
+
return e(s,{as:"nav","aria-label":"네비게이션 메뉴",className:t("absolute flex flex-col rounded-xl bg-w-white shadow-graymedium",n?"w-[280px] pb-3 pt-5":"h-auto w-[200px] overflow-hidden py-3",i),children:m})},b=({imgUrl:a,username:l,email:t,children:i,onClick:c})=>/*#__PURE__*/r(s,{role:"region","aria-label":"사용자 정보",className:"flex w-full flex-col gap-4 px-6 pb-4",children:[
|
|
37
37
|
/*#__PURE__*/r(s,{className:"flex w-full items-center gap-4",children:[
|
|
38
38
|
/*#__PURE__*/e(n,{size:"lg",isEditable:!0,imgUrl:a,onClick:c}),
|
|
39
39
|
/*#__PURE__*/r(s,{className:"flex w-full flex-col gap-0.5",children:[
|
|
40
|
-
/*#__PURE__*/e(o,{variant:"body16",className:"text-w-gray-900 font-medium",children:
|
|
41
|
-
/*#__PURE__*/e(o,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:
|
|
42
|
-
return e(s,{as:"li",children:/*#__PURE__*/r(b,f(p({href:y,className:
|
|
43
|
-
/*#__PURE__*/e(o,{variant:"body14",className:m,children:n}),
|
|
40
|
+
/*#__PURE__*/e(o,{variant:"body16",className:"text-w-gray-900 font-medium",children:l}),
|
|
41
|
+
/*#__PURE__*/e(o,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:t})]})]}),i&&/*#__PURE__*/e(s,{className:"flex w-full flex-col gap-2",children:i})]}),d=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"메인 메뉴",className:"text-w-gray-900 w-full",children:r}),h=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"서브 메뉴",className:"text-w-gray-600 w-full",children:r}),g=a=>{var{hasNew:l=!1,children:n,className:c,textClassName:m,href:y,as:b}=a,d=u(a,["hasNew","children","className","textClassName","href","as"]);/*#__PURE__*/
|
|
42
|
+
return e(s,{as:"li",children:/*#__PURE__*/r(null!=b?b:"a",f(p({href:y,className:t("hover:bg-primary-10 flex w-full cursor-pointer gap-1 px-6 py-2",c)},d),{children:[
|
|
43
|
+
/*#__PURE__*/e(o,{variant:"body14",className:m,children:n}),l&&/*#__PURE__*/e(i,{className:"mt-1","aria-label":"새 소식"})]}))})};
|
|
44
44
|
/**
|
|
45
45
|
* 사용자 정보 컴포넌트
|
|
46
46
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactNode } from 'react';
|
|
2
2
|
export interface GNBListRootProps extends PropsWithChildren {
|
|
3
3
|
withUserInfo?: boolean;
|
|
4
4
|
className?: string;
|
|
@@ -9,13 +9,19 @@ export interface UserInfoProps extends PropsWithChildren {
|
|
|
9
9
|
email?: string;
|
|
10
10
|
onClick?: () => void;
|
|
11
11
|
}
|
|
12
|
-
|
|
12
|
+
type GNBListItemOwnProps = {
|
|
13
13
|
href: string;
|
|
14
14
|
hasNew?: boolean;
|
|
15
15
|
textClassName?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
};
|
|
19
|
+
export type GNBListItemProps<T extends ElementType = 'a'> = GNBListItemOwnProps & {
|
|
16
20
|
/**
|
|
17
21
|
* Item에서 anchor로 렌더할 컴포넌트. 기본값은 일반 `<a>` 태그이며,
|
|
18
|
-
* Next.js의 Link 등을 주입할 수 있습니다.
|
|
22
|
+
* Next.js의 Link 등을 주입할 수 있습니다. 주입된 컴포넌트의 전용
|
|
23
|
+
* prop(예: next/link의 `prefetch`)도 타입 추론됩니다.
|
|
19
24
|
*/
|
|
20
|
-
as?:
|
|
21
|
-
}
|
|
25
|
+
as?: T;
|
|
26
|
+
} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'href' | 'children' | 'className'>;
|
|
27
|
+
export {};
|
|
@@ -26,15 +26,16 @@ export interface MenuCommonProps {
|
|
|
26
26
|
*
|
|
27
27
|
* - `href`가 필수이며, 기본 anchor(`<a>`) 또는 `as`로 주입된 컴포넌트로 렌더링됩니다.
|
|
28
28
|
* - anchor 관련 native 속성(`target`, `rel`, `download` 등)을 그대로 받습니다.
|
|
29
|
+
* - `as`로 컴포넌트를 주입하면 해당 컴포넌트의 전용 props(예: `next/link`의 `prefetch`)도 타입 추론됩니다.
|
|
29
30
|
*/
|
|
30
|
-
export type MenuLinkProps
|
|
31
|
+
export type MenuLinkProps<T extends ElementType = 'a'> = MenuCommonProps & {
|
|
31
32
|
href: string;
|
|
32
33
|
/**
|
|
33
34
|
* anchor 자리에 렌더할 컴포넌트. 기본값은 일반 `<a>` 태그이며,
|
|
34
35
|
* Next.js의 Link 등을 주입할 수 있습니다.
|
|
35
36
|
*/
|
|
36
|
-
as?:
|
|
37
|
-
}
|
|
37
|
+
as?: T;
|
|
38
|
+
} & Omit<ComponentPropsWithoutRef<T>, 'href' | 'className' | 'children' | 'as' | keyof MenuCommonProps>;
|
|
38
39
|
/**
|
|
39
40
|
* `MenuButton`의 props.
|
|
40
41
|
*
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ElementType } from 'react';
|
|
1
2
|
import { MenuLinkProps } from './Menu.types';
|
|
2
3
|
/**
|
|
3
4
|
* 네비게이션에서 사용되는 링크형 메뉴 항목.
|
|
@@ -39,5 +40,5 @@ import { MenuLinkProps } from './Menu.types';
|
|
|
39
40
|
* rel="noopener noreferrer"
|
|
40
41
|
* />
|
|
41
42
|
*/
|
|
42
|
-
declare const MenuLink: ({ type, variant, name, badgeCount, isSelected, leadingIcon, iconButtonName, onOptionClick, items, selectedItem, onItemClick, href, as
|
|
43
|
+
declare const MenuLink: <T extends ElementType = "a">({ type, variant, name, badgeCount, isSelected, leadingIcon, iconButtonName, onOptionClick, items, selectedItem, onItemClick, href, as, children: _children, ...rest }: MenuLinkProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
43
44
|
export { MenuLink };
|
|
@@ -38,5 +38,5 @@ import{jsx as e}from"react/jsx-runtime";import{MenuBase as t}from"./MenuBase.js"
|
|
|
38
38
|
* target="_blank"
|
|
39
39
|
* rel="noopener noreferrer"
|
|
40
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:
|
|
42
|
-
return e(t,{type:i,variant:c,name:
|
|
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:l,badgeCount:a,isSelected:u,leadingIcon:m,iconButtonName:f,onOptionClick:s,items:p,selectedItem:b,onItemClick:O,href:y,as:d,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:l,badgeCount:a,isSelected:u,leadingIcon:m,iconButtonName:f,onOptionClick:s,items:p,selectedItem:b,onItemClick:O,as:null!=d?d:"a",wrapperProps:r({href:y},j)})};export{i as MenuLink};
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ElementType } from 'react';
|
|
2
2
|
import { TextWithIconsProps } from '../../Base/TextWithIcons/TextWithIcons';
|
|
3
|
-
|
|
3
|
+
type TextLinkOwnProps = TextWithIconsProps & {
|
|
4
4
|
href: string;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
};
|
|
6
|
+
export type TextLinkProps<T extends ElementType = 'a'> = TextLinkOwnProps & {
|
|
7
|
+
as?: T;
|
|
8
|
+
} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'href' | 'children' | keyof TextLinkOwnProps>;
|
|
7
9
|
/**
|
|
8
10
|
* 텍스트 기반의 링크 컴포넌트입니다.
|
|
9
11
|
*
|
|
10
12
|
* @description
|
|
11
13
|
* TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
12
|
-
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수
|
|
14
|
+
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수 있고,
|
|
15
|
+
* 주입된 컴포넌트의 전용 props(예: next/link의 `prefetch`)도 타입 추론됩니다.
|
|
13
16
|
*
|
|
14
17
|
* @component
|
|
15
18
|
* @param {Object} props - TextLink 컴포넌트의 props
|
|
@@ -27,9 +30,9 @@ interface TextLinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'>, Tex
|
|
|
27
30
|
* <TextLink href="/about" text="소개 페이지로 이동" />
|
|
28
31
|
*
|
|
29
32
|
* @example
|
|
30
|
-
* // Next.js Link와 함께 사용
|
|
33
|
+
* // Next.js Link와 함께 사용 — prefetch 등 Link 전용 prop도 타입 추론됨
|
|
31
34
|
* import Link from 'next/link';
|
|
32
|
-
* <TextLink as={Link} href="/about" text="소개" />
|
|
35
|
+
* <TextLink as={Link} href="/about" text="소개" prefetch={false} />
|
|
33
36
|
*
|
|
34
37
|
* @example
|
|
35
38
|
* // 외부 링크
|
|
@@ -40,5 +43,5 @@ interface TextLinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'>, Tex
|
|
|
40
43
|
* rel="noopener noreferrer"
|
|
41
44
|
* />
|
|
42
45
|
*/
|
|
43
|
-
declare const TextLink: ({ as
|
|
46
|
+
declare const TextLink: <T extends ElementType = "a">({ as, href, text, leadingIcon, trailingIcon, isTextSmall, isGray, isUnderline, className, ...rest }: TextLinkProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
44
47
|
export { TextLink };
|
|
@@ -4,7 +4,8 @@ import{jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge"
|
|
|
4
4
|
*
|
|
5
5
|
* @description
|
|
6
6
|
* TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
7
|
-
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수
|
|
7
|
+
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수 있고,
|
|
8
|
+
* 주입된 컴포넌트의 전용 props(예: next/link의 `prefetch`)도 타입 추론됩니다.
|
|
8
9
|
*
|
|
9
10
|
* @component
|
|
10
11
|
* @param {Object} props - TextLink 컴포넌트의 props
|
|
@@ -22,9 +23,9 @@ import{jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge"
|
|
|
22
23
|
* <TextLink href="/about" text="소개 페이지로 이동" />
|
|
23
24
|
*
|
|
24
25
|
* @example
|
|
25
|
-
* // Next.js Link와 함께 사용
|
|
26
|
+
* // Next.js Link와 함께 사용 — prefetch 등 Link 전용 prop도 타입 추론됨
|
|
26
27
|
* import Link from 'next/link';
|
|
27
|
-
* <TextLink as={Link} href="/about" text="소개" />
|
|
28
|
+
* <TextLink as={Link} href="/about" text="소개" prefetch={false} />
|
|
28
29
|
*
|
|
29
30
|
* @example
|
|
30
31
|
* // 외부 링크
|
|
@@ -34,5 +35,5 @@ import{jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge"
|
|
|
34
35
|
* target="_blank"
|
|
35
36
|
* rel="noopener noreferrer"
|
|
36
37
|
* />
|
|
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
|
|
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};
|
|
38
|
+
*/(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,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__*/
|
|
39
|
+
return e(null!=l?l:"a",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};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");exports.WebSearch=({disabled:t})=>t?/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(18.36 22.36)",children:[
|
|
8
|
+
/*#__PURE__*/e.jsx("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e.jsx("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
11
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(24.3 27.3)",children:[
|
|
12
|
+
/*#__PURE__*/e.jsx("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
13
|
+
/*#__PURE__*/e.jsx("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]}):/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
14
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
15
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V21H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
16
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"15.5",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"15.5",r:"1",fill:"white"}),
|
|
18
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"15.5",r:"1",fill:"white"}),
|
|
19
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(18.36 22.36)",children:[
|
|
20
|
+
/*#__PURE__*/e.jsx("path",{d:"M11.6551 23.2175C17.6717 23.185 22.5219 18.1179 22.4882 11.8999C22.4546 5.6819 17.5499 0.667605 11.5333 0.700158C5.51668 0.732712 0.666531 5.79979 0.700174 12.0178C0.733817 18.2358 5.63851 23.2501 11.6551 23.2175Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e.jsx("path",{d:"M18.469 20.6893L21.1584 23.7206",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
22
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.1267 33.1687L29.5455 33.7271C28.896 34.3539 27.8818 34.3083 27.2892 33.636L21.1811 26.9012C20.5886 26.2288 20.6228 25.169 21.2723 24.5537L21.8535 23.9953C22.503 23.3685 23.5172 23.4141 24.1098 24.0864L30.2179 30.8212C30.8104 31.4936 30.7762 32.5534 30.1267 33.1687Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}),
|
|
23
|
+
/*#__PURE__*/e.jsxs("g",{transform:"translate(24.3 27.3)",children:[
|
|
24
|
+
/*#__PURE__*/e.jsx("path",{d:"M0.7 12.7V12.3465C0.778172 11.2347 1.36146 7.7 5.70301 7.7H5.69699C10.0385 7.7 10.6218 11.2283 10.7 12.3465V12.7",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
25
|
+
/*#__PURE__*/e.jsx("path",{d:"M5.7 5.7C7.08071 5.7 8.2 4.58071 8.2 3.2C8.2 1.81929 7.08071 0.7 5.7 0.7C4.31929 0.7 3.2 1.81929 3.2 3.2C3.2 4.58071 4.31929 5.7 5.7 5.7Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/WebSearch.js"),c=require("./Icons/WidePaperStructure.js"),a=require("./Icons/WidePaperPlan.js"),p=require("./Icons/WidePaperPayment.js"),t=require("./Icons/WidePaperConfirm.js"),u=require("./Icons/PaperProject.js"),j=require("./Icons/PaperContract.js"),l=require("./Icons/PaperCertify.js"),_=require("./Icons/PaperSecurity.js"),m=require("./Icons/PaperClock.js"),d=require("./Icons/PaperConfirm.js"),b=require("./Icons/PaperClip.js"),I=require("./Icons/PaperOverlap.js"),x=require("./Icons/PaperHold.js"),q=require("./Icons/MemoWrite.js"),f=require("./Icons/Receipt.js"),P=require("./Icons/DocumentSuccess.js"),h=require("./Icons/DocumentCloud.js"),C=require("./Icons/PersonFreelancer.js"),w=require("./Icons/PersonOffice.js"),g=require("./Icons/PersonSmile.js"),y=require("./Icons/Building.js"),S=require("./Icons/HandShake.js"),k=require("./Icons/HandThumb.js"),W=require("./Icons/Search.js"),v=require("./Icons/SearchConfirm.js"),D=require("./Icons/Design.js"),O=require("./Icons/Repair.js"),B=require("./Icons/CardConfirm.js"),H=require("./Icons/CardWrite.js"),M=require("./Icons/Bookmark.js"),L=require("./Icons/Idea.js"),R=require("./Icons/MobileConfirm.js"),E=require("./Icons/Database.js"),N=require("./Icons/Email.js"),A=require("./Icons/Credit.js"),F=require("./Icons/ShieldConfirm.js"),T=require("./Icons/ShieldWon.js"),z=require("./Icons/Shopping.js"),G=require("./Icons/BubbleStar.js"),J=require("./Icons/BubbleStars.js"),K=require("./Icons/Calendar.js"),Q=require("./Icons/Lock.js"),U=require("./Icons/Logout.js"),V=require("./Icons/Congrats.js"),X=require("./Icons/Discount.js"),Y=require("./Icons/PersonOfficeConfirm.js"),Z=require("./Icons/PaperPaymentConfirm.js"),$=require("./Icons/Won.js"),ee=require("./Icons/Connect.js"),re=require("./Icons/Security.js"),se=require("./Icons/Service.js"),oe=require("./Icons/Download.js"),ne=require("./Icons/Waiting.js"),ie=require("./Icons/Achieve.js"),ce=require("./Icons/ContractPen.js"),ae=require("./Icons/Package.js"),pe=require("./Icons/PaperClipClock.js"),te=require("./Icons/PaperPen.js"),ue=require("./Icons/Public.js"),je=require("./Icons/BubblePerson.js"),le=require("./Icons/Write.js");function _e(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function me(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{},o=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(s).filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable})))),o.forEach((function(r){_e(e,r,s[r])}))}return e}const de=new Map([["web_development",s=>/*#__PURE__*/e.jsx(r.WebDevelopment,me({},s))],["web_domain",r=>/*#__PURE__*/e.jsx(s.WebDomain,me({},r))],["web_security",r=>/*#__PURE__*/e.jsx(o.WebSecurity,me({},r))],["web_payment",r=>/*#__PURE__*/e.jsx(n.WebPayment,me({},r))],["web_search",r=>/*#__PURE__*/e.jsx(i.WebSearch,me({},r))],["wide_paper_structure",r=>/*#__PURE__*/e.jsx(c.WidePaperStructure,me({},r))],["wide_paper_plan",r=>/*#__PURE__*/e.jsx(a.WidePaperPlan,me({},r))],["wide_paper_payment",r=>/*#__PURE__*/e.jsx(p.WidePaperPayment,me({},r))],["wide_paper_confirm",r=>/*#__PURE__*/e.jsx(t.WidePaperConfirm,me({},r))],["paper_project",r=>/*#__PURE__*/e.jsx(u.PaperProject,me({},r))],["paper_contract",r=>/*#__PURE__*/e.jsx(j.PaperContract,me({},r))],["paper_certify",r=>/*#__PURE__*/e.jsx(l.PaperCertify,me({},r))],["paper_security",r=>/*#__PURE__*/e.jsx(_.PaperSecurity,me({},r))],["paper_clock",r=>/*#__PURE__*/e.jsx(m.PaperClock,me({},r))],["paper_confirm",r=>/*#__PURE__*/e.jsx(d.PaperConfirm,me({},r))],["paper_clip",r=>/*#__PURE__*/e.jsx(b.PaperClip,me({},r))],["paper_overlap",r=>/*#__PURE__*/e.jsx(I.PaperOverlap,me({},r))],["paper_hold",r=>/*#__PURE__*/e.jsx(x.PaperHold,me({},r))],["memo_write",r=>/*#__PURE__*/e.jsx(q.MemoWrite,me({},r))],["receipt",r=>/*#__PURE__*/e.jsx(f.Receipt,me({},r))],["document_success",r=>/*#__PURE__*/e.jsx(P.DocumentSuccess,me({},r))],["document_cloud",r=>/*#__PURE__*/e.jsx(h.DocumentCloud,me({},r))],["person_freelancer",r=>/*#__PURE__*/e.jsx(C.PersonFreelancer,me({},r))],["person_office",r=>/*#__PURE__*/e.jsx(w.PersonOffice,me({},r))],["person_smile",r=>/*#__PURE__*/e.jsx(g.PersonSmile,me({},r))],["building",r=>/*#__PURE__*/e.jsx(y.Building,me({},r))],["hand_shake",r=>/*#__PURE__*/e.jsx(S.HandShake,me({},r))],["hand_thumb",r=>/*#__PURE__*/e.jsx(k.HandThumb,me({},r))],["search",r=>/*#__PURE__*/e.jsx(W.Search,me({},r))],["search_confirm",r=>/*#__PURE__*/e.jsx(v.SearchConfirm,me({},r))],["design",r=>/*#__PURE__*/e.jsx(D.Design,me({},r))],["repair",r=>/*#__PURE__*/e.jsx(O.Repair,me({},r))],["card_confirm",r=>/*#__PURE__*/e.jsx(B.CardConfirm,me({},r))],["card_write",r=>/*#__PURE__*/e.jsx(H.CardWrite,me({},r))],["bookmark",r=>/*#__PURE__*/e.jsx(M.Bookmark,me({},r))],["idea",r=>/*#__PURE__*/e.jsx(L.Idea,me({},r))],["mobile_confirm",r=>/*#__PURE__*/e.jsx(R.MobileConfirm,me({},r))],["database",r=>/*#__PURE__*/e.jsx(E.Database,me({},r))],["email",r=>/*#__PURE__*/e.jsx(N.Email,me({},r))],["credit",r=>/*#__PURE__*/e.jsx(A.Credit,me({},r))],["shield_confirm",r=>/*#__PURE__*/e.jsx(F.ShieldConfirm,me({},r))],["shield_won",r=>/*#__PURE__*/e.jsx(T.ShieldWon,me({},r))],["shopping",r=>/*#__PURE__*/e.jsx(z.Shopping,me({},r))],["bubble_star",r=>/*#__PURE__*/e.jsx(G.BubbleStar,me({},r))],["bubble_stars",r=>/*#__PURE__*/e.jsx(J.BubbleStars,me({},r))],["calendar",r=>/*#__PURE__*/e.jsx(K.Calendar,me({},r))],["lock",r=>/*#__PURE__*/e.jsx(Q.Lock,me({},r))],["logout",r=>/*#__PURE__*/e.jsx(U.Logout,me({},r))],["congrats",r=>/*#__PURE__*/e.jsx(V.Congrats,me({},r))],["discount",r=>/*#__PURE__*/e.jsx(X.Discount,me({},r))],["person_office_confirm",()=>/*#__PURE__*/e.jsx(Y.PersonOfficeConfirm,{})],["paper_payment_confirm",()=>/*#__PURE__*/e.jsx(Z.PaperPaymentConfirm,{})],["won",r=>/*#__PURE__*/e.jsx($.Won,me({},r))],["connect",()=>/*#__PURE__*/e.jsx(ee.Connect,{})],["security",()=>/*#__PURE__*/e.jsx(re.Security,{})],["service",()=>/*#__PURE__*/e.jsx(se.Service,{})],["download",()=>/*#__PURE__*/e.jsx(oe.Download,{})],["waiting",()=>/*#__PURE__*/e.jsx(ne.Waiting,{})],["achieve",r=>/*#__PURE__*/e.jsx(ie.Achieve,me({},r))],["contract_pen",r=>/*#__PURE__*/e.jsx(ce.ContractPen,me({},r))],["package",r=>/*#__PURE__*/e.jsx(ae.Package,me({},r))],["paper_clip_clock",r=>/*#__PURE__*/e.jsx(pe.PaperClipClock,me({},r))],["paper_pen",r=>/*#__PURE__*/e.jsx(te.PaperPen,me({},r))],["public",r=>/*#__PURE__*/e.jsx(ue.Public,me({},r))],["bubble_person",()=>/*#__PURE__*/e.jsx(je.BubblePerson,{})],["write",()=>/*#__PURE__*/e.jsx(le.Write,{})]]);exports.LargeProductIconNames=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],exports.MediumProductIconNames=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],exports.SmallProductIconNames=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],exports.productIcons=de;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime")
|
|
2
|
-
return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:
|
|
3
|
-
/*#__PURE__*/e.jsx(
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge");require("react");var l=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("../List/List.js"),t=require("../SupportTextContainer/SupportTextContainer.js"),i=require("../../../hooks/useDropdown.js"),o=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:a,items:n,onItemClick:d,placeholder:u,disabled:c,isError:p,errorMessage:x,supportMessage:m,className:g,variant:j="default",label:v})=>{const{isListOpen:w,focusedIndex:I,ref:h,handleItemClick:k,toggleListOpen:q,handleKeyDown:L}=i.useDropdown({items:n,onItemClick:d,disabled:c}),b=!!m||!!x;/*#__PURE__*/
|
|
2
|
+
return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:h,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:L,tabIndex:0,children:[
|
|
3
|
+
/*#__PURE__*/e.jsx(o.SelectBox,{placeholder:u,value:null==a?void 0:a.value,leadingIcon:null==a?void 0:a.leadingIcon,disabled:c,isListOpen:w,onClick:q,error:p,className:g,variant:j,label:v}),b&&/*#__PURE__*/e.jsx(t.SupportTextContainer,{errorMessage:x,supportMessage:m}),w&&/*#__PURE__*/e.jsx(l.Box,{className:s.twJoin("absolute z-40 w-full","label"===j?"top-[72px]":"top-[54px]"),children:/*#__PURE__*/e.jsx(r.List.Root,{children:n.map(((s,l)=>/*#__PURE__*/e.jsx(r.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>k(s),selected:s.key===(null==a?void 0:a.key),isFocused:l===I},s.key)))})})]})};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
2
|
-
|
|
3
|
-
/*#__PURE__*/e.jsx("div",{className:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var a=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var r=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var i=require("../TextFieldContainer/TextFieldContainer.js");const l=({label:r,value:i,placeholder:l,isFocused:o,isError:n,disabled:d})=>{const c=!!l;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(s.Box,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
3
|
+
/*#__PURE__*/e.jsx("div",{className:t.twMerge("tracking-default absolute",d?"text-w-gray-400":n?"text-w-red-500":o?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",c?"typo-caption11":o||i?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:r}),
|
|
4
|
+
/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d?"text-w-gray-300":i?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:i||(c?l:"")})]})};exports.SelectBox=({placeholder:s="",value:o="",isListOpen:n,disabled:d=!1,error:c,onClick:y,className:x,variant:u="default",label:p})=>/*#__PURE__*/e.jsxs(i.TextFieldContainer,{isDisabled:d,isFocused:n,isError:c,testId:"design-system--selectBox",onClick:y,className:x,children:["label"===u?/*#__PURE__*/e.jsx(l,{label:p,value:o,placeholder:s,isFocused:n,isError:c,disabled:d}):/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d&&o?"text-w-gray-300":d&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
5
|
+
/*#__PURE__*/e.jsx("div",{className:t.twJoin("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e.jsx(r.SystemIcon,{name:"medium_arrow_down",className:d?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});
|
|
@@ -1,4 +1,4 @@
|
|
|
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
|
|
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 n=require("../../DataDisplays/NewBadge/NewBadge.js"),i=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:t=!1,children:
|
|
35
|
-
return e.jsx(s.Box,{as:"li",children:/*#__PURE__*/e.jsxs(
|
|
36
|
-
/*#__PURE__*/e.jsx(l.Typography,{variant:"body14",className:y,children:
|
|
37
|
-
/*#__PURE__*/e.jsx(
|
|
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,
|
|
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:i,className:o,textClassName:y,href:x,as:f}=r,d=p(r,["hasNew","children","className","textClassName","href","as"]);const m=null!=f?f:"a";/*#__PURE__*/
|
|
35
|
+
return e.jsx(s.Box,{as:"li",children:/*#__PURE__*/e.jsxs(m,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:i}),t&&/*#__PURE__*/e.jsx(n.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:n})=>{const o=r.Children.map(l,((a,t)=>0===t?a:/*#__PURE__*/e.jsxs(r.Fragment,{children:[
|
|
37
|
+
/*#__PURE__*/e.jsx(i.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,n),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:n,children:i,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
39
|
/*#__PURE__*/e.jsxs(s.Box,{className:"flex w-full items-center gap-4",children:[
|
|
40
40
|
/*#__PURE__*/e.jsx(t.Avatar,{size:"lg",isEditable:!0,imgUrl:r,onClick:o}),
|
|
41
41
|
/*#__PURE__*/e.jsxs(s.Box,{className:"flex w-full flex-col gap-0.5",children:[
|
|
42
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:
|
|
43
|
+
/*#__PURE__*/e.jsx(l.Typography,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:n})]})]}),i&&/*#__PURE__*/e.jsx(s.Box,{className:"flex w-full flex-col gap-2",children:i})]});
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
* target="_blank"
|
|
39
39
|
* rel="noopener noreferrer"
|
|
40
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
|
|
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:
|
|
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,children:g}=n,j=o(n,["type","variant","name","badgeCount","isSelected","leadingIcon","iconButtonName","onOptionClick","items","selectedItem","onItemClick","href","as","children"]);const v=null!=d?d:"a";/*#__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:v,wrapperProps:r({href:y},j)})};
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
*
|
|
5
5
|
* @description
|
|
6
6
|
* TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
|
|
7
|
-
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수
|
|
7
|
+
* `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 등 임의의 컴포넌트를 주입할 수 있고,
|
|
8
|
+
* 주입된 컴포넌트의 전용 props(예: next/link의 `prefetch`)도 타입 추론됩니다.
|
|
8
9
|
*
|
|
9
10
|
* @component
|
|
10
11
|
* @param {Object} props - TextLink 컴포넌트의 props
|
|
@@ -22,9 +23,9 @@
|
|
|
22
23
|
* <TextLink href="/about" text="소개 페이지로 이동" />
|
|
23
24
|
*
|
|
24
25
|
* @example
|
|
25
|
-
* // Next.js Link와 함께 사용
|
|
26
|
+
* // Next.js Link와 함께 사용 — prefetch 등 Link 전용 prop도 타입 추론됨
|
|
26
27
|
* import Link from 'next/link';
|
|
27
|
-
* <TextLink as={Link} href="/about" text="소개" />
|
|
28
|
+
* <TextLink as={Link} href="/about" text="소개" prefetch={false} />
|
|
28
29
|
*
|
|
29
30
|
* @example
|
|
30
31
|
* // 외부 링크
|
|
@@ -34,5 +35,5 @@
|
|
|
34
35
|
* target="_blank"
|
|
35
36
|
* rel="noopener noreferrer"
|
|
36
37
|
* />
|
|
37
|
-
*/(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=o=>{var{as:l
|
|
38
|
-
return e.jsx(
|
|
38
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=o=>{var{as:l,href:s,text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O=!1,isGray:b=!1,isUnderline:y=!1,className:p}=o,g=c(o,["as","href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);const j=null!=l?l:"a";/*#__PURE__*/
|
|
39
|
+
return e.jsx(j,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:s,className:t.twMerge("flex min-h-6 w-fit items-center justify-center",O?"gap-x-0.5":"gap-x-1",p)},g),{children:/*#__PURE__*/e.jsx(r.TextWithIcons,{text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O,isUnderline:y,isGray:b})}))};
|