@edu-tosel/design 1.0.43 → 1.0.45

package/asset/SVG.d.ts

@@ -1,7 +1,21 @@
 import Close from "./svg/Close";
+import Direction from "./svg/Direction";
+import Email from "./svg/Email";
+import Image from "./svg/Image";
+import Notification from "./svg/Notification";
+import Phone from "./svg/Phone";
+import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
 declare const SVG: {
     TOSEL: typeof TOSEL;
     Close: typeof Close;
+    Direction: {
+        Right: ({ className }: Direction) => import("react/jsx-runtime").JSX.Element;
+    };
+    Email: typeof Email;
+    Image: typeof Image;
+    Notification: typeof Notification;
+    Phone: typeof Phone;
+    Profile: typeof Profile;
 };
 export default SVG;

package/asset/SVG.js

@@ -1,7 +1,19 @@
 import Close from "./svg/Close";
+import Direction from "./svg/Direction";
+import Email from "./svg/Email";
+import Image from "./svg/Image";
+import Notification from "./svg/Notification";
+import Phone from "./svg/Phone";
+import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
 const SVG = {
     TOSEL,
     Close,
+    Direction,
+    Email,
+    Image,
+    Notification,
+    Phone,
+    Profile,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -1,9 +1,21 @@
 import Close from "./svg/Close";
+import Direction from "./svg/Direction";
+import Email from "./svg/Email";
+import Image from "./svg/Image";
+import Notification from "./svg/Notification";
+import Phone from "./svg/Phone";
+import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
 
 const SVG = {
   TOSEL,
   Close,
+  Direction,
+  Email,
+  Image,
+  Notification,
+  Phone,
+  Profile,
 };
 
 export default SVG;

package/asset/svg/Direction.d.ts

@@ -0,0 +1,8 @@
+interface Direction {
+    className?: string;
+}
+declare function Right({ className }: Direction): import("react/jsx-runtime").JSX.Element;
+declare const Direction: {
+    Right: typeof Right;
+};
+export default Direction;

package/asset/svg/Direction.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Right({ className }) {
+    return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z", fill: "#105652", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+const Direction = {
+    Right,
+};
+export default Direction;

package/asset/svg/Direction.tsx

@@ -0,0 +1,36 @@
+interface Direction {
+  className?: string;
+}
+function Right({ className }: Direction) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
+        fill="#105652"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const Direction = {
+  Right,
+};
+export default Direction;

package/asset/svg/Email.d.ts

@@ -0,0 +1 @@
+export default function Email(): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Email.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Email() {
+    return (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/asset/svg/Email.tsx

@@ -0,0 +1,20 @@
+export default function Email() {
+  return (
+    <svg
+      className="mr-3"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Image.d.ts

@@ -0,0 +1,6 @@
+interface ImageProps {
+    color?: string;
+    className?: string;
+}
+export default function Image({ color, className }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/asset/svg/Image.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Image({ color, className }) {
+    return (_jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z", stroke: color ?? "#FFFFFF", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/asset/svg/Image.tsx

@@ -0,0 +1,24 @@
+interface ImageProps {
+  color?: string;
+  className?: string;
+}
+export default function Image({ color, className }: ImageProps) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z"
+        stroke={color ?? "#FFFFFF"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Notification.d.ts

@@ -0,0 +1,8 @@
+import { OnClick } from "../../interface";
+interface Notification {
+    onClick: OnClick;
+    flag: boolean;
+    color?: string;
+}
+export default function Notification({ onClick, color, flag }: Notification): import("react/jsx-runtime").JSX.Element;
+export {};

package/asset/svg/Notification.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Notification({ onClick, color, flag }) {
+    return (_jsxs("button", { className: "relative", onClick: onClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }));
+}

package/asset/svg/Notification.tsx

@@ -0,0 +1,34 @@
+import { OnClick } from "../../interface";
+
+interface Notification {
+  onClick: OnClick;
+  flag: boolean;
+  color?: string;
+}
+export default function Notification({ onClick, color, flag }: Notification) {
+  return (
+    <button className="relative" onClick={onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+      >
+        <path
+          d="M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938"
+          stroke={color ?? "#910023"}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {flag && (
+        <div className="absolute top-0 right-0">
+          <div className="absolute w-2 h-2 rounded-full bg-red-500" />
+          <div className=" w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" />
+        </div>
+      )}
+    </button>
+  );
+}

package/asset/svg/Phone.d.ts

@@ -0,0 +1 @@
+export default function Phone(): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Phone.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Phone() {
+    return (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/asset/svg/Phone.tsx

@@ -0,0 +1,20 @@
+export default function Phone() {
+  return (
+    <svg
+      className="mr-3"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Profile.d.ts

@@ -0,0 +1,7 @@
+import { OnClick } from "../../interface";
+interface Profile {
+    onClick: OnClick;
+    color?: string;
+}
+export default function Profile({ color, onClick }: Profile): import("react/jsx-runtime").JSX.Element;
+export {};

package/asset/svg/Profile.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Profile({ color, onClick }) {
+    return (_jsx("svg", { className: "cursor-pointer", onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/asset/svg/Profile.tsx

@@ -0,0 +1,27 @@
+import { OnClick } from "../../interface";
+
+interface Profile {
+  onClick: OnClick;
+  color?: string;
+}
+export default function Profile({ color, onClick }: Profile) {
+  return (
+    <svg
+      className="cursor-pointer"
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z"
+        stroke={color ?? "#910023"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/board/template/ManageBoard.js

@@ -6,7 +6,7 @@ import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
 export default function ManageBoard({ header, dataSets, dataField, widgets, options, buttons, }) {
-    const { className, noPadding, width, noMobile } = options ?? {};
+    const { className, noPadding } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];

package/html/template/Input.d.ts

@@ -1,6 +1,6 @@
-import { HTMLInputElement } from "../../interface";
-declare function Input({ state, onKeyDown, placeholder, options }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+import { HTMLInput } from "../../interface";
+declare function Input({ state, onKeyDown, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
 declare namespace Input {
-    var LG: ({ state, placeholder, flag, type }: HTMLInputElement) => import("react/jsx-runtime").JSX.Element;
+    var LG: ({ state, placeholder, flag, type, label }: HTMLInput) => import("react/jsx-runtime").JSX.Element;
 }
 export default Input;

package/html/template/Input.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-import { cn } from "../../util";
+import { useId, useState, useRef } from "react";
+import { cn, gradient } from "../../util";
 import Obstacle from "../widget/Obstacle";
+import Label from "./Label";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -13,8 +14,8 @@ const widthSize = {
 };
 function Input({ state, onKeyDown, placeholder, options }) {
     const { width, disabled } = options ?? {};
-    const id = useId();
     const [value, setValue] = state;
+    const id = useId();
     const container = {
         positions: "relative",
         width: `${widthSize[width ?? "xs"]} h-8`,
@@ -29,9 +30,10 @@ function Input({ state, onKeyDown, placeholder, options }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
 }
-function LG({ state, placeholder, flag, type }) {
+function LG({ state, placeholder, flag, type, label }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
+    const ref = useRef(null);
     const container = {
         positions: "relative",
     };
@@ -42,7 +44,8 @@ function LG({ state, placeholder, flag, type }) {
         animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
     };
     const inputBox = {
-        sizes: "w-102.5 h-13.5 pl-5 pt-3",
+        sizes: "w-102.5 h-13.5",
+        paddings: `${placeholder && "pt-3"} pl-5`,
         fonts: "text-sm",
         background: flag === true
             ? "bg-green-dark/10"
@@ -52,7 +55,14 @@ function LG({ state, placeholder, flag, type }) {
         styles: "bg-gray-light rounded-md outline-none",
         animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(placeholderBox), children: placeholder }), _jsx("input", { className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, options: {
+                    width: "sm",
+                    height: "xs",
+                    className: "absolute top-3.5 right-3.75",
+                    background: label.options?.background ?? gradient.bg.greenToRed,
+                    text: label.options?.text ?? "text-white",
+                    ...label.options,
+                } }))] }));
 }
 Input.LG = LG;
 export default Input;

package/html/widget/DatePicker.d.ts

@@ -1,3 +1,3 @@
-import { HTMLInputElement } from "../../interface";
+import { HTMLInput } from "../../interface";
 import "react-datepicker/dist/react-datepicker.css";
-export default function DatePicker({ options }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+export default function DatePicker({ options }: HTMLInput): import("react/jsx-runtime").JSX.Element;

package/html/widget/EmailInput.d.ts

@@ -1,2 +1,2 @@
-import { HTMLInputElement } from "../../interface";
-export default function EmailInput({ state, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+import { HTMLInput } from "../../interface";
+export default function EmailInput({ state, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;

package/html/widget/EmailInput.js

@@ -10,7 +10,7 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function EmailInput({ state, placeholder, options, }) {
+export default function EmailInput({ state, placeholder, options }) {
     const { width } = options ?? {};
     const id = useId();
     const [value, setValue] = state;

package/interface/Board.d.ts

@@ -1,6 +1,6 @@
 import { DataField, DataSet, Size, Titles } from "./Property";
 import { EventsProps } from "./Widget";
-import { HTMLInputElement, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
+import { HTMLInput, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
 interface OptionsProps {
     className?: string;
     width?: Size;
@@ -26,7 +26,7 @@ export interface BoardHeaderProps<B> {
     };
     tag?: {
         selects?: HTMLSelectElement<B>[];
-        inputs?: HTMLInputElement[];
+        inputs?: HTMLInput[];
     };
     options?: {
         titleBorder?: string;

package/interface/HTMLElement.d.ts

@@ -29,13 +29,14 @@ export interface HTMLSelectElement<T> extends HTMLElement {
     selectOptions?: SelectOption<T>[];
     placeholder?: string;
 }
-type HTMLInputElementType = "text" | "password" | "date" | "email" | "phone" | "number";
-export interface HTMLInputElement extends HTMLElement {
+type HTMLInputType = "text" | "password" | "date" | "email" | "phone" | "number";
+export interface HTMLInput extends HTMLElement {
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
     flag?: boolean;
-    type?: HTMLInputElementType;
+    type?: HTMLInputType;
+    label?: HTMLLabelElement;
 }
 export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;

package/interface/Layout.d.ts

@@ -1,4 +1,4 @@
-import { OnClick } from "./Property";
+import { OnClick, State } from "./Property";
 import { ShowAction } from "./Widget";
 interface Notification {
     id: number;
@@ -9,15 +9,29 @@ interface Notification {
     createdAt: Date;
     updatedAt: Date;
 }
+interface NotificationProps {
+    notifications?: Partial<Notification>[];
+    flag: boolean;
+    onClick: OnClick;
+    color?: string;
+}
+export interface MenuProps {
+    action?: ShowAction;
+    profile?: {
+        name: string;
+        belong: string;
+        image: string;
+    };
+    input?: {
+        password: State<string | undefined>;
+    };
+    onClick: OnClick;
+}
 export interface DashboardHeaderProps {
     title: string;
     logo?: React.ReactNode;
-    notification: {
-        notifications?: Partial<Notification>[];
-        flag: boolean;
-        onClick: OnClick;
-        color?: string;
-    };
+    notification: NotificationProps;
+    menu?: MenuProps;
     options?: {
         background?: string;
         text?: string;

package/interface/Property.d.ts

@@ -39,10 +39,11 @@ export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "
 export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
 export interface Button extends HTMLLabelElement {
 }
+export type FileRead = string | ArrayBuffer | null;
 export type Disabled = boolean | OnClick;
 export type Scripts = {
     script: string;
-    subScript?: string;
+    subscript?: string | string[];
 };
 export type Titles = {
     title: string;

package/layout/template/Sign.d.ts

@@ -1,13 +1,15 @@
 import Box from "../widget/sign/Box";
 import Button from "../widget/sign/Button";
 import Check from "../widget/sign/Check";
-import Input from "../widget/sign/Input";
 import Layout from "../widget/sign/Layout";
+import WithTitle from "../widget/sign/WithTitle";
 declare const Sign: {
     Box: typeof Box;
     Button: typeof Button;
     Check: typeof Check;
-    Input: typeof Input;
+    Input: {
+        WithTitle: typeof WithTitle;
+    };
     Layout: typeof Layout;
 };
 export default Sign;

package/layout/template/Sign.js

@@ -1,13 +1,15 @@
 import Box from "../widget/sign/Box";
 import Button from "../widget/sign/Button";
 import Check from "../widget/sign/Check";
-import Input from "../widget/sign/Input";
 import Layout from "../widget/sign/Layout";
+import WithTitle from "../widget/sign/WithTitle";
 const Sign = {
     Box,
     Button,
     Check,
-    Input,
+    Input: {
+        WithTitle,
+    },
     Layout,
 };
 export default Sign;

package/layout/widget/dashboard/Header.d.ts

@@ -1,2 +1,2 @@
 import { DashboardHeaderProps } from "../../../interface";
-export declare function Header({ title, logo, notification, options, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, logo, notification, menu, options, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/layout/widget/dashboard/Header.js

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../util";
+import { cn, gradient } from "../../../util";
 import { useWidgetStore } from "../../../store";
 import Menu from "./Menu";
 import { Events } from "../..";
 import Notification from "./Notification";
-export function Header({ title, logo, notification, options, }) {
+import SVG from "../../../asset/SVG";
+import { Label } from "../../../html";
+export function Header({ title, logo, notification, menu, options, }) {
     const { setView, setIsOwn } = useWidgetStore();
     const { notifications, flag, onClick, color } = notification;
     const { text, background, className } = options ?? {};
@@ -17,15 +19,20 @@ export function Header({ title, logo, notification, options, }) {
         styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
-                        ["menu", _jsx(Menu, { image: "/images/hani.png" })],
-                    ], children: [_jsxs("button", { className: "relative", onClick: () => {
+                        [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
+                    ], children: [_jsx(SVG.Notification, { flag: flag, onClick: () => {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+                            }, color: color }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
+                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, options: {
+                                width: "sm",
+                                height: "xs",
+                                text: "text-white",
+                                background: gradient.bg.greenToRed,
+                            } }))] }) })] }));
 }

package/layout/widget/dashboard/Layout.js

@@ -6,7 +6,7 @@ import { useWidgetStore } from "../../../store";
 import { NavigationContainer } from "./Navigation";
 export default function Layout({ header, navigations, children, options, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
-    const { title, options: headerOptions, logo, notification } = header;
+    const { title, options: headerOptions, logo, notification, menu } = header;
     const { background } = options ?? {};
     useEffect(() => {
         if (isOwn) {
@@ -25,5 +25,5 @@ export default function Layout({ header, navigations, children, options, }) {
         displays: "flex gap-12 xl:gap-7.5 ",
         paddings: "pt-15 xl:pl-2 2xl:pl-12 2xl:pr-11.25 xl:pt-7.5",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, menu: menu, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/layout/widget/dashboard/Menu.d.ts

@@ -1,5 +1,2 @@
-import { ShowAction } from "../../../interface";
-export default function Menu({ action, image, }: {
-    action?: ShowAction;
-    image: string;
-}): JSX.Element;
+import { MenuProps } from "../../../interface";
+export default function Menu({ action, profile, input, onClick }: MenuProps): JSX.Element;

package/layout/widget/dashboard/Menu.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
-import { cn } from "../../../util";
+import { cn, gradient } from "../../../util";
 import { useWidgetStore } from "../../../store";
-export default function Menu({ action, image, }) {
+import { Label } from "../../../html";
+export default function Menu({ action, profile, input, onClick }) {
     const { isVisible } = action ?? {};
-    const { setIsOwn } = useWidgetStore();
+    const { setIsOwn, removeModal } = useWidgetStore();
     const container = {
-        displays: "flex flex-col",
-        positions: "absolute top-8 right-0 z-45 ",
-        sizes: "w-72 ",
-        styles: " bg-white box-shadow",
+        displays: "flex flex-col p-2.5",
+        positions: "absolute top-0 right-0 z-45 ",
+        sizes: "w-52.5 ",
+        styles: " bg-white box-shadow rounded-lgx",
     };
     const transitions = useTransition(isVisible, {
         from: { opacity: 0 },
@@ -17,5 +18,13 @@ export default function Menu({ action, image, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-48 flex gap-12 justify-center items-center text-black", children: [_jsx("img", { src: image, className: "rounded-full w-20 h-20" }), _jsxs("div", { children: [_jsx("div", { children: "\uD31C\uD558\uB2C8" }), _jsx("div", { className: "text-xs", children: "\uB274\uC9C4\uC2A4 \uCD08\uB4F1\uD559\uAD50" })] })] }), _jsx("a", { href: "/user", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "\uB300\uC2DC\uBCF4\uB4DC" }), _jsx("a", { href: "/mypage", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "My Page" })] })));
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: "\uCDE8\uC18C", onClick: () => removeModal("menu"), options: {
+                                    width: "sm",
+                                    height: "xs",
+                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, options: {
+                                    background: gradient.bg.greenToRed,
+                                    text: "text-white",
+                                    width: "sm",
+                                    height: "xs",
+                                } })] })] })] })));
 }

package/layout/widget/dashboard/Navigation.js

@@ -3,7 +3,7 @@ import { cn } from "../../../util";
 export function NavigationContainer({ children, }) {
     const container = {
         positions: "fixed xl:static bottom-0 left-0 z-40",
-        displays: "flex flex-row xl:flex-col",
+        displays: "hidden lg:flex flex-row xl:flex-col",
         sizes: "w-full xl:w-auto",
     };
     return (_jsxs("div", { className: cn(container), children: [children, _jsx(Copyright, {})] }));

package/layout/widget/dashboard/mypage/Layout.js

@@ -26,5 +26,5 @@ export default function MyPageLayout({ header, profile, navigations, children, o
         sizes: "h-full ",
         paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsxs(NavigationContainer, { children: [_jsx(Profile.Preview, { username: profile.username, email: profile.email, image: profile.image }), navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index)))] }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { ...header }), _jsxs("div", { className: cn(body), children: [_jsxs(NavigationContainer, { children: [_jsx(Profile.Preview, { username: profile.username, email: profile.email, image: profile.image }), navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index)))] }), children] })] }));
 }

package/layout/widget/dashboard/mypage/Profile.d.ts

@@ -1,13 +1,15 @@
 import { Button as ButtonProp, OnClick, State, Titles } from "../../../../interface";
-declare function Profile({ name, birthday, image, modify, }: {
+interface ProfileProps {
     name: string;
     birthday: string;
     image: string;
     modify: {
+        image: OnClick;
         name: OnClick;
         birthday: OnClick;
     };
-}): import("react/jsx-runtime").JSX.Element;
+}
+declare function Profile({ name, birthday, image, modify }: ProfileProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Profile {
     var Detail: ({ titles, infos, toggle, }: {
         titles: Titles;

package/layout/widget/dashboard/mypage/Profile.js

@@ -1,15 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { animated, useTransition } from "react-spring";
 import { cn, gradient } from "../../../../util";
 import Card from "../../../../card/design/Card.design";
 import { Label, Toggle } from "../../../../html";
-import { useId } from "react";
-function Profile({ name, birthday, image, modify, }) {
+import SVG from "../../../../asset/SVG";
+function Profile({ name, birthday, image, modify }) {
+    const [hover, setHover] = useState(false);
+    const hoverBox = {
+        positions: "absolute top-0 left-0",
+        displays: "flex flex-col gap-y-2.75 justify-center items-center",
+        sizes: "w-full h-full",
+        styles: "bg-black/50",
+    };
+    const transitions = useTransition(hover, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 250 },
+    });
     return (_jsxs(Card, { options: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
             height: "2xs",
             boundary: "border-1 border-black",
-        }, children: [_jsx("div", { className: "w-20 h-20 overflow-hidden rounded-md", children: _jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }) }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
+        }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }
 function Detail({ titles, infos, toggle, }) {
     const infoBox = {
@@ -24,7 +39,7 @@ function Detail({ titles, infos, toggle, }) {
             height: "xs",
             background: gradient.bg.greenToRedSoft,
             boundary: "",
-        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : title === "email" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
+        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
                                 className: "ml-auto",
                                 background: gradient.bg.greenToRed,
                                 text: "text-white",

package/layout/widget/sign/WithTitle.d.ts

@@ -0,0 +1,6 @@
+import { HTMLInput } from "../../../interface";
+interface InputWithTitleProps extends HTMLInput {
+    title: string;
+}
+declare function WithTitle({ title, placeholder, state, flag, type, }: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;
+export default WithTitle;

package/layout/widget/sign/WithTitle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../../html";
+function WithTitle({ title, placeholder, state, flag, type, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.LG, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
+}
+export default WithTitle;

package/modal/design/Modal.design.js

@@ -10,7 +10,7 @@ import { LineBreaks } from "./../../text/LineBreaks";
 const widthSize = {
     xs: "w-2/3 min-w-76 max-w-176",
     sm: "w-2/3 min-w-76 max-w-176",
-    md: "max-w-112.5",
+    md: "w-112.5",
     lg: "w-full min-w-76 max-w-360",
     xl: "w-2/3 min-w-76 max-w-360",
     "2xl": "w-2/3 min-w-76 max-w-360",

package/modal/template/ConfirmModal/Confirm.d.ts

@@ -0,0 +1,9 @@
+import { Scripts } from "../../../interface";
+import { ConfirmModalProps } from "../../../interface/Modal";
+interface ConfirmProps extends Omit<ConfirmModalProps, "children"> {
+    scripts: Scripts & {
+        alert?: string;
+    };
+}
+export type { ConfirmProps };
+export default function Confirm(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/ConfirmModal/Confirm.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../../text";
+import { cn } from "../../../util";
+import ConfirmModalDesign from "../../design/ConfirmModal.design";
+export default function Confirm(props) {
+    const container = {
+        displays: "flex flex-col gap-3 justify-center items-center",
+        margins: "mt-2.5",
+        sizes: "w-full h-60",
+    };
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), options: {
+            width: "md",
+            height: "lg",
+        } }));
+}

package/modal/template/ConfirmModal/Input.d.ts

@@ -1,10 +1,9 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { HTMLInputElement } from "../../../interface";
+import { HTMLInput } from "../../../interface";
 interface InputProps extends Omit<ConfirmModalProps, "children"> {
-    inputs: (HTMLInputElement & {
+    inputs: (HTMLInput & {
         title: string;
     })[];
-    data?: string;
 }
 export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/modal/template/ConfirmModal/Input.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ConfirmModal from "../../design/ConfirmModal.design";
 import { Input as _Input } from "../../../html";
 export default function Input(props) {
-    const { buttons, inputs } = props;
-    return (_jsx(ConfirmModal, { ...props, buttons: buttons, children: _jsx("div", { className: "flex flex-col gap-3", children: inputs.map((input, index) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-pretendard-bold", children: input.title }), _jsx(_Input.LG, { ...input })] }, index))) }) }));
+    const { inputs } = props;
+    return (_jsx(ConfirmModal, { ...props, children: _jsx("div", { className: "flex flex-col gap-3", children: inputs.map((input, index) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-pretendard-bold", children: input.title }), _jsx(_Input.LG, { ...input })] }, index))) }) }));
 }

package/modal/template/ConfirmModal/Reimage.d.ts

@@ -0,0 +1,10 @@
+import { ConfirmModalProps } from "../../../interface/Modal";
+import { State } from "../../../interface";
+interface ReimageProps extends Omit<ConfirmModalProps, "children"> {
+    data: {
+        image: State<string | ArrayBuffer | null>;
+        nowImage: string;
+    };
+}
+export default function Reimage(props: ReimageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/modal/template/ConfirmModal/Reimage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import ConfirmModal from "../../design/ConfirmModal.design";
+import { cn } from "../../../util";
+import SVG from "../../../asset/SVG";
+export default function Reimage(props) {
+    const { data } = props;
+    const [selectedImage, setSelectedImage] = data.image;
+    const ref = useRef(null);
+    const labelBox = {
+        displays: "flex items-center pl-5",
+        sizes: "w-full h-13.5",
+        styles: "bg-gray-light text-gray-dark rounded-lgx",
+    };
+    const handleImageChange = (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setSelectedImage(reader.result);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex flex-col gap-y-5.5 mt-4.5", children: [_jsx("div", { className: cn(labelBox), children: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." }), _jsxs("div", { className: "flex w-full justify-center gap-x-12", children: [_jsx(ImageFrame, { image: data.nowImage, script: "\uD604\uC7AC \uC0AC\uC9C4" }), _jsx(SVG.Direction.Right, { className: "mt-7.5" }), _jsx(ImageFrame, { onClick: () => ref.current?.click(), image: selectedImage, script: "\uC0C8\uB85C\uC6B4 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "w-full flex flex-col items-center text-xs text-gray-medium", children: [_jsx("div", { children: "\uB4F1\uB85D\uB41C \uC0AC\uC9C4\uC740 \uC218\uD5D8\uD45C \uBC1C\uAE09\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0AC\uC6A9\uB429\uB2C8\uB2E4." }), _jsx("div", { children: "\uAC00\uAE09\uC801 1:1 \uBE44\uC728, 100*100px \uC774\uC0C1\uC758 \uC0AC\uC9C4\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694." })] }), _jsx("input", { ref: ref, type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden" })] }) }));
+}
+function ImageFrame({ image, script, onClick }) {
+    const imageBox = {
+        sizes: "w-21 h-21 ",
+        styles: "overflow-hidden rounded-md",
+        cursor: onClick && "cursor-pointer",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 items-center", children: [_jsx("div", { onClick: onClick, className: cn(imageBox), children: _jsx("img", { src: image, alt: "now-profile-image", className: "bg-cover" }) }), _jsx("div", { className: "leading-none text-xs", children: script })] }));
+}

package/modal/template/ConfirmModal/index.d.ts

@@ -1,5 +1,7 @@
-import Input from "./Input";
-declare const ConfirmModal: {
-    Input: typeof Input;
-};
+import { ConfirmProps } from "./Confirm";
+declare function ConfirmModal(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ConfirmModal {
+    var Input: typeof import("./Input").default;
+    var Reimage: typeof import("./Reimage").default;
+}
 export default ConfirmModal;

package/modal/template/ConfirmModal/index.js

@@ -1,5 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Confirm from "./Confirm";
 import Input from "./Input";
-const ConfirmModal = {
-    Input,
-};
+import Reimage from "./Reimage";
+function ConfirmModal(props) {
+    return _jsx(Confirm, { ...props });
+}
+ConfirmModal.Input = Input;
+ConfirmModal.Reimage = Reimage;
 export default ConfirmModal;

package/overlay/template/Info.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import OverlayDesign from "../widget/Overlay.design";
+import OverlayDesign from "../design/Overlay.design";
 export default function Info({ action }) {
     return (_jsx(OverlayDesign, { titles: { title: "유저 관리" }, action: action, children: _jsx("div", { children: "TEST" }) }));
 }

package/overlay/template/Manage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, Label, Select, Toggle } from "../..";
-import OverlayDesign from "../widget/Overlay.design";
-import Frame from "../widget/Frame.design";
+import OverlayDesign from "../design/Overlay.design";
+import Frame from "../design/Frame.design";
 import { useId } from "react";
 import { cn } from "../../util";
 export default function Manage({ titles, action, elements, buttons, }) {

package/package.json

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

package/tailwind.config.ts

@@ -98,6 +98,7 @@ export default {
         2.25: "0.5625rem",
         2.5: "0.625rem",
         2.625: "0.65625rem",
+        2.75: "0.6875rem",
         3.5: "0.875rem",
         3.75: "0.9375rem",
         4.25: "1.0625rem",
@@ -137,6 +138,8 @@ export default {
         15: "3.75rem",
         15.5: "3.875rem",
         16: "4rem",
+        17: "4.25rem",
+        17.75: "4.4375rem",
         18: "4.5rem",
         18.5: "4.625rem",
         18.75: "4.6875rem",

package/version.txt

@@ -1 +1 @@
-1.0.43
+1.0.45

package/layout/widget/sign/Input.d.ts

@@ -1,15 +0,0 @@
-import { State } from "../../../interface";
-interface InputProps {
-    state: State<string | undefined>;
-    placeholder: string;
-    flag?: boolean;
-    type?: "text" | "password" | "date" | "email" | "phone" | "number";
-}
-interface InputWithTitleProps extends InputProps {
-    title: string;
-}
-declare function Input({ state, placeholder, flag, type }: InputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Input {
-    var WithTitle: ({ title, placeholder, state, flag, type, }: InputWithTitleProps) => import("react/jsx-runtime").JSX.Element;
-}
-export default Input;

package/layout/widget/sign/Input.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "../../../util";
-function Input({ state, placeholder, flag, type }) {
-    const [value, setValue] = state;
-    const [onFocus, setOnFocus] = useState(false);
-    const container = {
-        positions: "relative",
-    };
-    const placeholderBox = {
-        positions: "absolute left-5",
-        styles: "duration-300",
-        fonts: "leading-none text-gray-medium",
-        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
-    };
-    const inputBox = {
-        sizes: "w-102.5 h-13.5 pl-5 pt-3",
-        fonts: "text-sm",
-        background: flag === true
-            ? "bg-green-dark/10"
-            : flag === false
-                ? "bg-crimson-burgundy/10 text-crimson-burgundy"
-                : "bg-gray-light",
-        styles: "bg-gray-light rounded-md outline-none",
-        animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(placeholderBox), children: placeholder }), _jsx("input", { className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" })] }));
-}
-function WithTitle({ title, placeholder, state, flag, type, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
-}
-Input.WithTitle = WithTitle;
-export default Input;