@edu-tosel/design 1.0.111 → 1.0.112

package/card/design/RollCard.design.js

@@ -5,6 +5,7 @@ import { Action, Shelf } from "../../layout";
 import Card from "./Card.design";
 import { useEffect, useState } from "react";
 import { cn } from "../../util";
+import useMobile from "../../hook/useMobile";
 export default function RollCardDesign({ titles, state, disabled, isFixed, children, }) {
     const [isOpen, setIsOpen] = state;
     const [isDisabled, disabledFn] = disabled || [false, () => { }];
@@ -22,12 +23,13 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
         sizes: "h-full",
         styles: isFixed && "hidden",
     };
+    const isMobile = useMobile();
     return (_jsxs(Card, { option: {
             width: "2xl",
-            height: !isFixed && isOpen ? "2xs" : "4xs",
+            height: !isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
             background: isDisabled || 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: !isDisabled
+        }, children: [_jsxs("div", { className: "flex flex-col gap-y-3.5 sm:flex-row justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs("div", { className: "flex 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 justify-between sm:justify-start gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled
                                     ? isFixed
                                         ? flag
                                             ? "추가됨"

package/hook/useMobile.d.ts

@@ -0,0 +1,2 @@
+declare const useMobile: () => boolean;
+export default useMobile;

package/hook/useMobile.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+const useMobile = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(max-width: 768px)");
+        setIsMobile(mediaQuery.matches);
+        const handleResize = () => {
+            setIsMobile(mediaQuery.matches);
+        };
+        mediaQuery.addEventListener("change", handleResize);
+        return () => {
+            mediaQuery.removeEventListener("change", handleResize);
+        };
+    }, []);
+    return isMobile;
+};
+export default useMobile;

package/layout/template/Tab.js

@@ -17,8 +17,8 @@ export default function Tab({ tabs, option, state, }) {
     const container = {
         className,
         positions: "absolute",
-        displays: "hidden xl:flex xl:items-center xl:gap-2.5",
-        sizes: "w-auto",
+        displays: "hidden sm:flex xl:items-center xl:gap-2.5",
+        sizes: "w-auto ",
         paddings: "p-2.5",
         backgrounds: boundary ?? "bg-gray-light",
         styles: "rounded-xl ",

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

@@ -13,11 +13,11 @@ export default function Header({ logo, rightButton, contents, }) {
         boundaries: "md:px-12",
     };
     const buttonBox = {
-        fonts: "text-[11px] md:text-[16px] leading-tight",
+        fonts: "text-[9px] xs:text-[10px] sm:text-[11px] md:text-[16px] leading-tight",
         texts: "text-gray-dark",
-        boundaries: "px-2.5",
+        boundaries: "px-0.5 md:px-2.5",
     };
-    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: {
+    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-7.5 md: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/modal/design/ConfirmModal.design.js

@@ -7,8 +7,8 @@ export default function ConfirmModalDesign({ titles, showAction, buttons, childr
         displays: "flex flex-col",
     };
     const buttonBox = {
-        positions: "absolute bottom-5 left-5",
-        displays: "flex gap-2.5",
+        positions: "absolute bottom-4 md:bottom-5 left-2 md:left-5",
+        displays: "flex gap-1 md:gap-2.5",
     };
     return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: option, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                             ...option,

package/modal/design/Modal.design.js

@@ -10,7 +10,7 @@ import { LineBreaks } from "./../../text/LineBreaks";
 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",
+    md: "w-104.5 sm:w-112.5",
     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",
@@ -59,7 +59,7 @@ function ModalDesign({ titles, showAction, children, option, debug, }) {
     const { width, height, noClose, boundary, position } = option ?? {};
     const { event } = showAction ?? {};
     const container = {
-        paddings: "p-5",
+        paddings: "p-5 md:p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
         shadows: !!position && (boundary ?? "box-shadow"),
@@ -69,5 +69,5 @@ function ModalDesign({ titles, showAction, children, option, debug, }) {
         displays: "flex flex-col items-end",
         sizes: "w-full min-h-[83px]",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-1 left-1" }))] }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -229,6 +229,7 @@ export default {
         100: "25rem",
         102.5: "25.625rem",
         104: "26rem",
+        104.5: "26.125rem",
         106: "26.5rem",
         108: "27rem",
         110: "27.5rem",

package/version.txt

@@ -1 +1 @@
-1.0.111
+1.0.112

package/widget/index.d.ts

@@ -9,3 +9,4 @@ export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
 export { default as Obstacle } from "./template/Obstacle";
+export { default as Pagination } from "./template/Pagination";

package/widget/index.js

@@ -9,3 +9,4 @@ export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
 export { default as Obstacle } from "./template/Obstacle";
+export { default as Pagination } from "./template/Pagination";

package/widget/template/Pagination.js

@@ -4,18 +4,16 @@ import SVG from "../../asset/SVG";
 export default function Pagination({ state, selectOptions, }) {
     const [value, setValue] = state;
     const container = {
-        displays: "flex items-center justify-between",
-        sizes: "w-23.5 h-6.25",
-        backgrounds: "bg-gray-dark",
-        boundaries: "rounded-full px-2.5",
-        fonts: "text-xs",
+        displays: "flex justify-between items-center",
+        sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
+        paddings: "px-1.5 ml-7.5",
     };
     const index = selectOptions.indexOf(value);
-    return (_jsxs("div", { className: cn(container), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("button", { onClick: () => {
                     if (index > 0)
                         setValue(selectOptions[index - 1]);
-                } }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [index + 1, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), selectOptions.length] }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => {
+                }, className: "w-7.5 h-7.5 flex justify-center items-center ", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [index + 1, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), selectOptions.length] }), _jsx("button", { onClick: () => {
                     if (index < selectOptions.length - 1)
                         setValue(selectOptions[index + 1]);
-                } })] }));
+                }, className: "w-7.5 h-7.5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }));
 }