@edu-tosel/design 1.0.266 → 1.0.268

package/layout/template/Books/SectionA.js

@@ -1,430 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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);
-const bookData = [
-    {
-        id: 1,
-        type: "학습 시리즈",
-        title: "Reading Series",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_RD_HJ1.png",
-        description: "Reading 학습을 위한 토셀의 학습 시리즈입니다. 독해 & 실용문 연습을 위한 지문과 Comprehension 문항이 수록되어, 이해도 확인 및 정확한 진단이 가능합니다. 숙지한 독해 지문을 원어민 음성으로 들으며 리딩을 위한 완벽한 학습 커리큘럼을 마련해보세요.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/bde68e05417e4db99a86ebbd4aa3e925?cp=1",
-    },
-    {
-        id: 2,
-        type: "학습 시리즈",
-        title: "Story Series",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SY1_BA.png",
-        description: "독해능력을 기를 수 있는 Story Series 입니다. 이야기 지문과 단어를 함께 연결지어 학생들의 독해 능력을 평가합니다. 재미있는 스토리와 함께 다양한 문제를 풀어가며 독해실력을 집중적으로 향상시켜 보세요.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/cd8df3ab036942f7a3ea6e14a7ab3a9a?cp=1",
-    },
-    {
-        id: 3,
-        type: "학습 시리즈",
-        title: "Listening Series",
-        imgSrc: "https://resource.tosel.co.kr/images/LSJU_mockup.png",
-        description: "Listening을 익힐수 있는 토셀의 학습교재 입니다. 초등/중등 교과과정을 연계한 말하기&듣기 학습을 세분화된 레벨로 만나보세요. 기출문제 연습과 최신 수능 출제 문법을 포함하여, 수능/내신 대비가 가능합니다.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/2f11488810464cb5bbe77b004965f4ae?cp=1",
-    },
-    {
-        id: 4,
-        type: "학습 시리즈",
-        title: "Speaking Series",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SP_PS.png",
-        description: "2024년 출간된 토셀의 Speaking 학습 교재입니다. 레벨에 맞게 문장 구성요소를 단계적으로 학습할 수 있도록 구성되어있습니다. 실제 TOSEL 시험의 빈출 문항은 물론, Grammar, Voca, Listening 교재와의 높은 연계율을 고려하여 고안되었습니다.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/28dc52dc67a3443ea010812d40accb69?cp=1",
-    },
-    {
-        id: 5,
-        type: "학습 시리즈",
-        title: "Grammar Series",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_GR1_ST.png",
-        description: "초등/중등 교과과정과 연계된 문법을 다룬 학습 시리즈입니다. TOSEL 기출문제와 최신 수능 출제 문법을 포함해 수능/내신을 대비할 수 있습니다. 또한 신전 감각 향상과 점검을 위한 기출 문제가 같이 수록되어있어 개념 학습부터 실전 응용까지 다룰 수 있는 교재입니다.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/c88067049a904b8e8d78ada305b2779b?cp=1",
-    },
-    {
-        id: 6,
-        type: "학습 시리즈",
-        title: "VOCA Series",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_VC_HJ_noshadow.png",
-        description: "단어 학습을 위한 학습교재 시리즈입니다. TOSEL 시험을 기준으로 빈출 지표를 활용한 예문과 문제가 구성되어있습니다. 실제 TOSEL 지문을 예문으로 활용하여 보다 실용적인 연계 학습 환경을 제공합니다. ",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/78551dca50de4636bc212c46543d4137?cp=1",
-    },
-    {
-        id: 7,
-        type: "시험 대비 교재",
-        title: "유형분석집",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YH1_ST.png",
-        description: "최근 TOSEL 시험의 문항들을 유형별로 소개하는 지침서입니다. 국내외 15,000여개 학교/학원 단체 응시 인원 중 엄선한 100만명 이상의 성적 데이터를 기반으로 속성 분석 프로그램을 이용해 문제 유형을 분류하였습니다.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/00590516c9ea4041b17bcea6527850ed?cp=1",
-    },
-    {
-        id: 8,
-        type: "시험 대비 교재",
-        title: "예상문제집",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YS_JR.png",
-        description: "TOSEL의 최신 유형을 반영한 실전 모의고사가 5회 수록된 시험대비 교재입니다. TOSEL 기출문제 중 정답률에 따라 분류하여 평이한 정답률을 가진 문항으로 구성되어 있습니다. 필수 어휘를 포함한 모의고사 빈출 어휘가 수록되어 있어, 일반적인 시험 문제에 대비할 수 있습니다.",
-        levelLow: "PS",
-        levelHigh: "JR",
-        link: "https://smartstore.naver.com/tosel/category/263ed55441ee47fc994b7e2e7d77c37f?cp=1",
-    },
-    {
-        id: 9,
-        type: "시험 대비 교재",
-        title: "실전문제집 1 & 2",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SJ2_BA.png",
-        description: "TOSEL의 최신 유형을 반영한 실전 모의고사가 5회 수록된 시험대비 교재입니다. 실전 감각 향상을 고려하여 난이별 TOSEL 출제 문항이 수록되어있습니다. 필수 어휘를 포함한 모의고사 빈출 어휘가 수록되어 있어, 일반적인 시험 문제에 대비할 수 있습니다.",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "https://smartstore.naver.com/tosel/category/50ea23099a1344d99b0902bfb65305aa?cp=1",
-    },
-    {
-        id: 10,
-        type: "시험 대비 교재",
-        title: "심화문제집",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SH_ST.png",
-        description: "응시생들이 가장 많이 틀린 최신 유형이 수록된 모의고사 5회 분량의 문제집입니다. 실제 정답률 분석을 통해 다수의 수험자가 오답을 선택한 핵심 원인이 설명되어 있으며, 심화 문제 및 만점 전략을 제시합니다. ",
-        levelLow: "PS",
-        levelHigh: "JR",
-        link: "https://smartstore.naver.com/tosel/category/f3c92dd261b7497aace96620f760aacd?cp=1",
-    },
-    {
-        id: 11,
-        type: "시험 대비 교재",
-        title: "Cocoon 유형분석집",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YH_CO.png",
-        description: "코쿤은 한국의 교육 커리큘럼에 맞는 TOSEL 시험평가제도의 시작단계입니다. 연령예 맞는 시험문제 구성으로 5-7세의 미취학 아동들이 즐겁게 학습할 수 있도록 구성한 교재입니다. 다른 TOSEL 시험과 마찬가지로 실제 Cocoon을 응시할 경우 성적분석자료를 제공합니다.",
-        levelLow: "CO",
-        link: "https://smartstore.naver.com/tosel/products/6654890597",
-    },
-    {
-        id: 12,
-        type: "시험 대비 교재",
-        title: "Advanced 공식실전서",
-        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_GS_AD.png",
-        description: "대학 편입학/졸업자격, 공무원 임용, 기업체 및 국가자격증 시험 등에 반영되는 TOSEL Advanced 시험의 공식 실전서입니다. 삽입된 OMR 부록을 활용해 실제 시험상황과 동일한 조건의 연습시험이 가능합니다.",
-        levelLow: "AD",
-        link: "https://smartstore.naver.com/tosel/products/10668962060",
-    },
-];
-let divIndex = 0;
-const bookNumber = bookData.length;
-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 isXM = useResponsive("xm");
-    const cardHeight = isXM ? 560 : 400;
-    console.log(isMD);
-    console.log(cardHeight);
-    //훅 스크롤에 따라 해당하는 책을 디스플레이
-    const bookScroller = () => {
-        if (bookScrollRef.current) {
-            const scrollAmount = cardHeight;
-            const newScrollTop = scrollAmount * divIndex;
-            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 = `${((bookNumber + 1) * 100 + 40) * vh}px`;
-            // 스크롤 방지 함수
-            const preventScroll = (e) => {
-                if (bookScrollRef.current &&
-                    bookScrollRef.current.contains(e.target)) {
-                    e.preventDefault(); // 스크롤 방지
-                }
-            };
-            // 터치스크린에서 스크롤 방지 함수
-            const preventTouchScroll = (e) => {
-                if (bookScrollRef.current &&
-                    bookScrollRef.current.contains(e.target)) {
-                    e.preventDefault(); // 터치스크롤 방지
-                }
-            };
-            // bookScrollRef에 wheel 이벤트 리스너 추가
-            if (bookScrollRef.current) {
-                bookScrollRef.current.addEventListener("wheel", preventScroll, {
-                    passive: false,
-                });
-                bookScrollRef.current.addEventListener("touchstart", preventTouchScroll, { passive: false });
-                bookScrollRef.current.addEventListener("touchmove", preventTouchScroll, { passive: false });
-            }
-            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: "start bottom",
-                                    end: "bottom bottom",
-                                    snap: {
-                                        snapTo: 1,
-                                        duration: 0.5,
-                                        ease: "power3.inOut",
-                                    },
-                                    markers: false,
-                                    onEnter: () => {
-                                        divIndex++;
-                                        bookScroller();
-                                        console.log(`onEnter: ${divIndex}`);
-                                    },
-                                    onLeaveBack: () => {
-                                        divIndex--;
-                                        bookScroller();
-                                        console.log(`onLeaveBack: ${divIndex}`);
-                                    },
-                                },
-                            });
-                        }
-                    });
-                }
-                // 두 번째 ScrollTrigger: bookWrapper가 뷰포트 상단에 도달하면 sticky하게 붙기
-                const bookTrigger = ScrollTrigger.create({
-                    trigger: bookWrapper,
-                    start: "top top",
-                    end: `${bookScrollEndPoint} bottom`,
-                    pin: true,
-                    pinSpacing: false,
-                    markers: false,
-                });
-                return () => {
-                    scrollTrigger.kill();
-                    bookTrigger.kill();
-                    // 이벤트 리스너 제거
-                    if (bookScrollRef.current) {
-                        bookScrollRef.current.removeEventListener("wheel", preventScroll);
-                        bookScrollRef.current.removeEventListener("touchstart", preventTouchScroll);
-                        bookScrollRef.current.removeEventListener("touchmove", preventTouchScroll);
-                    }
-                };
-            }
-        });
-        return () => ctx.kill();
-    }, [bookScroller, useResponsive]);
-    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",
-        animations: "pointer-events-none",
-    };
-    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 pointer-events-auto",
-    };
-    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 z-1 pointer-events-none",
-    };
-    const bookExplainWrapper = {
-        displays: "flex flex-col md:flex-row justify-center items-center",
-        sizes: "h-screen w-full max-w-[1200px]",
-    };
-    const bookTextWrapper = {
-        displays: "flex items-end md:items-start",
-        sizes: "h-full xm:max-h-140 max-h-100 w-full shrink",
-        textStyling: "font-bold text-2xl pl-0 md:pl-[76px]",
-    };
-    const bookTextBox = {
-        displays: "flex flex-col justify-end items-center md:justify-start md:items-start",
-        sizes: "w-full h-fit rounded-lg p-5",
-    };
-    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("md:pointer-events-none w-72 h-100 xm:w-100 xm:h-140 bg-white backdrop-blur-md z-10 rounded-xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), _jsx("div", { className: "", children: 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: [_jsx("div", { className: cn(bookTextWrapper), children: _jsxs("div", { className: cn(bookTextBox, item.type == "학습 시리즈"
-                                        ? "md:bg-gray-light/50 text-hj-blue"
-                                        : "md:bg-gray-light/50 text-crimson-burgundy"), children: [_jsx("div", { children: item.title }), _jsx("div", { className: "text-base text-gray-medium", children: item.type }), isMD && (_jsxs("div", { className: "w-fit h-fit flex flex-col lg:flex-row gap-2 mt-5 lg:items-center items-start", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), item.levelHigh && (_jsxs("div", { className: "flex flex-row gap-2 items-center lg:m-0 ml-5", children: ["~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }))] }))] }) }), isMD ? (_jsx("div", { className: "h-full w-72 xm:w-120 shrink-0" })) : (_jsx("div", { className: "h-100 w-full shrink-0" })), _jsx("div", { className: "h-full w-full pt-5 flex flex-col justify-start md:justify-center items-center md:items-end md:pr-5 pr-0", children: isMD ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-base font-bold text-gray-medium w-full text-start", children: ["About", "  ", _jsx("span", { className: cn("ml-2", item.type == "학습 시리즈"
-                                                        ? "text-hj-blue"
-                                                        : "text-crimson-burgundy"), children: item.title })] }), _jsx("div", { className: cn("text-base p-5 rounded-lg text-gray-dark font-medium mt-5 w-full", item.type == "학습 시리즈"
-                                                ? "bg-blue-pastel/30"
-                                                : "bg-crimson-burgundy/5"), children: item.description })] })) : (_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 }), item.levelHigh && (_jsxs(_Fragment, { children: [_jsx("span", { children: "~" }), _jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }))] })) })] }, item.id));
-                }) })] }));
-}
-const levelStyles = {
-    CO: {
-        name: "cocoon",
-        textColor: "text-co-green",
-        bgColor: "bg-co-green-light",
-    },
-    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-crimson-burgundy",
-        bgColor: "bg-crimson-burgundy/10",
-    },
-};
-const getLevelStyle = (level) => {
-    return levelStyles[level];
-};
-export function ScrollBookComponent() {
-    const isMD = useResponsive("md");
-    const container = {
-        sizes: "w-full h-fit relative",
-        displyas: "flex flex-col",
-        backgrounds: "",
-    };
-    const imageWrapper = {
-        display: "relative",
-        sizes: "w-72 h-100 xm:w-100 xm:h-140",
-        imgStyling: " z-10 p-20",
-        scrollActions: "snap-start",
-    };
-    const toggleWrapper = {
-        displays: "absolute flex flex-col justify-center items-center",
-        sizes: "w-full h-full",
-        spacings: "top-0 left-0 p-5",
-        animations: "group pointer-events-auto bg-white/30 opacity-0 hover:opacity-100 duration-300 hover:backdrop-blur-sm",
-    };
-    const infoButton = {
-        displays: "flex flex-col justify-center items-center",
-        sizes: "gap-2 w-20 h-20 rounded-lg",
-        colors: "bg-white text-green-dark hover:bg-green-dark hover:text-white",
-        animations: "duration-300 shadow-main pointer-events-auto",
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-contain bg-no-repeat bg-center", style: {
-                        backgroundImage: `url(https://resource.tosel.co.kr/images/SP-COVER-PS.png)`,
-                    } }) }), bookData.map((item) => (_jsxs("div", { className: cn(imageWrapper), children: [_jsx("div", { className: "absolute top-12 left-12 w-[calc(100%-96px)] h-[calc(100%-96px)] bg-contain bg-no-repeat bg-center", style: { backgroundImage: `url(${item.imgSrc})` } }), isMD && (_jsx("div", { className: cn(toggleWrapper), children: _jsxs("div", { className: cn(infoButton), onClick: () => {
-                                window.location.href = item.link;
-                            }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-8", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" }) }), _jsx("div", { className: "font-medium text-xs", children: "\uB354 \uC54C\uC544\uBCF4\uAE30" })] }) }))] }, item.id)))] }));
-}

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

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

package/layout/template/Books/index.js

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

package/layout/template/MonthlyProgressReport/Layout.d.ts

@@ -1,4 +0,0 @@
-import { ProgressReportProps } from "./Report";
-export default function Layout({ props }: {
-    props: ProgressReportProps;
-}): import("react/jsx-runtime").JSX.Element;

package/layout/template/MonthlyProgressReport/Layout.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { cn } from "../../../util";
-import { Label } from "../../../widget";
-import Action from "../Action";
-import ModalProvider from "../../../modal/design/Modal.design";
-import { useActionStore } from "../../../store";
-import { useReactToPrint } from "react-to-print";
-import MonthlyProgressReport from ".";
-export default function Layout({ props }) {
-    const { setModal } = useActionStore();
-    const container = {
-        displays: "flex flex-col justify-center items-center",
-        fonts: "font-pretendard-var",
-        sizes: "w-full min-h-screen",
-    };
-    const header = {
-        displays: "flex justify-end gap-3.5",
-        sizes: "w-full max-w-[297mm]",
-    };
-    const ref = useRef(null);
-    const handlePrint = useReactToPrint({
-        contentRef: ref,
-    });
-    return (_jsx("div", { className: cn(container), children: _jsxs(Action.Show, { actions: [
-                [
-                    "whatIsMPR",
-                    _jsx(ModalProvider, { titles: {
-                            title: "Monthly Progress Report",
-                            subtitle: [
-                                "MPR에서 학생들의 학습 성취도를 확인할 수 있습니다.",
-                                "토셀 랩의 커리큘럼으로 학습 능력을 끌어올리세요!",
-                            ],
-                        }, children: _jsx("div", { className: "flex justify-center items-center w-full h-80", children: _jsx("img", { src: "/images/progress/mock.png", className: "w-full h-full" }) }) }),
-                ],
-            ], children: [_jsxs("div", { className: cn(header), children: [_jsx(Label.Button, { title: "MPR\uC774\uB780?", option: {
-                                width: "xs",
-                                height: "xs",
-                                background: "bg-blue-navy",
-                                text: "text-white",
-                            }, onClick: () => setModal("whatIsMPR") }), _jsx(Label.Button, { title: "\uAD50\uC7AC \uB77C\uC778\uC5C5", option: {
-                                width: "xs",
-                                height: "xs",
-                                background: "bg-blue-navy",
-                                text: "text-white",
-                            }, onClick: () => window.open("https://smartstore.naver.com/tosel/shoppingstory/detail?id=5001356529&page=1") }), _jsx(Label.Button, { title: "\uCD9C\uB825\uD558\uAE30", option: {
-                                width: "xs",
-                                height: "xs",
-                                background: "bg-blue-navy",
-                                text: "text-white",
-                            }, onClick: () => handlePrint() })] }), _jsx(MonthlyProgressReport.Report, { ref: ref, props: props })] }) }));
-}

package/layout/template/MonthlyProgressReport/Report.d.ts

@@ -1,46 +0,0 @@
-type Score = number | null;
-export interface Result {
-    createdTimestamp: number;
-    updatedTimestamp: number;
-    academyId: number;
-    etc: null;
-    report: {
-        section1Part1: Score;
-        section1Part2: Score;
-        section1Part3: Score;
-        section1Part4: Score;
-        section2Part1: Score;
-        section2Part2: Score;
-        section2Part3: Score;
-        section2Part4: Score;
-    };
-    rank: number;
-    percentRank: number;
-    id: number;
-    setId: number;
-    level: string;
-    answers: number[];
-    userId: number;
-}
-export interface ProgressReportProps {
-    studentInfo: {
-        name: string;
-        birthday: string;
-        belong?: string;
-        academy?: string;
-        image: string;
-    };
-    recentResult: Result & {
-        examName: string;
-    };
-    results: {
-        date: number;
-        score: number;
-    }[];
-    comment: string | string[];
-    commentType?: "director" | "tosel";
-}
-declare const _default: import("react").ForwardRefExoticComponent<{
-    props: ProgressReportProps;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default _default;