@edu-tosel/design 1.0.171 → 1.0.173

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/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 @@
+export default function SectionA(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Books/SectionA.js

@@ -0,0 +1,102 @@
+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";
+gsap.registerPlugin(ScrollTrigger);
+export default function SectionA() {
+    const stickyRef = useRef(null);
+    const bookRef = useRef(null); // bookWrapper를 위한 ref 추가
+    const mainTitleRef = useRef(null); // mainTitle을 위한 ref 추가
+    const subTitleRef = useRef(null);
+    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`;
+            if (scrollWrapper && bookWrapper) {
+                // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도를 조정 및 크기 조절
+                const scrollTrigger = ScrollTrigger.create({
+                    trigger: scrollWrapper,
+                    start: "top top",
+                    end: `bottom ${endpoint}`,
+                    pin: true,
+                    markers: false,
+                    onLeave: () => {
+                        console.log("Scroll completed, navigate to the next component");
+                    },
+                    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 ${endpoint}`,
+                            markers: true,
+                            scrub: true, // 스크롤에 따라 애니메이션 동기화
+                        },
+                    });
+                }
+                if (subTitleRef.current) {
+                    gsap.to(subTitleRef.current, {
+                        opacity: 0,
+                        scrollTrigger: {
+                            trigger: scrollWrapper,
+                            start: `top top`,
+                            end: `bottom ${endpoint}`,
+                            markers: true,
+                            scrub: true, // 스크롤에 따라 애니메이션 동기화
+                        },
+                    });
+                }
+                // 두 번째 ScrollTrigger: bookWrapper가 뷰포트 상단에 도달하면 sticky하게 붙기
+                const bookTrigger = ScrollTrigger.create({
+                    trigger: bookWrapper,
+                    start: "top top", // bookWrapper의 top이 뷰포트의 top에 도달했을 때
+                    pin: true,
+                    pinSpacing: false, // 추가된 pinSpacing을 false로 설정하여 고정된 상태에서 공간을 차지하지 않음
+                    markers: false,
+                    onEnter: () => {
+                        console.log("bookWrapper is pinned!");
+                    },
+                    onLeaveBack: () => {
+                        console.log("bookWrapper is unpinned!");
+                    },
+                });
+                return () => {
+                    scrollTrigger.kill();
+                    bookTrigger.kill();
+                };
+            }
+        });
+        return () => ctx.revert();
+    }, []); // 빈 배열로 dependency 설정
+    const container = {
+        sizes: "w-full h-fit",
+        displays: "flex flex-col justify-start items-center",
+        textstyles: "antialiased",
+        backgrounds: "bg-white bg-cover bg-center",
+    };
+    const TitleWrapper = {
+        spacings: "pt-[30vh] z-0",
+        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",
+    };
+    const mainTitle = {
+        textstyles: "text-center font-bold text-9xl text-black",
+    };
+    const bookWrapper = {
+        displays: "flex flex-col justify-center items-center -translate-y-[40vh]",
+        sizes: "p-10 w-full h-screen",
+    };
+    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 " }) })] }));
+}

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/Banner.js

@@ -84,7 +84,7 @@ export default function Banner() {
         backgrounds: "bg-white group hover:bg-green-dark",
         other: "animate-bounce bg-white p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => window.location.href = `https://olympiad.tosel.co.kr/dashboard`, className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => (window.location.href = `https://new.tosel.org/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
 }
 const InfiniteCarousel = () => {
     const slides = [

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.171",
+  "version": "1.0.173",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.171
+1.0.173