@edu-tosel/design 1.0.115 → 1.0.117

package/layout/template/dashboard/mypage/Profile.d.ts

@@ -25,6 +25,6 @@ declare namespace Profile {
 interface Info {
     title: string | "email" | "phone";
     content: string;
-    button: ButtonProp;
+    button?: ButtonProp;
 }
 export default Profile;

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

@@ -39,13 +39,13 @@ function Detail({ titles, infos, toggle, }) {
             height: "xs",
             background: gradient.bg.greenToRedSoft,
             boundary: "",
-        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
+        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
                                 className: "ml-auto",
                                 background: gradient.bg.greenToRed,
                                 text: "text-white",
                                 width: "sm",
                                 height: "xs",
-                            } })] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
+                            } }))] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
 }
 function Preview({ image, username, email, }) {
     const container = {

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { useTransition } from "react-spring";
+import { useState } from "react";
 import { cn } from "../../../../util";
 import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
@@ -9,44 +8,34 @@ import { tagString } from "../../../../interface/domain";
 export default function Carousel({ contents, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);
-    useEffect(() => {
-        // Automatically change index every 5 seconds
-        const interval = setInterval(() => {
-            setIndex((prevIndex) => (prevIndex + 1) % contents.length);
-        }, 5000);
-        return () => clearInterval(interval);
-    }, [contents.length]);
+    // useEffect(() => {
+    //   if (flag) {
+    //     setIndex((index + 1) % contents.length);
+    //   }
+    // }, [flag]);
     const { tag, titles, image, option } = contents[index];
     const { text, background } = option ?? {};
     const container = {
         displays: "flex justify-center items-center",
-        sizes: "w-full h-100",
+        sizes: "w-full h-fit sm:h-80 ml:h-100",
         background,
     };
     const body = {
-        positions: "relative",
-        displays: "flex items-center",
+        displays: "flex flex-none items-center justify-center",
         sizes: "w-full max-w-256 h-full",
         text: text ?? "text-gray-dark",
     };
     const tagBox = {
         displays: "flex justify-center items-center",
-        sizes: "w-20 h-8",
+        sizes: "w-fit h-fit px-2 py-1 md:px-2.5 md:py-1.5",
         background: tag.background,
-        fonts: "text-white font-pretendard-bold text-lg leading-none",
+        fonts: "text-white font-pretendard-medium text-sm md:text-base leading-none",
         styles: "rounded-md",
     };
     const buttonBox = {
-        positions: "absolute bottom-0 left-0",
         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",
+        paddings: "px-1.5 mt-12",
     };
-    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" }))] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "w-72 h-50 flex flex-col flex-none pl-7.5", children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl mt-2 md:text-2xl", children: titles.title }), _jsx(LineBreaks, { className: "mt-6 text-sm md:text-base", 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, {}) })] })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx("img", { src: image, alt: "carousel-image", className: "object-cover h-full" })) })] }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.115
+1.0.117