@edu-tosel/design 1.0.158 → 1.0.160

package/layout/template/MonthlyProgressReport/Layout.js

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

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

@@ -19,18 +19,25 @@ export interface Result {
     answers: number[];
     userId: number;
 }
-interface ProgressReportProps {
+export interface ProgressReportProps {
     studentInfo: {
         name: string;
         birthday: string;
         belong?: string;
         academy?: string;
+        image: string;
     };
-    results: Result[];
     recentResult: Result & {
         examName: string;
     };
+    results: {
+        date: number;
+        score: number;
+    }[];
     comment: string | string[];
+    commentType?: "director" | "tosel";
 }
-export default function ProgressReport({ studentInfo, recentResult, comment, }: ProgressReportProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: import("react").ForwardRefExoticComponent<{
+    props: ProgressReportProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/layout/template/MonthlyProgressReport/Report.js

@@ -3,13 +3,15 @@ import { InfoCard } from "../../../card";
 import CardDesign from "../../../card/design/Card.design";
 import { LineBreaks } from "../../../text";
 import { cn } from "../../../util";
-import { ResponsiveContainer, XAxis, YAxis, LineChart, Line, Legend, } from "recharts";
+import { ResponsiveContainer, PieChart, Pie, Cell, LineChart, XAxis, YAxis, Line, Legend, } from "recharts";
 import moment from "moment-timezone";
-export default function ProgressReport({ studentInfo, recentResult, comment, }) {
+import { forwardRef } from "react";
+function ProgressReport({ props, }, ref) {
+    const { studentInfo, recentResult, comment, results, commentType = "tosel", } = props;
     const container = {
         displays: "flex justify-between ",
         sizes: "w-[297mm] h-[210mm]",
-        boundaries: "border-2 px-10 pt-7 pb-9 border-gray-medium",
+        boundaries: " px-10 pt-7 pb-9",
         fonts: "font-pretendard-var",
     };
     const leftBody = {
@@ -18,6 +20,7 @@ export default function ProgressReport({ studentInfo, recentResult, comment, })
     const rightBody = {
         displays: "flex flex-col",
     };
+    // 계산 함수 (50점 만점 기준)
     const calculate = (result, type) => {
         const section1 = Object.values(result.report)
             .slice(0, 4)
@@ -34,47 +37,61 @@ export default function ProgressReport({ studentInfo, recentResult, comment, })
             return section2;
         return total;
     };
-    const circle = {
-        displays: "flex items-center justify-center",
+    const preparePieChartData = (result, type) => {
+        const sectionScore = calculate(result, type);
+        const maxScore = 50; // 만점
+        const remainingScore = maxScore - sectionScore;
+        return [
+            { name: "Score", value: sectionScore },
+            { name: "Remaining", value: remainingScore },
+        ];
+    };
+    const sectionWrapper = {
+        displays: "relative flex items-center justify-center overflow-visible",
         sizes: "aspect-square ",
-        styles: "rounded-full border-gray-dark border-8",
-        fonts: "text-5xl font-bold text-blue-navy",
+        fonts: "text-4xl font-bold text-blue-navy",
+    };
+    const pieTray = {
+        displays: "absolute left-0 top-0",
+        sizes: "h-full w-full",
+    };
+    const gradientId = "gradient1";
+    const gradientDefinition = (_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "#82ca9d", stopOpacity: 1 } }), _jsx("stop", { offset: "100%", style: { stopColor: "#8884d8", stopOpacity: 1 } })] }) }));
+    const pieStyles = {
+        cx: "50%",
+        cy: "50%",
+        innerRadius: 35,
+        outerRadius: 49,
+        dataKey: "value",
+        nameKey: "name",
+    };
+    const cellStyles = {
+        stroke: "rgba(255, 255, 255, 0)",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(leftBody), children: [_jsxs("div", { className: "flex flex-col text-blue-navy pl-4 border-l-4  border-blue-navy", children: [_jsx("div", { className: "flex items-center", children: _jsx("img", { src: "/images/logos/lab-spiral.png", alt: "lab" }) }), _jsx("div", { className: "text-2xl leading-tight font-bold", children: "MONTHLY PROGRESS REPORT" })] }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx(InfoCard.Student, { titles: {
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(leftBody), children: [_jsxs("div", { className: "flex flex-col text-blue-navy pl-4 border-l-4  border-blue-navy", children: [_jsx("div", { className: "flex items-center", children: _jsx("img", { src: "/images/logos/lab-spiral.png", alt: "lab" }) }), _jsx("div", { className: "text-2xl leading-tight font-bold", children: "Monthly Progress Report" })] }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx(InfoCard.Student, { titles: {
                                     title: studentInfo.name,
                                     subtitle: studentInfo.birthday,
-                                }, image: "/images/mock/haerin.jpeg", data: {
+                                }, image: studentInfo.image, data: {
                                     belong: studentInfo.belong,
                                     academy: studentInfo.academy,
                                 }, option: {
-                                    boundary: "border-2 border-blue-navy",
+                                    boundary: "border-2 border-slate-300",
+                                    titleColor: "text-blue-navy",
                                 } }), _jsx("div", { className: "h-96", children: _jsxs(CardDesign, { option: {
                                         height: "full",
-                                        boundary: "border-2 border-blue-navy pt-5 px-6 pb-6",
-                                    }, children: [_jsxs("div", { className: "flex flex-col justify-center border-b-3 border-blue-navy pb-2.5", children: [_jsx("div", { className: " text-lg font-bold", children: "\uCD5C\uADFC \uC2DC\uD5D8" }), _jsx("div", { children: recentResult.examName })] }), _jsxs("div", { className: "flex flex-col gap-y-7.5 absolute bottom-0 w-full px-3.5", children: [_jsxs("div", { className: "flex gap-x-12 justify-between w-full", children: [_jsxs("div", { className: "flex-1 ", children: [_jsx("div", { className: "text-center mb-3.5 text-lg", children: "SECTION I" }), _jsx("div", { className: cn(circle), children: calculate(recentResult, "section1") })] }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-center mb-3.5 text-lg", children: "SECTION II" }), _jsx("div", { className: cn(circle), children: calculate(recentResult, "section2") })] })] }), _jsxs("div", { className: "flex gap-x-2 justify-end items-end font-bold text-blue-navy", children: [_jsx("div", { className: "text-xl", children: "total" }), _jsx("div", { className: "text-5xl leading-none ", children: calculate(recentResult) })] })] })] }) })] })] }), _jsxs("div", { className: cn(rightBody), children: [_jsx("div", { className: "h-12 flex justify-end text-blue-navy font-bold", children: _jsx("div", { children: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") }) }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx("div", { className: "h-88", children: _jsx(CardDesign, { option: {
+                                        boundary: "border-2 border-slate-300 pt-5 px-6 pb-6",
+                                    }, children: [_jsxs("div", { className: "flex flex-col justify-center border-b-2 border-blue-navy pb-2.5", children: [_jsx("div", { className: " text-lg font-bold text-blue-navy", children: "\uCD5C\uADFC \uC2DC\uD5D8" }), _jsx("div", { children: recentResult.examName })] }), _jsxs("div", { className: "flex flex-col gap-y-7.5 absolute bottom-0 w-full px-3.5", children: [_jsxs("div", { className: "flex gap-x-12 justify-between w-full", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-center mb-3.5 text-lg font-bold text-blue-navy", children: "Section I" }), _jsxs("div", { className: cn(sectionWrapper), children: [_jsx("div", { className: cn(pieTray), children: _jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [gradientDefinition, _jsxs(Pie, { data: preparePieChartData(recentResult, "section1"), ...pieStyles, children: [_jsx(Cell, { fill: `url(#${gradientId})`, ...cellStyles }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] })] }) }) }), calculate(recentResult, "section1")] })] }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-center mb-3.5 text-lg font-bold text-blue-navy", children: "Section II" }), _jsxs("div", { className: cn(sectionWrapper), children: [_jsx("div", { className: cn(pieTray), children: _jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [gradientDefinition, _jsxs(Pie, { data: preparePieChartData(recentResult, "section2"), ...pieStyles, children: [_jsx(Cell, { fill: `url(#${gradientId})`, ...cellStyles }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] })] }) }) }), calculate(recentResult, "section2")] })] })] }), _jsxs("div", { className: "flex gap-x-2 justify-end items-end font-bold text-blue-navy", children: [_jsx("div", { className: "text-xl", children: "total" }), _jsx("div", { className: "text-5xl leading-none ", children: calculate(recentResult) })] })] })] }) })] })] }), _jsxs("div", { className: cn(rightBody), children: [_jsx("div", { className: "h-12 flex justify-end text-blue-navy font-bold", children: _jsx("div", { children: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") }) }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx("div", { className: "h-88", children: _jsx(CardDesign, { option: {
                                         width: "xl",
                                         height: "full",
-                                        boundary: "border-2 border-blue-navy",
-                                    }, children: _jsx(ResponsiveContainer, { width: "95%", height: "95%", className: "absolute left-0 bottom-0", children: _jsxs(LineChart, { data: [
-                                                {
-                                                    date: "2024-03-01",
-                                                    score: 34,
-                                                },
-                                                {
-                                                    date: "2024-03-02",
-                                                    score: 45,
-                                                },
-                                                // {
-                                                //   date: "2024-03-03",
-                                                //   score: 47,
-                                                // },
-                                                // {
-                                                //   date: "2024-03-04",
-                                                //   score: 53,
-                                                // },
-                                            ], children: [_jsx(XAxis, { dataKey: "date" }), _jsx(YAxis, { dataKey: "score", scale: "log", domain: ["auto", "auto"] }), _jsx(Line, { type: "monotone", name: "Monthly Test", dataKey: "score", stroke: "#173A8B", fill: "#173A8B" }), _jsx(Legend, {})] }) }) }) }), _jsx("div", { className: "h-72", children: _jsxs(CardDesign, { option: {
+                                        boundary: "border-2 border-slate-300 pt-8 pr-8",
+                                        background: "bg-slate-200",
+                                    }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", className: "absolute left-0 bottom-0", children: _jsxs(LineChart, { data: results.map((result) => ({
+                                                ...result,
+                                                date: moment.unix(result.date).format("YY-MM-DD"),
+                                            })), children: [_jsx(XAxis, { dataKey: "date" }), _jsx(YAxis, { dataKey: "score", scale: "log", domain: ["auto", "auto"] }), _jsx(Line, { type: "monotone", name: "Monthly Test", dataKey: "score", stroke: "#173A8B", fill: "#173A8B" }), _jsx(Legend, {})] }) }) }) }), _jsx("div", { className: "h-72", children: _jsxs(CardDesign, { option: {
                                         width: "xl",
                                         height: "full",
-                                        boundary: "border-2 border-blue-navy p-5",
-                                    }, children: [_jsx("div", { className: "text-gray-dark font-bold text-lg", children: "\uC6D0\uC7A5\uB2D8\uC758 \uCF54\uBA58\uD2B8" }), _jsx("div", { className: "h-52 overflow-y-scroll scrollbar-hidden text-sm mt-2.5", children: _jsx(LineBreaks, { texts: comment }) })] }) })] })] })] }));
+                                        boundary: "border-2 border-slate-300 p-5",
+                                    }, children: [_jsxs("div", { className: "flex text-blue-navy font-bold text-lg", children: [_jsx("div", { children: commentType === "director" ? "원장님" : "TOSEL Lab" }), _jsx("div", { children: "\uC758 \uCF54\uBA58\uD2B8" })] }), _jsx("div", { className: "h-52 overflow-y-scroll scrollbar-hidden text-sm mt-2.5", children: _jsx(LineBreaks, { texts: comment }) })] }) })] })] })] }));
 }
+export default forwardRef(ProgressReport);

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

@@ -1,5 +1,8 @@
-import Report from "./Report";
+import Layout from "./Layout";
 declare const MonthlyProgressReport: {
-    Report: typeof Report;
+    Report: import("react").ForwardRefExoticComponent<{
+        props: import("./Report").ProgressReportProps;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Layout: typeof Layout;
 };
 export default MonthlyProgressReport;

package/layout/template/MonthlyProgressReport/index.js

@@ -1,5 +1,7 @@
+import Layout from "./Layout";
 import Report from "./Report";
 const MonthlyProgressReport = {
     Report,
+    Layout,
 };
 export default MonthlyProgressReport;

package/layout/template/Row.d.ts

@@ -3,9 +3,9 @@ declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>)
 declare namespace Row {
     var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
     var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, option, }: RowProps<T> & {
-        height?: string | undefined;
-        noPadding?: boolean | undefined;
-        noHover?: boolean | undefined;
+        height?: string;
+        noPadding?: boolean;
+        noHover?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

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

@@ -0,0 +1,5 @@
+import { TicketProps } from "./Ticket";
+interface TicketLayoutProps extends TicketProps {
+}
+export default function Layout({ exam, name, birthday, level, code, }: TicketLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Ticket/Layout.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReactToPrint } from "react-to-print";
+import { cn } from "../../../util";
+import { Label } from "../../../widget";
+import Ticket from "./Ticket";
+import { useRef } from "react";
+export default function Layout({ exam, name, birthday, level, code, }) {
+    const container = {
+        displays: "flex justify-center items-center",
+        sizes: "w-full min-h-screen",
+    };
+    const body = {
+        positions: "relative",
+        displays: "flex gap-x-3.5",
+    };
+    const ref = useRef(null);
+    const handlePrint = useReactToPrint({
+        content: () => ref.current,
+    });
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx(Ticket, { ref: ref, props: {
+                        exam,
+                        name,
+                        birthday,
+                        level,
+                        code,
+                    } }), _jsxs("div", { children: [_jsx(Label.Button, { title: "OMR \uC778\uC1C4", onClick: () => { }, option: {
+                                width: "sm",
+                                height: "xs",
+                                background: "bg-green-dark",
+                                text: "text-white",
+                            } }), _jsx(Label.Button, { title: "\uC9C0\uB3C4\uB85C \uBCF4\uAE30", onClick: () => { }, option: {
+                                width: "sm",
+                                height: "xs",
+                                background: "bg-green-dark",
+                                text: "text-white",
+                            } }), _jsx(Label.Button, { title: "\uC790\uC138\uD788 \uBCF4\uAE30", onClick: () => { }, option: {
+                                width: "sm",
+                                height: "xs",
+                                background: "bg-green-dark",
+                                text: "text-white",
+                            } }), _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: handlePrint, option: {
+                                width: "md",
+                                height: "sm",
+                                background: "bg-white",
+                                boundary: "border-2 border-green-dark",
+                                text: "text-green-dark",
+                            } })] })] }) }));
+}

package/layout/template/Ticket/Ticket.d.ts

@@ -0,0 +1,18 @@
+export interface TicketProps {
+    exam: {
+        title: string;
+        hall: string;
+        room: string;
+        date: string;
+        startedAt: number;
+        endedAt: number;
+    };
+    name: string;
+    birthday: string;
+    level: string;
+    code: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<{
+    props: TicketProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/layout/template/Ticket/Ticket.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../util";
+import moment from "moment-timezone";
+function Ticket({ props }, ref) {
+    const { title, date, startedAt, endedAt } = props.exam;
+    const container = {
+        sizes: "w-[340px] h-[700px]",
+        boundaries: "border-2",
+    };
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "text-sm", children: date }), _jsx("div", { className: "text-sm", children: moment.unix(startedAt).format("YYYY-MM-DD") }), _jsx("div", { className: "text-sm", children: moment.unix(startedAt).format("YYYY년 MM월 DD일") })] }));
+}
+export default forwardRef(Ticket);

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

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

package/layout/template/Ticket/index.js

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

package/layout/template/dashboard/mypage/Profile.d.ts

@@ -13,8 +13,8 @@ declare function Profile({ name, birthday, image, modify }: ProfileProps): impor
 declare namespace Profile {
     var Detail: ({ titles, infos, toggle, }: {
         titles: Titles;
-        infos?: Info[] | undefined;
-        toggle?: State<boolean> | undefined;
+        infos?: Info[];
+        toggle?: State<boolean>;
     }) => import("react/jsx-runtime").JSX.Element;
     var Preview: ({ image, username, email, }: {
         username: string;

package/layout/template/home/layout/Footer.js

@@ -40,7 +40,7 @@ export default function Footer() {
     const socialIconControl = {
         siezes: "h-6",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), " \uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\uC6F9\uC11C\uBE44\uC2A4: \uC8FC\uC2DD\uD68C\uC0AC \uC5D0\uB4C0\uD1A0\uC140 | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638", _jsx("br", {}), " \uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), " \uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\uC0AC\uC5C5\uC790 \uB4F1\uB85D\uBC88\uD638 : 209-81-55585 | \uB300\uD45C : \uC624\uC2B9\uC5F0 ", _jsx("br", {}), "\uC6F9\uC11C\uBE44\uC2A4: \uC8FC\uC2DD\uD68C\uC0AC \uC5D0\uB4C0\uD1A0\uC140 | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638", _jsx("br", {}), " \uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
 }
 const buttons = [
     // {

package/layout/template/home/layout/Navigation.d.ts

@@ -6,7 +6,8 @@ interface Calendar {
     schedules: {
         onClick?: OnClick;
         title: string;
-        applyDay: Date;
+        applyEnd: Date;
+        applyStart: Date;
         testStart: Date;
         testEnd?: Date;
         gradeOpen: Date;

package/layout/template/home/layout/Navigation.js

@@ -46,14 +46,13 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         positions: "fixed top-0 left-0 z-40 ",
         sizes: "h-screen w-[400px]",
         boundaries: "md:pl-[56px]",
-        styles: "overflow-hidden bg-black/20  backdrop-blur-sm",
+        styles: "bg-black/20  backdrop-blur-sm",
         shadows: "shadow-main",
     };
     const itemBody = {
-        positions: "absolute bottom-16 md:static md:bottom-auto ",
-        sizes: "w-full md:w-[556px] h-80 md:h-screen",
-        boundaries: "p-5",
-        styles: "bg-white overflow-hidden",
+        positions: "absolute bottom-16 md:static md:bottom-auto md:flex md:flex-col",
+        sizes: "w-full md:w-[400px] h-80 md:h-screen",
+        styles: "bg-white ",
     };
     const iconWrapper = {
         displays: "flex justify-center items-center",
@@ -67,8 +66,15 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         leave: { width: "0%" },
         config: { duration: isMobile ? 100 : 0 },
     });
+    const scrollTitleWrapper = {
+        displays: "w-full h-fit",
+        spacings: "p-5",
+    };
+    const scrollTitle = {
+        textStyles: "text-lg font-bold text-green-dark",
+    };
     return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14 ", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] }))), overlayPopTransition((styles, item) => type &&
-                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), children: [_jsx("div", { className: "text-[20px] font-bold text-green-dark ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
+                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: cn(scrollTitleWrapper), children: _jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }) }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
 }
 const navigationTypeString = {
     calendar: "시험 접수 일정",
@@ -76,12 +82,30 @@ const navigationTypeString = {
     event: "이벤트",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
-    const cardWrapper = {
-        displays: "flex flex-col gap-y-5",
+    //scroll action
+    const container = {
+        displays: "relative flex flex-row md:flex-col",
+        sizss: "h-full",
+        scrollActions: "scrollbar-hidden overflow-x-scroll md:overflow-y-scroll snap-x md:snap-none",
+        spacings: "p-5 gap-5 scroll-pl-5",
+    };
+    //card title styling
+    const titleWrapper = {
+        displays: "flex flex-row justify-between",
+        sizes: "w-full h-fit",
+    };
+    const titleText = {
+        textstyles: "font-bold text-base text-gray-dark",
     };
-    const cardBox = {
-        displays: "",
-        sizes: "",
+    const tag = {
+        displays: "flex flex-row px-2 py-0.5",
+        sizes: "w-fit h-fit rounded-md",
+        textstyles: "font-medium text-xs text-white",
+    };
+    const CardBox = {
+        displays: "flex flex-row",
+        sizes: "w-[360px] h-[fit] rounded-[8px]",
+        spacings: "p-5",
     };
     const dateWrapper = {
         displays: "flex flex-row gap-3",
@@ -90,16 +114,40 @@ function NavigationItem({ type, calendar, notice, event, }) {
         textStyles: "font-bold font-pretendar-var font-sm font-gray-dark",
         spacings: "leading-normal",
     };
-    const container = {
-        styles: "relative mt-[34px] scrollbar-hidden flex flex-row md:flex-col gap-y-[15px] md:h-screen overflow-x-scroll md:overflow-y-scroll",
-    };
+    const iconWrapper = {};
     const item = {
-        displays: "flex-shrink-0 flex flex-col md:justify-between ",
+        displays: "flex-shrink-0 flex flex-col md:justify-start snap-start",
     };
+    const [currentTime, setCurrentTime] = useState(new Date());
+    const [scheduleState, setScheduleState] = useState(calendar.schedules.map(() => ({
+        isBeforeStart: false,
+        dDayStart: "",
+        isBeforeEnd: false,
+        dDayEnd: "",
+    })));
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentTime(new Date());
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    useEffect(() => {
+        const updatedScheduleState = calendar.schedules.map(({ applyStart, applyEnd }) => {
+            const startInfo = compareDates(applyStart);
+            const endInfo = compareDates(applyEnd);
+            return {
+                isBeforeStart: startInfo.isBefore,
+                dDayStart: startInfo.dDay,
+                isBeforeEnd: endInfo.isBefore,
+                dDayEnd: endInfo.dDay,
+            };
+        });
+        setScheduleState(updatedScheduleState);
+    }, [currentTime, calendar.schedules]);
     if (type === "calendar")
-        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyDay, onClick }) => {
-                const { isBefore, } = compareDates(applyDay);
-                return (_jsx("div", { onClick: onClick, className: cn(item, "w-[400px] md:w-full h-[184px] shadow-main  rounded-[10px] p-7.5"), children: _jsxs("div", { children: [_jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyDay) }), _jsx("div", { children: isBefore && _jsx("p", { children: "\uC811\uC218\uC911" }) })] }) }));
+        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyEnd, title, onClick }, index) => {
+                const { isBeforeStart, dDayStart, isBeforeEnd, dDayEnd } = scheduleState[index];
+                return (_jsxs("div", { onClick: onClick, className: cn(item, "w-[360px] h-[184px] rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218\uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { children: _jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyEnd) }) })] }));
             }) }));
     if (type === "notification")
         return (_jsx("div", { className: cn(container), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-[140px] box-shadow rounded-[10px] p-7.5"), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.158",
+  "version": "1.0.160",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -30,6 +30,7 @@
     "react-lottie-player": "^1.5.6",
     "react-router-dom": "^6.21.3",
     "react-spring": "^9.7.3",
+    "react-to-print": "^2.15.1",
     "react-transition-group": "^4.4.5",
     "react-youtube": "^10.1.0",
     "recharts": "^2.11.0",