@edu-tosel/design 1.0.298 → 1.0.300

package/layout/template/Event/Many.js

@@ -10,20 +10,23 @@ export default function Many({ events }) {
     const filteredEvents = events
         .filter((event) => {
         const now = dayjs();
-        const startedAt = dayjs(event.startedAt);
-        const expiredAt = dayjs(event.expiredAt);
+        const startedAt = event.startedAt ? dayjs(event.startedAt * 1000) : null;
+        const expiredAt = event.expiredAt ? dayjs(event.expiredAt * 1000) : null;
         if (filter === "모두보기")
             return true;
         if (filter === "진행 중") {
-            return (event.startedAt && now.isAfter(startedAt) && now.isBefore(expiredAt));
+            return (startedAt &&
+                expiredAt &&
+                now.isAfter(startedAt) &&
+                now.isBefore(expiredAt));
         }
         if (filter === "예정된") {
-            return event.startedAt && now.isBefore(startedAt);
+            return startedAt && now.isBefore(startedAt);
         }
         if (filter === "토셀소식")
             return event.category === "notice";
         return false;
     })
         .filter((event) => event.title.includes(searchQuery));
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between min-h-14.5 border-b-1", children: [_jsxs("div", { className: "w-full mb-5 h-9 sm:w-80 sm:h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl", children: [_jsx(IoIosSearch, { className: "text-xl text-green-dark mr-3" }), _jsx("input", { type: "text", placeholder: "\uD0A4\uC6CC\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694.", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-full text-sm bg-[#f0f0f0]/10 placeholder:text-[#7f7f7f] placeholder:font-light outline-none" })] }), _jsx("div", { className: "flex h-9 pb-5 sm:pb-0 sm:h-9.5 items-center sm:justify-center ", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: `text-xs sm:text-2xs md:text-xs p-2 sm:p-3 flex items-center justify-center cursor-pointer rounded-lg ${filter === item ? "bg-green-dark/10 text-green-dark" : ""}`, onClick: () => setFilter(item), children: item }, item))) })] }), _jsx("div", { className: "pt-5  grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: event.onClick, className: "w-full max-h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full max-h-50 rounded-t-xl overflow-hidden relative", children: _jsx("img", { src: event.thumbnail, alt: "", className: "w-full" }) }), _jsxs("div", { className: "w-full min-h-34 p-8 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: _jsx(Tag, { event: event }) }), _jsx(LineBreaks, { className: "text-sm font-bold text-gray-dark flex flex-col items-start", texts: event.title })] })] }, event.id))) })] }));
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between min-h-14.5 border-b-1 mt-3.5 xl:mt-0", children: [_jsxs("div", { className: "w-full mb-5 h-9 sm:w-80 sm:h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl ", children: [_jsx(IoIosSearch, { className: "text-xl text-green-dark mr-3" }), _jsx("input", { type: "text", placeholder: "\uD0A4\uC6CC\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694.", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-full text-sm bg-[#f0f0f0]/10 placeholder:text-[#7f7f7f] placeholder:font-light outline-none" })] }), _jsx("div", { className: "flex h-9 pb-5 sm:pb-0 sm:h-9.5 items-center sm:justify-center ", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: `text-xs sm:text-2xs md:text-xs p-2 sm:p-3 flex items-center justify-center cursor-pointer rounded-lg ${filter === item ? "bg-green-dark/10 text-green-dark" : ""}`, onClick: () => setFilter(item), children: item }, item))) })] }), _jsx("div", { className: "pt-5  grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: event.onClick, className: "w-full max-h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full max-h-50 rounded-t-xl overflow-hidden relative", children: _jsx("img", { src: event.thumbnail, alt: "", className: "w-full" }) }), _jsxs("div", { className: "w-full min-h-34 p-8 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: _jsx(Tag, { event: event }) }), _jsx(LineBreaks, { className: "text-sm font-bold text-gray-dark flex flex-col items-start", texts: event.title })] })] }, event.id))) })] }));
 }

package/layout/template/Event/molecule/Banner.js

@@ -21,7 +21,7 @@ function BannerMolecule({ props }, ref) {
         displays: "flex flex-col sm:flex-row xl:flex-col xl:gap-5 justify-center xl:justify-start items-center xl:items-start",
         sizes: "w-full xl:w-[320px]",
     };
-    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsx("div", { className: "w-full sm:max-w-[352px] xl:max-w-max h-[200px] overflow-hidden bg-cover rounded-[12px]", children: _jsx("img", { src: thumbnail, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex flex-col gap-y-5 py-5 sm:px-5 xl:p-0 w-full sm:max-w-[320px] xl:max-w-full xl:w-full", children: [_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Tag, { event: props.event }), _jsx(LineBreaks, { texts: title, className: "text-[16px] font-bold" })] }), _jsx(Label.Button, { title: button?.title, onClick: button?.onClick, option: {
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsx("div", { className: "w-full sm:max-w-[352px] h-[200px] overflow-hidden bg-cover rounded-[12px]", children: _jsx("img", { src: thumbnail, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex flex-col gap-y-5 py-5 sm:px-5 xl:p-0 w-full sm:max-w-[320px] xl:max-w-full xl:w-full", children: [_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Tag, { event: props.event }), _jsx(LineBreaks, { texts: title, className: "text-[16px] font-bold" })] }), _jsx(Label.Button, { title: button?.title, onClick: button?.onClick, option: {
                             width: "full",
                             background: button?.option?.background,
                             text: [button?.option?.text, "font-bold"].join(" "),

package/package.json

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

package/style/config/safelist.d.ts

@@ -0,0 +1,2 @@
+declare const safelist: string[];
+export default safelist;

package/style/config/safelist.js

@@ -0,0 +1,48 @@
+const colors = [
+    "red",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "blue",
+    "indigo",
+    "violet",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose",
+    "slate",
+    "gray",
+    "zinc",
+    "neutral",
+    "stone",
+];
+const intensities = [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+];
+const variants = ["hover"];
+const safelist = [
+    // bg-{color}-{intensity}
+    ...colors.flatMap((color) => intensities.map((intensity) => `bg-${color}-${intensity}`)),
+    // text-{color}-{intensity}
+    ...colors.flatMap((color) => intensities.map((intensity) => `text-${color}-${intensity}`)),
+    // hover:bg-{color}-{intensity}
+    ...variants.flatMap((variant) => colors.flatMap((color) => intensities.map((intensity) => `${variant}:bg-${color}-${intensity}`))),
+    // hover:text-{color}-{intensity}
+    ...variants.flatMap((variant) => colors.flatMap((color) => intensities.map((intensity) => `${variant}:text-${color}-${intensity}`))),
+];
+export default safelist;

package/tailwind.config.ts

@@ -4,6 +4,7 @@ import type { PluginAPI } from "tailwindcss/types/config";
 
 // import twElements from "tw-elements/dist/plugin";
 // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
+import safelist from "./src/style/config/safelist";
 
 export default {
   content: [
@@ -648,29 +649,7 @@ export default {
       },
     },
   },
-  safelist: [
-    {
-      pattern: /top-.*/,
-    },
-    {
-      pattern: /-top-.*/,
-    },
-    {
-      pattern: /bottom*.*/,
-    },
-    {
-      pattern: /left-.*/,
-    },
-    {
-      pattern: /-left-.*/,
-    },
-    {
-      pattern: /right*.*/,
-    },
-    {
-      pattern: /delay-.*/,
-    },
-  ],
+  safelist,
   plugins: [
     tailwindcssAnimate,
     function ({ addUtilities }: PluginAPI) {

package/version.txt

@@ -1 +1 @@
-1.0.298
+1.0.300