@edu-tosel/design 1.0.358 → 1.0.364

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

@@ -1,4 +1,5 @@
 import { News as NewsType } from "../../../interface/News";
-export default function News({ newsList }: {
+export default function News({ newsList, url }: {
     newsList: NewsType[];
+    url: string;
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/News.js

@@ -8,7 +8,7 @@ const formatDate = (date) => {
     const day = String(date.getDate()).padStart(2, "0");
     return `${year}.${month}.${day}`;
 };
-export default function News({ newsList }) {
+export default function News({ newsList, url }) {
     // createdAt 기준으로 최신 4개 선택
     const selectedNews = useMemo(() => {
         const sorted = [...newsList]
@@ -99,8 +99,8 @@ export default function News({ newsList }) {
     const rightDateText = {
         textStyles: "text-xs md:text-sm text-gray-600 whitespace-nowrap",
     };
-    return (_jsxs("div", { className: cn(container, "font-pretendard-var"), children: [_jsx("div", { className: cn(leftCont), children: _jsx("article", { className: cn(mainArticle), children: _jsx("a", { href: "#", className: "block", children: _jsxs("div", { className: cn(imgArea), children: [_jsx("div", { className: cn(imgElm), style: { backgroundImage: `url(${selectedNews.main.imgUrl})` } }), _jsxs("div", { className: cn(textElm), children: [_jsx("h3", { className: cn(newsTitle), children: selectedNews.main.title }), selectedNews.main.subTitle && (_jsx("div", { className: cn(newsDesc), children: selectedNews.main.subTitle }))] })] }) }) }) }), _jsx("div", { className: cn(rightCont), children: selectedNews.sub.map((news) => {
+    return (_jsxs("div", { className: cn(container, "font-pretendard-var"), children: [_jsx("div", { className: cn(leftCont), children: _jsx("article", { className: cn(mainArticle), children: _jsx("a", { className: "block", onClick: () => window.open(`${url}/${selectedNews.main.id}`), children: _jsxs("div", { className: cn(imgArea), children: [_jsx("div", { className: cn(imgElm), style: { backgroundImage: `url(${selectedNews.main.imgUrl})` } }), _jsxs("div", { className: cn(textElm), children: [_jsx("h3", { className: cn(newsTitle), children: selectedNews.main.title }), selectedNews.main.subTitle && (_jsx("div", { className: cn(newsDesc), children: selectedNews.main.subTitle }))] })] }) }) }) }), _jsx("div", { className: cn(rightCont), children: selectedNews.sub.map((news) => {
                     const newsDate = new Date(news.createdAt);
-                    return (_jsx("div", { className: cn(rightItem), children: _jsxs("a", { href: "#", className: cn(rightItemLink), children: [_jsxs("div", { className: cn(textArea), children: [_jsx("h5", { className: cn(rightTitle), children: news.title }), news.subTitle && (_jsx("p", { className: cn(rightDesc), children: news.subTitle }))] }), _jsx("div", { className: cn(rightDateArea), children: _jsx("span", { className: cn(rightDateText), children: formatDate(newsDate) }) })] }) }, news.id));
+                    return (_jsx("div", { className: cn(rightItem), children: _jsxs("a", { className: cn(rightItemLink), onClick: () => window.open(`${url}/${news.id}`), children: [_jsxs("div", { className: cn(textArea), children: [_jsx("h5", { className: cn(rightTitle), children: news.title }), news.subTitle && (_jsx("p", { className: cn(rightDesc), children: news.subTitle }))] }), _jsx("div", { className: cn(rightDateArea), children: _jsx("span", { className: cn(rightDateText), children: formatDate(newsDate) }) })] }) }, news.id));
                 }) })] }));
 }

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

@@ -12,6 +12,7 @@ type MenuItem = {
 type MenuData = {
     title: {
         title: string;
+        titleColor?: string;
         image?: string;
         description?: string;
         button?: {

package/layout/template/home/layout/Header.js

@@ -226,7 +226,7 @@ export default function Header({ logo, rightButton, contents, }) {
         };
     }, []);
     const activeMenu = hoveredIndex !== null ? contents[hoveredIndex]?.menu : null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: headerRef, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: cn(essenstialsWrapper), id: "buttonArea", children: [rightButton && rightButton, _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" }))] }) }) })] })] }), _jsxs("div", { ref: menuContentRef, className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("div", { className: "relative", onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, children: _jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }) }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && rightButton })] })] }) }), activeMenu && hoveredIndex !== null && isMD && (_jsx("div", { ref: dropdownRef, className: "fixed top-[60px] left-0 w-full bg-white shadow-lg z-50 border-t border-gray-200 hidden md:block", onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave, style: { maxWidth: "100vw" }, children: _jsx("div", { className: "max-w-[1200px] mx-auto px-6 md:px-12 py-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 md:gap-4 lg:gap-6", children: [_jsx("div", { className: "flex-shrink-0 w-full md:w-64 lg:w-80", children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [activeMenu.title.image && (_jsx("div", { className: "mb-0.5", children: _jsx("img", { src: activeMenu.title.image, alt: activeMenu.title.title, className: "w-full object-contain" }) })), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [_jsx("h3", { className: "text-xl md:text-2xl font-bold text-blue-600", children: activeMenu.title.title }), activeMenu.title.description && (_jsx("p", { className: "text-gray-600 text-xs leading-relaxed", children: activeMenu.title.description }))] }), activeMenu.title.button && (_jsx("div", { className: "flex-shrink-0", children: _jsx("button", { onClick: () => activeMenu.title.button?.onClick?.(), className: cn(activeMenu.title.button.style ||
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: headerRef, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: cn(essenstialsWrapper), id: "buttonArea", children: [rightButton && rightButton, _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" }))] }) }) })] })] }), _jsxs("div", { ref: menuContentRef, className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("div", { className: "relative", onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, children: _jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }) }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && rightButton })] })] }) }), activeMenu && hoveredIndex !== null && isMD && (_jsx("div", { ref: dropdownRef, className: "fixed top-[60px] left-0 w-full bg-white shadow-lg z-50 border-t border-gray-200 hidden md:block", onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave, style: { maxWidth: "100vw" }, children: _jsx("div", { className: "max-w-[1200px] mx-auto px-6 md:px-12 py-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 md:gap-4 lg:gap-6", children: [_jsx("div", { className: "flex-shrink-0 w-full md:w-64 lg:w-80", children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [activeMenu.title.image && (_jsx("div", { className: "mb-0.5", children: _jsx("img", { src: activeMenu.title.image, alt: activeMenu.title.title, className: "w-full object-contain" }) })), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [_jsx("h3", { className: cn(activeMenu.title.titleColor || "text-xl md:text-2xl font-bold text-blue-600"), children: activeMenu.title.title }), activeMenu.title.description && (_jsx("p", { className: "text-gray-600 text-xs leading-relaxed", children: activeMenu.title.description }))] }), activeMenu.title.button && (_jsx("div", { className: "flex-shrink-0", children: _jsx("button", { onClick: () => activeMenu.title.button?.onClick?.(), className: cn(activeMenu.title.button.style ||
                                                             "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium whitespace-nowrap"), children: activeMenu.title.button.title }) }))] })] }) }), _jsx("div", { className: "flex-1 md:border-l md:border-gray-200", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 md:gap-x-6 gap-y-3 h-full pt-0 md:pt-4 pl-0 md:pl-4 lg:pl-8", children: activeMenu.content.map((item, itemIndex) => (_jsxs("div", { className: "cursor-pointer group", onClick: () => item.onClick?.(), children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("h4", { className: "text-base md:text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors", children: item.title }), item.tag && (_jsx("span", { className: cn("px-2 py-0.5 text-xs font-medium text-white rounded-full whitespace-nowrap", item.tag.background || "bg-blue-600"), children: item.tag.title }))] }), item.description && (_jsx("p", { className: "text-xs text-gray-600 leading-relaxed", children: item.description }))] }, itemIndex))) }) })] }) }) })), isExpanded && !isMD && (_jsxs("div", { ref: mobileMenuRef, className: "fixed inset-0 bg-white z-50 overflow-hidden flex flex-col", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "bg-white px-4 py-3 flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-4", children: _jsx("img", { src: "/images/logos/tosel.png", alt: "Tosel", className: "h-7" }) }), _jsx("button", { onClick: closeMobileMenu, className: "text-black w-6 h-6 flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: _jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }), _jsx("div", { className: "flex-1 overflow-y-scroll", children: _jsx("div", { className: "border-b border-gray-200", children: contents.map((button, index) => (_jsxs("div", { children: [_jsxs("button", { onClick: (e) => handleMobileMenuClick(index, e), className: "w-full px-4 py-4 flex items-center justify-between border-b border-gray-100 hover:bg-gray-50 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-green-500" }), _jsx("span", { className: "text-gray-900 font-medium", children: button.title })] }), button.menu && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "w-5 h-5 text-gray-400", children: _jsx("path", { d: "M12 4v16m8-8H4" }) }))] }), button.menu && mobileMenuIndex === index && (_jsxs("div", { className: "bg-gray-50 border-b border-gray-200 animate-in slide-in-from-top-2 duration-200", children: [button.menu.title && (_jsxs("div", { className: "px-4 py-4 border-b border-gray-200", children: [button.menu.title.image && (_jsx("div", { className: "mb-3", children: _jsx("img", { src: button.menu.title.image, alt: button.menu.title.title, className: "w-full max-w-xs h-auto object-contain" }) })), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [_jsx("h3", { className: "text-xl font-bold text-blue-600", children: button.menu.title.title }), button.menu.title.description && (_jsx("p", { className: "text-gray-600 text-xs leading-relaxed", children: button.menu.title.description }))] }), button.menu.title.button && (_jsx("div", { className: "flex-shrink-0", children: _jsx("button", { onClick: () => {
                                                                         button.menu?.title.button?.onClick?.();
                                                                         closeMobileMenu();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.358",
+  "version": "1.0.364",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -44,5 +44,8 @@
     "uuid": "^10.0.0",
     "zustand": "^4.5.0"
   },
-  "devDependencies": {}
+  "devDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/version.txt

@@ -1 +1 @@
-1.0.358
+1.0.364