@edu-tosel/design 1.0.154 → 1.0.156

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

@@ -1,31 +1,88 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { cn, gradient } from "../../../../util";
 import { Label } from "../../../../widget";
+import { useResponsive } from "../../../../hook";
 export default function Header({ logo, rightButton, contents, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toggleHeight = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleClickOutside = (event) => {
+        const menuElement = document.getElementById("buttonArea");
+        if (menuElement && !menuElement.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    };
+    //버튼, 혹은 외부를 클릭시 메뉴 닫음
+    useEffect(() => {
+        if (isExpanded) {
+            document.addEventListener("click", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [isExpanded]);
+    const isMD = useResponsive("md");
+    //메뉴바 배경
     const container = {
-        positions: "fixed top-0 left-0 z-40",
-        displays: "flex justify-center items-center",
+        positions: "fixed top-0 left-0 z-40 md:h-15",
+        displays: "flex justify-center items-start overflow-hidden",
         sizes: "w-full",
         styles: "bg-white  box-shadow",
         textstyles: "antialiased",
+        animation: !isMD && isExpanded ? "animate-grow" : "animate-shrink"
     };
     const body = {
-        displays: "flex items-center justify-center md:justify-between",
-        className: "w-full max-w-[1200px] h-15",
-        boundaries: "md:px-12 py-2.5",
+        displays: "flex md:flex-row flex-col md:items-center items-start justify-between",
+        className: "w-full max-w-[1200px]",
+        boundaries: "p-0 sm:px-12",
+    };
+    const buttonBoxWrapper = {
+        displays: "inline-flex items-center flex-nowrap",
+        scrollStyles: "overflow-y-scroll scrollbar-hidden",
+        spacings: "pr-10 gap-2.5 h-15 md:pr-0",
     };
     const buttonBox = {
-        fonts: "text-[9px] xs:text-[10px] sm:text-[11px] md:text-[16px] leading-tight",
+        fonts: "text-base leading-tight",
         texts: "text-gray-dark hover:text-black",
         backgrounds: "hover:bg-[#F0F0F0]/50",
         animations: "duration-300",
-        sizes: "h-10 rounded-md",
-        boundaries: "px-0.5 md:px-2.5",
-    };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: "hidden md:block", onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-7.5 md:gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
-                                width: "2xs",
-                                height: "4xs",
-                                background: gradient.bg.greenToRed,
-                                text: "text-white",
-                            } }))] })] }) }));
+        sizes: "h-10 rounded-md w-fit flex-none",
+        spacings: "px-2.5",
+        scrollMargin: "translate-x-5 md:translate-x-0 "
+    };
+    const leftWrapper = {
+        displays: "flex flex-row gap-6 items-center flex-none",
+        sizes: "w-full md:w-fit justify-between md:justify-start pl-5 pr-2 sm:px-0",
+    };
+    const rightWrapper = {
+        displays: "flex flex-row justify-center md:justify-start",
+        spacings: "items-center gap-x-6 ml:gap-x-12 ",
+        sizes: "w-full md:w-fit",
+        boundaries: "border-gray-light border-t-2",
+    };
+    const essenstialsWrapper = {
+        displays: "flex flex-row items-center h-15",
+        spacings: "gap-2 md:gap-6",
+        sizes: "h-15",
+        responsiveAction: "block md:hidden",
+    };
+    const menuButton = {
+        displays: "flex justify-center items-center p-2",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: cn(essenstialsWrapper), id: "buttonArea", children: [rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                        width: "2xs",
+                                        height: "xs",
+                                        background: gradient.bg.greenToRed,
+                                        text: "text-white",
+                                    } })), _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && _jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" }), isExpanded && _jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" })] }) }) })] })] }), _jsxs("div", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                    width: "2xs",
+                                    height: "xs",
+                                    background: gradient.bg.greenToRed,
+                                    text: "text-white",
+                                } })) })] })] }) }));
 }

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

@@ -5,9 +5,11 @@ interface Browser {
 interface Calendar {
     schedules: {
         onClick?: OnClick;
-        category: string;
         title: string;
-        description?: string | [string] | [string, string];
+        applyDay: Date;
+        testStart: Date;
+        testEnd?: Date;
+        gradeOpen: Date;
     }[];
 }
 interface Notice {

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

@@ -2,26 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import SVG from "../../../../asset/SVG";
-import { cn } from "../../../../util";
+import { cn, compareDates, convertDateToString } from "../../../../util";
 import { useActionStore } from "../../../../store";
 import { LineBreaks } from "../../../../text";
+import { useResponsive } from "../../../../hook";
 export default function Navigation({ browser, calendar, notice, event, }) {
     const { flag } = useActionStore();
     const [isOpen, setIsOpen] = useState(false);
     const [isHidden, setIsHidden] = useState(false);
     const [type, setType] = useState();
     const container = {
-        displays: "flex flex-col justify-center gap-y-5 items-center",
-        sizes: !isOpen ? "h-80 rounded-r-xl" : "h-screen",
-        widths: !isHidden ? "w-[56px] duration-100" : "w-0 duration-500",
-        backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
+        displays: "flex flex-row md:flex-col justify-center gap-x-8 sm:gap-x-12 gap-y-5 items-center",
+        sizes: !isOpen ? "h-16 md:h-80  md:rounded-r-xl" : "h-16 md:h-screen",
+        widths: !isHidden
+            ? "w-screen md:w-[56px] duration-100"
+            : "w-0 duration-100",
+        backgrounds: "bg-gradient-to-r md:bg-gradient-to-b from-green-dark to-crimson-burgundy",
     };
-    const overlayPopTransition = useTransition(!isHidden && isOpen, {
-        from: { width: "0%" },
-        enter: { width: "30%" },
-        leave: { width: "0%" },
-        config: { duration: 100 },
-    });
     const overlayCoverTransition = useTransition(isHidden, {
         from: { width: "0%" },
         enter: { width: "100%" },
@@ -47,27 +44,66 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     };
     const itemContainer = {
         positions: "fixed top-0 left-0 z-40 ",
-        sizes: "h-screen ",
-        boundaries: "pl-[56px]",
-        styles: "overflow-hidden bg-white ",
+        sizes: "h-screen w-[400px]",
+        boundaries: "md:pl-[56px]",
+        styles: "overflow-hidden bg-black/20  backdrop-blur-sm",
+        shadows: "shadow-main",
     };
     const itemBody = {
-        boundaries: "px-7.5 pt-[34px]",
+        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",
+    };
+    const iconWrapper = {
+        displays: "flex justify-center items-center",
+        sizes: "w-8 h-8 rounded-md",
+        animations: "hover:bg-white/20",
     };
+    const isMobile = useResponsive("md");
+    const overlayPopTransition = useTransition(!isHidden && isOpen, {
+        from: { width: "0%" },
+        enter: { width: "100%" },
+        leave: { width: "0%" },
+        config: { duration: isMobile ? 100 : 0 },
+    });
     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-[26px] font-bold text-gradient-green-to-red ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed top-1/2 -translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx(SVG.Icon.Calendar, { onClick: () => handleOpen("calendar") }), _jsx(SVG.Icon.Notification, { onClick: () => handleOpen("notification") }), _jsx(SVG.Icon.Search, { onClick: () => handleOpen("search") }), _jsx(SVG.Icon.Browser, { onClick: () => handleOpen("browser") }), _jsx(SVG.Icon.Event, { onClick: () => handleOpen("event") })] }) })] }));
+                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" }) })] }) })] }));
 }
 const navigationTypeString = {
-    calendar: "시험 일정",
+    calendar: "시험 접수 일정",
     notification: "공지사항",
     event: "이벤트",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
+    const cardWrapper = {
+        displays: "flex flex-col gap-y-5",
+    };
+    const cardBox = {
+        displays: "",
+        sizes: "",
+    };
+    const dateWrapper = {
+        displays: "flex flex-row gap-3",
+    };
+    const dateText = {
+        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 item = {
+        displays: "flex-shrink-0 flex flex-col md:justify-between ",
+    };
     if (type === "calendar")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: calendar.schedules.map(({ category, title, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[184px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
+        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" }) })] }) }));
+            }) }));
     if (type === "notification")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full 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]" })] }))) }));
+        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]" })] }))) }));
     if (type === "event")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: event.events.map(({ title, category, thumbnail, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full  box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { className: "h-[92px] border-b-2", children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) })] }))) }));
+        return (_jsx("div", { className: cn(container), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, "w-full  box-shadow rounded-[10px] p-7.5"), children: _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) }) }))) }));
     return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.154",
+  "version": "1.0.156",
   "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",

package/tailwind.config.ts

@@ -32,10 +32,20 @@ export default {
       },
       boxShadow: {
         main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
+        "main-small": "0 0px 5px 0px rgba(0, 0, 0, 0.1)",
         "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
         green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
       keyframes: {
+        grow: {
+          "0%": { height: "60px" },
+          "100%": { height: "120px" },
+        },
+        shrink: {
+          "0%": { height: "120px" },
+          "100%": { height: "60px" },
+        },
+
         slideBackground: {
           "0%, 100%": { backgroundPosition: "left center" },
           "50%": { backgroundPosition: "right center" },
@@ -57,6 +67,12 @@ export default {
           to: { width: "0%" },
         },
       },
+
+      animation: {
+        grow: "grow 0.2s ease-in-out forwards",
+        shrink: "shrink 0.2s ease-in-out forwards",
+      },
+
       colors: {
         "white-off": "#F5F5F5",
         "red-burgundy": "#933652",
@@ -272,6 +288,10 @@ export default {
         151.75: "37.9375rem",
         152: "38rem",
         153: "38.25rem",
+        154: "38.5rem",
+        155: "38.75rem",
+        156: "39rem",
+        157: "39.25rem",
         158: "39.5rem",
         159: "39.75rem",
         160: "40rem",

package/util/compareDates.d.ts

@@ -0,0 +1,4 @@
+export default function compareDates(targetDate: Date): {
+    isBefore: boolean;
+    dDay: string | null;
+};

package/util/compareDates.js

@@ -0,0 +1,32 @@
+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();
+    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);
+            return {
+                isBefore,
+                dDay: `${hours}시 ${minutes}분 ${seconds}초`,
+            };
+        }
+        else {
+            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+            return {
+                isBefore,
+                dDay: `D-${days}`,
+            };
+        }
+    }
+    else {
+        return {
+            isBefore,
+            dDay: null,
+        };
+    }
+}

package/util/convertDateToString.d.ts

@@ -0,0 +1 @@
+export default function formatDateToString(date: Date): string;

package/util/convertDateToString.js

@@ -0,0 +1,6 @@
+export default function formatDateToString(date) {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 월은 0부터 시작하므로 +1
+    const day = date.getDate().toString().padStart(2, "0"); // 날짜를 두 자리로 맞춤
+    return `${year}-${month}-${day}`;
+}

package/util/index.d.ts

@@ -5,6 +5,8 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
+export { default as compareDates } from "./compareDates";
+export { default as convertDateToString } from "./convertDateToString";
 export * from "./colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -5,6 +5,8 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
+export { default as compareDates } from "./compareDates";
+export { default as convertDateToString } from "./convertDateToString";
 export * from "./colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.154
+1.0.156

package/widget/template/Input/Form.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
 import Obstacle from "../Obstacle";
+import SVG from "../../../asset/SVG";
 export default function InputForm({ title, state, placeholder, isValid, type, onKeyDown, button, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
+    const [isEyeOpen, setIsEyeOpen] = useState(false);
     const ref = useRef(null);
     const container = {
         positions: "relative",
@@ -44,6 +46,11 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
             !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
+    useEffect(() => {
+        if (type === "password") {
+            ref.current?.setAttribute("type", isEyeOpen ? "text" : "password");
+        }
+    }, [isEyeOpen]);
     return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholderString }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
                             if (maxLength && e.target.value.length > maxLength)
                                 return;
@@ -55,5 +62,6 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
                             background: button.option?.background ?? gradient.bg.greenToRed,
                             text: button.option?.text ?? "text-white",
                             ...button.option,
-                        } })), _jsx(Obstacle, { disabled: disabled })] })] }));
+                        } })), type === "password" &&
+                        (isEyeOpen ? (_jsx(SVG.Eye.Open, { onClick: () => setIsEyeOpen(false), className: "absolute top-3.5 right-3.75" })) : (_jsx(SVG.Eye.Close, { onClick: () => setIsEyeOpen(true), className: "absolute top-3.5 right-3.75" }))), _jsx(Obstacle, { disabled: disabled })] })] }));
 }