@edu-tosel/design 1.0.157 → 1.0.159

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

@@ -46,14 +46,13 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         positions: "fixed top-0 left-0 z-40 ",
         sizes: "h-screen w-[400px]",
         boundaries: "md:pl-[56px]",
-        styles: "overflow-hidden bg-black/20  backdrop-blur-sm",
+        styles: "bg-black/20  backdrop-blur-sm",
         shadows: "shadow-main",
     };
     const itemBody = {
-        positions: "absolute bottom-16 md:static md:bottom-auto ",
-        sizes: "w-full md:w-[556px] h-80 md:h-screen",
-        boundaries: "p-5",
-        styles: "bg-white overflow-hidden",
+        positions: "absolute bottom-16 md:static md:bottom-auto md:flex md:flex-col",
+        sizes: "w-full md:w-[400px] h-80 md:h-screen",
+        styles: "bg-white ",
     };
     const iconWrapper = {
         displays: "flex justify-center items-center",
@@ -67,8 +66,15 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         leave: { width: "0%" },
         config: { duration: isMobile ? 100 : 0 },
     });
+    const scrollTitleWrapper = {
+        displays: "w-full h-fit",
+        spacings: "p-5",
+    };
+    const scrollTitle = {
+        textStyles: "text-lg font-bold text-green-dark",
+    };
     return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14 ", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] }))), overlayPopTransition((styles, item) => type &&
-                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), children: [_jsx("div", { className: "text-[20px] font-bold text-green-dark ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
+                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), children: [_jsx("div", { className: cn(scrollTitleWrapper), children: _jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }) }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
 }
 const navigationTypeString = {
     calendar: "시험 접수 일정",
@@ -76,12 +82,30 @@ const navigationTypeString = {
     event: "이벤트",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
-    const cardWrapper = {
-        displays: "flex flex-col gap-y-5",
+    //scroll action 
+    const container = {
+        displays: "relative flex flex-row md:flex-col",
+        sizss: "h-full",
+        scrollActions: "scrollbar-hidden overflow-x-scroll md:overflow-y-scroll snap-x md:snap-none",
+        spacings: "p-5 gap-5 scroll-pl-5",
+    };
+    //card title styling
+    const titleWrapper = {
+        displays: "flex flex-row justify-between",
+        sizes: "w-full h-fit",
     };
-    const cardBox = {
-        displays: "",
-        sizes: "",
+    const titleText = {
+        textstyles: "font-bold text-base text-gray-dark",
+    };
+    const tag = {
+        displays: "flex flex-row px-2 py-0.5",
+        sizes: "w-fit h-fit rounded-md",
+        textstyles: "font-medium text-xs text-white",
+    };
+    const CardBox = {
+        displays: "flex flex-row",
+        sizes: "w-[360px] h-[fit] rounded-[8px]",
+        spacings: "p-5",
     };
     const dateWrapper = {
         displays: "flex flex-row gap-3",
@@ -90,16 +114,18 @@ function NavigationItem({ type, calendar, notice, event, }) {
         textStyles: "font-bold font-pretendar-var font-sm font-gray-dark",
         spacings: "leading-normal",
     };
-    const container = {
-        styles: "relative mt-[34px] scrollbar-hidden flex flex-row md:flex-col gap-y-[15px] md:h-screen overflow-x-scroll md:overflow-y-scroll",
-    };
+    const iconWrapper = {};
     const item = {
-        displays: "flex-shrink-0 flex flex-col md:justify-between ",
+        displays: "flex-shrink-0 flex flex-col md:justify-between snap-start",
     };
     if (type === "calendar")
-        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyDay, onClick }) => {
-                const { isBefore, } = compareDates(applyDay);
-                return (_jsx("div", { onClick: onClick, className: cn(item, "w-[400px] md:w-full h-[184px] shadow-main  rounded-[10px] p-7.5"), children: _jsxs("div", { children: [_jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyDay) }), _jsx("div", { children: isBefore && _jsx("p", { children: "\uC811\uC218\uC911" }) })] }) }));
+        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyEnd, applyStart, title, onClick }) => {
+                const { isBefore: isbefore1, dDay: dDay1 } = compareDates(applyStart);
+                const { isBefore: isbefore2, dDay: dDay2 } = compareDates(applyEnd);
+                return (_jsxs("div", { onClick: onClick, className: cn(item, "w-[360px] h-[184px] rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isbefore1 ?
+                                        _jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218 ", dDay1] }) :
+                                        (isbefore2 ?
+                                            _jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218\uC911" }) : _jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isbefore1 && isbefore2 ? _jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDay2] }) : "", _jsx("div", { children: _jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyEnd) }) })] }));
             }) }));
     if (type === "notification")
         return (_jsx("div", { className: cn(container), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-[140px] box-shadow rounded-[10px] p-7.5"), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));

package/package.json

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