@edu-tosel/design 1.0.153 → 1.0.155

package/asset/SVG.d.ts

@@ -1,13 +1,11 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
-import { IconProps } from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
-import { SymbolProps } from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 declare const SVG: {
     TOSEL: typeof TOSEL;
@@ -17,13 +15,17 @@ declare const SVG: {
         Asc: () => import("react/jsx-runtime").JSX.Element;
         Desc: () => import("react/jsx-runtime").JSX.Element;
     };
+    Eye: {
+        Open: ({ onClick, className }: import("./svg/Eye").EyeProps) => import("react/jsx-runtime").JSX.Element;
+        Close: ({ onClick, className }: import("./svg/Eye").EyeProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Email: typeof Email;
     Icon: {
-        Calendar: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Notification: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Search: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Event: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+        Calendar: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Notification: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Search: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Browser: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Event: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
         Document: ({ theme }: {
             theme: "red" | "blue";
         }) => import("react/jsx-runtime").JSX.Element;
@@ -43,8 +45,8 @@ declare const SVG: {
     Phone: typeof Phone;
     Profile: typeof Profile;
     Symbol: {
-        LessThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
-        GreaterThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        LessThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        GreaterThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default SVG;

package/asset/SVG.js

@@ -1,6 +1,7 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
+import Eye from "./svg/Eye";
 import Icon from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
@@ -13,6 +14,7 @@ const SVG = {
     TOSEL,
     Close,
     Direction,
+    Eye,
     Email,
     Icon,
     Image,

package/asset/SVG.tsx

@@ -1,19 +1,21 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
-import Icon, { IconProps } from "./svg/Icon";
+import Eye from "./svg/Eye";
+import Icon from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
-import Symbol, { SymbolProps } from "./svg/Symbol";
+import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 
 const SVG = {
   TOSEL,
   Close,
   Direction,
+  Eye,
   Email,
   Icon,
   Image,

package/asset/svg/Eye.d.ts

@@ -0,0 +1,12 @@
+import { OnClick } from "../../interface";
+export interface EyeProps {
+    onClick: OnClick;
+    className?: string;
+}
+declare function Open({ onClick, className }: EyeProps): import("react/jsx-runtime").JSX.Element;
+declare function Close({ onClick, className }: EyeProps): import("react/jsx-runtime").JSX.Element;
+declare const Eye: {
+    Open: typeof Open;
+    Close: typeof Close;
+};
+export default Eye;

package/asset/svg/Eye.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+function Open({ onClick, className = "" }) {
+    return (_jsxs("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#7F7F7F", className: cn(className, "size-6"), children: [_jsx("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }), _jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z", clipRule: "evenodd" })] }));
+}
+function Close({ onClick, className = "" }) {
+    return (_jsxs("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#7F7F7F", className: cn(className, "size-6"), children: [_jsx("path", { d: "M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" }), _jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" }), _jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" })] }));
+}
+const Eye = {
+    Open,
+    Close,
+};
+export default Eye;

package/asset/svg/Eye.tsx

@@ -0,0 +1,48 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface EyeProps {
+  onClick: OnClick;
+  className?: string;
+}
+function Open({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+      <path
+        fillRule="evenodd"
+        d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function Close({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
+      <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
+      <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
+    </svg>
+  );
+}
+
+const Eye = {
+  Open,
+  Close,
+};
+
+export default Eye;

package/asset/svg/Icon.d.ts

@@ -1,5 +1,6 @@
-import { OnClick } from "../../interface";
+import { OnClick, Size } from "../../interface";
 export interface IconProps {
+    size?: Size;
     onClick?: OnClick;
 }
 declare const Icon: {
@@ -11,11 +12,11 @@ declare const Icon: {
     Document: typeof Document;
 };
 export default Icon;
-declare function Calendar({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Notification({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Search({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Event({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Calendar({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Notification({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Search({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Browser({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Event({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function Document({ theme }: {
     theme: "blue" | "red";
 }): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Icon.js

@@ -8,20 +8,20 @@ const Icon = {
     Document,
 };
 export default Icon;
-function Calendar({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Calendar({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Notification({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Notification({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Search({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Search({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Browser({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+function Browser({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
-function Event({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Event({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function Document({ theme }) {
     const color = {

package/asset/svg/Icon.tsx

@@ -1,7 +1,8 @@
-import { OnClick } from "../../interface";
+import { OnClick, Size } from "../../interface";
 import { cn } from "../../util";
 
 export interface IconProps {
+  size?: Size;
   onClick?: OnClick;
 }
 
@@ -16,13 +17,13 @@ const Icon = {
 
 export default Icon;
 
-function Calendar({ onClick }: IconProps) {
+function Calendar({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -37,13 +38,13 @@ function Calendar({ onClick }: IconProps) {
   );
 }
 
-function Notification({ onClick }: IconProps) {
+function Notification({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -58,13 +59,13 @@ function Notification({ onClick }: IconProps) {
   );
 }
 
-function Search({ onClick }: IconProps) {
+function Search({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -79,13 +80,13 @@ function Search({ onClick }: IconProps) {
   );
 }
 
-function Browser({ onClick }: IconProps) {
+function Browser({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -100,13 +101,13 @@ function Browser({ onClick }: IconProps) {
   );
 }
 
-function Event({ onClick }: IconProps) {
+function Event({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >

package/layout/template/Archive/Header.js

@@ -4,62 +4,87 @@ import { Input, Select } from "../../../widget";
 import { useResponsive } from "../../../hook";
 export default function Header({ state, seriesState, levelState, }) {
     const container = {
-        displays: "flex justify-between items-start",
-        sizes: "w-full h-15",
+        displays: "flex justify-between items-start flex-wrap flex-none gap-y-5 gap-x-5",
+        sizes: "w-full h-fit",
         boundaries: "px-5 pb-5",
     };
+    const selectWrapper = {
+        display: "flex flex-row gap-3.5",
+    };
+    const ghostSelect = {
+        sizes: "w-[152px], h-[36px] relative",
+    };
     const res = useResponsive();
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-3.5", children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
-                            width: "sm",
-                        } }), _jsx(Select, { selectOptions: [
-                            ["TOSEL VOCA Series", "Voca Series"],
-                            ["Story Series", "Story Series"],
-                            ["Listening Series", "Listening Series"],
-                            ["Speaking Series", "Speaking Series"],
-                            ["실전문제집1", "실전문제집1"],
-                            ["TOSEL 실전문제집2", "실전문제집2"],
-                            ["유형분석집", "유형분석집1"],
-                            ["유형분석집2", "유형분석집2"],
-                            ["예상문제집", "예상문제집"],
-                            ["심화문제집", "심화문제집"],
-                            ["기출연습", "기출연습"],
-                            ["기출모의고사", "기출모의고사"],
-                        ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }), _jsx(Select, { selectOptions: [
-                            {
-                                title: "Pre-Starter",
-                                value: "PS",
-                            },
-                            {
-                                title: "Starter",
-                                value: "ST",
-                            },
-                            {
-                                title: "Basic",
-                                value: "BA",
-                            },
-                            {
-                                title: "Junior",
-                                value: "JR",
-                            },
-                            {
-                                title: "High Junior",
-                                value: "HJ",
-                            },
-                        ], state: levelState, placeholder: "\uB808\uBCA8" })] }), _jsx(ContentBox, { contents: [
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
+                    width: "md",
+                } }), _jsxs("div", { className: cn(selectWrapper), children: [_jsx("div", { className: cn(ghostSelect), children: _jsx(Select, { selectOptions: [
+                                ["TOSEL VOCA Series", "Voca Series"],
+                                ["Story Series", "Story Series"],
+                                ["Listening Series", "Listening Series"],
+                                ["Speaking Series", "Speaking Series"],
+                                ["실전문제집1", "실전문제집1"],
+                                ["TOSEL 실전문제집2", "실전문제집2"],
+                                ["유형분석집", "유형분석집1"],
+                                ["유형분석집2", "유형분석집2"],
+                                ["예상문제집", "예상문제집"],
+                                ["심화문제집", "심화문제집"],
+                                ["기출연습", "기출연습"],
+                                ["기출모의고사", "기출모의고사"],
+                            ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }) }), _jsx("div", { className: cn(ghostSelect), children: _jsx(Select, { selectOptions: [
+                                {
+                                    title: "Pre-Starter",
+                                    value: "PS",
+                                },
+                                {
+                                    title: "Starter",
+                                    value: "ST",
+                                },
+                                {
+                                    title: "Basic",
+                                    value: "BA",
+                                },
+                                {
+                                    title: "Junior",
+                                    value: "JR",
+                                },
+                                {
+                                    title: "High Junior",
+                                    value: "HJ",
+                                },
+                            ], state: levelState, placeholder: "\uB808\uBCA8" }) })] }), _jsx(ContentBox, { contents: [
                     {
                         title: "교재 음원",
                         onClick: () => { },
+                        disabled: false,
+                    },
+                    {
+                        title: "정오표",
+                        onClick: () => { },
+                        disabled: true,
+                    },
+                    {
+                        title: "홍보자료",
+                        onClick: () => { },
+                        disabled: true,
+                    },
+                    {
+                        title: "기타 자료",
+                        onClick: () => { },
+                        disabled: true,
                     },
                 ] })] }));
 }
 function ContentBox({ contents }) {
     const container = {
-        sizes: "h-[38px]",
+        sizes: "flex flex-1 flex-nowrap flex-row items-center justify-start w-fit flex-none",
     };
     const buttonBox = {
+        displays: "flex flex-none",
         boundaries: "p-3 rounded-[8px]",
         fonts: "leading-none text-[12px]",
-        backgrounds: "bg-green-dark/10",
+        other: contents.map((content) => content.disabled)
+            ? "bg-green-dark/10 text-green-dark"
+            : "bg-none text-gray-medium",
     };
     return (_jsx("div", { className: cn(container), children: contents.map((content) => (_jsx("button", { className: cn(buttonBox), children: content.title }, content.title))) }));
 }

package/layout/template/BbsLayout.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionStore } from "../../store";
 import { cn } from "../../util";
 export default function BbsLayout({ title, icon, topRight, children, }) {
+    const { setFlag } = useActionStore();
     const container = {
         displays: "flex flex-col items-center",
         sizes: "w-full min-h-screen",
@@ -14,5 +16,5 @@ export default function BbsLayout({ title, icon, topRight, children, }) {
         sizes: "w-full  h-[188px]",
         boundaries: "px-12 pb-10",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(header), children: [_jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), topRight] }), children] }) }));
+    return (_jsx("div", { className: cn(container), onClick: setFlag, children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(header), children: [_jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), topRight] }), children] }) }));
 }

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

@@ -1,31 +1,88 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { cn, gradient } from "../../../../util";
 import { Label } from "../../../../widget";
+import { useResponsive } from "../../../../hook";
 export default function Header({ logo, rightButton, contents, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toggleHeight = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleClickOutside = (event) => {
+        const menuElement = document.getElementById("buttonArea");
+        if (menuElement && !menuElement.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    };
+    //버튼, 혹은 외부를 클릭시 메뉴 닫음
+    useEffect(() => {
+        if (isExpanded) {
+            document.addEventListener("click", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [isExpanded]);
+    const isMD = useResponsive("md");
+    //메뉴바 배경
     const container = {
-        positions: "fixed top-0 left-0 z-40",
-        displays: "flex justify-center items-center",
+        positions: "fixed top-0 left-0 z-40 md:h-15",
+        displays: "flex justify-center items-start overflow-hidden",
         sizes: "w-full",
         styles: "bg-white  box-shadow",
         textstyles: "antialiased",
+        animation: !isMD && isExpanded ? "animate-grow" : "animate-shrink"
     };
     const body = {
-        displays: "flex items-center justify-center md:justify-between",
-        className: "w-full max-w-[1200px] h-15",
-        boundaries: "md:px-12 py-2.5",
+        displays: "flex md:flex-row flex-col md:items-center items-start justify-between",
+        className: "w-full max-w-[1200px]",
+        boundaries: "p-0 sm:px-12",
+    };
+    const buttonBoxWrapper = {
+        displays: "inline-flex items-center flex-nowrap",
+        scrollStyles: "overflow-y-scroll scrollbar-hidden",
+        spacings: "pr-10 gap-2.5 h-15 md:pr-0",
     };
     const buttonBox = {
-        fonts: "text-[9px] xs:text-[10px] sm:text-[11px] md:text-[16px] leading-tight",
+        fonts: "text-base leading-tight",
         texts: "text-gray-dark hover:text-black",
         backgrounds: "hover:bg-[#F0F0F0]/50",
         animations: "duration-300",
-        sizes: "h-10 rounded-md",
-        boundaries: "px-0.5 md:px-2.5",
-    };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: "hidden md:block", onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-7.5 md:gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
-                                width: "2xs",
-                                height: "4xs",
-                                background: gradient.bg.greenToRed,
-                                text: "text-white",
-                            } }))] })] }) }));
+        sizes: "h-10 rounded-md w-fit flex-none",
+        spacings: "px-2.5",
+        scrollMargin: "translate-x-5 md:translate-x-0 "
+    };
+    const leftWrapper = {
+        displays: "flex flex-row gap-6 items-center flex-none",
+        sizes: "w-full md:w-fit justify-between md:justify-start pl-5 pr-2 sm:px-0",
+    };
+    const rightWrapper = {
+        displays: "flex flex-row justify-center md:justify-start",
+        spacings: "items-center gap-x-6 ml:gap-x-12 ",
+        sizes: "w-full md:w-fit",
+        boundaries: "border-gray-light border-t-2",
+    };
+    const essenstialsWrapper = {
+        displays: "flex flex-row items-center h-15",
+        spacings: "gap-2 md:gap-6",
+        sizes: "h-15",
+        responsiveAction: "block md:hidden",
+    };
+    const menuButton = {
+        displays: "flex justify-center items-center p-2",
+    };
+    return (_jsx("div", { 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 && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                        width: "2xs",
+                                        height: "xs",
+                                        background: gradient.bg.greenToRed,
+                                        text: "text-white",
+                                    } })), _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", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                    width: "2xs",
+                                    height: "xs",
+                                    background: gradient.bg.greenToRed,
+                                    text: "text-white",
+                                } })) })] })] }) }));
 }

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

@@ -5,9 +5,11 @@ interface Browser {
 interface Calendar {
     schedules: {
         onClick?: OnClick;
-        category: string;
         title: string;
-        description?: string | [string] | [string, string];
+        applyDay: Date;
+        testStart: Date;
+        testEnd?: Date;
+        gradeOpen: Date;
     }[];
 }
 interface Notice {

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

@@ -2,26 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import SVG from "../../../../asset/SVG";
-import { cn } from "../../../../util";
+import { cn, compareDates, convertDateToString } from "../../../../util";
 import { useActionStore } from "../../../../store";
 import { LineBreaks } from "../../../../text";
+import { useResponsive } from "../../../../hook";
 export default function Navigation({ browser, calendar, notice, event, }) {
     const { flag } = useActionStore();
     const [isOpen, setIsOpen] = useState(false);
     const [isHidden, setIsHidden] = useState(false);
     const [type, setType] = useState();
     const container = {
-        displays: "flex flex-col justify-center gap-y-5 items-center",
-        sizes: !isOpen ? "h-80 rounded-r-xl" : "h-screen",
-        widths: !isHidden ? "w-[56px] duration-100" : "w-0 duration-500",
-        backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
+        displays: "flex flex-row md:flex-col justify-center gap-x-8 sm:gap-x-12 gap-y-5 items-center",
+        sizes: !isOpen ? "h-16 md:h-80  md:rounded-r-xl" : "h-16 md:h-screen",
+        widths: !isHidden
+            ? "w-screen md:w-[56px] duration-100"
+            : "w-0 duration-100",
+        backgrounds: "bg-gradient-to-r md:bg-gradient-to-b from-green-dark to-crimson-burgundy",
     };
-    const overlayPopTransition = useTransition(!isHidden && isOpen, {
-        from: { width: "0%" },
-        enter: { width: "30%" },
-        leave: { width: "0%" },
-        config: { duration: 100 },
-    });
     const overlayCoverTransition = useTransition(isHidden, {
         from: { width: "0%" },
         enter: { width: "100%" },
@@ -47,27 +44,66 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     };
     const itemContainer = {
         positions: "fixed top-0 left-0 z-40 ",
-        sizes: "h-screen ",
-        boundaries: "pl-[56px]",
-        styles: "overflow-hidden bg-white ",
+        sizes: "h-screen w-[400px]",
+        boundaries: "md:pl-[56px]",
+        styles: "overflow-hidden bg-black/20  backdrop-blur-sm",
+        shadows: "shadow-main",
     };
     const itemBody = {
-        boundaries: "px-7.5 pt-[34px]",
+        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",
+    };
+    const iconWrapper = {
+        displays: "flex justify-center items-center",
+        sizes: "w-8 h-8 rounded-md",
+        animations: "hover:bg-white/20",
     };
+    const isMobile = useResponsive("md");
+    const overlayPopTransition = useTransition(!isHidden && isOpen, {
+        from: { width: "0%" },
+        enter: { width: "100%" },
+        leave: { width: "0%" },
+        config: { duration: isMobile ? 100 : 0 },
+    });
     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-[26px] font-bold text-gradient-green-to-red ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed top-1/2 -translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx(SVG.Icon.Calendar, { onClick: () => handleOpen("calendar") }), _jsx(SVG.Icon.Notification, { onClick: () => handleOpen("notification") }), _jsx(SVG.Icon.Search, { onClick: () => handleOpen("search") }), _jsx(SVG.Icon.Browser, { onClick: () => handleOpen("browser") }), _jsx(SVG.Icon.Event, { onClick: () => handleOpen("event") })] }) })] }));
+                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" }) })] }) })] }));
 }
 const navigationTypeString = {
-    calendar: "시험 일정",
+    calendar: "시험 접수 일정",
     notification: "공지사항",
     event: "이벤트",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
+    const cardWrapper = {
+        displays: "flex flex-col gap-y-5",
+    };
+    const cardBox = {
+        displays: "",
+        sizes: "",
+    };
+    const dateWrapper = {
+        displays: "flex flex-row gap-3",
+    };
+    const dateText = {
+        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 item = {
+        displays: "flex-shrink-0 flex flex-col md:justify-between ",
+    };
     if (type === "calendar")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: calendar.schedules.map(({ category, title, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[184px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
+        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyDay, onClick }) => {
+                const { isBefore, dDay } = 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" }) })] }) }));
+            }) }));
     if (type === "notification")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full 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]" })] }))) }));
+        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]" })] }))) }));
     if (type === "event")
-        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: event.events.map(({ title, category, thumbnail, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full  box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { className: "h-[92px] border-b-2", children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) })] }))) }));
+        return (_jsx("div", { className: cn(container), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, "w-full  box-shadow rounded-[10px] p-7.5"), children: _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) }) }))) }));
     return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.153",
+  "version": "1.0.155",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,6 +14,7 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "@edu-tosel/design": "^1.0.153",
     "@gsap/react": "^2.1.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",

package/tailwind.config.ts

@@ -32,10 +32,21 @@ export default {
       },
       boxShadow: {
         main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
+        'main-small': "0 0px 5px 0px rgba(0, 0, 0, 0.1)",
         "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
         green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
       keyframes: {
+
+        grow: {
+          '0%': { height: '60px' },
+          '100%': { height: '120px' },
+        },
+        shrink: {
+          '0%': { height: '120px' },
+          '100%': { height: '60px' },
+        },
+
         slideBackground: {
           "0%, 100%": { backgroundPosition: "left center" },
           "50%": { backgroundPosition: "right center" },
@@ -57,6 +68,12 @@ export default {
           to: { width: "0%" },
         },
       },
+
+      animation: {
+        grow: 'grow 0.2s ease-in-out forwards',
+        shrink: 'shrink 0.2s ease-in-out forwards',
+      },
+
       colors: {
         "white-off": "#F5F5F5",
         "red-burgundy": "#933652",

package/util/compareDates.d.ts

@@ -0,0 +1,4 @@
+export default function compareDates(targetDate: Date): {
+    isBefore: boolean;
+    dDay: string | null;
+};

package/util/compareDates.js

@@ -0,0 +1,32 @@
+export default function compareDates(targetDate) {
+    const currentDate = new Date();
+    const KSTOffset = 9 * 60 * 60 * 1000;
+    const KSTDate = new Date(currentDate.getTime() + KSTOffset);
+    const targetDateKST = new Date(targetDate.getTime() + KSTOffset);
+    const isBefore = KSTDate < targetDateKST;
+    const timeDiff = targetDateKST.getTime() - KSTDate.getTime();
+    if (isBefore) {
+        if (timeDiff < 24 * 60 * 60 * 1000) {
+            const hours = Math.floor(timeDiff / (1000 * 60 * 60));
+            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
+            return {
+                isBefore,
+                dDay: `${hours}시 ${minutes}분 ${seconds}초`,
+            };
+        }
+        else {
+            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+            return {
+                isBefore,
+                dDay: `D-${days}`,
+            };
+        }
+    }
+    else {
+        return {
+            isBefore,
+            dDay: null,
+        };
+    }
+}

package/util/convertDateToString.d.ts

@@ -0,0 +1 @@
+export default function formatDateToString(date: Date): string;

package/util/convertDateToString.js

@@ -0,0 +1,6 @@
+export default function formatDateToString(date) {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 월은 0부터 시작하므로 +1
+    const day = date.getDate().toString().padStart(2, "0"); // 날짜를 두 자리로 맞춤
+    return `${year}-${month}-${day}`;
+}

package/util/index.d.ts

@@ -5,6 +5,8 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
+export { default as compareDates } from "./compareDates";
+export { default as convertDateToString } from "./convertDateToString";
 export * from "./colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -5,6 +5,8 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
+export { default as compareDates } from "./compareDates";
+export { default as convertDateToString } from "./convertDateToString";
 export * from "./colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.153
+1.0.155

package/widget/template/Input/Form.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
 import Obstacle from "../Obstacle";
+import SVG from "../../../asset/SVG";
 export default function InputForm({ title, state, placeholder, isValid, type, onKeyDown, button, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
+    const [isEyeOpen, setIsEyeOpen] = useState(false);
     const ref = useRef(null);
     const container = {
         positions: "relative",
@@ -32,10 +34,11 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
             return green;
         return red;
     };
+    const placeholderString = typeof placeholder === "function" ? placeholder() : placeholder;
     const inputBox = {
         styles: styleByFlag(),
         sizes: "w-full sm:w-102.5 h-13.5",
-        paddings: `${placeholder && "pt-3"} pl-5`,
+        paddings: `${placeholderString && "pt-3"} pl-5`,
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",
         focuses: onFocus ? "border " : "border-0",
@@ -43,7 +46,12 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
             !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
-    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: typeof placeholder === "function" ? placeholder() : placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
+    useEffect(() => {
+        if (type === "password") {
+            ref.current?.setAttribute("type", isEyeOpen ? "text" : "password");
+        }
+    }, [isEyeOpen]);
+    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholderString }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
                             if (maxLength && e.target.value.length > maxLength)
                                 return;
                             setValue(e.target.value);
@@ -54,5 +62,6 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
                             background: button.option?.background ?? gradient.bg.greenToRed,
                             text: button.option?.text ?? "text-white",
                             ...button.option,
-                        } })), _jsx(Obstacle, { disabled: disabled })] })] }));
+                        } })), type === "password" &&
+                        (isEyeOpen ? (_jsx(SVG.Eye.Open, { onClick: () => setIsEyeOpen(false), className: "absolute top-3.5 right-3.75" })) : (_jsx(SVG.Eye.Close, { onClick: () => setIsEyeOpen(true), className: "absolute top-3.5 right-3.75" }))), _jsx(Obstacle, { disabled: disabled })] })] }));
 }

package/widget/template/Select/Select.js

@@ -18,13 +18,14 @@ const heightSize = {
 export default function Select({ state, selectOptions: selectOptionsInput, placeholder, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);
     const id = useId();
-    const { setIsOwn, setIsOwnId } = useActionStore();
+    const { flag } = useActionStore();
     const [value, setValue] = state;
     const [text, setText] = useState("");
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [index, setIndex] = useState();
+    const [uniqueKey] = useState(Math.floor(Math.random() * 1000000));
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
     // scrollIntoViews
     const listRef = useRef(null);
@@ -36,33 +37,40 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     }, [index]);
     const isLong = selectOptions && selectOptions.length >= 4;
     const container = {
-        positions: "relative ",
-        displays: "flex flex-col",
+        positions: "",
+        displays: "flex flex-col gap-2",
     };
     const button = {
         displays: "flex items-center",
         sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
         styles: "px-1 rounded-md outline-none duration-100 text-gray-400",
-        shadow: isOpen || isHover ? "box-shadow" : "shadow-main",
+        shadow: "hover:shadow-green",
+        totalaction: isOpen ? "shadow-main" : "shadow-main-small",
+        animations: "duration-300",
     };
     const input = {
-        positions: "absolute z-30",
+        positions: "z-30",
         layouts: cn(button),
-        styles: "outline-none text-xs pl-1.5",
+        styles: "focus:outline-1 outline-0 outline-green-dark text-xs pl-1.5 text-gray-medium",
     };
     const body = {
-        positions: "absolute z-30",
-        displays: "flex flex-col gap-1",
-        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-23.75`,
+        positions: "z-30",
+        displays: "flex flex-col gap-1 shadow-main hover:shadow-green",
+        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-[170px]`,
         paddings: "px-1 py-1",
-        styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
+        styles: "bg-white rounded-md overflow-y-scroll",
+    };
+    const labelCoating = {
+        displays: "flex overflow-hidden",
+        siezes: "h-fit w-full rounded-md hover:bg-gray-light/50",
+        animations: "duration-300",
     };
     const label = {
         displays: "flex",
-        sizes: "h-fit w-fit hover:w-full",
-        paddings: "px-1",
+        sizes: "h-fit w-fit",
+        paddings: "px-2 py-1",
         styles: "rounded-md duration-500",
-        fonts: "text-sm text-gray-dim bg-gray-light",
+        fonts: "text-xs text-gray-dim bg-gray-light",
     };
     const inputTransition = useTransition(isOpen, {
         from: {
@@ -92,12 +100,17 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
             duration: 0,
         },
     });
-    return (_jsxs("div", { className: cn(container), onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
-                item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), 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("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+    useEffect(() => {
+        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);
+                }, 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 ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+                item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input, "shadow-main bg-[#f6f6f6]/50"), onChange: (e) => setSearch(e.target.value) }))), 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);
                                 setText(String(title));
                                 return setIsOpen(false);
-                            }, className: cn(label, order === index ? "w-full" : "w-auto"), children: title }) }, id + value))) })));
+                            }, children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), className: cn(label, order === index ? "w-full" : "w-auto"), children: title }) }) }, id + value))) })));
             })] }));
 }