@edu-tosel/design 1.0.155 → 1.0.157

package/layout/template/Event/One.js

@@ -1,10 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isHTMLString } from "../../../util";
 import { StatusText } from "./StatusText";
+import { useState, useEffect } from "react";
 export default function One({ event }) {
+    const [currentTime, setCurrentTime] = useState(new Date());
+    useEffect(() => {
+        const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+        return () => clearInterval(timer);
+    }, []);
     const button = () => ({
         sizes: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md",
         backgrounds: "bg-gradient-to-l from-[#760023] to-[#105652]",
     });
-    return (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: event.thumbnail, alt: "", className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd:pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: _jsx(StatusText, { event: event }) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: event.title }), event.button && (_jsx("div", { onClick: event.button.onClick, className: cn(button()), children: event.button?.title }))] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content }, className: "w-full rounded-xl object-cover overflow-hidden" })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), className: "p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] }));
+    // 현재는 startedAt과 expiredAt 모두 시각은 09:00:00 으로 설정되어 있습니다.
+    const startedAt = event.startedAt ? new Date(event.startedAt) : null;
+    const expiredAt = event.expiredAt ? new Date(event.expiredAt) : null;
+    let buttonContent = null;
+    if (startedAt && expiredAt) {
+        const timeDiff = startedAt.getTime() - currentTime.getTime();
+        const daysRemaining = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+        const hoursRemaining = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
+        const minutesRemaining = Math.floor((timeDiff / (1000 * 60)) % 60);
+        const secondsRemaining = Math.floor((timeDiff / 1000) % 60);
+        if (startedAt < currentTime && currentTime < expiredAt) {
+            buttonContent = (_jsx("div", { onClick: event.button?.onClick, className: cn(button()), children: event.button?.title }));
+        }
+        else if (currentTime < startedAt) {
+            const countdownText = daysRemaining > 0
+                ? `오픈까지 D-${daysRemaining}`
+                : `오픈까지 ${hoursRemaining
+                    .toString()
+                    .padStart(2, "0")}:${minutesRemaining
+                    .toString()
+                    .padStart(2, "0")}:${secondsRemaining
+                    .toString()
+                    .padStart(2, "0")} 남음`;
+            buttonContent = (_jsx("div", { className: "w-full h-12 flex items-center justify-center rounded-md bg-gray-light text-green-dark font-bold gap-3 text-sm xs:text-md", children: countdownText }));
+        }
+        else if (expiredAt < currentTime) {
+            buttonContent = (_jsx("div", { className: "w-full h-12 flex items-center justify-center rounded-md bg-gray-light text-gray-medium font-bold gap-3 text-sm xs:text-md", children: "\uC774\uBCA4\uD2B8\uAC00 \uB9C8\uAC10\uB418\uC5C8\uC5B4\uC694" }));
+        }
+    }
+    else {
+        buttonContent = _jsx("div", { className: cn(button()), children: event.button?.title });
+    }
+    return (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: event.thumbnail, alt: "", className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd:pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: _jsx(StatusText, { event: event }) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: event.title }), buttonContent] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content }, className: "w-full rounded-xl object-cover overflow-hidden max-w-[810px]" })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), className: "mt-8 p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] }));
 }

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

@@ -0,0 +1,36 @@
+export interface Result {
+    createdTimeStamp: number;
+    updatedTimeStamp: number;
+    academyId: number;
+    etc: null;
+    report: {
+        section1Part1: number;
+        section1Part2: number;
+        section1Part3: number;
+        section1Part4: null;
+        section2Part1: number;
+        section2Part2: number;
+        section2Part3: number;
+        section2Part4: null;
+    };
+    id: number;
+    setId: number;
+    level: string;
+    answers: number[];
+    userId: number;
+}
+interface ProgressReportProps {
+    studentInfo: {
+        name: string;
+        birthday: string;
+        belong?: string;
+        academy?: string;
+    };
+    results: Result[];
+    recentResult: Result & {
+        examName: string;
+    };
+    comment: string | string[];
+}
+export default function ProgressReport({ studentInfo, recentResult, comment, }: ProgressReportProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/MonthlyProgressReport/Report.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 moment from "moment-timezone";
+export default function ProgressReport({ studentInfo, recentResult, comment, }) {
+    const container = {
+        displays: "flex justify-between ",
+        sizes: "w-[297mm] h-[210mm]",
+        boundaries: "border-2 px-10 pt-7 pb-9 border-gray-medium",
+        fonts: "font-pretendard-var",
+    };
+    const leftBody = {
+        displays: "flex flex-col gap-y-7.5",
+    };
+    const rightBody = {
+        displays: "flex flex-col",
+    };
+    const calculate = (result, type) => {
+        const section1 = Object.values(result.report)
+            .slice(0, 4)
+            .filter((v) => v !== null)
+            .reduce((acc, cur) => Number(acc) + Number(cur), 0);
+        const section2 = Object.values(result.report)
+            .slice(4, 8)
+            .filter((v) => v !== null)
+            .reduce((acc, cur) => Number(acc) + Number(cur), 0);
+        const total = (section1 ?? 0) + (section2 ?? 0);
+        if (type === "section1")
+            return section1;
+        if (type === "section2")
+            return section2;
+        return total;
+    };
+    const circle = {
+        displays: "flex items-center justify-center",
+        sizes: "aspect-square ",
+        styles: "rounded-full border-gray-dark border-8",
+        fonts: "text-5xl font-bold text-blue-navy",
+    };
+    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: {
+                                    title: studentInfo.name,
+                                    subtitle: studentInfo.birthday,
+                                }, image: "/images/mock/haerin.jpeg", data: {
+                                    belong: studentInfo.belong,
+                                    academy: studentInfo.academy,
+                                }, option: {
+                                    boundary: "border-2 border-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: {
+                                        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: {
+                                        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 }) })] }) })] })] })] }));
+}

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

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

package/layout/template/MonthlyProgressReport/index.js

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

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

@@ -98,7 +98,7 @@ function NavigationItem({ type, calendar, notice, event, }) {
     };
     if (type === "calendar")
         return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyDay, onClick }) => {
-                const { isBefore, dDay } = compareDates(applyDay);
+                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" }) })] }) }));
             }) }));
     if (type === "notification")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.155",
+  "version": "1.0.157",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -20,6 +20,7 @@
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.12",
     "gsap": "^3.12.5",
+    "moment-timezone": "^0.5.45",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^6.4.0",