@edu-tosel/design 1.0.51 → 1.0.52

package/asset/SVG.d.ts

@@ -28,6 +28,11 @@ declare const SVG: {
     Operation: {
         Plus: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
         Minus: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
+        Checked: ({ flag, size, theme, }: {
+            flag: boolean;
+            size?: number | undefined;
+            theme?: import("../interface/Theme").Theme | undefined;
+        }) => import("react/jsx-runtime").JSX.Element;
     };
     Phone: typeof Phone;
     Profile: typeof Profile;

package/asset/svg/Operation.d.ts

@@ -1,11 +1,18 @@
 import { OnClick } from "../../interface";
+import { Theme } from "../../interface/Theme";
 interface Operation {
     onClick?: OnClick;
 }
 declare function Plus({ onClick }: Operation): import("react/jsx-runtime").JSX.Element;
 declare function Minus({ onClick }: Operation): import("react/jsx-runtime").JSX.Element;
+declare function Checked({ flag, size, theme, }: {
+    flag: boolean;
+    size?: number;
+    theme?: Theme;
+}): import("react/jsx-runtime").JSX.Element;
 declare const Operation: {
     Plus: typeof Plus;
     Minus: typeof Minus;
+    Checked: typeof Checked;
 };
 export default Operation;

package/asset/svg/Operation.js

@@ -9,8 +9,16 @@ function Plus({ onClick }) {
 function Minus({ onClick }) {
     return (_jsxs("svg", { className: cn(container), onClick: onClick, width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: "#910023" }), _jsx("path", { d: "M30 24H18", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
+function Checked({ flag, size, theme, }) {
+    const color = {
+        green: "#105652",
+        blue: "#173A8B",
+    };
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size ?? "40", height: size ?? "40", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: flag ? color[theme ?? "green"] : "#F0F0F0" }), _jsx("path", { d: "M30.5 18.5L24 30.5L18 24", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+}
 const Operation = {
     Plus,
     Minus,
+    Checked,
 };
 export default Operation;

package/asset/svg/Operation.tsx

@@ -1,4 +1,5 @@
 import { OnClick } from "../../interface";
+import { Theme } from "../../interface/Theme";
 import { cn } from "../../util";
 
 interface Operation {
@@ -59,8 +60,45 @@ function Minus({ onClick }: Operation) {
   );
 }
 
+function Checked({
+  flag,
+  size,
+  theme,
+}: {
+  flag: boolean;
+  size?: number;
+  theme?: Theme;
+}) {
+  const color = {
+    green: "#105652",
+    blue: "#173A8B",
+  } as Record<Theme, string>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size ?? "40"}
+      height={size ?? "40"}
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill={flag ? color[theme ?? "green"] : "#F0F0F0"}
+      />
+      <path
+        d="M30.5 18.5L24 30.5L18 24"
+        stroke="white"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
 const Operation = {
   Plus,
   Minus,
+  Checked,
 };
 export default Operation;

package/card/design/Card.design.js

@@ -2,6 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn, isDebug } from "../../util";
 import { useActionStore } from "../../store";
 const widthSize = {
+    "4xs": "w-15",
+    "3xs": "w-40",
     "2xs": "w-53.75",
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
@@ -13,8 +15,8 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    "3xs": "h-28",
-    "2xs": "h-30",
+    "3xs": "h-30",
+    "2xs": "h-40",
     xs: "h-45",
     sm: "h-52.5",
     md: "h-67.5",

package/card/design/RollCard.design.d.ts

@@ -1,2 +1,2 @@
 import { RollCardProps } from "../../interface";
-export default function RollCardDesign({ titles, state, children, }: RollCardProps): import("react/jsx-runtime").JSX.Element;
+export default function RollCardDesign({ titles, state, isDisabled, isFixed, children, }: RollCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/RollCard.design.js

@@ -1,13 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SVG from "../../asset/SVG";
 import { Label } from "../../widget";
-import { Shelf } from "../../layout";
+import { Action, Shelf } from "../../layout";
 import Card from "./Card.design";
-export default function RollCardDesign({ titles, state, children, }) {
+import { useEffect, useState } from "react";
+import { cn } from "../../util";
+export default function RollCardDesign({ titles, state, isDisabled, isFixed, children, }) {
     const [isOpen, setIsOpen] = state;
+    const [flag, setFlag] = useState(false);
+    useEffect(() => {
+        if (isFixed) {
+            setFlag(true);
+            const timer = setTimeout(() => {
+                setFlag(false);
+            }, 800);
+            return () => clearTimeout(timer);
+        }
+    }, [isFixed]);
+    const childBox = {
+        sizes: "h-full",
+        styles: isFixed && "hidden",
+    };
     return (_jsxs(Card, { options: {
             width: "2xl",
-            height: isOpen ? "xs" : "3xs",
+            height: !isFixed && isOpen ? "xs" : "3xs",
+            background: flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",
-        }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: "\uC811\uC218\uC911" }), !isOpen ? (_jsx(SVG.Operation.Plus, { onClick: () => setIsOpen(true) })) : (_jsx(SVG.Operation.Minus, { onClick: () => setIsOpen(false) }))] })] }), _jsx("div", { className: "h-full", children: isOpen && children })] }));
+        }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: isFixed ? (flag ? "추가됨" : "수정하기") : "접수중", options: {
+                                    background: flag ? "bg-green-dark" : "bg-green-dark/10",
+                                    text: flag ? "text-white" : "bg-green-dark",
+                                } }), _jsx(Action.Replace, { actions: [
+                                    [isDisabled, null],
+                                    [!isDisabled && isFixed, _jsx(SVG.Operation.Checked, { flag: true })],
+                                    [
+                                        !isDisabled && !isFixed && !isOpen,
+                                        _jsx(SVG.Operation.Plus, { onClick: () => setIsOpen(true) }),
+                                    ],
+                                    [
+                                        !isDisabled && !isFixed && isOpen,
+                                        _jsx(SVG.Operation.Minus, { onClick: () => setIsOpen(false) }),
+                                    ],
+                                ] })] })] }), _jsx("div", { className: cn(childBox), children: isOpen && children })] }));
 }

package/card/index.d.ts

@@ -2,5 +2,6 @@ export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
+export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";

package/card/index.js

@@ -2,5 +2,6 @@ export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
+export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";

package/card/template/NavCard.js

@@ -14,7 +14,7 @@ function _Button({ titles, onClick, options }) {
 function ButtonInLay({ titles, buttonInLay, options, }) {
     return (_jsx(NavCardDesign, { titles: titles, options: {
             ...options,
-            width: options?.width ?? "2xl",
+            width: options?.width ?? "xs",
             height: options?.height ?? "sm",
             buttonInLay: {
                 disabled: buttonInLay.disabled,
@@ -33,7 +33,7 @@ function BannerAndButtonInLay({ banner, buttonInLay, }) {
         ...buttonInLay,
         options: { ...buttonInLay.options, noShadow: true },
     };
-    return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
+    return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
 }
 const NavCard = {
     Banner,

package/card/template/ProgressCard.d.ts

@@ -0,0 +1,10 @@
+import { Titles } from "../../interface";
+import { Theme } from "../../interface";
+type Step = [string, boolean];
+interface ProgressCardProps {
+    titles: Titles;
+    steps: Step[];
+    theme?: Theme;
+}
+export default function ProgressCard({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/template/ProgressCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../asset/SVG";
+import { cn } from "../../util";
+import CardDesign from "../design/Card.design";
+const bg = {
+    green: "bg-green-dark",
+    blue: "bg-blue-navy",
+};
+const bgLight = {
+    green: "bg-green-dark/10",
+    blue: "bg-blue-navy/10",
+};
+const text = {
+    green: "text-green-dark",
+    blue: "text-blue-navy",
+};
+export default function ProgressCard({ titles, steps, theme, }) {
+    const progressBox = {
+        positions: "absolute top-7.5 left-7.5",
+        displays: "flex",
+        sizes: "w-150 h-19",
+    };
+    const stepBox = (flag) => ({
+        displays: "flex-1 flex flex-col justify-between",
+        sizes: "h-full",
+        backgrounds: flag ? bgLight[theme ?? "green"] : "bg-transparent",
+        boundaries: "rounded-md p-2.5",
+        texts: flag ? "text-gray-dark" : "text-gray-medium",
+    });
+    const titleBox = {
+        positions: "absolute top-12 right-12",
+        displays: "flex flex-col items-end gap-y-3",
+    };
+    const occupied = [
+        steps.filter(([_, value]) => !!value).length,
+        steps.length,
+    ].join("/");
+    return (_jsxs(CardDesign, { options: {
+            width: "2xl",
+            height: "2xs",
+        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([key, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsx("div", { children: key }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }, key))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full w-${occupied} ${bg[theme ?? "green"]}` }) })] }));
+}

package/interface/Action.d.ts

@@ -4,12 +4,12 @@ export interface ActionEvent {
     event: string;
     type: "view" | "modal";
 }
-type Event<T extends boolean | string | null | undefined> = [
+type Action<T extends boolean | string | null | undefined> = [
     T,
     React.ReactNode
 ];
-export type Show = Event<boolean | string>;
-export type Replace = Event<boolean | string | null | undefined>;
+export type Show = Action<boolean | string>;
+export type Replace = Action<boolean | string | null | undefined>;
 export interface ShowAction {
     event: string;
     isVisible: boolean;
@@ -20,11 +20,11 @@ export interface ShowProps {
 }
 export interface ReplaceProps {
     actions?: Replace[];
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 export interface EventsProps {
-    replaces?: Event<boolean | string | null | undefined>[];
-    shows?: Event<boolean | string>[];
+    replaces?: Action<boolean | string | null | undefined>[];
+    shows?: Action<boolean | string>[];
 }
 export interface DataFieldProps<T> {
     id: string;

package/interface/Card.d.ts

@@ -126,5 +126,7 @@ export interface RollCardProps extends CardProps {
         icon?: string;
     };
     state: State<boolean>;
+    isFixed?: boolean;
+    isDisabled?: boolean;
 }
 export {};

package/interface/Modal.d.ts

@@ -1,4 +1,4 @@
-import { Button, Scripts, Size, Titles } from "./Property";
+import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
 interface Options {
     width: Size;
@@ -27,4 +27,11 @@ interface AlertModalProps extends Omit<ModalProps, "children"> {
         buttons?: Button[];
     };
 }
-export type { ModalProps, ConfirmModalProps, AlertModalProps };
+interface DaumPostcode {
+    address: string;
+    zipcode: string;
+}
+interface DaumPostcodeModalProps extends Omit<ModalProps, "titles" | "children"> {
+    state: State<DaumPostcode>;
+}
+export type { ModalProps, ConfirmModalProps, AlertModalProps, DaumPostcodeModalProps, };

package/interface/Property.d.ts

@@ -27,7 +27,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type Size = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
+export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}

package/interface/Theme.d.ts

@@ -0,0 +1,2 @@
+type Theme = "green" | "blue";
+export type { Theme };

package/interface/Theme.js

@@ -0,0 +1 @@
+export {};

package/interface/index.d.ts

@@ -4,5 +4,6 @@ export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
+export * from "./Theme";
 export * from "./Shelf";
 export * from "./widget";

package/interface/index.js

@@ -4,5 +4,6 @@ export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
+export * from "./Theme";
 export * from "./Shelf";
 export * from "./widget";

package/layout/widget/dashboard/mypage/Navigate.js

@@ -9,7 +9,7 @@ function Academy({ onClick }) {
             boundary: "box-shadow shadow-green-dark",
             onMouse: [onMouse, _],
             width: "2xs",
-            height: "2xs",
+            height: "3xs",
         }, children: [_jsx("div", { className: "text-gray-medium group-hover:text-green-dark duration-300", children: "\uB098\uC758 \uD559\uC6D0" }), _jsx("svg", { className: "absolute bottom-5 right-5 ", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", children: _jsx("path", { className: "duration-300", d: "M9 53H52M10.9545 6H50.0455M12.9091 6V53M48.0909 6V53M22.6818 15.7917H26.5909M22.6818 23.625H26.5909M22.6818 31.4583H26.5909M34.4091 15.7917H38.3182M34.4091 23.625H38.3182M34.4091 31.4583H38.3182M22.6818 53V44.1875C22.6818 42.566 23.9953 41.25 25.6136 41.25H35.3864C37.0047 41.25 38.3182 42.566 38.3182 44.1875V53", stroke: !onMouse ? "#7F7F7F" : "#105652", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 }
 function Payment({ onClick }) {
@@ -18,7 +18,7 @@ function Payment({ onClick }) {
             className: "pt-5 pl-5",
             background: "group bg-green-dark/10 hover:bg-green-dark/30 ",
             width: "2xs",
-            height: "2xs",
+            height: "3xs",
             boundary: "",
         }, children: [_jsx("div", { className: "opacity-0 group-hover:opacity-100 duration-300", children: "\uACB0\uC81C \uC815\uBCF4" }), _jsxs("div", { className: "absolute top-5 group-hover:top-11.25 left-5 flex flex-col gap-1.5 duration-300", children: [_jsx("div", { className: "w-24 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" }), _jsx("div", { className: "w-14.25 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" })] }), _jsx("div", { className: "absolute top-5 right-5 w-12.25 h-7 rounded-full bg-[#CFDDDC]" }), _jsx("div", { className: "absolute left-0 bottom-5 w-full h-5 bg-green-dark" })] }));
 }

package/layout/widget/dashboard/mypage/Profile.js

@@ -22,7 +22,7 @@ function Profile({ name, birthday, image, modify }) {
     return (_jsxs(Card, { options: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
-            height: "2xs",
+            height: "3xs",
             boundary: "border-1 border-black",
         }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }

package/modal/design/Modal.design.js

@@ -11,7 +11,7 @@ const widthSize = {
     xs: "w-2/3 min-w-76 max-w-176",
     sm: "w-2/3 min-w-76 max-w-176",
     md: "w-112.5",
-    lg: "w-full min-w-76 max-w-360",
+    lg: "w-full min-w-76 max-w-240",
     xl: "w-2/3 min-w-76 max-w-360",
     "2xl": "w-2/3 min-w-76 max-w-360",
     full: "w-full",
@@ -21,7 +21,7 @@ const heightSize = {
     sm: "h-100",
     md: "h-72 sm:h-48",
     lg: "h-112.5",
-    xl: "h-180",
+    xl: "h-160",
     "2xl": "max-w-176",
     full: "h-full",
 };

package/modal/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from "./template";
-export { default as ConfirmModal } from "./template/ConfirmModal";
+export { default as ConfirmModal } from "./template/Confirm";
+export { default as PostcodeModal } from "./template/Postcode";

package/modal/index.js

@@ -1,2 +1,3 @@
 export { default as Modal } from "./template";
-export { default as ConfirmModal } from "./template/ConfirmModal";
+export { default as ConfirmModal } from "./template/Confirm";
+export { default as PostcodeModal } from "./template/Postcode";

package/modal/template/{ConfirmModal → Confirm}/Tag.d.ts

@@ -4,6 +4,7 @@ interface TagModalProps<T> extends Omit<ConfirmModalProps, "children"> {
     tag: {
         state: State<T[]>;
         tags: [T, string][];
+        process?: [boolean, React.ReactNode];
         options?: {
             selectHow?: "one" | "plural";
         };

package/modal/template/Confirm/Tag.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ConfirmModal from "../../design/ConfirmModal.design";
+import { cn } from "../../../util";
+import { selectOne, selectPlural } from "../../../util/select";
+import { animated, useTransition } from "react-spring";
+export default function Tag(props) {
+    const { state, tags, options, process } = props.tag;
+    const { selectHow } = options || { selectHow: "plural" };
+    const button = (key) => ({
+        sizes: "h-10",
+        styles: "rounded-full",
+        animations: "duration-300",
+        boundaries: state[0].includes(key)
+            ? "bg-green-dark text-white"
+            : "border border-gray-medium",
+    });
+    const [step, node] = process || [false, null];
+    const leaveTransition = useTransition(step, {
+        from: { x: 0 },
+        leave: { x: -600 },
+    });
+    const enterTransition = useTransition(step, {
+        from: { x: 400 },
+        enter: { x: 0 },
+    });
+    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex", children: [leaveTransition((styles, item) => !item && (_jsx(animated.div, { style: styles, className: "w-full grid grid-cols-4 gap-2.5 mt-4.75", children: tags.map(([key, value]) => (_jsx("button", { onClick: () => selectHow === "one"
+                            ? selectOne({ state, key })
+                            : selectPlural({ state, key }), className: cn(button(key)), children: value }, key))) }))), process &&
+                    enterTransition((styles, item) => item && (_jsx(animated.div, { style: styles, className: "absolute mt-4.75", children: node })))] }) }));
+}

package/modal/template/Postcode.d.ts

@@ -0,0 +1,2 @@
+import { DaumPostcodeModalProps } from "../../interface/Modal";
+export default function PostcodeModal({ state, showAction, }: DaumPostcodeModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Postcode.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DaumPostcodeEmbed from "react-daum-postcode";
+import ModalDesign from "../design/Modal.design";
+import { useActionStore } from "../../store";
+export default function PostcodeModal({ state, showAction, }) {
+    const { removeModal } = useActionStore();
+    const [value, setValue] = state;
+    const handler = (data) => {
+        setValue({
+            address: data.address,
+            zipcode: data.zonecode,
+        });
+        return showAction?.event && removeModal(showAction.event);
+    };
+    return (_jsx(ModalDesign, { titles: {
+            title: "주소를 검색하고 선택해주세요",
+            subtitle: "주소를 검색하고 선택해주세요",
+        }, showAction: showAction, options: {
+            width: "lg",
+            height: "xl",
+        }, children: _jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -18,6 +18,7 @@
     "date-fns-tz": "^2.0.1",
     "react": "^18.2.0",
     "react-datepicker": "^6.4.0",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-lottie-player": "^1.5.6",

package/tailwind.config.ts

@@ -250,6 +250,7 @@ export default {
         146: "36.5rem",
         147: "36.75rem",
         148: "37rem",
+        150: "37.5rem",
         151.5: "37.875rem",
         151.75: "37.9375rem",
         152: "38rem",

package/version.txt

@@ -1 +1 @@
-1.0.51
+1.0.52

package/widget/template/Select/Select.LG.d.ts

@@ -0,0 +1,2 @@
+import { HTMLSelectElement } from "../../../interface";
+export default function SelectLG<T>({ state }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useActionStore } from "../../../store";
+import { useFlag } from "../../../hook";
+0;
+const widthSize = {
+    xs: "w-10",
+    sm: "w-22.5",
+    md: "w-40",
+    lg: "w-50",
+};
+const heightSize = {
+    xs: "h-6.5",
+};
+// selectOptions,
+// placeholder,
+// options,
+export default function SelectLG({ state }) {
+    const id = useId();
+    const { setIsOwn, setIsOwnId } = useActionStore();
+    const [value, setValue] = state;
+    const [text, setText] = useState("");
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [isHover, setIsHover] = useState(false);
+    const [filteredOptions, setFilterdOptions] = useState([]);
+    const [index, setIndex] = useState();
+    useFlag({ state: [false, setIsOpen], safe: "overlay" });
+    const onKeyDown = (e) => {
+        if (!filteredOptions)
+            return;
+        if (typeof index === "undefined")
+            return setIndex(0);
+        if (e.key === "Enter") {
+            setText(filteredOptions[index][1]);
+            return setValue(filteredOptions[index][0]);
+        }
+        if (e.key === "ArrowDown")
+            return setIndex((index + 1) % filteredOptions.length);
+        if (e.key === "ArrowUp")
+            return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+    };
+    return _jsx("select", { className: "w-64 h-32 border-2" });
+}

package/widget/template/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import { HTMLSelectElement } from "../../../interface";
+export default function Select<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/{design/Select.design.js → template/Select/Select.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
-import { cn } from "../../util";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../../util";
 import { useTransition, animated } from "react-spring";
-import { useActionStore } from "../../store";
-import { useFlag } from "../../hook";
+import { useActionStore } from "../../../store";
+import { useFlag } from "../../../hook";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -13,7 +13,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
+export default function Select({ state, selectOptions, placeholder, options, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -41,6 +41,14 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     useEffect(() => {
         setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
     }, [search, selectOptions]);
+    // scrollIntoView
+    const listRef = useRef(null);
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        if (typeof index === "number" && itemRefs.current[index]) {
+            itemRefs.current[index]?.scrollIntoView({ block: "nearest" });
+        }
+    }, [index]);
     const isLong = selectOptions && selectOptions.length >= 4;
     const container = {
         positions: "relative ",
@@ -101,7 +109,7 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     });
     return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
-                return (item && (_jsx(animated.div, { style: styles, className: cn(body), children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { onClick: () => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
                                 setText(text);
                                 return setIsOpen(false);

package/widget/template/Select/index.d.ts

@@ -0,0 +1,6 @@
+import _Select from "./Select";
+import LG from "./Select.LG";
+declare const Select: typeof _Select & {
+    LG: typeof LG;
+};
+export default Select;

package/widget/template/Select/index.js

@@ -0,0 +1,4 @@
+import _Select from "./Select";
+import LG from "./Select.LG";
+const Select = Object.assign(_Select, { LG });
+export default Select;

package/modal/template/ConfirmModal/Tag.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ConfirmModal from "../../design/ConfirmModal.design";
-import { cn } from "../../../util";
-import { selectOne, selectPlural } from "../../../util/select";
-export default function Tag(props) {
-    const { state, tags, options } = props.tag;
-    const { selectHow } = options || { selectHow: "plural" };
-    const button = (key) => ({
-        sizes: "h-10",
-        styles: "rounded-full",
-        animations: "duration-300",
-        boundaries: state[0].includes(key)
-            ? "bg-green-dark text-white"
-            : "border border-gray-medium",
-    });
-    return (_jsx(ConfirmModal, { ...props, children: _jsx("div", { className: "grid grid-cols-4 gap-2.5 mt-4.75", children: tags.map(([key, value]) => (_jsx("button", { onClick: () => selectHow === "one"
-                    ? selectOne({ state, key })
-                    : selectPlural({ state, key }), className: cn(button(key)), children: value }, key))) }) }));
-}

package/widget/design/Select.design.d.ts

@@ -1,2 +0,0 @@
-import { HTMLSelectElement } from "../../interface";
-export default function SelectDesign<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select.d.ts

@@ -1,3 +0,0 @@
-import { HTMLSelectElement } from "../../interface";
-declare function Select<T>(props: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
-export default Select;

package/widget/template/Select.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import SelectDesign from "../design/Select.design";
-function Select(props) {
-    return _jsx(SelectDesign, { ...props });
-}
-export default Select;