@edu-tosel/design 1.0.210 → 1.0.212

package/layout/template/Event/One.js

@@ -1,52 +1,5 @@
-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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isHTMLString } from "../../../util";
 export default function One({ event }) {
-    const [currentTime, setCurrentTime] = useState(new Date());
-    useEffect(() => {
-        const timer = setInterval(() => setCurrentTime(new Date()), 1000);
-        return () => clearInterval(timer);
-    }, []);
-    // 현재는 startedAt과 expiredAt 모두 시각은 09:00:00 으로 설정되어 있습니다.
-    const startedAt = event.startedAt ? new Date(event.startedAt) : null;
-    const expiredAt = event.expiredAt ? new Date(event.expiredAt) : null;
-    const timeDiff = startedAt
-        ? startedAt.getTime() - currentTime.getTime()
-        : expiredAt
-            ? expiredAt.getTime() - currentTime.getTime()
-            : 0;
-    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);
-    // NOTE: let 쓰지 마세요 없어도 코드 짜는데 문제 없습니다. 스코프 이슈 생기면 답없습니다.
-    // NOTE: 컴포넌트 내부에서 if else 문 쓰지 마세요 가독성 떨어지고 버그납니다. 예외처리는 함수로 빼서 처리하세요.
-    // NOTE: 절대 같은 코드 복붙하지마세요. 성능떨어지고 보기 안좋습니다.
-    const lines = event.title.split("\n");
-    const countdownText = daysRemaining > 0
-        ? `오픈까지 D-${daysRemaining}`
-        : `오픈까지 ${hoursRemaining
-            .toString()
-            .padStart(2, "0")}:${minutesRemaining
-            .toString()
-            .padStart(2, "0")}:${secondsRemaining
-            .toString()
-            .padStart(2, "0")} 남음`;
-    const button = {
-        sizes: "w-full h-12 flex items-center justify-center rounded-md  cursor-pointer font-bold gap-3 text-sm xs:text-md",
-        backgrounds: expiredAt && expiredAt < currentTime
-            ? " bg-gray-light text-gray-medium"
-            : expiredAt && expiredAt > currentTime
-                ? "bg-gray-light text-green-dark"
-                : "bg-gradient-to-l from-crimson-burgundy to-green-dark text-white",
-    };
-    const buttonText = expiredAt && expiredAt < currentTime
-        ? "종료된 이벤트입니다"
-        : startedAt && startedAt > currentTime
-            ? countdownText
-            : 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: event.title, 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 flex-col items-start mb-2", children: lines.map((line, index) => (_jsxs("span", { children: [line, _jsx("br", {})] }, index))) }), event.button && (_jsx("div", { className: cn(button), onClick: () => {
-                                        event.button?.onClick && event.button.onClick();
-                                    }, children: buttonText }))] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { className: "w-full rounded-xl object-cover overflow-hidden max-w-[810px]", children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_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" })] })] }));
+    return (_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { children: event.content })) }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -677,11 +677,11 @@ export default {
             "-ms-overflow-style": "none", // For Internet Explorer and Edge
             "scrollbar-width": "none", // For Firefox
           },
-          // ".page-break": {
-          //   "@media print": {
-          //     "page-break-before": "always",
-          //   },
-          // },
+          ".page-break": {
+            "@media print": {
+              "page-break-before": "always",
+            },
+          },
         },
         {
           respectPrefix: false,

package/version.txt

@@ -1 +1 @@
-1.0.210
+1.0.212