@edu-tosel/design 1.0.101 → 1.0.102

package/layout/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Action } from "./template/Action";
+export { default as Announcement } from "./template/Announcement";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";

package/layout/index.js

@@ -1,4 +1,5 @@
 export { default as Action } from "./template/Action";
+export { default as Announcement } from "./template/Announcement";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";

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

@@ -0,0 +1,3 @@
+export default function Layout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Announcement/Layout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Layout({ children }) {
+    const container = {
+        displays: "flex flex-col items-center",
+        sizes: "w-full min-h-screen",
+    };
+    const header = {
+        displays: "flex justify-start items-end",
+        sizes: "w-full max-w-[1200px] h-[188px]",
+        boundaries: "pl-12 pb-10",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(header), children: _jsxs("div", { className: "flex gap-x-5 items-center", children: [_jsx(SVG, {}), _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: "\uACF5\uC9C0\uC0AC\uD56D" })] }) }), children] }));
+}
+const SVG = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: _jsx("path", { d: "M31.332 7.776C31.0653 6.8326 30.4979 6.0021 29.716 5.41077C28.934 4.81944 27.9804 4.49964 27 4.5H21C18.94 4.5 17.2 5.886 16.668 7.776M31.332 7.776C31.442 8.164 31.5 8.576 31.5 9C31.5 9.39783 31.342 9.77936 31.0607 10.0607C30.7794 10.342 30.3978 10.5 30 10.5H18C17.6022 10.5 17.2206 10.342 16.9393 10.0607C16.658 9.77936 16.5 9.39783 16.5 9C16.5 8.576 16.56 8.164 16.668 7.776M31.332 7.776C32.624 7.874 33.908 7.996 35.186 8.144C37.386 8.4 39 10.298 39 12.514V39C39 40.1935 38.5259 41.3381 37.682 42.182C36.8381 43.0259 35.6935 43.5 34.5 43.5H13.5C12.3065 43.5 11.1619 43.0259 10.318 42.182C9.47411 41.3381 9 40.1935 9 39V12.514C9 10.298 10.612 8.4 12.814 8.144C14.0961 7.99555 15.381 7.87286 16.668 7.776", stroke: "#105652", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/layout/template/Announcement/Many.d.ts

@@ -0,0 +1,9 @@
+type Content = {
+    title: string;
+    date: string;
+};
+interface ManyLayoutProps {
+    contents: Content[];
+}
+export default function Many({ contents }: ManyLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Announcement/Many.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Announcement from ".";
+import { cn } from "../../../util";
+export default function Many({ contents }) {
+    const body = {
+        sizes: "w-full max-w-[1200px]",
+        boundaries: "pl-12 ",
+    };
+    const box = {
+        displays: "flex flex-col gap-y-2",
+        sizes: "h-25",
+        boundaries: "pt-7.5 border-b-1",
+        fonts: "leading-tight",
+    };
+    return (_jsx(Announcement.Layout, { children: _jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("div", { className: cn(box), children: [_jsx("div", { className: "text-[16px] text-gray-dark font-pretendard-bold", children: content.title }), _jsx("div", { className: "text-[12px] text-gray-medium", children: content.date })] }))) }) }));
+}

package/layout/template/Announcement/One.d.ts

@@ -0,0 +1,7 @@
+interface OneLayoutProps {
+    title: string;
+    date: string;
+    content: string;
+}
+export default function One({ title, date, content }: OneLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Announcement/One.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Announcement from ".";
+import { cn, isHTMLString } from "../../../util";
+export default function One({ title, date, content }) {
+    const body = {
+        sizes: "w-full max-w-[1200px]",
+        boundaries: "pl-12 ",
+    };
+    const titleBox = {
+        sizes: "w-full h-30",
+        displays: "flex flex-col gap-y-3 justify-center",
+        boundaries: "border-b-2",
+    };
+    const contentBox = {
+        boundaries: "pt-12",
+    };
+    return (_jsx(Announcement.Layout, { children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-[24px] font-pretendard-bold", children: title }), _jsx("div", { className: "text-gray-medium", children: date })] }), isHTMLString(content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content }, className: cn(contentBox) })) : (_jsx("div", { className: cn(contentBox), children: content }))] }) }));
+}

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

@@ -0,0 +1,9 @@
+import Layout from "./Layout";
+import Many from "./Many";
+import One from "./One";
+declare const Announcement: {
+    One: typeof One;
+    Many: typeof Many;
+    Layout: typeof Layout;
+};
+export default Announcement;

package/layout/template/Announcement/index.js

@@ -0,0 +1,9 @@
+import Layout from "./Layout";
+import Many from "./Many";
+import One from "./One";
+const Announcement = {
+    One,
+    Many,
+    Layout,
+};
+export default Announcement;

package/layout/template/promotion/Layout.js

@@ -66,6 +66,8 @@ export default function Layout() {
         },
     ];
     const [selectedEvent, setSelectedEvent] = useState(null);
+    const [filter, setFilter] = useState("모두보기");
+    const [searchQuery, setSearchQuery] = useState("");
     const handleCardClick = (event) => {
         setSelectedEvent(event);
     };
@@ -104,7 +106,27 @@ export default function Layout() {
             return "";
         }
     };
-    return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto mmd:px-10", children: selectedEvent ? (_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: selectedEvent.img, 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: getStatusText(selectedEvent) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: selectedEvent.title }), _jsxs("div", { className: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md", style: {
+    const filteredEvents = eventsData
+        .filter((event) => {
+        const now = dayjs();
+        const startDate = dayjs(event.startDate);
+        const endDate = event.endDate
+            ? dayjs(event.endDate)
+            : dayjs(event.endData);
+        if (filter === "모두보기")
+            return true;
+        if (filter === "진행 중") {
+            return (event.type === "0" && now.isAfter(startDate) && now.isBefore(endDate));
+        }
+        if (filter === "예정된") {
+            return event.type === "0" && now.isBefore(startDate);
+        }
+        if (filter === "토셀소식")
+            return event.type === "2";
+        return false;
+    })
+        .filter((event) => event.title.includes(searchQuery));
+    return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto px-10", children: selectedEvent ? (_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: selectedEvent.img, 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: getStatusText(selectedEvent) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: selectedEvent.title }), _jsxs("div", { className: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md", style: {
                                                     background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
-                                                }, children: [_jsx(BsCreditCard, { className: "text-lg xs:text-xl" }), "\uC5F0\uB3D9\uD558\uACE0 \uCFE0\uD3F0\uBC1B\uAE30"] })] })] }, selectedEvent.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: _jsx("img", { src: selectedEvent.body, className: "w-full rounded-xl object-cover", alt: "" }) }), _jsx("button", { onClick: handleBackToList, 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" })] })] })) : (_jsxs(_Fragment, { 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.", 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 justify-center", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: "text-xs sm:text-2xs md:text-xs p-3 flex items-center justify-center cursor-pointer", children: item }, item))) })] }), _jsx("div", { className: "pt-5 flex grid sm:grid-cols-2 md:grid-cols-3 gap-5 rounded-xl", children: eventsData.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), 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.img, 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: getStatusText(event) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center", children: event.title })] })] }, event.id))) })] })) })] }));
+                                                }, children: [_jsx(BsCreditCard, { className: "text-lg xs:text-xl" }), "\uC5F0\uB3D9\uD558\uACE0 \uCFE0\uD3F0\uBC1B\uAE30"] })] })] }, selectedEvent.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: _jsx("img", { src: selectedEvent.body, className: "w-full rounded-xl object-cover", alt: "" }) }), _jsx("button", { onClick: handleBackToList, 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" })] })] })) : (_jsxs(_Fragment, { 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 flex grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), 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.img, 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: getStatusText(event) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center", children: event.title })] })] }, event.id))) })] })) })] }));
 }

package/package.json

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

package/util/index.d.ts

@@ -1,5 +1,6 @@
 export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
+export { default as isHTMLString } from "./isHTMLString";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";

package/util/index.js

@@ -1,5 +1,6 @@
 export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
+export { default as isHTMLString } from "./isHTMLString";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";

package/util/isHTMLString.d.ts

@@ -0,0 +1 @@
+export default function isHTMLString(str: string): boolean;

package/util/isHTMLString.js

@@ -0,0 +1,4 @@
+export default function isHTMLString(str) {
+    const doc = new DOMParser().parseFromString(str, "text/html");
+    return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
+}

package/version.txt

@@ -1 +1 @@
-1.0.101
+1.0.102