@edu-tosel/design 1.0.118 → 1.0.120

package/layout/index.d.ts

@@ -4,6 +4,7 @@ export { default as Announcement } from "./template/Announcement";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";
+export { default as Olympiad } from "./template/Olympiad";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/index.js

@@ -4,6 +4,7 @@ export { default as Announcement } from "./template/Announcement";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";
+export { default as Olympiad } from "./template/Olympiad";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/template/Olympiad/Banner.d.ts

@@ -0,0 +1 @@
+export default function Banner(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Olympiad/Banner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Banner() {
+    const container = {
+        sizes: "w-full h-screen",
+        displays: "flex justify-center items-center",
+        spacings: "px-5",
+        textstyles: "antialiased",
+        backgrounds: "bg-[url('images/olympiad/img-oly-bg-a.png')] bg-cover bg-center",
+    };
+    const explainer = {
+        textstyles: "text-xl md:text-2xl font-pretendard-medium text-gray-light mix-blend-difference sm:text-green-dark sm:mix-blend-normal",
+    };
+    const brandTextCore = {
+        textstyles: "text-7xl md:text-8xl font-pretendard-bold text-green-dark leading-none mt-6 mix-blend-plus-darker",
+        animations: "duration-300",
+    };
+    const brandTextSub = {
+        textstyles: "text-2xl md:text-3xl font-pretendard-bold text-green-dark",
+        animations: "duration-300",
+    };
+    const AdvertButton = {
+        sizes: "h-fit w-full xxxs:w-fit rounded-lg",
+        backgrounds: "bg-green-light",
+        textstyles: "text-lg text-green-dark font-pretendard-medium text-center",
+        spacings: "px-3 py-2 mt-30 xxxs:mt-16",
+        hoveractions: "hover:bg-green-dark hover:text-white",
+        animations: "duration-300",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col w-full justify-start max-w-6xl", children: [_jsxs("div", { className: cn(explainer), children: ["\uD559\uC0DD\uC774\uB77C\uBA74, ", _jsx("br", {}), "\uC804\uAD6D \uC5B4\uB514\uC5D0\uC11C\uB098 \uCC38\uC5EC \uAC00\uB2A5\uD55C"] }), _jsx("div", { className: cn(brandTextCore), children: "VOCA" }), _jsx("div", { className: cn(brandTextSub), children: "\uC62C\uB9BC\uD53C\uC544\uB4DC" }), _jsx("a", { href: "https://olympiad.tosel.co.kr/", className: cn(AdvertButton), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }) }));
+}

package/layout/template/Olympiad/Features.d.ts

@@ -0,0 +1 @@
+export default function Features(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Olympiad/Features.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Features() {
+    const container = {
+        sizes: "w-full h-fit p-5",
+        backgroudns: "bg-green-light",
+    };
+    const boxWrapper = {
+        sizes: "w-full h-fit",
+        displays: "flex flex-col gap-4",
+    };
+    // styling of feature box components
+    const featureBox = {
+        sizes: "w-full h-80 rounded-lg",
+        backgrunds: "bg-green-dark",
+    };
+    const boxTitle = {};
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(boxWrapper), children: [_jsx("div", { className: cn(featureBox) }), _jsx("div", { className: cn(featureBox) }), _jsx("div", { className: cn(featureBox) })] }) }));
+}

package/layout/template/Olympiad/index.d.ts

@@ -0,0 +1,7 @@
+import Banner from "./Banner";
+import Features from "./Features";
+declare const Olympiad: {
+    Banner: typeof Banner;
+    Features: typeof Features;
+};
+export default Olympiad;

package/layout/template/Olympiad/index.js

@@ -0,0 +1,7 @@
+import Banner from "./Banner";
+import Features from "./Features";
+const Olympiad = {
+    Banner,
+    Features,
+};
+export default Olympiad;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState, useRef, useCallback } from "react"; // React 추가
+import { useSpring, animated, easings } from "@react-spring/web";
 import { cn } from "../../../../util";
 import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
@@ -9,18 +10,57 @@ import useResponsive from "../../../../hook/useMobile";
 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]);
+    const [loaded, setLoaded] = useState(false);
+    const isMD = useResponsive("md");
+    const isXL = useResponsive("xl");
+    const intervalRef = useRef(null);
     const { tag, titles, image, option } = contents[index];
     const { text, background } = option ?? {};
+    // Transition animation using react-spring
+    const transitionStyles = useSpring({
+        opacity: loaded ? 1 : 0,
+        transform: loaded ? "translateX(0px)" : "translateX(400px)",
+        config: {
+            duration: 500,
+            easing: easings.easeOutQuad,
+        },
+    });
+    const resetTimer = useCallback(() => {
+        // resetting the timer
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+        intervalRef.current = setInterval(() => {
+            setIndex((prevIndex) => (prevIndex + 1) % contents.length);
+            setLoaded(false); // trigger animation
+        }, 3000);
+    }, [contents.length]);
+    useEffect(() => {
+        resetTimer(); // timerstarts after mounting component
+        return () => {
+            // clear timer after unmounting component
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [resetTimer]);
+    const handleNext = () => {
+        setLoaded(false); // trigger animation
+        setIndex((prevIndex) => (prevIndex + 1) % contents.length);
+        resetTimer(); // reset timer after clicking button
+    };
+    const handlePrev = () => {
+        setLoaded(false);
+        setIndex((prevIndex) => (prevIndex - 1 + contents.length) % contents.length);
+        resetTimer();
+    };
+    // Styles definition
     const container = {
         displays: "relative flex justify-center items-center",
         sizes: "w-full h-fit md:h-80 ml:h-100",
         textstyle: "break-keep",
         background,
+        animations: "duration-300",
     };
     const titleSet = {
         displays: "flex items-center lex gap-4 flex-row xxs:gap-4 xxs:items-start xxs:flex-col md:gap-2",
@@ -30,6 +70,7 @@ export default function Carousel({ contents, }) {
         displays: "flex flex-none flex-col items-center justify-center md:flex-row",
         sizes: "w-full max-w-256 h-full",
         text: text ?? "text-gray-dark",
+        animations: "duration-500",
     };
     const tagBox = {
         displays: "flex justify-center items-center",
@@ -38,13 +79,6 @@ export default function Carousel({ contents, }) {
         fonts: "text-white font-pretendard-medium text-sm md:text-base leading-none",
         styles: "rounded-md",
     };
-    const isMD = useResponsive("md");
-    const isXL = useResponsive("xl");
-    const test = {
-        postions: "absolute left-0 top-0 border-2 border-red-500",
-        sizes: "w-full",
-        displays: "flex justify-center",
-    };
     const buttonBox = {
         positions: !isMD && "absolute bottom-5 left-5 sm:bottom-10 sm:left-10",
         animations: "duration-500",
@@ -52,5 +86,5 @@ export default function Carousel({ contents, }) {
         sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
         paddings: "px-1.5 mt-12",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 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" })) })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, 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: handleNext, 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(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full", style: transitionStyles })) })] }) }));
 }

package/modal/template/Confirm/Reimage.d.ts

@@ -1,8 +1,8 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { State } from "../../../interface";
+import { FileRead, State } from "../../../interface";
 interface ReimageProps extends Omit<ConfirmModalProps, "children"> {
     data: {
-        image: State<string | ArrayBuffer | null>;
+        image: State<FileRead>;
         nowImage: string;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.118",
+  "version": "1.0.120",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,9 +14,11 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.12",
+    "gsap": "^3.12.5",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^6.4.0",

package/version.txt

@@ -1 +1 @@
-1.0.118
+1.0.120