@edu-tosel/design 1.0.128-f → 1.0.130

package/globals.css

@@ -42,6 +42,11 @@
   src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
 }
 
+@font-face {
+  font-family: "PretendardVariable";
+  src: url("./asset/fonts/PretendardVariable.ttf") format("truetype");
+}
+
 input[type="date"]::-webkit-inner-spin-button,
 input[type="date"]::-webkit-calendar-picker-indicator {
   display: none;

package/hook/index.d.ts

@@ -2,3 +2,5 @@ export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
 export { default as useFlag } from "./useFlag";
 export { default as useResponsive } from "./useResponsive";
+export { default as useScroll } from "./useScroll";
+export { default as useSmoothScroll } from "./useSmoothScroll";

package/hook/index.js

@@ -2,3 +2,5 @@ export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
 export { default as useFlag } from "./useFlag";
 export { default as useResponsive } from "./useResponsive";
+export { default as useScroll } from "./useScroll";
+export { default as useSmoothScroll } from "./useSmoothScroll";

package/hook/useScroll.d.ts

@@ -0,0 +1,3 @@
+export default function useScroll(): {
+    scroll: number | undefined;
+};

package/hook/useScroll.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+export default function useScroll() {
+    const [scroll, setScroll] = useState(undefined);
+    useEffect(() => {
+        if (typeof window !== "undefined")
+            setScroll(window.scrollY);
+        const handleScroll = () => {
+            setScroll(window.scrollY);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [scroll]);
+    return { scroll };
+}

package/hook/useSmoothScroll.d.ts

@@ -0,0 +1,2 @@
+declare function useSmoothScroll(duration?: number, scrollMultiplier?: number): void;
+export default useSmoothScroll;

package/hook/useSmoothScroll.js

@@ -0,0 +1,105 @@
+import { useEffect, useRef } from "react";
+function useSmoothScroll(duration = 300, scrollMultiplier = 3.2) {
+    const animationFrameId = useRef(null);
+    const startPosition = useRef(0);
+    const targetPosition = useRef(0);
+    const startTime = useRef(0);
+    const lastScrollTime = useRef(0);
+    useEffect(() => {
+        const handleWheelScroll = (event) => {
+            event.preventDefault();
+            const now = performance.now();
+            const timeElapsed = now - startTime.current;
+            const timeRemaining = Math.max(duration - timeElapsed, 0);
+            // Check if the new input should be integrated into the ongoing animation
+            if (timeRemaining <= duration / 3) {
+                // Update target position
+                targetPosition.current += event.deltaY * scrollMultiplier;
+                // Adjust the start time and position to continue smoothly
+                startPosition.current = window.scrollY;
+                startTime.current = now - (duration - timeElapsed);
+                // If no animation is running or has just been reset
+                if (animationFrameId.current === null) {
+                    const smoothScroll = (currentTime) => {
+                        const elapsedTime = currentTime - startTime.current;
+                        const progress = Math.min(elapsedTime / duration, 1);
+                        const ease = easeOutSlippery(progress);
+                        window.scrollTo(0, startPosition.current +
+                            (targetPosition.current - startPosition.current) * ease);
+                        if (progress < 1) {
+                            animationFrameId.current = requestAnimationFrame(smoothScroll);
+                        }
+                        else {
+                            animationFrameId.current = null;
+                        }
+                    };
+                    animationFrameId.current = requestAnimationFrame(smoothScroll);
+                }
+                else {
+                    // Resume animation with updated target position
+                    const smoothScroll = (currentTime) => {
+                        const elapsedTime = currentTime - startTime.current;
+                        const progress = Math.min(elapsedTime / duration, 1);
+                        const ease = easeOutSlippery(progress);
+                        window.scrollTo(0, startPosition.current +
+                            (targetPosition.current - startPosition.current) * ease);
+                        if (progress < 1) {
+                            animationFrameId.current = requestAnimationFrame(smoothScroll);
+                        }
+                        else {
+                            animationFrameId.current = null;
+                        }
+                    };
+                    animationFrameId.current = requestAnimationFrame(smoothScroll);
+                }
+            }
+            else {
+                // Ignore scroll inputs that come too early
+                startPosition.current = window.scrollY;
+                targetPosition.current += event.deltaY * scrollMultiplier;
+                startTime.current = now;
+                if (animationFrameId.current !== null) {
+                    cancelAnimationFrame(animationFrameId.current);
+                    animationFrameId.current = null;
+                }
+                // Start a new animation with the new input
+                const smoothScroll = (currentTime) => {
+                    const elapsedTime = currentTime - startTime.current;
+                    const progress = Math.min(elapsedTime / duration, 1);
+                    const ease = easeOutSlippery(progress);
+                    window.scrollTo(0, startPosition.current +
+                        (targetPosition.current - startPosition.current) * ease);
+                    if (progress < 1) {
+                        animationFrameId.current = requestAnimationFrame(smoothScroll);
+                    }
+                    else {
+                        animationFrameId.current = null;
+                    }
+                };
+                animationFrameId.current = requestAnimationFrame(smoothScroll);
+            }
+            lastScrollTime.current = now;
+        };
+        window.addEventListener("wheel", handleWheelScroll, { passive: false });
+        return () => {
+            if (animationFrameId.current !== null) {
+                cancelAnimationFrame(animationFrameId.current);
+            }
+            window.removeEventListener("wheel", handleWheelScroll);
+        };
+    }, [duration, scrollMultiplier]);
+    function cubicBezier(t, p0, p1, p2, p3) {
+        const cX = 3 * (p1 - p0);
+        const bX = 3 * (p2 - p1) - cX;
+        const aX = p3 - p0 - cX - bX;
+        return ((aX * t + bX) * t + cX) * t + p0;
+    }
+    function easeOutSlippery(t) {
+        const p0 = 0;
+        const p1 = 0.5; // Start slow
+        const p2 = 0.9; // End smoothly
+        const p3 = 1;
+        return cubicBezier(t, p0, p1, p2, p3);
+    }
+}
+export default useSmoothScroll;

package/layout/index.d.ts

@@ -13,3 +13,4 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
+export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";

package/layout/index.js

@@ -13,3 +13,4 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
+export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";

package/layout/template/Archive/Container.js

@@ -19,5 +19,6 @@ export default function Container({ contents, state: [search, _], }) {
                 .map(({ titles, description, extension, onClick }) => (_jsx(Archive.Content, { titles: {
                     title: titles.title,
                     subtitle: titles.subtitle,
+                    subtitleColor: titles.subtitleColor,
                 }, onClick: onClick, description: description, extension: extension }, titles.title + titles.subtitle + description))) }) }));
 }

package/layout/template/Archive/Header.d.ts

@@ -1,4 +1,6 @@
 import { State } from "../../../interface";
-export default function Header({ state }: {
+export default function Header({ state, seriesState, levelState, }: {
     state: State<string>;
+    seriesState: State<string | undefined>;
+    levelState: State<string | undefined>;
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/Archive/Header.js

@@ -1,17 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-import { Input } from "../../../widget";
+import { Input, Select } from "../../../widget";
 import { useResponsive } from "../../../hook";
-export default function Header({ state }) {
+export default function Header({ state, seriesState, levelState, }) {
     const container = {
         displays: "flex justify-between items-start",
         sizes: "w-full h-15",
         boundaries: "px-5 pb-5",
     };
     const res = useResponsive();
-    return (_jsxs("div", { className: cn(container), children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
-                    width: res ? "md" : "sm",
-                } }), _jsx(ContentBox, { contents: [
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-3.5", children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
+                            width: "sm",
+                        } }), _jsx(Select, { selectOptions: [
+                            ["TOSEL VOCA Series", "Voca Series"],
+                            ["Story Series", "Story Series"],
+                            ["Listening Series", "Listening Series"],
+                            ["Speaking Series", "Speaking Series"],
+                            ["실전문제집1", "실전문제집1"],
+                            ["TOSEL 실전문제집2", "실전문제집2"],
+                            ["유형분석집", "유형분석집1"],
+                            ["유형분석집2", "유형분석집2"],
+                            ["예상문제집", "예상문제집"],
+                            ["심화문제집", "심화문제집"],
+                            ["기출연습", "기출연습"],
+                            ["기출모의고사", "기출모의고사"],
+                        ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }), _jsx(Select, { selectOptions: [
+                            {
+                                title: "Pre-Starter",
+                                value: "PS",
+                            },
+                            {
+                                title: "Starter",
+                                value: "ST",
+                            },
+                            {
+                                title: "Basic",
+                                value: "BA",
+                            },
+                            {
+                                title: "Junior",
+                                value: "JR",
+                            },
+                            {
+                                title: "High Junior",
+                                value: "HJ",
+                            },
+                        ], state: levelState, placeholder: "\uB808\uBCA8" })] }), _jsx(ContentBox, { contents: [
                     {
                         title: "교재 음원",
                         onClick: () => { },

package/layout/template/Olympiad/Banner.js

@@ -27,5 +27,5 @@ export default function Banner() {
         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" })] }) }));
+    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/dashboard", className: cn(AdvertButton), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }) }));
 }

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

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

package/layout/template/Olympiad/Conditions.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Conditions() {
+    const container = {
+        sizes: "w-full h-screen",
+        displays: "flex justify-center items-center",
+        spacings: "px-5",
+        textstyles: "antialiased font-pretendard-var",
+    };
+    return _jsx("div", { className: cn(container), children: "\u314E\u3147" });
+}

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

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

package/layout/template/Olympiad/Olympiad.layout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Olympiad } from "../../../layout";
+import { cn } from "../../../util";
+export default function OlympiadLayout() {
+    const ref = useRef(null);
+    const container = {
+        sizes: "min-h-screen  w-full",
+        textoptions: "break-keep",
+        // test: "border-4 border-red-500",
+    };
+    //   const { scroll } = useScroll();
+    //   const a = useSmoothScroll(800);
+    //   useEffect(() => {
+    //     console.log(scroll);
+    //   }, [scroll]);
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Olympiad.Banner, {}), _jsx(Olympiad.Sponsors, {}), _jsx(Olympiad.Features, {}), _jsx(Olympiad.Prizes, {}), _jsx(Olympiad.Conditions, {}), _jsx(Olympiad.Videoset, {})] }));
+}

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

@@ -3,11 +3,13 @@ import Sponsors from "./Sponsors";
 import Features from "./Features";
 import Prizes from "./Prizes";
 import Videoset from "./Videoset";
+import Conditions from "./Conditions";
 declare const Olympiad: {
     Banner: typeof Banner;
     Sponsors: typeof Sponsors;
     Features: typeof Features;
     Prizes: typeof Prizes;
+    Conditions: typeof Conditions;
     Videoset: typeof Videoset;
 };
 export default Olympiad;

package/layout/template/Olympiad/index.js

@@ -3,11 +3,13 @@ import Sponsors from "./Sponsors";
 import Features from "./Features";
 import Prizes from "./Prizes";
 import Videoset from "./Videoset";
+import Conditions from "./Conditions";
 const Olympiad = {
     Banner,
     Sponsors,
     Features,
     Prizes,
+    Conditions,
     Videoset,
 };
 export default Olympiad;

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

@@ -14,13 +14,13 @@ export default function Footer() {
     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 = [
-    {
-        title: "이용약관",
-    },
-    {
-        title: "개인정보 처리방침",
-    },
-    {
-        title: "FAQ",
-    },
+// {
+//   title: "이용약관",
+// },
+// {
+//   title: "개인정보 처리방침",
+// },
+// {
+//   title: "FAQ",
+// },
 ];

package/package.json

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

package/tailwind.config.ts

@@ -16,6 +16,7 @@ export default {
         "pretendard-medium": ["pretendard-medium"],
         "pretendard-bold": ["pretendard-bold"],
         "pretendard-light": ["pretendard-light"],
+        "pretendard-var": ["PretendardVariable"],
         kostar: ["kostar"],
         nicomoji: ["nicomoji"],
         megrim: ["megrim"],

package/version.txt

@@ -1 +1 @@
-1.0.128f
+1.0.130

package/widget/template/Select/Select.js

@@ -23,26 +23,8 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [filteredOptions, setFilterdOptions] = useState();
     const [index, setIndex] = useState();
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
-    const onKeyDown = (e) => {
-        if (!filteredOptions)
-            return;
-        if (typeof index === "undefined")
-            return setIndex(0);
-        if (e.key === "Enter") {
-            setText(String(filteredOptions[index]?.title));
-            return setValue(filteredOptions[index]?.value);
-        }
-        if (e.key === "ArrowDown")
-            return setIndex((index + 1) % filteredOptions.length);
-        if (e.key === "ArrowUp")
-            return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
-    };
-    useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(({ title }) => text.includes(String(title))));
-    }, [search, selectOptions]);
     // scrollIntoViews
     const listRef = useRef(null);
     const itemRefs = useRef([]);
@@ -109,9 +91,9 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
             duration: 0,
         },
     });
-    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+    return (_jsxs("div", { className: cn(container), onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
-                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: selectOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
                                 setText(String(title));
                                 return setIsOpen(false);