@edu-tosel/design 1.0.173 → 1.0.174

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/SectionA.d.ts

@@ -1 +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

@@ -3,32 +3,54 @@ 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); // bookWrapper를 위한 ref 추가
-    const mainTitleRef = useRef(null); // mainTitle을 위한 ref 추가
+    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; // bookWrapper 참조
-            const endpoint = `${50 * vh}px`;
+            const bookWrapper = bookRef.current;
+            const sectionEndPoint = `${50 * vh}px`;
+            const bookScrollEndPoint = `${1000 * vh}px`;
             if (scrollWrapper && bookWrapper) {
-                // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도를 조정 및 크기 조절
+                // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도와 크기 조정
                 const scrollTrigger = ScrollTrigger.create({
                     trigger: scrollWrapper,
                     start: "top top",
-                    end: `bottom ${endpoint}`,
+                    end: `bottom ${sectionEndPoint}`,
                     pin: true,
                     markers: false,
-                    onLeave: () => {
-                        console.log("Scroll completed, navigate to the next component");
-                    },
-                    scrub: true, // 스크롤에 따라 애니메이션 동기화
+                    scrub: true,
                 });
-                // mainTitle의 투명도와 크기를 스크롤 위치에 따라 조절하는 애니메이션 추가
+                // mainTitle의 투명도와 크기를 스크롤 위치에 따라 조절하는 애니메이션
                 if (mainTitleRef.current) {
                     gsap.to(mainTitleRef.current, {
                         opacity: 0,
@@ -36,37 +58,73 @@ export default function SectionA() {
                         scrollTrigger: {
                             trigger: scrollWrapper,
                             start: `top-=10 top`,
-                            end: `bottom ${endpoint}`,
-                            markers: true,
-                            scrub: true, // 스크롤에 따라 애니메이션 동기화
+                            end: `bottom ${sectionEndPoint}`,
+                            markers: false,
+                            scrub: true,
                         },
                     });
                 }
-                if (subTitleRef.current) {
-                    gsap.to(subTitleRef.current, {
+                if (bgRef.current) {
+                    gsap.to(bgRef.current, {
                         opacity: 0,
                         scrollTrigger: {
                             trigger: scrollWrapper,
-                            start: `top top`,
-                            end: `bottom ${endpoint}`,
-                            markers: true,
-                            scrub: true, // 스크롤에 따라 애니메이션 동기화
+                            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", // bookWrapper의 top이 뷰포트의 top에 도달했을 때
+                    start: "top top",
+                    end: `${bookScrollEndPoint} top`,
                     pin: true,
-                    pinSpacing: false, // 추가된 pinSpacing을 false로 설정하여 고정된 상태에서 공간을 차지하지 않음
-                    markers: false,
-                    onEnter: () => {
-                        console.log("bookWrapper is pinned!");
-                    },
-                    onLeaveBack: () => {
-                        console.log("bookWrapper is unpinned!");
-                    },
+                    pinSpacing: false,
+                    markers: true,
                 });
                 return () => {
                     scrollTrigger.kill();
@@ -74,29 +132,182 @@ export default function SectionA() {
                 };
             }
         });
-        return () => ctx.revert();
-    }, []); // 빈 배열로 dependency 설정
+        return () => ctx.kill();
+    }, [handleScroll]);
     const container = {
-        sizes: "w-full h-fit",
+        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-[30vh] z-0",
+        spacings: "pt-[20vh] z-5",
         sizes: "w-full h-[100vh]",
         display: "flex flex-col justify-start items-center",
-        test: "border-2 border-red-500",
     };
     const miniTitle = {
-        textstyles: "text-center font-medium text-lg text-green-dark",
+        textstyles: "text-center font-bold text-xl text-white",
     };
     const mainTitle = {
-        textstyles: "text-center font-bold text-9xl text-black",
+        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",
+        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 (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsx("div", { className: cn(mainTitle), ref: mainTitleRef, children: "TOSEL Books" }), " "] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: "w-100 h-140 bg-red-500 mt-[calc(10vh)] z-10 rounded-2xl shadow-main " }) })] }));
+    return (_jsx("div", { className: cn(container), children: bookData.map((item) => (_jsx("div", { className: cn(imageWrapper, `bg-[url('${item.imgSrc}')]`) }, item.id))) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.173
+1.0.174