@edu-tosel/design 1.0.108 → 1.0.110

package/card/design/NavCard.design.js

@@ -27,6 +27,7 @@ export default function NavCardDesign({ titles, option }) {
         default: "absolute",
         positions: image?.position ?? "bottom-0 right-0",
         sizes: image?.size,
+        className: image?.className,
     };
     return (_jsxs(Card, { option: option, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, option: {
                     className: "absolute bottom-7.5 left-7.5",

package/card/template/NavCard.js

@@ -5,6 +5,10 @@ function Banner({ titles, option }) {
             ...option,
             width: option?.width ?? "xl",
             height: option?.height ?? "sm",
+            image: option?.image && {
+                ...option?.image,
+                className: "hidden md:block",
+            },
         } }));
 }
 function _Button({ titles, onClick, option }) {

package/card/template/ProgressCard/Large.js

@@ -18,7 +18,7 @@ const text = {
 export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
-        displays: "flex",
+        displays: "hidden lg:flex",
         sizes: "w-150 h-19",
     };
     const stepBox = (flag) => ({
@@ -29,7 +29,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
         texts: flag ? "text-gray-dark" : "text-gray-medium",
     });
     const titleBox = {
-        positions: "absolute top-12 right-12",
+        positions: "absolute top-7.5 md:top-12 right-4 md:right-12",
         displays: "flex flex-col items-end gap-y-3",
     };
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);

package/interface/Card.d.ts

@@ -70,6 +70,7 @@ interface NavCardImage {
     path: string;
     size?: string;
     position?: string;
+    className?: string;
 }
 export interface NavCardProps extends Omit<CardProps, "children"> {
     titles: Titles;

package/layout/design/Shelf.design.js

@@ -7,7 +7,7 @@ export default function Shelf({ children, className, option, titles, debug, }) {
     const container = {
         displays: "flex flex-col gap-6",
         sizes: isSize && "w-full h-full lg:h-auto",
-        debug: debug && isDebug(`border-2  border-${debug}`),
+        debug: debug && isDebug(`border-2  ${debug}`),
     };
     const titleBox = {
         container: "flex flex-col h-6 leading-none",

package/layout/template/Shelf.js

@@ -17,7 +17,7 @@ function Shelf({ titles, debug, children }) {
 }
 function Wrap({ className, titles, children, debug, option, }) {
     const container = {
-        displays: "flex flex-row flex-wrap",
+        displays: "flex flex-col lg:flex-row flex-wrap",
         gaps: gap[option?.gap ?? "xy"],
         className,
     };
@@ -39,7 +39,7 @@ function Row({ titles, children, className, debug, }) {
 }
 function Col({ titles, children, debug, className, }) {
     const container = {
-        displays: "flex flex-col flex-wrap",
+        displays: "flex flex-col lg:flex-wrap",
         className: className ?? "gap-y-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {

package/layout/template/dashboard/Header.js

@@ -19,20 +19,16 @@ export function Header({ title, logo, notification, menu, option, }) {
         styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Action.Show, { actions: [
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsx(Action.Show, { actions: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
                         [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
-                    ], children: [_jsx(SVG.Notification, { flag: flag, onClick: () => {
-                                setIsOwn(true);
-                                onClick && onClick();
-                                return setView("notification");
-                            }, color: iconColor }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
-                                setIsOwn(true);
-                                return setView("menu");
-                            }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
-                                width: "sm",
-                                height: "xs",
-                                background: gradient.bg.greenToRed,
-                                text: "text-white",
-                            } }))] }) })] }));
+                    ], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
+                            setIsOwn(true);
+                            return setView("menu");
+                        }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
+                            width: "sm",
+                            height: "xs",
+                            background: gradient.bg.greenToRed,
+                            text: "text-white",
+                        } })) }) })] }));
 }

package/layout/template/dashboard/Navigation.js

@@ -3,7 +3,7 @@ import { cn } from "../../../util";
 function Container({ children }) {
     const container = {
         positions: "fixed xl:static bottom-0 left-0 z-40",
-        displays: "hidden lg:flex flex-row xl:flex-col",
+        displays: "flex flex-row xl:flex-col",
         sizes: "w-full xl:w-auto",
     };
     return (_jsxs("div", { className: cn(container), children: [children, _jsx(Copyright, {})] }));

package/layout/template/home/layout/Carousel.js

@@ -37,7 +37,7 @@ export default function Carousel({ contents, }) {
         positions: "absolute bottom-0 left-0",
         displays: "flex justify-between items-center",
         sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
-        paddings: "px-1.5",
+        paddings: "px-1.5 ml-7.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0" }))] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col pl-7.5", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0 w-3/5 " }))] }) }));
 }

package/layout/template/home/layout/Footer.js

@@ -11,7 +11,7 @@ export default function Footer() {
         sizes: "w-full max-w-290",
         paddings: "py-8.5 px-7.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uB300\uD45C\uBC88\uD638 02-923-0505" }), _jsx("div", { children: "\uAC1C\uC778 \uBB38\uC758: tosel_cs@tosel.co.kr" }), _jsx("div", { children: "\uB2E8\uCCB4 \uBB38\uC758: tosel_academy@tosel.co.kr" }), _jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
 }
 const buttons = [
     {

package/layout/template/home/layout/Header.js

@@ -5,19 +5,19 @@ export default function Header({ logo, rightButton, contents, }) {
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full",
-        styles: "bg-white box-shadow",
+        styles: "bg-white box-shadow border-2 border-red-500",
     };
     const body = {
-        displays: "flex items-center justify-between",
+        displays: "flex items-center justify-center md:justify-between",
         className: "w-full max-w-[1200px] h-15",
-        boundaries: "px-12",
+        boundaries: "md:px-12",
     };
     const buttonBox = {
-        fonts: "text-[16px] leading-tight",
+        fonts: "text-[11px] md:text-[16px] leading-tight",
         texts: "text-gray-dark",
         boundaries: "px-2.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: "hidden md:block", onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
                                 width: "2xs",
                                 height: "4xs",
                                 background: gradient.bg.greenToRed,

package/layout/template/home/layout/index.js

@@ -6,7 +6,7 @@ export default function Layout({ contents, children, logo, rightButton, }) {
     const container = {
         displays: "flex flex-col",
         sizes: "w-full min-h-screen",
-        overflows: "overflow-x-hidden",
+        overflows: "overflow-x-hidden ",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), children, _jsx(Footer, {})] }));
 }

package/layout/template/sign/Box.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
 function Box({ sizes, children, className }) {
     const container = {
-        sizes: sizes ?? "w-112.5 p-5",
+        sizes: sizes ?? "w-112.5 p-5 ",
         style: "box-shadow bg-white rounded-xl",
         className,
     };
     return _jsx("div", { className: cn(container), children: children });
 }
 function Fix({ children, className }) {
-    return (_jsx(Box, { className: className, sizes: "w-112.5 h-67.5 pt-10.25 px-5 pb-5", children: children }));
+    return (_jsx(Box, { className: className, sizes: "w-full max-w-112.5 h-65 xs:h-67.5 pt-8 xs:pt-10.25 px-2.5 xs:px-5 pb-2.5 xs:pb-5", children: children }));
 }
 Box.Fix = Fix;
 export default Box;

package/layout/template/sign/Button.js

@@ -15,7 +15,7 @@ function Button({ title, onClick, disabled, size }) {
         }, className: cn(container), children: title }));
 }
 function Inner({ title, onClick }) {
-    return _jsx(Button, { title: title, onClick: onClick, size: "w-102.5 h-13.5" });
+    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5" }));
 }
 function Selection({ buttons, state }) {
     const [value, setValue] = state;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.108",
+  "version": "1.0.110",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -203,6 +203,7 @@ export default {
         57.5: "14.375rem",
         62: "15.5rem",
         64: "16rem",
+        65: "16.25rem",
         67.5: "16.875rem",
         68: "17rem",
         69: "17.25rem",

package/version.txt

@@ -1 +1 @@
-1.0.108
+1.0.110

package/widget/template/Input/Form.js

@@ -30,7 +30,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, bu
     };
     const inputBox = {
         styles: styleByFlag(),
-        sizes: "w-102.5 h-13.5",
+        sizes: "w-full sm:w-102.5 h-13.5",
         paddings: `${placeholder && "pt-3"} pl-5`,
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",