@edu-tosel/design 1.0.113 → 1.0.115

package/board/design/Board.design.js

@@ -43,8 +43,8 @@ export function Board({ children, action, option, debug, buttons, }) {
         positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx(Action.Show, { actions: shows, children: _jsx("div", { className: cn(body), children: children }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
-                        ...option,
                         text: "text-white",
                         background: "bg-crimson-burgundy",
+                        ...option,
                     } }))) })] }));
 }

package/interface/Modal.d.ts

@@ -22,7 +22,7 @@ interface ModalProps {
     debug?: string;
 }
 interface ConfirmModalProps<T = any> extends ModalProps {
-    buttons: [Button, Button];
+    buttons: [Button] | [Button, Button];
     widgets?: ConfirmModalWidget<T>[];
 }
 type ConfirmModalWidget<T = string> = ConfirmModalSelectSwitchProps<T> | ConfirmModalSelectHandleProps<T> | ConfirmModalSelectTagProps<T> | ConfirmModalPaginationProps<T> | ConfirmModalInputFormProps | ConfirmModalNodeProps;

package/interface/domain/Tag.d.ts

@@ -1,8 +1,3 @@
-type Tag = "NEW" | "REG";
-interface Styles {
-    title: string;
-    background: string;
-}
-declare const TagStyles: Record<Tag, Styles>;
+type Tag = "NEW" | "REG" | "RCU";
+export declare const tagString: Record<Tag, string>;
 export type { Tag };
-export { TagStyles };

package/interface/domain/Tag.js

@@ -1,11 +1,5 @@
-const TagStyles = {
-    NEW: {
-        title: "신규론칭",
-        background: "bg-blue-navy",
-    },
-    REG: {
-        title: "정기시험",
-        background: "bg-crimson-burgundy",
-    },
+export const tagString = {
+    NEW: "신규론칭",
+    REG: "정기시험",
+    RCU: "모집 중"
 };
-export { TagStyles };

package/interface/widget/Carousel.d.ts

@@ -1,11 +1,15 @@
 import { Titles } from "../Property";
 export type { CarouselContent };
+type Tag = "NEW" | "REG" | "RCU";
 interface Option {
     background: string;
     text: string;
 }
-interface CarouselContent<T> {
-    tag: T;
+interface CarouselContent {
+    tag: {
+        type: Tag;
+        background: string;
+    };
     titles: Titles;
     image?: string;
     option?: Partial<Option>;

package/layout/template/home/layout/Carousel.d.ts

@@ -1,5 +1,4 @@
 import { CarouselContent } from "../../../../interface";
-import { Tag } from "../../../../interface/domain";
 export default function Carousel({ contents, }: {
-    contents: CarouselContent<Tag>[];
+    contents: CarouselContent[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useTransition } from "react-spring";
 import { cn } from "../../../../util";
 import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
 import SVG from "../../../../asset/SVG";
-import { TagStyles } from "../../../../interface/domain";
+import { tagString } from "../../../../interface/domain";
 export default function Carousel({ contents, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);
-    // useEffect(() => {
-    //   if (flag) {
-    //     setIndex((index + 1) % contents.length);
-    //   }
-    // }, [flag]);
+    useEffect(() => {
+        // Automatically change index every 5 seconds
+        const interval = setInterval(() => {
+            setIndex((prevIndex) => (prevIndex + 1) % contents.length);
+        }, 5000);
+        return () => clearInterval(interval);
+    }, [contents.length]);
     const { tag, titles, image, option } = contents[index];
     const { text, background } = option ?? {};
     const container = {
@@ -29,15 +32,21 @@ export default function Carousel({ contents, }) {
     const tagBox = {
         displays: "flex justify-center items-center",
         sizes: "w-20 h-8",
-        background: TagStyles[tag].background,
+        background: tag.background,
         fonts: "text-white font-pretendard-bold text-lg leading-none",
         styles: "rounded-md",
     };
     const buttonBox = {
         positions: "absolute bottom-0 left-0",
-        displays: "flex justify-between items-center",
+        displays: "flex justify-center items-center gap-1",
         sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
         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 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 " }))] }) }));
+    const transitions = useTransition(!!image, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 200 },
+    });
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-72 h-50 flex flex-col pl-7.5", children: [_jsx("div", { className: `${cn(tagBox)} duration-1000 transition-all`, children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2 duration-200 transition-all", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5 duration-1000 transition-all", 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: "flex flex-row gap-2 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: 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 object-cover sm:h-full duration-2000 transition-all" }))] }) }));
 }

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

@@ -5,16 +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 ",
     };
     const body = {
         displays: "flex items-center justify-center md:justify-between",
         className: "w-full max-w-[1200px] h-15",
-        boundaries: "md:px-12",
+        boundaries: "md:px-12 py-2.5",
     };
     const buttonBox = {
         fonts: "text-[9px] xs:text-[10px] sm:text-[11px] md:text-[16px] leading-tight",
-        texts: "text-gray-dark",
+        texts: "text-gray-dark hover:text-black",
+        backgrounds: "hover:bg-[#F0F0F0]/50",
+        animations: "duration-300",
+        sizes: "h-10 rounded-md",
         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-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: {

package/modal/design/ConfirmModal.design.js

@@ -7,7 +7,7 @@ export default function ConfirmModalDesign({ titles, showAction, buttons, childr
         displays: "flex flex-col",
     };
     const buttonBox = {
-        positions: "absolute bottom-4 md:bottom-5 left-2 md:left-5",
+        positions: "absolute bottom-4 md:bottom-5 right-2 md:right-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: {

package/modal/design/Modal.design.js

@@ -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-1 left-1" }))] }));
+    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 " })] }), _jsx("div", { className: "overflow-hidden", children: children }), !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-2.5 left-2.5 md:top-5 md:left-5" }))] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.113
+1.0.115