@edu-tosel/design 1.0.295 → 1.0.297

package/layout/template/Announcement/Many.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function Many({ contents }) {
-    const body = {
-        sizes: "w-full max-w-[1200px]",
-        boundaries: "pl-12 ",
-    };
     const box = (flag) => ({
         displays: "flex flex-col items-start gap-y-2",
         sizes: "h-25 w-full",
@@ -12,5 +8,5 @@ export default function Many({ contents }) {
         fonts: "leading-tight",
         pointers: flag ? "cursor-pointer" : "cursor-default",
     });
-    return (_jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("button", { onClick: content.onClick, className: cn(box(!!content.onClick)), 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 })] }))) }));
+    return (_jsx("div", { children: contents.map((content) => (_jsxs("button", { onClick: content.onClick, className: cn(box(!!content.onClick)), 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.js

@@ -2,10 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isHTMLString } from "../../../util";
 import { Label } from "../../../widget";
 export default function One({ title, date, content, button }) {
-    const body = {
-        sizes: "w-full max-w-[1200px]",
-        boundaries: "pb-8 px-3.5 md:pl-12  md:pr-0",
-    };
     const titleBox = {
         sizes: "w-full h-30",
         displays: "flex flex-col gap-y-3 justify-center",
@@ -14,7 +10,7 @@ export default function One({ title, date, content, button }) {
     const contentBox = {
         boundaries: "pt-12",
     };
-    return (_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 })), _jsx("div", { className: "pt-6", children: button && (_jsx(Label.Button, { ...button, option: {
+    return (_jsxs("div", { 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 })), _jsx("div", { className: "pt-6", children: button && (_jsx(Label.Button, { ...button, option: {
                         width: "full",
                         height: "lg",
                         background: "bg-green-dark",

package/layout/template/Archive/Container.js

@@ -6,7 +6,6 @@ export default function Container({ contents, state: [search, _], }) {
     const ref = useRef(null);
     const container = {
         sizes: "w-full",
-        boundaries: "p-5",
     };
     const body = {
         displays: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-5 ",

package/layout/template/Archive/Header.js

@@ -33,7 +33,7 @@ export default function Header({ state, seriesState, levelState, contents, }) {
                             ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }) }), _jsx("div", { className: cn(ghostSelect), children: _jsx(Select, { selectOptions: [
                                 {
                                     title: "Cocoon",
-                                    value: "CO"
+                                    value: "CO",
                                 },
                                 {
                                     title: "Pre-Starter",

package/layout/template/BbsLayout.js

@@ -16,7 +16,11 @@ export default function BbsLayout({ title, children, icon, links, }) {
         sizes: "w-full md:h-[188px]",
         boundaries: "pt-8 md:pt-0 px-5 md:px-12 md:pb-10 ",
     };
-    return (_jsx("div", { className: cn(container), onClick: setFlag, children: _jsxs("div", { className: cn(wrapper), children: [_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex gap-x-[10px] md:gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[24px] md:text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), _jsx(BbsSelect, { links: links })] }), children] }) }));
+    const childrenBody = {
+        sizes: "w-full max-w-[1200px]",
+        boundaries: "pb-8 px-5 md:pl-12  md:pr-3",
+    };
+    return (_jsx("div", { className: cn(container), onClick: setFlag, children: _jsxs("div", { className: cn(wrapper), children: [_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex gap-x-[10px] md:gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[24px] md:text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), _jsx(BbsSelect, { links: links })] }), _jsx("div", { className: cn(childrenBody), children: children })] }) }));
 }
 export function BbsSelect({ links }) {
     const container = {

package/layout/template/Event/Many.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { IoIosSearch } from "react-icons/io";
 import dayjs from "dayjs";
@@ -25,5 +25,5 @@ export default function Many({ events }) {
         return false;
     })
         .filter((event) => event.title.includes(searchQuery));
-    return (_jsx("div", { className: "min-h-screen w-full mx-auto", children: _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto px-10", children: _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  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 items-center", texts: event.title })] })] }, event.id))) })] }));
 }

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

@@ -1,8 +1,10 @@
+import React from "react";
 import { OnClick } from "../../../interface";
 interface Content {
     image: string;
     onClick: OnClick;
     background?: string;
+    hoverContent?: React.ReactNode;
 }
 export default function Float({ contents }: {
     contents: Content[];

package/layout/template/home/Float.js

@@ -1,18 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function Float({ contents }) {
-    const container = {
-        displays: "fixed flex flex-col bottom-20 md:bottom-16 right-5 md:right-16 z-40 overflow-visible",
-        spacings: "gap-5",
-    };
-    const buttonBox = (background) => ({
-        displays: "flex flex-col justify-center items-center",
-        spacings: "p-1.5 md:p-3",
-        sizes: "w-12 h-12 md:w-16 md:h-16",
-        styles: "rounded-full bg-black overflow-hidden",
-        backgrounds: background ?? "bg-white",
-        shadows: "shadow-main",
-        animation: "hover:scale-110 duration-300 hover:shadow-icon-hover",
-    });
-    return (_jsx("div", { className: cn(container), children: contents.map(({ image, onClick, background }) => (_jsx("button", { onClick: onClick, className: cn(buttonBox(background)), children: _jsx("img", { src: image, alt: "image", className: "object-contain" }) }, image))) }));
+    const container = cn("fixed flex flex-col bottom-20 md:bottom-16 right-5 md:right-16 z-40 overflow-visible", "gap-5");
+    const buttonBox = (background) => cn("flex justify-center items-center", "p-1.5 md:p-3", "w-12 h-12 md:w-16 md:h-16", "rounded-full overflow-hidden shadow-main hover:scale-110 duration-300 hover:shadow-icon-hover", background ?? "bg-white");
+    return (_jsx("div", { className: container, children: contents.map(({ image, onClick, background, hoverContent }) => (_jsxs("div", { className: "relative group flex items-center", children: [hoverContent && (_jsx("div", { className: cn("absolute right-full mr-3", "bg-gray-dark text-white text-sm px-5 py-2 rounded shadow-md whitespace-nowrap", "opacity-0 group-hover:opacity-100 transition-opacity duration-200"), children: hoverContent })), _jsx("button", { onClick: onClick, className: buttonBox(background), children: _jsx("img", { src: image, alt: "image", className: "object-contain" }) })] }, image))) }));
 }

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

@@ -63,8 +63,8 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     const handleMouseMove = (event) => {
         const viewportScale = window.visualViewport?.scale || 1; // 뷰포트 확대 비율
         // 마우스 좌표를 확대 비율을 고려하여 보정
-        const correctedX = event.clientX / viewportScale + 20; // 커서 기준 10px 우측
-        const correctedY = (event.clientY - 230) / viewportScale + 10; // 커서 기준 10px 아래
+        const correctedX = event.clientX / viewportScale + 30; // 커서 기준 10px 우측
+        const correctedY = (event.clientY - 260) / viewportScale + 5; // 커서 기준 10px 아래
         // 툴팁이 화면을 벗어나지 않도록 조정
         const tooltipWidth = 120; // 예상 툴팁 너비
         const tooltipHeight = 40; // 예상 툴팁 높이

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.295
+1.0.297