@edu-tosel/design 1.0.297 → 1.0.298

package/card/design/RollCard.design.js

@@ -23,7 +23,6 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
         sizes: "h-full",
         styles: isFixed && "hidden",
     };
-    console.log(isFixed, isOpen);
     const isMobile = useResponsive("md");
     return (_jsxs(Card, { option: {
             width: "3xl",

package/hook/useBussinessHours.js

@@ -9,10 +9,6 @@ function useBusinessHours() {
             const dayOfWeek = kstTime.getDay(); // 0: 일요일, 1: 월요일, ..., 6: 토요일
             const hour = kstTime.getHours(); // 0 - 23 시
             const isCurrentlyOpen = dayOfWeek >= 1 && dayOfWeek <= 5 && hour >= 10 && hour < 17;
-            console.log("현재 KST:", kstTime.toString());
-            console.log("요일 (0=일요일):", dayOfWeek);
-            console.log("시간 (0-23):", hour);
-            console.log("영업 여부:", isCurrentlyOpen);
             setIsOpen(isCurrentlyOpen);
         }
         // 처음에 한 번 실행하고, 1분마다 체크

package/layout/template/BbsLayout.js

@@ -12,7 +12,7 @@ export default function BbsLayout({ title, children, icon, links, }) {
         sizes: "w-full max-w-[1200px]",
     };
     const body = {
-        displays: "flex flex-col gap-y-5 md:flex-row  md:justify-between  items-start md:items-end",
+        displays: "flex items-center gap-y-5 md:flex-row  justify-between  md:items-end",
         sizes: "w-full md:h-[188px]",
         boundaries: "pt-8 md:pt-0 px-5 md:px-12 md:pb-10 ",
     };

package/layout/template/Event/Event.d.ts

@@ -18,12 +18,11 @@ interface EventButton extends _Button {
         text?: string;
     };
 }
-interface EventElement {
+export interface EventElement {
     tag: {
         text: string;
         style?: string;
     };
     button: EventButton;
 }
-export declare function convertEventElement(event: Event, diffTime?: string): EventElement;
 export {};

package/layout/template/Event/Event.js

@@ -1,76 +1 @@
-import moment from "moment-timezone";
-import { toMoment } from "../../../util/moment";
-import { gradient } from "../../../util";
-export function convertEventElement(event, diffTime) {
-    const now = moment().tz("Asia/Seoul");
-    const startedAt = toMoment(event.startedAt);
-    const expiredAt = toMoment(event.expiredAt);
-    if (event.category === "notice") {
-        return {
-            tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
-            button: {
-                title: "자세히 보기",
-                onClick: event.button?.onClick,
-                option: {
-                    background: "bg-green-light",
-                    text: "text-green-dark",
-                },
-            },
-        };
-    }
-    if (event.category === "event") {
-        if (now.isBefore(startedAt))
-            return {
-                tag: {
-                    text: "오픈예정",
-                    style: "bg-green-dark text-white",
-                },
-                button: {
-                    title: `오픈까지 ${diffTime}`,
-                    onClick: () => { },
-                    option: {
-                        background: "bg-gray-light",
-                        text: "text-green-dark",
-                    },
-                },
-            };
-    }
-    if (now.isAfter(startedAt) && now.isSameOrBefore(expiredAt))
-        return {
-            tag: {
-                text: `진행중 | D-${now.diff(expiredAt, "days")}`,
-                style: "bg-green-light text-green-dark",
-            },
-            button: {
-                title: event.button?.title ?? "참여하기",
-                onClick: event.button?.onClick,
-                option: {
-                    background: gradient.bg.greenToRed,
-                    text: "text-white",
-                },
-            },
-        };
-    if (now.isAfter(expiredAt))
-        return {
-            tag: { text: "마감", style: "bg-gray-light text-gray-medium" },
-            button: {
-                title: "이벤트가 마감되었어요",
-                onClick: () => { },
-                option: {
-                    background: "bg-gray-light",
-                    text: "text-gray-medium",
-                },
-            },
-        };
-    return {
-        tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
-        button: {
-            title: "자세히 보기",
-            onClick: event.button?.onClick,
-            option: {
-                background: "bg-green-light",
-                text: "text-green-dark",
-            },
-        },
-    };
-}
+export {};

package/layout/template/Event/Many.js

@@ -25,5 +25,5 @@ export default function Many({ events }) {
         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 items-center", 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", 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/One.d.ts

@@ -1,6 +1,8 @@
 import { Event } from "./Event";
+import { Button } from "../../../interface";
 interface EventProps {
     event: Event;
+    button?: Button;
 }
-export default function One({ event }: EventProps): import("react/jsx-runtime").JSX.Element;
+export default function One({ event, button }: EventProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/Event/One.js

@@ -1,9 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { cn, isHTMLString } from "../../../util";
 import BannerMolecule from "./molecule/Banner";
-export default function One({ event }) {
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import { useResponsive } from "../../../hook";
+import { Label } from "../../../widget";
+gsap.registerPlugin(ScrollTrigger);
+export default function One({ event, button }) {
+    const ref = useRef(null);
+    const isMD = useResponsive("md");
     const container = {
-        displays: "flex flex-col xl:flex-row gap-x-8  gap-y-5",
+        trigger: ".test",
+        displays: "relative flex flex-col xl:flex-row xl: justify-end gap-x-8 gap-y-5",
+        paddings: "pt-5 sm:pt-0 pb-16",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx(BannerMolecule, { event: event }), _jsx("div", { className: "w-full max-w-[796px]", children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { children: event.content })) })] }));
+    const content = {
+        displays: "flex flex-col",
+        sizes: "w-full xl:max-w-[796px]",
+        spacing: "gap-y-8 ",
+    };
+    useEffect(() => {
+        if (!isMD)
+            return;
+        const ctx = gsap.context(() => {
+            const scrollWrapper = ref.current;
+            if (scrollWrapper) {
+                const scrollTrigger = ScrollTrigger.create({
+                    trigger: scrollWrapper,
+                    start: "top-=120 top",
+                    end: "bottom+=80 bottom",
+                    pin: true,
+                    markers: false,
+                });
+                return () => {
+                    scrollTrigger.kill();
+                };
+            }
+        });
+        return () => ctx.revert();
+    }, [isMD]);
+    return (_jsxs("div", { className: cn(container), children: [_jsx(BannerMolecule, { props: { event }, ref: ref }), _jsxs("div", { className: cn(content), children: [isHTMLString(event.content) ? (_jsx("div", { className: "prose max-w-none", dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { className: "prose max-w-none", children: event.content })), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
+                            width: "lg",
+                            height: "2xl",
+                            background: "bg-[#105652]/5 hover:bg-[#105652]/20",
+                            text: "text-green-dark",
+                        } }))] })] }));
 }

package/layout/template/Event/mock.d.ts

@@ -0,0 +1,2 @@
+import { Event } from "./Event";
+export declare const events: Event[];

package/layout/template/Event/mock.js

@@ -0,0 +1,95 @@
+// 현재 시간 기준: 2025-04-18T14:26:20+09:00
+export const events = [
+    {
+        id: 1,
+        category: "event",
+        thumbnail: "/images/promotion/future-event.png",
+        createdAt: 1681795580, // 2023-04-18
+        startedAt: 1735372800, // 2025-12-28 (미래)
+        expiredAt: 1737273600, // 2026-01-19 (미래)
+        title: "[오픈예정] 미래에 시작될 이벤트",
+        content: "미래 이벤트 테스트",
+        button: {
+            title: "오픈 알림 신청",
+            onClick: () => {
+                console.log("future event");
+            },
+        },
+    },
+    {
+        id: 2,
+        category: "event",
+        thumbnail: "/images/promotion/ongoing-event.png",
+        createdAt: 1681795580, // 2023-04-18
+        startedAt: 1714435200, // 2024-05-01 (과거)
+        expiredAt: 1751328000, // 2025-07-01 (미래)
+        title: "[진행중] 현재 진행 중인 이벤트",
+        content: "진행중 이벤트 테스트",
+        button: {
+            title: "참여하기",
+            onClick: () => {
+                console.log("ongoing event");
+            },
+        },
+    },
+    {
+        id: 3,
+        category: "event",
+        thumbnail: "/images/promotion/expired-event.png",
+        createdAt: 1681795580, // 2023-04-18
+        startedAt: 1704067200, // 2024-01-01 (과거)
+        expiredAt: 1709251200, // 2024-03-01 (과거)
+        title: "[마감] 이미 종료된 이벤트",
+        content: "종료된 이벤트 테스트",
+        button: {
+            title: "다시보기",
+            onClick: () => {
+                console.log("expired event");
+            },
+        },
+    },
+    {
+        id: 4,
+        category: "event",
+        thumbnail: "/images/promotion/no-dates.png",
+        createdAt: 1681795580, // 2023-04-18
+        title: "[진행중] 시작/종료 시간이 없는 이벤트",
+        content: "시작/종료 시간 없음 테스트",
+        button: {
+            title: "참여하기",
+            onClick: () => {
+                console.log("no dates event");
+            },
+        },
+    },
+    {
+        id: 5,
+        category: "event",
+        thumbnail: "/images/promotion/same-dates.png",
+        createdAt: 1681795580, // 2023-04-18
+        startedAt: 1704067200, // 2024-01-01 (과거)
+        expiredAt: 1704067200, // 2024-01-01 (과거, startedAt과 동일)
+        title: "[마감] 시작/종료 시간이 동일한 이벤트",
+        content: "시작/종료 시간 동일 테스트",
+        button: {
+            title: "결과보기",
+            onClick: () => {
+                console.log("same dates event");
+            },
+        },
+    },
+    {
+        id: 6,
+        category: "notice",
+        thumbnail: "/images/promotion/notice.png",
+        createdAt: 1681795580, // 2023-04-18
+        title: "[공지] 일반 공지사항",
+        content: "공지사항 테스트",
+        button: {
+            title: "자세히 보기",
+            onClick: () => {
+                console.log("notice");
+            },
+        },
+    },
+];

package/layout/template/Event/molecule/Banner.d.ts

@@ -2,8 +2,10 @@ import { Event } from "../Event";
 interface BannerProps {
     event: Event;
 }
-export default function BannerMolecule({ event }: BannerProps): import("react/jsx-runtime").JSX.Element;
 export declare function Tag({ event }: {
     event: Event;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: import("react").ForwardRefExoticComponent<{
+    props: BannerProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { LineBreaks } from "../../../../text";
 import { cn } from "../../../../util";
 import { Label } from "../../../../widget";
-import { convertEventElement } from "../Event";
 import moment from "moment-timezone";
 import { toDiffFromCurrent } from "../../../../util/moment";
-export default function BannerMolecule({ event }) {
-    const { thumbnail, title } = event;
+import { useEventElement } from "../useEventElement";
+function BannerMolecule({ props }, ref) {
+    const { thumbnail, title } = props.event;
     const [currentTime, setCurrentTime] = useState(moment);
     useEffect(() => {
         const timer = setInterval(() => {
@@ -15,21 +15,20 @@ export default function BannerMolecule({ event }) {
         }, 1000);
         return () => clearInterval(timer);
     }, []);
-    const diffTime = toDiffFromCurrent(event.expiredAt, currentTime);
-    const { button } = convertEventElement(event, diffTime);
+    const diffTime = toDiffFromCurrent(props.event.expiredAt, currentTime);
+    const { button } = useEventElement(props.event, diffTime);
     const container = {
-        positions: "relative",
         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", { className: cn(container), children: [_jsx("div", { className: "w-full max-w-[320px] 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 p-5 xl:p-0 w-full max-w-[320px] xl:max-w-full xl:w-full", children: [_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Tag, { event: 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] 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: {
                             width: "full",
                             background: button?.option?.background,
                             text: [button?.option?.text, "font-bold"].join(" "),
                         } })] })] }));
 }
 export function Tag({ event }) {
-    const { tag } = convertEventElement(event);
+    const { tag } = useEventElement(event);
     const container = {
         selfAligns: "self-start",
         displays: "flex  items-center",
@@ -41,3 +40,4 @@ export function Tag({ event }) {
     };
     return _jsx("div", { className: cn(container), children: tag.text });
 }
+export default forwardRef(BannerMolecule);

package/layout/template/Event/useEventElement.d.ts

@@ -0,0 +1,2 @@
+import { Event, EventElement } from "./Event";
+export declare function useEventElement(event: Event, diffTime?: string): EventElement;

package/layout/template/Event/useEventElement.js

@@ -0,0 +1,117 @@
+import moment from "moment-timezone";
+import { toMoment } from "../../../util/moment";
+import { gradient } from "../../../util";
+import { useEffect, useState } from "react";
+export function useEventElement(event, diffTime) {
+    const [now, setNow] = useState(moment().tz("Asia/Seoul"));
+    // 시작 시간과 종료 시간을 직접 변환하여 사용
+    const startedAt = event.startedAt ? toMoment(event.startedAt) : null;
+    const expiredAt = event.expiredAt ? toMoment(event.expiredAt) : null;
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(moment().tz("Asia/Seoul"));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    if (event.category === "notice") {
+        return {
+            tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
+            button: {
+                title: "자세히 보기",
+                onClick: event.button?.onClick,
+                option: {
+                    background: "bg-green-light",
+                    text: "text-green-dark",
+                },
+            },
+        };
+    }
+    if (event.category === "event") {
+        // 시작 시간이 없는 경우
+        if (!startedAt) {
+            return {
+                tag: { text: "진행중", style: "bg-green-light text-green-dark" },
+                button: {
+                    title: event.button?.title ?? "참여하기",
+                    onClick: event.button?.onClick,
+                    option: {
+                        background: gradient.bg.greenToRed,
+                        text: "text-white",
+                    },
+                },
+            };
+        }
+        // 시작 시간 이전인 경우
+        if (now.isBefore(startedAt)) {
+            return {
+                tag: {
+                    text: "오픈예정",
+                    style: "bg-green-dark text-white",
+                },
+                button: {
+                    title: `오픈까지 ${diffTime}`,
+                    onClick: () => { },
+                    option: {
+                        background: "bg-gray-light",
+                        text: "text-green-dark",
+                    },
+                },
+            };
+        }
+        // 종료 시간이 없는 경우 진행중으로 처리
+        if (!expiredAt) {
+            return {
+                tag: { text: "진행중", style: "bg-green-light text-green-dark" },
+                button: {
+                    title: event.button?.title ?? "참여하기",
+                    onClick: event.button?.onClick,
+                    option: {
+                        background: gradient.bg.greenToRed,
+                        text: "text-white",
+                    },
+                },
+            };
+        }
+        // 종료된 경우 (현재 시간이 종료 시간과 같거나 이후)
+        if (now.isSameOrAfter(expiredAt || startedAt && expiredAt && startedAt.isSame(expiredAt))) {
+            return {
+                tag: { text: "마감", style: "bg-gray-light text-gray-medium" },
+                button: {
+                    title: "이벤트가 마감되었어요",
+                    onClick: () => { },
+                    option: {
+                        background: "bg-gray-light",
+                        text: "text-gray-medium",
+                    },
+                },
+            };
+        }
+        // 진행 중인 경우
+        const daysLeft = Math.ceil(expiredAt.diff(now, "days", true));
+        return {
+            tag: {
+                text: `진행중 | D-${daysLeft}`,
+                style: "bg-green-light text-green-dark",
+            },
+            button: {
+                title: event.button?.title ?? "참여하기",
+                onClick: event.button?.onClick,
+                option: {
+                    background: gradient.bg.greenToRed,
+                    text: "text-white",
+                },
+            },
+        };
+    }
+    return {
+        tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
+        button: {
+            title: "자세히 보기",
+            onClick: event.button?.onClick,
+            option: {
+                background: "bg-green-light",
+                text: "text-green-dark",
+            },
+        },
+    };
+}

package/package.json

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

package/util/createSearch.js

@@ -215,7 +215,8 @@ function createSearch({ record, } = {}) {
             entireMatch = entries
                 .filter(([_, value]) => {
                 const normalizedValue = value.toLowerCase();
-                return (normalizedValue === lowerQuery || value.includes(lowerQuery) ||
+                return (normalizedValue === lowerQuery ||
+                    value.includes(lowerQuery) ||
                     new RegExp(`\\b${lowerQuery}`).test(normalizedValue));
             })
                 .map(([key, value]) => [
@@ -265,7 +266,7 @@ const getConstantVowel = (kor) => {
     const ga = 44032;
     let uni = kor.charCodeAt(0);
     uni = uni - ga;
-    let fn = Math.floor(uni / 588);
+    const fn = Math.floor(uni / 588);
     // let sn = Math.floor((uni - (fn * 588)) / 28);
     // let tn = uni % 28;
     return fn < 0;

package/version.txt

@@ -1 +1 @@
-1.0.297
+1.0.298

package/widget/design/Label.design.js

@@ -10,6 +10,7 @@ const widthSize = {
     md: "w-45",
     lg: "w-50",
     full: "w-full",
+    auto: "w-auto",
 };
 const heightSize = {
     "4xs": "h-5", // 20px
@@ -20,6 +21,7 @@ const heightSize = {
     md: "h-12.25",
     lg: "h-[45px]",
     xl: "h-[50px]",
+    "2xl": "h-[60px]",
 };
 export default function LabelDesign({ title, onClick, disabled, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];

package/widget/template/Select/Select.js

@@ -103,7 +103,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
         setIsOpen(false);
     }, [flag]);
     return (_jsxs("div", { className: cn(container), id: `select-box-${uniqueKey}`, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: () => {
-                    setIsOpen(!isOpen), console.log(uniqueKey);
+                    setIsOpen(!isOpen);
                 }, className: cn(button, "border-1 border-gray-light hover:border-none"), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label, "bg-white/0"), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: selectOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("div", { className: cn(labelCoating), onClick: () => {
                                 setValue(value);