@edu-tosel/design 1.0.189 → 1.0.190

package/_test/interface/Property.d.ts

@@ -1,3 +1,3 @@
 export type Status = "waiting" | "doing" | "done";
-export type Level = "" | "CC" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
+export type Level = "" | "CO" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
 export declare const LevelString: Record<Level, string>;

package/_test/interface/Property.js

@@ -1,6 +1,6 @@
 export const LevelString = {
     "": "None",
-    CC: "CoCoon",
+    CO: "CoCoon",
     PS: "Pre-Starter",
     ST: "Starter",
     BA: "Basic",

package/layout/template/Books/SectionA.js

@@ -5,7 +5,70 @@ 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: "",
+    },
+    {
+        id: 2,
+        type: "학습 시리즈",
+        title: "Story Series",
+        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_RD_BA2.png",
+        description: "이야기 지문과 단어를 함께 연결지어 학생들의 독해 능력을 평가dfsdfsdf",
+        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: "",
+    },
+];
 let divIndex = 0;
+const bookNumber = bookData.length;
 export default function SectionA() {
     const stickyRef = useRef(null);
     const bookRef = useRef(null);
@@ -16,17 +79,15 @@ export default function SectionA() {
     const bookScrollRef = useRef(null);
     const refs = useRef([]);
     const isMD = useResponsive("md");
-    const cardHeight = isMD ? 560 : 400;
+    const isXM = useResponsive("xm");
+    const cardHeight = isXM ? 560 : 400;
     console.log(isMD);
     console.log(cardHeight);
-    const handleScroll = (direction) => {
+    const bookScroller = () => {
         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;
+            const newScrollTop = scrollAmount * divIndex;
             bookScrollRef.current.scrollTo({
                 top: newScrollTop,
                 behavior: "smooth",
@@ -39,7 +100,7 @@ export default function SectionA() {
             const scrollWrapper = stickyRef.current;
             const bookWrapper = bookRef.current;
             const sectionEndPoint = `${50 * vh}px`;
-            const bookScrollEndPoint = `${1000 * vh}px`;
+            const bookScrollEndPoint = `${((bookNumber + 1) * 100 + 40) * vh}px`;
             if (scrollWrapper && bookWrapper) {
                 // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도와 크기 조정
                 const scrollTrigger = ScrollTrigger.create({
@@ -95,21 +156,24 @@ export default function SectionA() {
                             gsap.to(ref, {
                                 scrollTrigger: {
                                     trigger: ref,
-                                    start: "top top",
-                                    end: "bottom top",
+                                    start: "start bottom",
+                                    end: "bottom bottom",
                                     snap: {
                                         snapTo: 1,
                                         duration: 0.5,
                                         ease: "power3.inOut",
                                     },
+                                    markers: false,
                                     onEnter: () => {
                                         divIndex++;
-                                        handleScroll("down");
+                                        //handleScroll("down");
+                                        bookScroller();
                                         console.log(`onEnter: ${divIndex}`);
                                     },
                                     onLeaveBack: () => {
                                         divIndex--;
-                                        handleScroll("up");
+                                        //handleScroll("up");
+                                        bookScroller();
                                         console.log(`onLeaveBack: ${divIndex}`);
                                     },
                                 },
@@ -121,7 +185,7 @@ export default function SectionA() {
                 const bookTrigger = ScrollTrigger.create({
                     trigger: bookWrapper,
                     start: "top top",
-                    end: `${bookScrollEndPoint} top`,
+                    end: `${bookScrollEndPoint} bottom`,
                     pin: true,
                     pinSpacing: false,
                     markers: true,
@@ -133,7 +197,7 @@ export default function SectionA() {
             }
         });
         return () => ctx.kill();
-    }, [handleScroll]);
+    }, [bookScroller, useResponsive]);
     const container = {
         sizes: "w-full h-fit relative",
         displays: "flex flex-col justify-start items-center",
@@ -176,16 +240,20 @@ export default function SectionA() {
     };
     const bookExplainWrapper = {
         displays: "flex flex-col md:flex-row justify-center items-center",
-        sizes: "h-screen w-full",
+        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 bookTitle = {
-        displays: "flex flex-col justify-end items-center",
-        sizes: "h-full w-full pb-5",
-        textStyling: "font-bold text-2xl",
+    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("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) => {
+                    }, 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 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, {}) }) }), bookData.map((item, index) => {
                 // item.levelLow 값을 LevelKey로 변환하기 전에 유효성 검사
                 const lowLevelStyle = getLevelStyle(item.levelLow); // 안전하게 캐스팅
                 const highLevelStyle = getLevelStyle(item.levelHigh); // 이 부분도 마찬가지로
@@ -193,71 +261,11 @@ export default function SectionA() {
                         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));
+                    }, children: [_jsx("div", { className: cn(bookTextWrapper), children: _jsxs("div", { className: cn(bookTextBox, item.type == "학습 시리즈"
+                                    ? "md:bg-blue-pastel/30"
+                                    : "md:bg-green-light"), 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 }), _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 ? (_jsx("div", { className: "text-base text-gray-dark font-medium mt-5 w-full", 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 }), "~", _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 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",
@@ -302,12 +310,15 @@ export function ScrollBookComponent() {
     const container = {
         sizes: "w-full h-fit relative",
         displyas: "flex flex-col",
-        backgrounds: "bg-white",
+        backgrounds: "",
     };
     const imageWrapper = {
-        sizes: "w-72 h-100 md:w-100 md:h-140",
-        imgStyling: "bg-contain bg-no-repeat bg-center",
+        display: "relative",
+        sizes: "w-72 h-100 xm:w-100 xm:h-140",
+        imgStyling: " z-10 p-20",
         scrollActions: "snap-start",
     };
-    return (_jsx("div", { className: cn(container), children: bookData.map((item) => (_jsx("div", {}, item.id))) }));
+    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) => (_jsx("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})` } }) }, item.id)))] }));
 }

package/layout/template/Legacy/Table.js

@@ -119,7 +119,7 @@ const LevelConvert = {
     4: "BA",
     3: "JR",
     6: "HJ",
-    11: "CC",
+    11: "CO",
 };
 const TextColorConvert = {
     PS: "text-ps-pink",
@@ -128,7 +128,7 @@ const TextColorConvert = {
     JR: "text-jr-blue",
     HJ: "text-hj-blue",
     AD: "text-gray-dark",
-    CC: "text-gray-dark",
+    CO: "text-gray-dark",
     IN: "text-gray-dark",
 };
 function Row({ examName, examDate, reports, groupReport }) {

package/layout/template/Transcript/design/Transcript.d.ts

@@ -1,4 +1,4 @@
-type Level = "CC" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
+type Level = "CO" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
 type ExamType = "REG" | "IST" | "CMP";
 export interface TranscriptProps {
     info: {

package/layout/template/Transcript/design/atom/LevelToStyleMap.js

@@ -1,5 +1,5 @@
 export const LevelToStyleMap = {
-    CC: {
+    CO: {
         name: "Cocoon",
         bgcolor: "bg-co-green-light",
         textcolor: "text-co-green",

package/layout/template/Transcript/design/molecule/LevelIndex.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useResponsive } from "../../../../../hook";
 import { LevelToStyleMap } from "../atom/LevelToStyleMap";
 export default function LevelIndex({ transcriptLevel, }) {
-    const levels = ["CC", "PS", "ST", "BA", "JR", "HJ", "AD"];
+    const levels = ["CO", "PS", "ST", "BA", "JR", "HJ", "AD"];
     const isSM = useResponsive("sm");
     return (_jsx("div", { className: "flex flex-row w-full h-fit justify-center items-center", children: levels.map((level) => {
             const { name, bgcolor, textcolor } = LevelToStyleMap[level];

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.189
+1.0.190