@edu-tosel/design 1.0.175 → 1.0.177

package/asset/SVG.d.ts

@@ -48,5 +48,9 @@ declare const SVG: {
         LessThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
         GreaterThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
     };
+    Login: {
+        User: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
+        ChekMark: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default SVG;

package/asset/SVG.js

@@ -10,6 +10,7 @@ import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
 import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
+import Login from "./svg/Login";
 const SVG = {
     TOSEL,
     Close,
@@ -23,5 +24,6 @@ const SVG = {
     Phone,
     Profile,
     Symbol,
+    Login,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -10,6 +10,7 @@ import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
 import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
+import Login from "./svg/Login";
 
 const SVG = {
   TOSEL,
@@ -24,6 +25,7 @@ const SVG = {
   Phone,
   Profile,
   Symbol,
+  Login,
 };
 
 export default SVG;

package/asset/svg/Login.d.ts

@@ -0,0 +1,11 @@
+import { Size } from "../../interface";
+export interface IconProps {
+    size?: Size;
+}
+declare const Login: {
+    User: typeof User;
+    ChekMark: typeof ChekMark;
+};
+export default Login;
+declare function User({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function ChekMark({ size }: IconProps): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Login.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Login = {
+    User,
+    ChekMark,
+};
+export default Login;
+function User({ size = "md" }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" }) }));
+}
+function ChekMark({ size = "md" }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));
+}

package/asset/svg/Login.tsx

@@ -0,0 +1,53 @@
+import { OnClick, Size } from "../../interface";
+import { cn } from "../../util";
+
+export interface IconProps {
+  size?: Size;
+}
+
+const Login = {
+  User,
+  ChekMark,
+};
+
+export default Login;
+
+function User({ size = "md" }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      />
+    </svg>
+  );
+}
+
+function ChekMark({ size = "md" }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+}

package/hook/index.d.ts

@@ -4,3 +4,4 @@ export { default as useFlag } from "./useFlag";
 export { default as useResponsive } from "./useResponsive";
 export { default as useScroll } from "./useScroll";
 export { default as useSmoothScroll } from "./useSmoothScroll";
+export { default as useVisibilityObserver } from "./useVisibilityObserver";

package/hook/index.js

@@ -4,3 +4,4 @@ export { default as useFlag } from "./useFlag";
 export { default as useResponsive } from "./useResponsive";
 export { default as useScroll } from "./useScroll";
 export { default as useSmoothScroll } from "./useSmoothScroll";
+export { default as useVisibilityObserver } from "./useVisibilityObserver";

package/hook/useVisibilityObserver.d.ts

@@ -0,0 +1,5 @@
+declare const useVisibilityObserver: (threshold?: number, observeOnce?: boolean) => {
+    isVisible: boolean;
+    elementRef: import("react").MutableRefObject<HTMLImageElement | null>;
+};
+export default useVisibilityObserver;

package/hook/useVisibilityObserver.js

@@ -0,0 +1,38 @@
+import { useEffect, useState, useRef } from "react";
+const useVisibilityObserver = (threshold = 0.1, observeOnce = true) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const elementRef = useRef(null); // HTMLImageElement로 타입 변경
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true);
+                    if (observeOnce) {
+                        observer.disconnect();
+                    }
+                }
+                else if (!observeOnce) {
+                    setIsVisible(false);
+                }
+            });
+        }, { threshold });
+        const currentElement = elementRef.current;
+        if (currentElement) {
+            observer.observe(currentElement);
+        }
+        return () => {
+            if (currentElement) {
+                observer.unobserve(currentElement);
+            }
+        };
+    }, [threshold, observeOnce]);
+    return { isVisible, elementRef };
+};
+export default useVisibilityObserver;
+// 예시:
+// className={cn(
+//     "transform transition-all duration-1000 delay-0 ease-in-out",
+//     isVisible
+//       ? "translate-y-0 opacity-100"
+//       : "translate-y-10 opacity-0"
+//   )}

package/layout/index.d.ts

@@ -23,3 +23,4 @@ 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";
+export { default as Transcript } from "./template/Transcript";

package/layout/index.js

@@ -23,3 +23,4 @@ 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";
+export { default as Transcript } from "./template/Transcript";

package/layout/template/About/SectionA.js

@@ -1,4 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../../../util";
+import { useVisibilityObserver } from "../../../hook";
 export default function SectionA() {
-    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover-min.png')] flex py-55 justify-center bg-cover bg-center ", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col gap-8 text-white", children: [_jsx("div", { className: "text-xl", children: "15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-6xl font-bold", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1-min.png", alt: "", className: "object-fit w-70" })] }) }));
+    const [isHidden, setIsHidden] = useState(false);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 50) {
+                setIsHidden(true);
+            }
+            else {
+                setIsHidden(false);
+            }
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    const handleScroll = () => {
+        window.scrollBy({
+            top: window.innerHeight,
+            behavior: "smooth",
+        });
+    };
+    const scrollGuideWrapper = {
+        display: "absolute hidden md:flex flex-col justify-center items-center z-10",
+        sizes: "w-full",
+        spacings: "bottom-0 mb-10",
+        scrollAction: `transition-opacity duration-500 ${isHidden ? "opacity-0" : "opacity-100"}`,
+    };
+    const scrollGuideText = {
+        sizes: "w-full",
+        textstyles: "font-medium text-white text-base",
+        spacings: "text-center",
+    };
+    const scrollGuideButton = {
+        sizes: "w-10 h-10 mt-10",
+        other: "animate-bounce p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-center md:items-start",
+        sizes: "w-[1200px] h-full",
+        spacings: "gap-8",
+        textstyles: "text-white",
+        animation: "transform transition-all duration-1000 delay-0 ease-in-out",
+    };
+    const { isVisible, elementRef } = useVisibilityObserver(0.1, true);
+    return (_jsxs("div", { className: "relative w-full h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover-min.png')] flex py-55 justify-center bg-cover bg-center px-5 z-0", children: [_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", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 text-white", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }) }) })] }), _jsx("div", { className: "absolute h-screen w-full bg-gradient-to-b from-black/0 to-black z-0 top-0" }), _jsxs("div", { className: cn(titleWrapper, isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"), children: [_jsx("div", { className: "text-lg md:text-xl z-10", ref: elementRef, children: "15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-[32px] md:text-6xl font-bold text-center md:text-left z-10", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1-min.png", alt: "", className: "object-fit w-70 z-10" })] })] }));
 }

package/layout/template/About/SectionB.d.ts

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

package/layout/template/About/SectionB.js

@@ -1,22 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { useVisibilityObserver } from "../../../hook";
+const stats = [
+    {
+        id: 1,
+        label: "누적 정기시험 응시자",
+        value: "83.1만 +",
+    },
+    {
+        id: 2,
+        label: "지필고사 개최",
+        value: "1.4천회",
+    },
+    {
+        id: 3,
+        label: "누적 이용기관 수",
+        value: "2.9만 +",
+    },
+    {
+        id: 4,
+        label: "선별된 성적 데이터",
+        value: "39.3만 개 +",
+    },
+];
 export default function SectionB() {
-    const stats = [
-        {
-            label: "누적 정기시험 응시자",
-            value: "83.1만 +",
-        },
-        {
-            label: "지필고사 개최",
-            value: "1.4천회",
-        },
-        {
-            label: "누적 이용기관 수",
-            value: "2.9만 +",
-        },
-        {
-            label: "선별된 성적 데이터",
-            value: "39.3만 개 +",
-        },
-    ];
-    return (_jsx("div", { className: " w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionb-bg-min.png')] flex items-center justify-center justify-center bg-cover bg-center flex-col", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col text-white", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-16", children: [_jsx("div", { className: "text-2xl font-bold", children: "80\uB9CC \uB204\uC801 \uC751\uC2DC\uC790\uAC00 \uBCF4\uB0B4\uB294 \uC2E0\uB8B0" }), _jsxs("div", { className: "text-sm", children: ["\uD1A0\uC140\uC740 20\uB144\uC774 \uB118\uB294 \uC2DC\uAC04\uB3D9\uC548 \uD55C\uAD6D\uD615 \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB97C \uC5F0\uAD6C\uD574\uC654\uACE0,", _jsx("br", {}), "\uD604\uC7AC 80\uB9CC\uBA85\uC774 \uB118\uB294 \uC751\uC2DC\uC790\uB97C \uBC30\uCD9C\uD55C \uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB85C \uAC70\uB4ED\uB0AC\uC2B5\uB2C8\uB2E4."] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex gap-12 mb-8", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC815\uAE30\uC2DC\uD5D8 \uC751\uC2DC\uC790" }), _jsx("div", { className: "text-6xl font-bold", children: "83.1\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC9C0\uD544\uACE0\uC0AC \uAC1C\uCD5C" }), _jsx("div", { className: "text-6xl font-bold", children: "1.4\uCC9C\uD68C" })] })] }), _jsxs("div", { className: "flex gap-12 mb-4", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC774\uC6A9\uAE30\uAD00 \uC218" }), _jsx("div", { className: "text-6xl font-bold", children: "2.9\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC120\uBCC4\uB41C \uC131\uC801 \uB370\uC774\uD130" }), _jsx("div", { className: "text-6xl font-bold", children: "39.3\uB9CC \uAC1C +" })] })] }), _jsx("div", { className: "text-2xs text-white/80", children: "2024\uB144 8\uC6D4 \uAE30\uC900" })] })] }) }));
+    return (_jsx("div", { className: "break-keep w-full h-screen py-[200px] md:py-0 md:min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionb-bg-min.png')] flex items-center justify-center bg-cover bg-center flex-col", children: _jsxs("div", { className: "w-full max-w-[1200px] h-full flex flex-col text-white px-5 justify-center", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-16", children: [_jsx("div", { className: "text-2xl font-bold", children: "80\uB9CC \uB204\uC801 \uC751\uC2DC\uC790\uAC00 \uBCF4\uB0B4\uB294 \uC2E0\uB8B0" }), _jsxs("div", { className: "text-sm", children: ["\uD1A0\uC140\uC740 20\uB144\uC774 \uB118\uB294 \uC2DC\uAC04\uB3D9\uC548 \uD55C\uAD6D\uD615 \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB97C \uC5F0\uAD6C\uD574\uC654\uACE0,", _jsx("br", {}), "\uD604\uC7AC 80\uB9CC\uBA85\uC774 \uB118\uB294 \uC751\uC2DC\uC790\uB97C \uBC30\uCD9C\uD55C \uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB85C \uAC70\uB4ED\uB0AC\uC2B5\uB2C8\uB2E4."] })] }), _jsx(StatBoxComponent, {}), _jsx("div", { className: "text-xs", children: "2014\uB144 8\uC6D4 \uAE30\uC900" })] }) }));
+}
+export function StatBoxComponent() {
+    const statBoxWrapper = {
+        displays: "flex flex-wrap justify-start align-start max-w-[935px] w-full",
+        spacings: "gap-y-5 gap-x-5 md:gap-x-12 mb-5",
+    };
+    const statBox = {
+        displays: "flex flex-col items-start",
+        sizes: "w-60 md:w-80",
+        animations: "transform transition-all duration-1000 delay-0 ease-in-out",
+    };
+    const labelText = {
+        textStyles: "font-bold text-base md:text-lg",
+        colors: "text-white/80",
+        spacings: "leading-normal",
+    };
+    const valueText = {
+        textStyles: "font-bold text-[40px] md:text-[64px]",
+        colors: "text-white",
+        spacings: "leading-normal",
+    };
+    return (_jsx("div", { className: cn(statBoxWrapper), children: stats.map((item) => {
+            const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
+            return (_jsxs("div", { ref: elementRef, className: cn(statBox, isVisible
+                    ? "opacity-100 translate-y-0"
+                    : "opacity-0 translate-y-10"), children: [_jsx("div", { className: cn(labelText), children: item.label }), _jsx("div", { className: cn(valueText), children: item.value })] }, item.id));
+        }) }));
 }

package/layout/template/About/SectionC.js

@@ -29,5 +29,7 @@ export default function SectionC() {
         setSelectedCard(card);
         setIsOpen(true);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full min-h-[900px] bg-white flex items-center justify-center", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col text-crimson-burgundy gap-8", children: [_jsx("div", { className: "text-center text-3xl font-bold", children: "Leadership" }), _jsx("div", { className: "text-center text-sm font-light w-full pb-2 border-b-[1px] border-crimson-burgundy", children: "Board Members" }), _jsx("div", { className: "w-full flex items-center justify-center gap-8", children: members.map((member) => (_jsx(SectionCCards, { imgSource: member.imgSource, name: member.name, position: member.position, description: member.description, handleClick: () => handleCardClick(member) }, member.name))) })] }) }), _jsx(SectionCLeaf, { isOpenState: [isOpen, setIsOpen], selectedData: [selectedCard, setSelectedCard] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full min-h-[900px] bg-white flex items-center justify-center px-5 py-8", children: _jsxs("div", { className: "max-w-[1200px] h-full flex flex-col text-crimson-burgundy gap-8 w-full", children: [_jsx("div", { className: "text-center text-3xl font-bold", children: "Leadership" }), _jsx("div", { className: "text-center text-sm font-light w-full pb-2 border-b-[1px] border-crimson-burgundy", children: "Board Members" }), _jsx("div", { className: "w-full flex items-center justify-center gap-8 flex-wrap", children: members.map((member, index) => {
+                                return (_jsx(SectionCCards, { imgSource: member.imgSource, name: member.name, position: member.position, description: member.description, handleClick: () => handleCardClick(member), delay: index * 100 }, index));
+                            }) })] }) }), _jsx(SectionCLeaf, { isOpenState: [isOpen, setIsOpen], selectedData: [selectedCard, setSelectedCard] })] }));
 }

package/layout/template/About/SectionCCards.d.ts

@@ -1,6 +1,7 @@
 import { StateAction } from "../../../interface";
 type FunctionProps = {
     handleClick: StateAction<boolean>;
+    delay: number;
 };
 interface CardProps {
     imgSource: string;
@@ -8,5 +9,5 @@ interface CardProps {
     position: string;
     description: string;
 }
-export default function Card({ imgSource, name, position, description, handleClick, }: CardProps & FunctionProps): import("react/jsx-runtime").JSX.Element;
+export default function Card({ imgSource, name, position, description, handleClick, delay, }: CardProps & FunctionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/About/SectionCCards.js

@@ -1,4 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Card({ imgSource, name, position, description, handleClick, }) {
-    return (_jsxs("div", { className: "max-w-[270px] flex flex-col gap-3", onClick: () => handleClick(true), children: [_jsx("div", { className: "w-[270px] h-90 overflow-hidden rounded-3xl cursor-pointer", children: _jsx("img", { src: imgSource, alt: name, className: "w-full h-full object-cover hover:scale-105 transition-all duration-500" }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "text-gray-dark font-bold text-2xl", children: name }), _jsx("div", { className: "text-gray-medium font-semibold text-2xl", children: position })] }), _jsx("div", { className: "text-sm text-gray-medium", children: description })] }));
+import { useVisibilityObserver, useResponsive } from "../../../hook";
+import { cn } from "../../../util";
+export default function Card({ imgSource, name, position, description, handleClick, delay, }) {
+    const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
+    const isXM = useResponsive("xm");
+    const cardContainer = {
+        displays: "max-w-[270px] flex flex-col gap-3",
+        animations: `transform transition-all duration-1000 ease-in-out`,
+        delay: isXM ? `delay-${delay}` : "delay-0",
+    };
+    return (_jsxs("div", { ref: elementRef, className: cn(cardContainer, isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"), onClick: () => handleClick(true), children: [_jsx("div", { className: "w-[270px] h-90 overflow-hidden rounded-3xl cursor-pointer", children: _jsx("img", { src: imgSource, alt: name, className: "w-full h-full object-cover hover:scale-105 transition-all duration-500" }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "text-gray-dark font-bold text-2xl", children: name }), _jsx("div", { className: "text-gray-medium font-semibold text-2xl", children: position })] }), _jsx("div", { className: "text-sm text-gray-medium", children: description })] }));
 }

package/layout/template/About/SectionCD.js

@@ -1,4 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVisibilityObserver } from "../../../hook";
+import { cn } from "../../../util";
 export default function SectionCD() {
-    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionc2-bg-min.jpg')] flex justify-center items-end pb-24 bg-cover bg-center", children: _jsxs("div", { className: "w-[1200px] h-[304px] bg-black/50 z-10 flex flex-col gap-2.5 px-8 py-12 text-center rounded-xl", style: { backdropFilter: "blur(40px)" }, children: [_jsx("div", { className: "text-4xl text-white/50", children: "Our Mission" }), _jsxs("div", { className: "text-white text-2xl font-bold", children: ["\uD1A0\uC140\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD569\uB2C8\uB2E4.", " ", _jsx("br", {}), "\uBE44\uC601\uC5B4\uAD8C \uD559\uC0DD\uB4E4\uC5D0\uAC8C \uC54C\uB9DE\uC740 \uD3C9\uAC00\uC81C\uB3C4\uB97C \uD1B5\uD574,", _jsx("br", {}), "\uB204\uAD6C\uB098 \uC601\uC5B4\uB97C \uB3C4\uC804\uD560 \uC218 \uC788\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uC774 \uD1A0\uC140\uC758 \uC874\uC7AC \uC774\uC720\uC785\uB2C8\uB2E4."] })] }) }));
+    const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
+    const blackBox = {
+        displays: "flex flex-col",
+        sizes: "w-full max-w-[1200px] h-fit rounded-xl",
+        spacings: "py-12 px-8 gap-2.5 z-10",
+        backgrounds: "bg-black/30 backdrop-blur-2xl",
+        textstyles: "text-center break-keep",
+        animations: "transform transition-all duration-1000 delay-0 ease-in-out",
+    };
+    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionc2-bg-min.jpg')] flex justify-center items-end pb-24 bg-cover bg-center px-5", children: _jsxs("div", { ref: elementRef, className: cn(blackBox, isVisible ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"), children: [_jsx("div", { className: "text-3xl md:text-4xl text-white/50", children: "Our Mission" }), _jsxs("div", { className: "text-white text-base md:text-2xl font-bold", children: ["\uD1A0\uC140\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD569\uB2C8\uB2E4.", " ", _jsx("br", {}), "\uBE44\uC601\uC5B4\uAD8C \uD559\uC0DD\uB4E4\uC5D0\uAC8C \uC54C\uB9DE\uC740 \uD3C9\uAC00\uC81C\uB3C4\uB97C \uD1B5\uD574,", _jsx("br", {}), "\uB204\uAD6C\uB098 \uC601\uC5B4\uB97C \uB3C4\uC804\uD560 \uC218 \uC788\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uC774 \uD1A0\uC140\uC758 \uC874\uC7AC \uC774\uC720\uC785\uB2C8\uB2E4."] })] }) }));
 }

package/layout/template/About/SectionCLeaf.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { animated, useTransition } from "react-spring";
+import { useEffect } from "react";
 import { cn } from "../../../util";
 import { HiXMark } from "react-icons/hi2";
+import { useResponsive } from "../../../hook";
 export default function SectionCLeaf({ selectedData, isOpenState: [isOpen, setIsOpen], }) {
     const transitions = useTransition(isOpen, {
         from: { opacity: 0, transform: "translateY(100%)" },
@@ -12,14 +14,15 @@ export default function SectionCLeaf({ selectedData, isOpenState: [isOpen, setIs
     const { name, imgSource, position, description } = selectedCard;
     const container = {
         positions: "fixed top-0 left-0 z-50",
-        displays: "flex flex-col items-center justify-center",
-        sizes: "min-h-screen w-full",
+        displays: "flex flex-col items-center justify-start px-5 md:px-12",
+        sizes: "h-screen w-full",
         background: "bg-white/90",
+        scroll: "overflow-y-scroll scrollbar-hidden sm:overflow-y-hidden",
     };
     const maingBg = {
         positions: "relative",
-        displays: "flex gap-12",
-        sizes: "w-[1200px]",
+        displays: "flex flex-col sm:flex-row gap-12 ",
+        sizes: "max-w-[1200px]",
         fonts: "text-black",
     };
     const specificData = {
@@ -85,8 +88,17 @@ export default function SectionCLeaf({ selectedData, isOpenState: [isOpen, setIs
     };
     const details = specificData[name]?.details;
     const introduces = specificData[name]?.introduce;
-    return (_jsx(_Fragment, { children: transitions((style, item) => item && (_jsxs(animated.div, { style: style, className: cn(container), onClick: () => setIsOpen(false), children: [_jsx(Cancel, { onClick: () => setIsOpen(false) }), _jsxs("div", { className: cn(maingBg), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "w-[270px] h-90 overflow-hidden rounded-3xl cursor-pointer", children: _jsx("img", { src: imgSource, alt: name, className: "w-full h-full object-cover hover:scale-105 transition-all duration-500" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "text-gray-dark font-bold text-2xl", children: name }), _jsx("div", { className: "text-gray-medium font-semibold text-2xl", children: position })] }), _jsx("div", { className: "text-sm", children: description })] }), _jsx("div", { className: "text-sm text-gray-medium", children: details?.map((detail, index) => (_jsxs("div", { className: "flex", children: [_jsx("div", { className: "pr-2", children: "\u2022" }), detail] }, index))) })] }), _jsxs("div", { className: "flex flex-col gap-12", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xl", children: position }), _jsx("div", { className: "font-bold text-[80px]", children: name }), _jsx("div", { className: "font-semibold text-xl", children: description })] }), _jsx("div", { children: introduces?.map((introduce, index) => (_jsx("div", { className: "flex mb-4 font-normal text-base", children: introduce }, index))) })] })] })] }))) }));
+    useEffect(() => {
+        isOpen
+            ? document.body.classList.add("overflow-hidden")
+            : document.body.classList.remove("overflow-hidden");
+        return () => {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, [isOpen]);
+    const isSM = useResponsive("sm");
+    return (_jsx(_Fragment, { children: transitions((style, item) => item && (_jsx(animated.div, { style: style, className: cn(container), onClick: () => setIsOpen(false), children: _jsxs("div", { className: cn(maingBg), children: [_jsx("div", { className: "absolute top-5 left-0 w-full z-20", children: _jsx(Cancel, { onClick: () => setIsOpen(false) }) }), _jsxs("div", { className: "flex flex-col gap-3 translate-y-[60px]", children: [_jsx("div", { className: "w-[270px] h-90 overflow-hidden rounded-3xl cursor-pointer", children: _jsx("img", { src: imgSource, alt: name, className: "w-full h-full object-cover hover:scale-105 transition-all duration-500" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "text-gray-dark font-bold text-2xl", children: name }), _jsx("div", { className: "text-gray-medium font-semibold text-2xl", children: position })] }), _jsx("div", { className: "text-sm", children: description })] }), _jsx("div", { className: "text-sm text-gray-medium", children: details?.map((detail, index) => (_jsxs("div", { className: "flex", children: [_jsx("div", { className: "pr-2", children: "\u2022" }), detail] }, index))) })] }), _jsx("div", { className: "w-full h-screen overflow-y-scroll scrollbar-hidden", children: _jsxs("div", { className: "flex flex-col gap-12 translate-y-[60px]", children: [isSM && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xl", children: position }), _jsx("div", { className: "font-bold text-[80px]", children: name }), _jsx("div", { className: "font-semibold text-xl", children: description })] })), _jsx("div", { children: introduces?.map((introduce, index) => (_jsx("div", { className: "flex mb-4 font-normal text-base", children: introduce }, index))) })] }) })] }) }))) }));
 }
 function Cancel({ onClick }) {
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-[1200px] flex justify-end", children: _jsxs("div", { className: "flex bg-gray-light px-[10px] py-1 gap-[10px] rounded-md text-md cursor-pointer flex items-center justify-center", onClick: onClick, children: [_jsx("div", { className: "text-black font-light", children: "close" }), _jsx(HiXMark, { className: "text-base" })] }) }) }));
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full flex justify-end", children: _jsxs("div", { className: "flex bg-gray-light px-[10px] py-1 gap-[10px] rounded-md text-md cursor-pointer items-center justify-center", onClick: onClick, children: [_jsx("div", { className: "text-black font-light", children: "close" }), _jsx(HiXMark, { className: "text-base" })] }) }) }));
 }

package/layout/template/About/SectionG.js

@@ -45,5 +45,5 @@ export default function SectionG() {
                                     [2016, "2016"],
                                     [2015, "2015"],
                                     [2014, "2014"],
-                                ] }) })] }), filteredDatas.map((data, index) => (_jsx("div", { className: "w-full flex text-center flex-col border-b-1 border-gray-light/50 hover:bg-white/10", children: _jsxs("div", { className: "w-full h-30 py-8 flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "font-semibold", children: data.company }), _jsx("div", { className: "text-sm text-gray-medium", children: data.date })] }), _jsx("div", { className: "text-xl font-semibold text-left text-black font-light", children: data.title })] }) }, index)))] }) }));
+                                ] }) })] }), filteredDatas.map((data, index) => (_jsx("div", { className: "w-full flex text-center flex-col border-b-1 border-gray-light/50 hover:bg-white/10", children: _jsxs("div", { className: "w-full h-30 py-8 flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "font-semibold", children: data.company }), _jsx("div", { className: "text-sm text-gray-medium", children: data.date })] }), _jsx("div", { className: "text-xl text-left text-black font-light", children: data.title })] }) }, index)))] }) }));
 }

package/layout/template/Archive/Header.js

@@ -65,5 +65,5 @@ function ContentBox({ contents }) {
             ? "bg-green-dark/10 text-green-dark"
             : "bg-none text-gray-medium",
     };
-    return (_jsx("div", { className: cn(container), children: contents.map((content) => (_jsx("button", { className: cn(buttonBox), children: content.title }, content.title))) }));
+    return (_jsx("div", { className: cn(container), children: contents.map((content) => (_jsx("button", { onClick: content.onClick, className: cn(buttonBox), children: content.title }, content.title))) }));
 }

package/layout/template/Regexam/OfflineExam.js

@@ -95,7 +95,7 @@ export default function OfflineExam() {
         sizes: "w-full h-0.5 mt-1",
         colors: "bg-gradient-to-r from-crimson-burgundy to-green-dark flex-shrink-0",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), isMD && (_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" })] }))] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC5F0\uAC04 \uC2DC\uD5D8 \uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(AnnualTableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uB2F9\uC77C \uC138\uBD80\uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TimeTableComponent, {}) }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uACE0\uC0AC\uC7A5 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uC785\uC2E4\uB9C8\uAC10(13\uC2DC 10\uBD84)\uC2DC\uAC04\uC744 \uC900\uC218\uD574\uC8FC\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4." })] })] })] }), !isMD && (_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" })] }))] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), isMD && (_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" })] }))] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC5F0\uAC04 \uC2DC\uD5D8 \uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(AnnualTableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uB2F9\uC77C \uC138\uBD80\uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TimeTableComponent, {}) }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uACE0\uC0AC\uC7A5 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uC785\uC2E4\uB9C8\uAC10(13\uC2DC 10\uBD84)\uC2DC\uAC04\uC744 \uC900\uC218\uD574\uC8FC\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4." })] })] })] }), !isMD && (_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" })] }))] }) }));
 }
 export function TableComponent() {
     const data = [
@@ -186,7 +186,7 @@ export function AnnualTableComponent() {
             dDay: "25.08.23",
             regStartDay: "25.05.19",
             regEndDay: "25.07.22",
-            resultDay: "25.09.04",
+            resultDay: "25.09.11",
         },
         {
             examNumber: "90",

package/layout/template/Regexam/Types.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { cn } from "../../../util";
 import { useActionStore } from "../../../store";
 import Action from "../Action";
 import { ConfirmModal } from "../../../modal";
-import { useResponsive } from "../../../hook";
+import { useResponsive, useVisibilityObserver } from "../../../hook";
 export default function Types() {
     const scrollContainerRef = useRef(null);
     const cardWidth = 400; // card width
@@ -158,28 +158,9 @@ const examStyles = {
     },
 };
 const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, majorColor, link, imgSrc, buttonText, mainPrice, subPrice, cocoonPrice, }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const imgRef = useRef(null);
     const { setModal } = useActionStore();
     const isMD = useResponsive("md");
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    setIsVisible(true);
-                    observer.disconnect();
-                }
-            });
-        }, { threshold: 0.1 });
-        if (imgRef.current) {
-            observer.observe(imgRef.current);
-        }
-        return () => {
-            if (imgRef.current) {
-                observer.unobserve(imgRef.current);
-            }
-        };
-    }, []);
+    const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
     const ghostCard = {
         displays: "flex flex-col gap-5",
         spacings: "ms-0 ps-0 ",
@@ -299,7 +280,7 @@ const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, ma
                         },
                     ] }),
             ],
-        ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", children: _jsx("img", { ref: imgRef, src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
+        ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", children: _jsx("img", { ref: elementRef, src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
                                         ? "translate-y-0 opacity-100"
                                         : "translate-y-10 opacity-0") }) }) }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsxs("div", { className: cn(headline), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(title), children: name }), _jsx("div", { className: cn(subtitle), children: place })] }), _jsx("div", { className: cn(typetag), children: type })] }), _jsxs("div", { className: cn(bottomWrapper), children: [_jsxs("div", { className: cn(bottomBox), children: [_jsx("div", { 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-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uC751\uC2DC\uB8CC" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { children: cocoonPrice && (_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["cocoon: ", cocoonPrice] })) }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["Pre-Starter ~ Junior: ", mainPrice] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["High Junior: ", subPrice] })] })] })] }), _jsxs("div", { className: cn(bottomBoxWrapper), children: [_jsxs("div", { className: cn(bottomBox, isHallofFame ? "bg-green-light" : "bg-crimson-burgundy/20"), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: cn(isHallofFame
                                                                     ? "size-6 fill-yellow-500"

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

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { Button as _Button } from "../../../interface";
+export default function Layout({ children, buttons, }: {
+    children: ReactNode;
+    buttons?: _Button[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Transcript/Layout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Layout({ children, buttons, }) {
+    const container = {
+        sizes: "w-full min-h-screen",
+        displays: "flex flex-col justify-start items-center",
+        backgrounds: "bg-gray-light",
+        pressures: "p-3.5",
+    };
+    const header = {
+        displays: "flex",
+        sizes: "w-full ",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(header), children: buttons?.map(({ title, onClick }) => (_jsx("button", { onClick: onClick, children: title }))) }), children] }));
+}

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

@@ -0,0 +1,49 @@
+type Level = "CC" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
+type ExamType = "REG" | "IST" | "CMP";
+export interface TranscriptProps {
+    info: {
+        name: string;
+        nickname?: string;
+        imgSrc?: string;
+        code: string;
+        birthday: string;
+        examName: string;
+        examDate: string;
+        examType: ExamType;
+        examValidAt: string;
+        level: Level;
+    };
+    result: {
+        score: number;
+        grade: number;
+        isHonor: boolean;
+    };
+    data: {
+        analysis: {
+            total: {
+                section1: number;
+                section2: number;
+            };
+            user: {
+                section1: number;
+                section2: number;
+            };
+            nationalAverage: {
+                section1: number;
+                section2: number;
+            };
+            localAverage: {
+                section1: number;
+                section2: number;
+            };
+            "10percentageAverage": number;
+            "30percentageAverage": number;
+        };
+        script: {
+            performanceEvaluation: string | string[];
+            section1: string | string[];
+            section2: string | string[];
+        };
+    };
+}
+export {};

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

@@ -0,0 +1,5 @@
+import { TranscriptProps } from "./Transcript";
+declare const _default: import("react").ForwardRefExoticComponent<{
+    props: TranscriptProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { paperSize } from "../../../../style/size";
+import { cn } from "../../../../util";
+import { useResponsive } from "../../../../hook";
+import { ResponsiveContainer, PieChart, Pie, Cell, } from "recharts";
+const examTypeMap = {
+    REG: "정기시험",
+    IST: "기관시험",
+    CMP: "경시대회",
+};
+function getStringfromType(ExamType) {
+    return examTypeMap[ExamType] || "Unknown";
+}
+const LevelToStyleMap = {
+    CC: {
+        name: "Cocoon",
+        bgcolor: "bg-cocoon-green/10",
+        textcolor: "text-cocoon-green",
+    },
+    PS: {
+        name: "Pre-Starter",
+        bgcolor: "bg-ps-pink-light",
+        textcolor: "text-ps-pink",
+    },
+    ST: {
+        name: "Starter",
+        bgcolor: "bg-st-orange-light",
+        textcolor: "text-st-orange",
+    },
+    BA: {
+        name: "Basic",
+        bgcolor: "bg-ba-yellow-light",
+        textcolor: "text-ba-yellow",
+    },
+    JR: {
+        name: "Junior",
+        bgcolor: "bg-jr-blue-light",
+        textcolor: "text-jr-blue",
+    },
+    HJ: {
+        name: "High Junior",
+        bgcolor: "bg-hj-blue-light",
+        textcolor: "text-hj-blue",
+    },
+    AD: {
+        name: "Advanced",
+        bgcolor: "bg-gray-light",
+        textcolor: "text-gray-dark",
+    },
+};
+function getStylefromLevel(level, field) {
+    return LevelToStyleMap[level]?.[field] || "Unknown";
+}
+function TranscriptDesign({ props }, ref) {
+    const { info, result, data } = props;
+    const container = {
+        printSize: paperSize.a4,
+        backgrounds: "print:bg-white",
+        sizes: "w-full mt-2",
+        textStyles: "break-keep",
+        // test: "border-2 border-red-500",
+    };
+    const headerBox = {
+        display: "flex flex-row flex-wrap justify-between items-center",
+        sizes: "w-full h-fit rounded-md",
+        spacings: "px-5 py-2",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+    };
+    const levelTag = {
+        display: "flex justify-center items-center",
+        textStyles: "text-center, ",
+        variableStyle: `text-center text-xs font-bold ${getStylefromLevel(info.level, "textcolor")}`,
+        backgrounds: getStylefromLevel(info.level, "bgcolor"),
+        sizes: "rounded-md w-fit h-fit",
+        spacings: "px-2 py-1",
+    };
+    const isMD = useResponsive("md");
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "images/logos/logo-tosel-white.svg", alt: "", className: "h-10" }), _jsxs("div", { className: "text-white font-medium text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(ResultCard, { result: result })] }));
+}
+export default forwardRef(TranscriptDesign);
+function ResultCard({ result }) {
+    return (_jsxs("div", { className: "flex flex-row w-full h-fit p-5 bg-white shadow-main rounded-lg mt-5 gap-5", children: [_jsx(CircularGauge, { score: result.score, maxScore: 100, isGrade: false }), _jsx(CircularGauge, { score: result.grade, maxScore: 9, isGrade: true })] }));
+}
+const CircularGauge = ({ score, maxScore, isGrade }) => {
+    const pieStyles = {
+        cx: "50%",
+        cy: "50%",
+        innerRadius: "70%",
+        outerRadius: "90%",
+        cornerRadius: 6,
+        dataKey: "value",
+        nameKey: "name",
+    };
+    const cellStyles = {
+        stroke: "rgba(255, 255, 255, 0)",
+    };
+    const scoreText = {
+        displays: "absolute flex justify-center items-center",
+        positions: "top-0 left-0",
+        sizes: "w-full h-full",
+        textStyles: "font-bold text-gray-medium text-2xl",
+    };
+    const preparePieChartData = () => {
+        const mainScore = score;
+        const remainingScore = maxScore - mainScore;
+        if (isGrade) {
+            return [
+                { name: "Score", value: remainingScore - 1 },
+                { name: "Grade", value: mainScore - 1 },
+            ];
+        }
+        else {
+            return [
+                { name: "Score", value: mainScore },
+                { name: "Remaining", value: remainingScore },
+            ];
+        }
+    };
+    return (_jsxs("div", { className: "w-full aspect-ratio-1/1 flex items-center justify-center relative", children: [_jsx("div", { className: "absolute top-0 left-0 w-full aspect-ratio-1/1", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsx(Pie, { data: [{ name: "Background", value: 100 }], cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "90%", fill: "rgba(128, 128, 128, 0.2)" // 회색 배경 색상
+                            , dataKey: "value", stroke: "rgb(255,255,255,0)", animationDuration: 0 }) }) }) }), _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, children: [_jsx(Cell, { fill: "#105652", ...cellStyles }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: score })] }));
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/layout/template/Transcript/design/TranscriptAdvanced.design.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { paperSize } from "../../../../style/size";
+import { cn } from "../../../../util";
+export default function TranscriptDesign() {
+    const container = {
+        sizes: paperSize.a4,
+        backgrounds: "bg-white",
+    };
+    return _jsx("div", { className: cn(container), children: "asdf" });
+}

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

@@ -0,0 +1,8 @@
+import Layout from "./Layout";
+declare const Transcript: {
+    Layout: typeof Layout;
+    Paper: import("react").ForwardRefExoticComponent<{
+        props: import("./design/Transcript").TranscriptProps;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default Transcript;

package/layout/template/Transcript/index.js

@@ -0,0 +1,7 @@
+import Paper from "./design/Transcript.design";
+import Layout from "./Layout";
+const Transcript = {
+    Layout,
+    Paper,
+};
+export default Transcript;

package/layout/template/sign/Box.d.ts

@@ -3,7 +3,7 @@ interface BoxProps {
     sizes?: string;
     className?: string;
 }
-declare function Box({ sizes, children, className }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function Box({ children, className }: BoxProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Box {
     var Fix: ({ children, className }: Omit<BoxProps, "sizes">) => import("react/jsx-runtime").JSX.Element;
 }

package/layout/template/sign/Box.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
-function Box({ sizes, children, className }) {
+function Box({ children, className }) {
     const container = {
-        sizes: sizes ?? "w-112.5 p-5 ",
-        style: "box-shadow bg-white rounded-xl",
+        sizes: "w-full p-5",
+        style: "shadow-main bg-white rounded-xl hover:shadow-green duration-300",
         className,
     };
     return _jsx("div", { className: cn(container), children: children });

package/layout/template/sign/Button.d.ts

@@ -1,9 +1,11 @@
 import { OnClick, State } from "../../../interface";
+import { ReactNode } from "react";
 interface ButtonProps {
     title: string;
     onClick: OnClick;
     disabled?: boolean;
     size?: string;
+    icon?: ReactNode;
 }
 interface SelectButtonProps {
     state: State<string>;
@@ -16,7 +18,7 @@ interface SelectButtonProps {
 interface SelectButtonWithTitleProps extends SelectButtonProps {
     title: string;
 }
-declare function Button({ title, onClick, disabled, size }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ title, onClick, disabled, size, icon }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Button {
     var Inner: ({ title, onClick }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
     var Choose: typeof Selection;

package/layout/template/sign/Button.js

@@ -1,18 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, gradient } from "../../../util";
-function Button({ title, onClick, disabled, size }) {
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+function Button({ title, onClick, disabled, size, icon }) {
     const container = {
         sizes: size ?? "w-112.5 h-13.5",
-        displays: "flex items-center justify-center",
-        backgrounds: !disabled ? gradient.bg.greenToRed : "bg-gray-medium",
+        displays: "flex items-center justify-center gap-4",
+        backgrounds: !disabled ? "bg-green-dark" : "bg-gray-medium",
         cursors: !disabled ? "cursor-pointer" : "cursor-default",
-        styles: "rounded-lgx text-white",
+        styles: "rounded-lgx text-white font-medium text-lg",
+        animations: "hover:shadow-green duration-300",
     };
-    return (_jsx("div", { onClick: () => {
+    return (_jsxs("div", { onClick: () => {
             if (disabled)
                 return;
             return onClick();
-        }, className: cn(container), children: title }));
+        }, className: cn(container), children: [title, icon && icon] }));
 }
 function Inner({ title, onClick }) {
     return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5" }));
@@ -23,14 +24,15 @@ function Selection({ buttons, state }) {
         return {
             displays: "flex flex-1 justify-center items-center gap-3",
             sizes: "h-15",
-            backgrounds: value === type ? "bg-green-dark/10" : "bg-gray-light",
+            backgrounds: value === type ? "bg-green-dark/10 shadow-green" : "bg-gray-light",
             styles: "rounded-lgx",
+            animations: "duration-300",
         };
     };
     return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [_jsx("img", { src: icon }), _jsx("div", { children: title })] }, type))) }));
 }
 function WithTitle({ buttons, title, state }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Selection, { buttons: buttons, state: state })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Selection, { buttons: buttons, state: state })] }));
 }
 Button.Inner = Inner;
 Button.Choose = Selection;

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

@@ -2,6 +2,7 @@ interface LayoutProps {
     children: React.ReactNode;
     steps?: boolean[];
     script?: string;
+    title?: string;
 }
-export default function Layout({ children, steps, script }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function Layout({ children, steps, script, title, }: LayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/sign/Layout.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-export default function Layout({ children, steps, script }) {
+export default function Layout({ children, steps, script, title, }) {
     const container = {
         positions: "relative",
         sizes: "w-full min-h-screen overflow-hidden",
         displays: "flex flex-col items-center justify-center",
+        spacings: "px-5",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("img", { src: "/images/logos/tosel.png", width: 180, height: 40 }), _jsx("div", { className: "mt-12", children: script }), _jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) }), children] }));
+    const headerBox = {
+        display: "flex flex-row justify-between items-center",
+        sizes: "h-15 w-full md:w-112.5",
+        spacings: "px-5",
+        backgorunds: "bg-gradient-to-r from-green-dark to-crimson-burgundy rounded-lg",
+    };
+    const titleText = {
+        textStyles: "font-bold text-base text-white",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "/images/logos/tosel-white-highdefinition.png", width: 93, height: 20, alt: "\uD1A0\uC140\uC758 \uBA54\uC778 \uB85C\uACE0" }), _jsx("div", { className: cn(titleText), children: title })] }), _jsx("div", { className: "mt-5 font-medium text-sm", children: script }), _jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) }), children] }));
 }
 function Light({ flag }) {
     const container = {

package/layout/template/sign/WithTitle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from "../../../widget";
 function WithTitle(props) {
-    return (_jsx("div", { className: "flex flex-col gap-1", children: _jsx(Input.Form, { ...props }) }));
+    return (_jsx("div", { className: "flex flex-col", children: _jsx(Input.Form, { ...props }) }));
 }
 export default WithTitle;

package/package.json

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

package/style/size.d.ts

@@ -0,0 +1,3 @@
+export declare const paperSize: {
+    a4: string;
+};

package/style/size.js

@@ -0,0 +1,3 @@
+export const paperSize = {
+    a4: "print:w-[210mm] print:h-[297mm]",
+};

package/util/handlePrint.d.ts

@@ -0,0 +1,2 @@
+declare const handlePrint: (ref: React.RefObject<HTMLDivElement>) => (event?: unknown, content?: (() => React.ReactInstance | null)) => void;
+export default handlePrint;

package/util/handlePrint.js

@@ -0,0 +1,5 @@
+import { useReactToPrint } from "react-to-print";
+const handlePrint = (ref) => useReactToPrint({
+    content: () => ref.current,
+});
+export default handlePrint;

package/util/index.d.ts

@@ -7,6 +7,6 @@ export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
 export { default as compareDates } from "./compareDates";
 export { default as convertDateToString } from "./convertDateToString";
-export * from "./colors";
+export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -7,6 +7,6 @@ export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
 export { default as compareDates } from "./compareDates";
 export { default as convertDateToString } from "./convertDateToString";
-export * from "./colors";
+export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.175
+1.0.177

package/widget/template/Input/Form.js

@@ -37,7 +37,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
     const placeholderString = typeof placeholder === "function" ? placeholder() : placeholder;
     const inputBox = {
         styles: styleByFlag(),
-        sizes: "w-full sm:w-102.5 h-13.5",
+        sizes: "w-full md:w-102.5 h-13.5",
         paddings: `${placeholderString && "pt-3"} pl-5`,
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",