@edu-tosel/design 1.0.324 → 1.0.326

package/layout/template/home/Shortcut.js

@@ -1,19 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toSelectOption } from "../../../interface";
 import { cn } from "../../../util";
 import { useResponsive } from "../../../hook";
+import { useState } from "react";
 export default function ShortcutBanner({ shortcuts, }) {
     const isXS = useResponsive("xs");
+    const [isExpanded, setIsExpanded] = useState(false);
     const container = {
         displays: "flex flex-col justify-start justify-start xs:justify-center xs:items-center",
         spacings: "pt-10 pb-15",
     };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "w-full flex justify-center items-center mb-5", children: _jsx(ModeToggle, { state: [isExpanded, setIsExpanded], selectOptions: [
+                        [true, "스크롤"],
+                        [false, "그리드"],
+                    ] }) }), !isExpanded ? (_jsx(ScrollMode, { shortcuts: shortcuts })) : (_jsx(GridMode, { shortcuts: shortcuts }))] }));
+}
+function ScrollMode({ shortcuts, }) {
     const scrollWrapper = {
         displays: "flex justify-start items-center overflow-x-scroll scrollbar-hidden",
         sizes: "w-full h-fit",
-        spacings: "px-5 pb-5",
+        spacings: "px-5 pb-10",
         graphics: "antialiased",
         boundaries: "border-b-1 border-gray-200",
     };
+    const buttonWrapper = {
+        displays: "flex justify-center items-center",
+        sizes: "min-w-fit h-fit",
+        spacings: "gap-x-4 xs:gap-x-10 mx-auto py-2 px-0 xs:px-5 md:pl-18",
+    };
     const headerButton = {
         displays: "flex flex-col justify-center items-center",
         sizes: "h-fit w-fit shrink-0",
@@ -21,11 +35,41 @@ export default function ShortcutBanner({ shortcuts, }) {
         backgrounds: "bg-gray-50",
         textStyles: "font-bold text-gray-600",
     };
-    const buttonWrapper = {
+    const buttonSet = {
+        displays: "group flex flex-col justify-center items-center",
+        sizes: "w-16",
+        spacings: "gap-2",
+    };
+    const tagBox = {
         displays: "flex justify-center items-center",
-        sizes: "min-w-fit h-fit",
-        spacings: "gap-x-4 xs:gap-x-10 mx-auto py-2",
-        graphics: "antialiased",
+        sizes: "w-full h-6.25 ",
+        fonts: "text-xs md:text-sm font-pretendard-var font-medium text-gray-dark group-hover:text-green-dark",
+        animation: "duration-100",
+    };
+    const iconContainer = {
+        sizes: "size-14 xs:size-16 rounded-lg overflow-hidden",
+        shadows: "shadow-none",
+        animation: "duration-100",
+        hoveraction: "group-hover:shadow-icon-hover group-hover:scale-103",
+    };
+    return (_jsx("div", { className: cn(scrollWrapper), children: _jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: cn(headerButton), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { "fill-rule": "evenodd", d: "M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z", "clip-rule": "evenodd" }) }) }), _jsx("div", { className: "font-bold text-sm xs:text-base", children: "\uBE60\uB978 \uBA54\uB274" })] }), shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title)))] }) }));
+}
+function GridMode({ shortcuts, }) {
+    const container = {
+        displays: "flex flex-col justify-center items-center",
+        spacings: "gap-y-10 mt-5",
+        sizes: "w-full h-fit",
+    };
+    const gridWrapper = {
+        displays: "grid grid-cols-3 xxxs:grid-cols-4 justify-items-center",
+        sizes: "w-full max-w-140",
+        spacings: "gap-y-5",
+    };
+    const titleBox = {
+        displays: "flex flex-row gap-2",
+        spacings: "px-5 py-2 rounded-lg",
+        textStyles: "font-bold text-base text-gray-700",
+        backgrounds: "bg-gray-100",
     };
     const buttonSet = {
         displays: "group flex flex-col justify-center items-center",
@@ -44,5 +88,46 @@ export default function ShortcutBanner({ shortcuts, }) {
         animation: "duration-100",
         hoveraction: "group-hover:shadow-icon-hover group-hover:scale-103",
     };
-    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(scrollWrapper), children: _jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: cn(headerButton), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z" }) }) }), _jsx("div", { className: "font-bold text-sm xs:text-base", children: "\uBE60\uB978 \uBA54\uB274" })] }), shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title)))] }) }) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(gridWrapper), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }) }));
+}
+function ModeToggle({ state, selectOptions: selectOptionsInput, option, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
+    const [value, setValue] = state;
+    const isOff = value === selectOptions[0].value;
+    const toggle = () => {
+        if (state[0] === selectOptions[0].value)
+            return setValue(selectOptions[1].value);
+        return setValue(selectOptions[0].value);
+    };
+    const container = {
+        displays: "relative flex flex-row",
+        spacings: "p-1",
+        sizes: "rounded-full w-fit",
+        backgrounds: "bg-gray-100",
+        textStyles: "text-sm font-medium",
+    };
+    const activeButton = {
+        displays: "flex flex-row gap-1 justify-center items-center z-10",
+        sizes: "w-24",
+        spacings: "rounded-full py-1",
+        textStyles: "text-green-dark font-bold leading-none",
+        scale: "scale-110",
+        duration: "duration-300",
+    };
+    const inactiveButton = {
+        displays: "flex flex-row gap-1 justify-center items-center z-10",
+        sizes: "w-24",
+        spacings: "rounded-full py-1",
+        textStyles: "text-gray-500 font-medium leading-none",
+        duration: "duration-300",
+    };
+    const clearKnob = {
+        displays: "absolute",
+        locations: !isOff ? "left-1" : "left-[calc(100%-6.25rem)]",
+        sizes: "h-[calc(100%-8px)] w-24 z-1",
+        backgrounds: "bg-white/30 shadow-main",
+        boundaries: "rounded-full",
+        animations: "duration-200",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(clearKnob) }), _jsxs("button", { onClick: toggle, className: cn(selectOptions[1].value === value ? activeButton : inactiveButton), children: [selectOptions[0].title, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: _jsx("path", { "fill-rule": "evenodd", d: "M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z", "clip-rule": "evenodd" }) })] }), _jsxs("button", { onClick: toggle, className: cn(selectOptions[0].value === value ? activeButton : inactiveButton), children: [selectOptions[1].title, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: _jsx("path", { "fill-rule": "evenodd", d: "M3 6a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3V6ZM3 15.75a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2.25Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3v-2.25Z", "clip-rule": "evenodd" }) })] })] }));
 }

package/layout/template/sign/AgreementsSet.d.ts

@@ -0,0 +1,5 @@
+interface AgreementsSetProps {
+    onRequiredAgreementsChange?: (isAllRequiredAgreed: boolean) => void;
+}
+export default function AgreementsSet({ onRequiredAgreementsChange, }: AgreementsSetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/sign/AgreementsSet.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ConsentBox } from "./Check";
+import { cn } from "../../../util";
+export default function AgreementsSet({ onRequiredAgreementsChange, }) {
+    const [errorMessage, setErrorMessage] = useState("");
+    const [agreements, setAgreements] = useState({
+        terms: false,
+        privacy: false,
+        marketing: false,
+    });
+    const allAgreed = Object.values(agreements).every(Boolean);
+    const requiredAgreed = agreements.terms && agreements.privacy;
+    const agreeAll = () => {
+        setAgreements((prev) => ({
+            ...prev,
+            terms: true,
+            privacy: true,
+            marketing: true,
+        }));
+        if (errorMessage) {
+            setErrorMessage("");
+        }
+    };
+    const handleAgreementChange = (key) => {
+        setAgreements((prev) => ({
+            ...prev,
+            [key]: !prev[key],
+        }));
+        // 동의 상태가 변경되면 에러 메시지 초기화
+        if (errorMessage) {
+            setErrorMessage("");
+        }
+    };
+    // 필수 약관 동의 상태가 변경될 때마다 부모 컴포넌트에 알림
+    useEffect(() => {
+        if (onRequiredAgreementsChange) {
+            onRequiredAgreementsChange(requiredAgreed);
+        }
+    }, [requiredAgreed, onRequiredAgreementsChange]);
+    const buttonWrapper = {
+        displays: "flex flex-row justify-between items-start",
+        sizes: "w-full h-fit rounded-lg",
+        spacings: "p-5 gap-5",
+        textStyles: "text-sm font-regular",
+        boundaries: "border-1 border-green-dark/50",
+        backgrounds: "bg-green-light/50",
+        other: "font-pretendard-var",
+    };
+    const buttonStyles = {
+        displays: "flex justify-center items-center shrink-0",
+        spacings: "px-4 py-2 rounded-md",
+        animations: "transition-all duration-300",
+        textStyles: "text-xs text-white font-regular",
+        backgrounds: "bg-green-dark hover:shadow-green",
+        activeStyles: allAgreed ? "opacity-0 pointer-events-none" : "opacity-100",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4 h-full w-full", children: [!allAgreed && (_jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: "flex flex-col text-gray-500 ", children: [_jsx("div", { className: "text-green-dark font-bold", children: "\uBC84\uD2BC\uC744 \uB20C\uB7EC \uD55C\uBC88\uC5D0 \uB3D9\uC758\uD560 \uC218 \uC788\uC5B4\uC694" }), _jsx("div", { className: "text-xs text-green-dark font-medium", children: "\uAC1C\uC778\uC815\uBCF4 \uC218\uC9D1 \uBC0F \uC774\uC6A9, \uB300\uD654 \uAD00\uB9AC \uADDC\uC815, \uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC\uADDC\uC815, \uD654\uBA74 \uB179\uD654\uC5D0 \uB300\uD55C \uC0AC\uC2E4\uC744 \uD655\uC778 \uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4." })] }), _jsx("button", { onClick: agreeAll, className: cn(buttonStyles), children: "\uD55C \uBC88\uC5D0 \uB3D9\uC758\uD558\uAE30" })] })), _jsx(ConsentBox, { title: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uB300\uD68C \uAD00\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.terms, onChange: () => handleAgreementChange("terms") }), _jsx(ConsentBox, { title: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815 \uD655\uC778 \uBC0F \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704\uC790 \uCC98\uB9AC \uADDC\uC815\uC744 \uC774\uD574\uD588\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.privacy, onChange: () => handleAgreementChange("privacy") }), _jsx(ConsentBox, { title: "\uD654\uBA74 \uB179\uD654 \uB3D9\uC758", description: "\uBD80\uC815\uD589\uC704 \uBC29\uC9C0\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uB179\uD654\uD558\uB294 \uAC83\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4.", isChecked: agreements.marketing, onChange: () => handleAgreementChange("marketing") })] }));
+}

package/layout/template/sign/Button.js

@@ -4,10 +4,13 @@ function Button({ title, onClick, disabled, size, icon, bg }) {
     const container = {
         sizes: size ?? "w-112.5 h-13.5",
         displays: "flex items-center justify-center gap-4",
-        backgrounds: !disabled ? bg ?? "bg-green-dark" : "bg-gray-medium",
-        cursors: !disabled ? "cursor-pointer" : "cursor-default",
-        styles: "rounded-lgx text-white font-medium text-lg",
-        animations: "hover:shadow-green duration-300",
+        backgrounds: !disabled ? bg ?? "bg-green-dark" : "bg-gray-100",
+        cursors: !disabled
+            ? "cursor-pointer hover:shadow-green "
+            : "cursor-not-allowed",
+        styles: "rounded-lgx font-medium text-lg",
+        textColors: !disabled ? "text-white" : "text-gray-400",
+        animations: "duration-300",
     };
     return (_jsxs("div", { onClick: () => {
             if (disabled)

package/layout/template/sign/Check.d.ts

@@ -7,9 +7,18 @@ interface CheckProps {
 declare function Check({ state, sizes, element }: CheckProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Check {
     var Box: typeof CheckWithBox;
+    var ConsentBox: typeof import("./Check").ConsentBox;
 }
 declare function CheckWithBox({ state, element, }: {
     state: State<boolean>;
     element?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export default Check;
+interface ConsentBoxProps {
+    title: string;
+    description: string;
+    isChecked: boolean;
+    onChange: (isChecked: boolean) => void;
+    children?: React.ReactNode;
+}
+export declare function ConsentBox({ title, description, isChecked, onChange, children, }: ConsentBoxProps): import("react/jsx-runtime").JSX.Element;

package/layout/template/sign/Check.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
+import { useEffect, useState } from "react";
+import CustomCheck from "./CustomCheck";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 function Check({ state, sizes, element }) {
     const [value, setValue] = state;
     const container = {
@@ -11,6 +14,7 @@ function Check({ state, sizes, element }) {
         sizes: "w-6 h-6 ",
         styles: "border-gray-light border-1 rounded-md",
         backgrounds: value ? "bg-green-dark" : "bg-white",
+        animations: "hover:border-green-dark duration-300",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("button", { onClick: () => setValue(!value), className: cn(checkbox), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "11", viewBox: "0 0 12 11", fill: "none", children: _jsx("path", { d: "M1 6.14286L4.75 10L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { children: element })] }));
 }
@@ -19,8 +23,70 @@ function CheckWithBox({ state, element, }) {
         displays: "flex items-center",
         sizes: "w-112.5 h-15 pl-5",
         styles: "box-shadow rounded-lgx",
+        cursor: "cursor-pointer",
     };
-    return (_jsx("div", { className: cn(container), children: _jsx(Check, { state: state, sizes: "h-6", element: element }) }));
+    return (_jsx("label", { className: cn(container), children: _jsx(Check, { state: state, sizes: "h-6", element: element }) }));
 }
 Check.Box = CheckWithBox;
+Check.ConsentBox = ConsentBox;
 export default Check;
+export function ConsentBox({ title, description, isChecked, onChange, children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (isChecked) {
+            setIsOpen(false);
+        }
+    }, [isChecked]);
+    const handleCheckboxChange = () => {
+        onChange(!isChecked);
+        if (!isChecked)
+            setIsOpen(false);
+    };
+    const styles = {
+        container: {
+            displays: "relative flex flex-col",
+            sizes: "h-fit w-full",
+            animations: "transition-all duration-300",
+            grouping: "group",
+        },
+        label: {
+            displays: "flex shrink-0 items-start cursor-pointer relative",
+            backgrounds: "group-hover:bg-green-light/50",
+            spacings: "p-4 gap-3",
+            sizes: "rounded-lg h-fit",
+            animations: "transition-all duration-300",
+            activeStyles: isChecked ? "bg-green-light/50" : "bg-gray-50",
+        },
+        input: {
+            reset: "appearance-none",
+            displays: "flex items-center justify-center relative",
+            sizes: "size-5 shrink-0",
+            boundaries: "border-1 border-gray-100 rounded-md ml-0",
+            backgrounds: "checked:bg-green-dark bg-white hover:border-green-dark",
+            animations: "transition-all duration-300",
+        },
+        titleText: {
+            displays: "font-medium text-gray-700",
+        },
+        descriptionText: {
+            displays: "text-sm text-gray-500",
+        },
+        openButton: {
+            displays: "absolute top-8 right-5 pointer-events-auto",
+            animations: "transition-all duration-300 group-hover:bg-blue-100",
+            sizes: "h-fit w-fit rounded-full",
+            spacings: "p-1",
+            activeStyles: isChecked ? "bg-green-light" : "bg-gray-100",
+        },
+        conditionsWrapper: {
+            displays: "flex flex-col gap-5 bg-white overflow-hidden px-5",
+            activeStyles: isOpen ? "opacity-100 py-5" : "max-h-0 opacity-0 py-0",
+            animations: "transition-all duration-300 ease-in-out",
+        },
+    };
+    // 동의 확인 섹션 컴포넌트
+    const ConsentConfirmation = ({ isChecked }) => (_jsx("div", { className: "flex flex-row justify-end items-center", children: _jsxs("label", { className: cn("w-fit h-fit py-2 px-4 flex flex-row gap-2 justify-center items-center  rounded-md cursor-pointer hover:bg-green-light/50 hover:text-green-dark text-sm transition-all duration-300", isChecked ? "bg-green-light/50 text-green-dark" : "bg-gray-100 "), children: [_jsx("div", { children: "\uC704 \uB0B4\uC6A9\uC744 \uBAA8\uB450 \uD655\uC778 \uD558\uC600\uC73C\uBA70, \uC774\uC5D0 \uB3D9\uC758\uD569\uB2C8\uB2E4." }), _jsx("div", { className: "relative w-fit h-fit", children: _jsx(CustomCheck, { isChecked: isChecked, onChange: handleCheckboxChange, className: cn(styles.input) }) })] }) }));
+    // 토글 버튼 컴포넌트
+    const ToggleButton = () => (_jsx("div", { onClick: () => setIsOpen(!isOpen), className: cn(styles.openButton), children: isOpen ? (_jsx(ChevronUpIcon, { className: "size-4" })) : (_jsx(ChevronDownIcon, { className: "size-4" })) }));
+    return (_jsxs("div", { className: cn(styles.container), children: [_jsxs("label", { className: cn(styles.label), children: [_jsx(CustomCheck, { isChecked: isChecked, onChange: handleCheckboxChange, className: cn(styles.input) }), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsx("div", { className: cn(styles.titleText), children: title }), _jsx("div", { className: cn(styles.descriptionText), children: description })] })] }), children && (_jsxs("div", { className: cn(styles.conditionsWrapper), children: [children, _jsx(ConsentConfirmation, { isChecked: isChecked })] })), children && _jsx(ToggleButton, {})] }));
+}

package/layout/template/sign/CustomCheck.d.ts

@@ -0,0 +1,5 @@
+export default function DefaultCheckBox({ isChecked, onChange, className, }: {
+    isChecked: boolean;
+    onChange: () => void;
+    className: string;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/sign/CustomCheck.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@heroicons/react/24/solid";
+export default function DefaultCheckBox({ isChecked, onChange, className, }) {
+    return (_jsxs("div", { className: "relative w-fit h-fit", children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, className: className }), isChecked && (_jsx("div", { className: "absolute top-1 left-1 size-5 pointer-events-none", children: _jsx(CheckIcon, { className: "size-3 text-white" }) })), _jsx(CheckIcon, { className: "size-3 text-white absolute top-1 left-1" })] }));
+}

package/layout/template/sign/Layout.js

@@ -3,21 +3,21 @@ import { cn } from "../../../util";
 export default function Layout({ children, steps, script, title, }) {
     const container = {
         positions: "relative",
-        sizes: "w-full min-h-screen h-screen md:h-fit overflow-hidden",
-        displays: "flex flex-col items-center md:justify-center",
-        spacings: "px-3 xs:px-5 py-3 xs:py-5 md:py-0",
-        other: "bg-gray-50",
+        sizes: "w-full min-h-screen h-screen",
+        displays: "flex flex-col items-center",
+        spacings: "px-3 xs:px-5 py-3 xs:py-5",
+        other: "bg-white",
     };
     const headerBox = {
         display: "flex flex-row justify-between items-center",
-        sizes: "h-15 shrink-0 w-full md:w-112.5",
+        sizes: "h-15 shrink-0 w-full sm:max-w-140",
         spacings: "px-5 mb-5",
         backgorunds: "bg-gradient-to-r from-green-dark to-crimson-burgundy rounded-lg",
     };
     const titleText = {
         textStyles: "font-bold text-base text-white",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "/images/logos/tosel-white-highdefinition.png", width: 93, height: 20, alt: "\uD1A0\uC140\uC758 \uBA54\uC778 \uB85C\uACE0" }), _jsx("div", { className: cn(titleText), children: title })] }), script && _jsx("div", { className: "font-medium text-sm", children: script }), steps && (_jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) })), children] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "/images/logos/tosel-white-highdefinition.png", width: 93, height: 20, alt: "\uD1A0\uC140\uC758 \uBA54\uC778 \uB85C\uACE0" }), _jsx("div", { className: cn(titleText), children: title })] }), script && _jsx("div", { className: "font-medium text-sm", children: script }), steps && (_jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) })), _jsx("div", { className: "flex flex-col h-full w-full justify-start items-center max-w-140", children: children })] }));
 }
 function Light({ flag }) {
     const container = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.324",
+  "version": "1.0.326",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -17,6 +17,7 @@
     "@edu-tosel/interface": "https://resource.tosel.co.kr/packages/interface/1.0.59",
     "@edu-tosel/utils": "^0.0.30",
     "@gsap/react": "^2.1.1",
+    "@heroicons/react": "^2.2.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.12",

package/version.txt

@@ -1 +1 @@
-1.0.324
+1.0.326