@edu-tosel/design 1.0.159 → 1.0.160

package/asset/SVG.d.ts

@@ -27,7 +27,7 @@ declare const SVG: {
         Browser: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
         Event: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
         Document: ({ theme }: {
-            theme: "red" | "blue";
+            theme: "blue" | "red";
         }) => import("react/jsx-runtime").JSX.Element;
     };
     Image: typeof Image;
@@ -37,8 +37,8 @@ declare const SVG: {
         Minus: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
         Checked: ({ flag, size, theme, }: {
             flag: boolean;
-            size?: number | undefined;
-            theme?: import("../interface/Theme").Theme | undefined;
+            size?: number;
+            theme?: import("../interface").Theme;
         }) => import("react/jsx-runtime").JSX.Element;
         RightArrow: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
     };

package/asset/sizes.d.ts

@@ -1 +1 @@
-export declare const widthSizes: Record<string | number, string>;
+export declare const widthSizes: Record<number | string, string>;

package/card/design/InfoCard.design.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import Card from "./Card.design";
 export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, option, children, }) {
-    const { titleBorder, text } = option ?? {};
+    const { titleBorder, text, titleColor } = option ?? {};
     const container = {
         displays: "flex flex-col",
         paddings: "pt-5 px-5",
@@ -14,12 +14,12 @@ export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, i
             sizes: "w-full h-13.25",
             styles: `${titleBorder} border-b-2 pb-2.5`,
         },
-        titleText: "h-6 font-pretendard-bold text-xl w-52 truncate leading-none",
-        subtitleText: "h-4.75 text-base font-extralight flex items-center leading-none",
+        titleText: `h-6 font-pretendard-bold text-xl w-52 truncate leading-none ${titleColor ?? "text-gray-dark"}`,
+        subtitleText: "h-4.75 text-sm font-medium flex items-center leading-none",
         right: {
             fontColor: `${text ?? "text-black"}`,
             displays: "flex flex-col-reverse",
         },
     };
-    return (_jsxs(Card, { option: { ...option, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
+    return (_jsxs(Card, { option: { ...option, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
 }

package/interface/Card.d.ts

@@ -94,6 +94,7 @@ export interface InfoCardProps extends CardProps {
     image?: string;
     option?: {
         titleBorder?: string;
+        titleColor?: string;
     } & CardOption;
 }
 export interface InfoCardExamDataREGProps extends Omit<InfoCardProps, "children"> {

package/layout/index.d.ts

@@ -20,3 +20,4 @@ export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
+export { default as Ticket } from "./template/Ticket";

package/layout/index.js

@@ -20,3 +20,4 @@ export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
+export { default as Ticket } from "./template/Ticket";

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

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

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

@@ -74,7 +74,7 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         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: 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" }) })] }) })] }));
+                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: "시험 접수 일정",
@@ -82,7 +82,7 @@ const navigationTypeString = {
     event: "이벤트",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
-    //scroll action 
+    //scroll action
     const container = {
         displays: "relative flex flex-row md:flex-col",
         sizss: "h-full",
@@ -116,16 +116,38 @@ function NavigationItem({ type, calendar, notice, event, }) {
     };
     const iconWrapper = {};
     const item = {
-        displays: "flex-shrink-0 flex flex-col md:justify-between snap-start",
+        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(({ applyEnd, applyStart, title, onClick }) => {
-                const { isBefore: isbefore1, dDay: dDay1 } = compareDates(applyStart);
-                const { isBefore: isbefore2, dDay: dDay2 } = compareDates(applyEnd);
-                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: isbefore1 ?
-                                        _jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218 ", dDay1] }) :
-                                        (isbefore2 ?
-                                            _jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218\uC911" }) : _jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isbefore1 && isbefore2 ? _jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDay2] }) : "", _jsx("div", { children: _jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyEnd) }) })] }));
+        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.159",
+  "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",

package/util/compareDates.js

@@ -1,18 +1,18 @@
+import moment from "moment-timezone";
 export default function compareDates(targetDate) {
-    const currentDate = new Date();
-    const KSTOffset = 9 * 60 * 60 * 1000;
-    const KSTDate = new Date(currentDate.getTime() + KSTOffset);
-    const targetDateKST = new Date(targetDate.getTime() + KSTOffset);
-    const isBefore = KSTDate < targetDateKST;
-    const timeDiff = targetDateKST.getTime() - KSTDate.getTime();
+    const currentDate = moment();
+    const targetDateMoment = moment(targetDate).tz("Asia/Seoul");
+    const isBefore = currentDate.isBefore(targetDateMoment);
+    const timeDiff = targetDateMoment.diff(currentDate);
     if (isBefore) {
         if (timeDiff < 24 * 60 * 60 * 1000) {
-            const hours = Math.floor(timeDiff / (1000 * 60 * 60));
-            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
-            const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
+            const duration = moment.duration(timeDiff);
+            const hours = duration.hours();
+            const minutes = duration.minutes();
+            const seconds = duration.seconds();
             return {
                 isBefore,
-                dDay: `${hours}시 ${minutes}분 ${seconds}초`,
+                dDay: `${hours < 10 ? `0${hours}` : hours} : ${minutes < 10 ? `0${minutes}` : minutes} : ${seconds < 10 ? `0${seconds}` : seconds}`,
             };
         }
         else {

package/version.txt

@@ -1 +1 @@
-1.0.159
+1.0.160

package/widget/design/Label.design.js

@@ -35,6 +35,7 @@ export default function LabelDesign({ title, onClick, disabled, option, hoverSta
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
+        boundary,
         styles: height === "xs" ||
             height === "2xs" ||
             height === "3xs" ||

package/widget/template/Label.d.ts

@@ -2,7 +2,7 @@ import { LabelWidget } from "../../interface";
 declare function Label({ title, option }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
     var Button: ({ title, hoverTitle, onClick, disabled, option, }: Omit<LabelWidget, "hoverState"> & {
-        hoverTitle?: string | undefined;
+        hoverTitle?: string;
     }) => import("react/jsx-runtime").JSX.Element;
 }
 export default Label;