@edu-tosel/design 1.0.172 → 1.0.174

package/layout/index.d.ts

@@ -2,6 +2,7 @@ export { default as Action } from "./template/Action";
 export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
+export { default as Books } from "./template/Books";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
@@ -18,6 +19,7 @@ export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
+export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
 export { default as Ticket } from "./template/Ticket";

package/layout/index.js

@@ -2,6 +2,7 @@ export { default as Action } from "./template/Action";
 export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
+export { default as Books } from "./template/Books";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
@@ -18,6 +19,7 @@ export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
+export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
 export { default as Ticket } from "./template/Ticket";

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

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

package/layout/template/Archive/Header.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import { Input, Select } from "../../../widget";
 import { useResponsive } from "../../../hook";
-export default function Header({ state, seriesState, levelState, }) {
+export default function Header({ state, seriesState, levelState, contents, }) {
     const container = {
         displays: "flex justify-between items-start flex-wrap flex-none gap-y-5 gap-x-5",
         sizes: "w-full h-fit",
@@ -51,28 +51,7 @@ export default function Header({ state, seriesState, levelState, }) {
                                     title: "High Junior",
                                     value: "HJ",
                                 },
-                            ], state: levelState, placeholder: "\uB808\uBCA8" }) })] }), _jsx(ContentBox, { contents: [
-                    {
-                        title: "교재 음원",
-                        onClick: () => { },
-                        disabled: false,
-                    },
-                    {
-                        title: "정오표",
-                        onClick: () => { },
-                        disabled: true,
-                    },
-                    {
-                        title: "홍보자료",
-                        onClick: () => { },
-                        disabled: true,
-                    },
-                    {
-                        title: "기타 자료",
-                        onClick: () => { },
-                        disabled: true,
-                    },
-                ] })] }));
+                            ], state: levelState, placeholder: "\uB808\uBCA8" }) })] }), _jsx(ContentBox, { contents: contents })] }));
 }
 function ContentBox({ contents }) {
     const container = {

package/layout/template/Books/Books.layout.d.ts

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

package/layout/template/Books/Books.layout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../../util";
+import { Books } from "../../../layout";
+export default function BooksLayout() {
+    const ref = useRef(null);
+    const container = {
+        sizes: "min-h-screen w-full",
+        textoptions: "break-keep antialiased",
+        cursor: "cursor-default",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx(Books.SectionA, {}) }));
+}

package/layout/template/Books/SectionA.d.ts

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

package/layout/template/Books/SectionA.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import { cn } from "../../../util";
+import { useResponsive } from "../../../hook";
+gsap.registerPlugin(ScrollTrigger);
+let divIndex = 0;
+export default function SectionA() {
+    const stickyRef = useRef(null);
+    const bookRef = useRef(null);
+    const mainTitleRef = useRef(null);
+    const subTitleRef = useRef(null);
+    const bgRef = useRef(null);
+    const buttonRef = useRef(null);
+    const bookScrollRef = useRef(null);
+    const refs = useRef([]);
+    const isMD = useResponsive("md");
+    const cardHeight = isMD ? 560 : 400;
+    console.log(isMD);
+    console.log(cardHeight);
+    const handleScroll = (direction) => {
+        if (bookScrollRef.current) {
+            const scrollAmount = cardHeight;
+            const currentScrollTop = bookScrollRef.current.scrollTop;
+            console.log(`direction: ${direction}`);
+            const newScrollTop = direction === "up"
+                ? Math.max(currentScrollTop - scrollAmount, 0)
+                : currentScrollTop + scrollAmount;
+            bookScrollRef.current.scrollTo({
+                top: newScrollTop,
+                behavior: "smooth",
+            });
+        }
+    };
+    useEffect(() => {
+        const ctx = gsap.context(() => {
+            const vh = window.innerHeight * 0.01;
+            const scrollWrapper = stickyRef.current;
+            const bookWrapper = bookRef.current;
+            const sectionEndPoint = `${50 * vh}px`;
+            const bookScrollEndPoint = `${1000 * vh}px`;
+            if (scrollWrapper && bookWrapper) {
+                // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도와 크기 조정
+                const scrollTrigger = ScrollTrigger.create({
+                    trigger: scrollWrapper,
+                    start: "top top",
+                    end: `bottom ${sectionEndPoint}`,
+                    pin: true,
+                    markers: false,
+                    scrub: true,
+                });
+                // mainTitle의 투명도와 크기를 스크롤 위치에 따라 조절하는 애니메이션
+                if (mainTitleRef.current) {
+                    gsap.to(mainTitleRef.current, {
+                        opacity: 0,
+                        scale: 0.7, // 크기를 70%로 줄임
+                        scrollTrigger: {
+                            trigger: scrollWrapper,
+                            start: `top-=10 top`,
+                            end: `bottom ${sectionEndPoint}`,
+                            markers: false,
+                            scrub: true,
+                        },
+                    });
+                }
+                if (bgRef.current) {
+                    gsap.to(bgRef.current, {
+                        opacity: 0,
+                        scrollTrigger: {
+                            trigger: scrollWrapper,
+                            start: `top-=10 top`,
+                            end: `bottom ${sectionEndPoint}`,
+                            markers: false,
+                            scrub: true,
+                        },
+                    });
+                }
+                if (buttonRef.current) {
+                    const tween = gsap.to(buttonRef.current, {
+                        bottom: "60px",
+                        duration: 0.3,
+                        ease: "power2.inOut",
+                        scrollTrigger: {
+                            trigger: "",
+                            start: `top+=1 top-=1`,
+                            end: `bottom bottom`,
+                            markers: false,
+                            toggleActions: "play play play reverse",
+                        },
+                    });
+                    // 스크롤에 따라 책 이미지 전환
+                    refs.current.forEach((ref) => {
+                        if (ref) {
+                            gsap.to(ref, {
+                                scrollTrigger: {
+                                    trigger: ref,
+                                    start: "top top",
+                                    end: "bottom top",
+                                    snap: {
+                                        snapTo: 1,
+                                        duration: 0.5,
+                                        ease: "power3.inOut",
+                                    },
+                                    onEnter: () => {
+                                        divIndex++;
+                                        handleScroll("down");
+                                        console.log(`onEnter: ${divIndex}`);
+                                    },
+                                    onLeaveBack: () => {
+                                        divIndex--;
+                                        handleScroll("up");
+                                        console.log(`onLeaveBack: ${divIndex}`);
+                                    },
+                                },
+                            });
+                        }
+                    });
+                }
+                // 두 번째 ScrollTrigger: bookWrapper가 뷰포트 상단에 도달하면 sticky하게 붙기
+                const bookTrigger = ScrollTrigger.create({
+                    trigger: bookWrapper,
+                    start: "top top",
+                    end: `${bookScrollEndPoint} top`,
+                    pin: true,
+                    pinSpacing: false,
+                    markers: true,
+                });
+                return () => {
+                    scrollTrigger.kill();
+                    bookTrigger.kill();
+                };
+            }
+        });
+        return () => ctx.kill();
+    }, [handleScroll]);
+    const container = {
+        sizes: "w-full h-fit relative",
+        displays: "flex flex-col justify-start items-center",
+        textstyles: "antialiased",
+        backgrounds: "bg-white bg-cover bg-center",
+    };
+    const absoluteWrapperBottom = {
+        sizes: "w-full h-[200vh]",
+        displays: "absolute flex flex-col",
+        positions: "top-0 left-0 z-0",
+    };
+    const absoluteWrapperTop = {
+        sizes: "w-full h-[100vh]",
+        displays: "flex flex-col justify-center items-center fixed",
+        positions: "top-0 left-0 z-100",
+    };
+    const buttonStyling = {
+        sizes: "w-fit h-fit rounded-2xl",
+        spacings: "p-4 absolute mt-40",
+        display: "flex flex-row gap-2",
+        textStyling: "font-bold text-green-dark",
+        backgrounds: "shadow-main bg-white",
+        animation: "duration-300 hover:bg-green-dark hover:text-white",
+    };
+    const TitleWrapper = {
+        spacings: "pt-[20vh] z-5",
+        sizes: "w-full h-[100vh]",
+        display: "flex flex-col justify-start items-center",
+    };
+    const miniTitle = {
+        textstyles: "text-center font-bold text-xl text-white",
+    };
+    const mainTitle = {
+        display: "flex flex-row gap-4 md:gap-10 mt-[5vh]",
+        textstyles: "text-center font-medium text-5xl md:text-8xl ml:text-10xl text-white leading-none",
+    };
+    const bookWrapper = {
+        displays: "flex flex-col justify-center items-center -translate-y-[40vh]",
+        sizes: "p-10 w-full h-screen ",
+    };
+    const bookExplainWrapper = {
+        displays: "flex flex-col md:flex-row justify-center items-center",
+        sizes: "h-screen w-full",
+    };
+    const bookTitle = {
+        displays: "flex flex-col justify-end items-center",
+        sizes: "h-full w-full pb-5",
+        textStyling: "font-bold text-2xl",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(absoluteWrapperBottom, "bg-gradient-to-tr from-crimson-burgundy to-green-dark"), ref: bgRef }), _jsx("div", { className: cn(absoluteWrapperTop), children: _jsxs("div", { className: cn(buttonStyling), ref: buttonRef, onClick: () => {
+                        window.location.href = "https://smartstore.naver.com/tosel";
+                    }, children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" }) }) }), "\uAD50\uC7AC\uBAB0 \uBC14\uB85C\uAC00\uAE30"] }) }), _jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uB2F9\uC2E0\uC774 \uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsxs("div", { className: cn(mainTitle), ref: mainTitleRef, children: [_jsx("div", { className: "flex justify-center items-center w-40 md:w-80 ml:w-120", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-logo-tosel-darkmode.svg", alt: "", className: "max-w-full h-auto" }) }), _jsx("div", { className: "h-full w-0.5 bg-white" }), _jsx("div", { children: " books " })] })] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: cn("w-72 h-100 md:w-100 md:h-140 bg-white z-10 rounded-2xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), bookData.map((item, index) => {
+                // item.levelLow 값을 LevelKey로 변환하기 전에 유효성 검사
+                const lowLevelStyle = getLevelStyle(item.levelLow); // 안전하게 캐스팅
+                const highLevelStyle = getLevelStyle(item.levelHigh); // 이 부분도 마찬가지로
+                return (_jsxs("div", { className: cn(bookExplainWrapper), ref: (el) => {
+                        if (el) {
+                            refs.current[index] = el;
+                        }
+                    }, children: [_jsxs("div", { className: cn(bookTitle), children: [_jsx("div", { children: item.title }), _jsx("div", { className: "text-base text-gray-medium", children: item.type })] }), _jsx("div", { className: "h-100 w-full shrink-0" }), _jsxs("div", { className: "h-full w-full pt-5 flex flex-col justify-start items-center", children: [_jsxs("div", { className: "w-fit h-fit flex flex-row gap-2", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), "~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }), isMD && (_jsx("div", { className: "text-center font-medium text-sm", children: item.description }))] })] }, item.id));
+            })] }));
+}
+const bookData = [
+    {
+        id: 1,
+        type: "학습 시리즈",
+        title: "Speaking Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 2,
+        type: "학습 시리즈",
+        title: "Story Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "JR",
+        link: "",
+    },
+    {
+        id: 3,
+        type: "학습 시리즈",
+        title: "Listening Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 4,
+        type: "학습 시리즈",
+        title: "Reading Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 5,
+        type: "학습 시리즈",
+        title: "Grammar Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 6,
+        type: "학습 시리즈",
+        title: "VOCA Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+];
+const levelStyles = {
+    CO: {
+        name: "cocoon",
+        textColor: "text-cocoon-green",
+        bgColor: "bg-cocoon-green/10",
+    },
+    PS: {
+        name: "Pre-Starter",
+        textColor: "text-ps-pink",
+        bgColor: "bg-ps-pink-light",
+    },
+    ST: {
+        name: "Starter",
+        textColor: "text-st-orange",
+        bgColor: "bg-st-orange-light",
+    },
+    BA: {
+        name: "Basic",
+        textColor: "text-ba-yellow",
+        bgColor: "bg-ba-yellow-light",
+    },
+    JR: {
+        name: "Junior",
+        textColor: "text-jr-blue",
+        bgColor: "bg-jr-blue-light",
+    },
+    HJ: {
+        name: "High Junior",
+        textColor: "text-hj-blue",
+        bgColor: "bg-hj-blue-light",
+    },
+    AD: {
+        name: "Advanced",
+        textColor: "text-gray-dark",
+        bgColor: "bg-gray-light",
+    },
+};
+const getLevelStyle = (level) => {
+    return levelStyles[level];
+};
+export function ScrollBookComponent() {
+    const container = {
+        sizes: "w-full h-fit relative",
+        displyas: "flex flex-col",
+        backgrounds: "bg-white",
+    };
+    const imageWrapper = {
+        sizes: "w-72 h-100 md:w-100 md:h-140",
+        imgStyling: "bg-contain bg-no-repeat bg-center",
+        scrollActions: "snap-start",
+    };
+    return (_jsx("div", { className: cn(container), children: bookData.map((item) => (_jsx("div", { className: cn(imageWrapper, `bg-[url('${item.imgSrc}')]`) }, item.id))) }));
+}

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

@@ -0,0 +1,5 @@
+import SectionA from "./SectionA";
+declare const Books: {
+    SectionA: typeof SectionA;
+};
+export default Books;

package/layout/template/Books/index.js

@@ -0,0 +1,5 @@
+import SectionA from "./SectionA";
+const Books = {
+    SectionA,
+};
+export default Books;

package/layout/template/Regexam/OfflineExam.js

@@ -35,7 +35,7 @@ export default function OfflineExam() {
     const container = {
         displays: "flex flex-col justify-center items-center",
         sizes: "w-full h-fit min-h-screen",
-        spacings: "pt-20 md:px-10 px-5 pb-20",
+        spacings: "pt-44 md:px-10 px-5 pb-20",
         backgrounds: "bg-gray-light/50",
     };
     //controlls max-w

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

@@ -1,6 +1,6 @@
 import { Button, OnClick } from "../../../../interface";
 import { ReactNode } from "react";
-export default function Layout({ contents, children, logo, rightButton, }: {
+export default function Layout({ contents, children, logo, rightButton, option, }: {
     contents: Button[];
     children: React.ReactNode;
     logo: {
@@ -8,4 +8,7 @@ export default function Layout({ contents, children, logo, rightButton, }: {
         onClick?: OnClick;
     };
     rightButton?: Button;
+    option?: {
+        isPulled?: boolean;
+    };
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/layout/index.js

@@ -3,12 +3,13 @@ import { cn } from "../../../../util";
 import Footer from "./Footer";
 import Header from "./Header";
 import { useActionStore } from "../../../../store";
-export default function Layout({ contents, children, logo, rightButton, }) {
+export default function Layout({ contents, children, logo, rightButton, option, }) {
+    const { isPulled } = option ?? {};
     const container = {
         displays: "flex flex-col",
         sizes: "w-full min-h-screen",
         overflows: "overflow-x-hidden ",
     };
     const { setFlag } = useActionStore();
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), _jsx("div", { className: "w-full max-w-[1200px] h-15" }), children, _jsx(Footer, {})] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), isPulled && _jsx("div", { className: "w-full max-w-[1200px] h-15" }), children, _jsx(Footer, {})] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.172
+1.0.174