@edu-tosel/design 1.0.276 → 1.0.278

package/asset/SVG.d.ts

@@ -12,6 +12,7 @@ import Print from "./svg/Print";
 import User from "./svg/User";
 import Search from "./svg/Search";
 import MiniClose from "./svg/MiniClose";
+import MiniCheck from "./svg/MiniCheck";
 declare const SVG: {
     TOSEL: typeof TOSEL;
     Close: typeof Close;
@@ -59,6 +60,9 @@ declare const SVG: {
     Login: {
         User: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
         ChekMark: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Key: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Lock: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Refresh: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
     };
     Collab: {
         Naver: ({ color, size }: import("./svg/Collab").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -68,5 +72,6 @@ declare const SVG: {
     User: typeof User;
     Search: typeof Search;
     MiniClose: typeof MiniClose;
+    MiniCheck: typeof MiniCheck;
 };
 export default SVG;

package/asset/SVG.js

@@ -17,6 +17,7 @@ import Print from "./svg/Print";
 import User from "./svg/User";
 import Search from "./svg/Search";
 import MiniClose from "./svg/MiniClose";
+import MiniCheck from "./svg/MiniCheck";
 const SVG = {
     TOSEL,
     Close,
@@ -37,5 +38,6 @@ const SVG = {
     User,
     Search,
     MiniClose,
+    MiniCheck,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -17,6 +17,7 @@ import Print from "./svg/Print";
 import User from "./svg/User";
 import Search from "./svg/Search";
 import MiniClose from "./svg/MiniClose";
+import MiniCheck from "./svg/MiniCheck";
 
 const SVG = {
   TOSEL,
@@ -38,6 +39,7 @@ const SVG = {
   User,
   Search,
   MiniClose,
+  MiniCheck,
 };
 
 export default SVG;

package/asset/svg/Login.d.ts

@@ -5,7 +5,13 @@ export interface IconProps {
 declare const Login: {
     User: typeof User;
     ChekMark: typeof ChekMark;
+    Key: typeof Key;
+    Lock: typeof Lock;
+    Refresh: typeof Refresh;
 };
 export default Login;
 declare function User({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function ChekMark({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Key({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Lock({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Refresh({ size }: IconProps): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Login.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Login = {
     User,
     ChekMark,
+    Key,
+    Lock,
+    Refresh,
 };
 export default Login;
 function User({ size = "md" }) {
@@ -10,3 +13,12 @@ function User({ size = "md" }) {
 function ChekMark({ size = "md" }) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));
 }
+function Key({ size = "md" }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" }) }));
+}
+function Lock({ size = "md" }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" }) }));
+}
+function Refresh({ size = "md" }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" }) }));
+}

package/asset/svg/Login.tsx

@@ -8,6 +8,9 @@ export interface IconProps {
 const Login = {
   User,
   ChekMark,
+  Key,
+  Lock,
+  Refresh,
 };
 
 export default Login;
@@ -51,3 +54,63 @@ function ChekMark({ size = "md" }: IconProps) {
     </svg>
   );
 }
+
+function Key({ size = "md" }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+      />
+    </svg>
+  );
+}
+
+function Lock({ size = "md" }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+      />
+    </svg>
+  );
+}
+
+function Refresh({ size = "md" }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+      />
+    </svg>
+  );
+}

package/asset/svg/MiniCheck.d.ts

@@ -0,0 +1,3 @@
+export default function MiniCheck({ color: _color }: {
+    color?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/asset/svg/MiniCheck.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MiniCheck({ color: _color }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z", "clip-rule": "evenodd" }) }));
+}

package/asset/svg/MiniCheck.tsx

@@ -0,0 +1,16 @@
+export default function MiniCheck({ color: _color }: { color?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      className="size-4"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

package/layout/template/home/Float.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function Float({ contents }) {
     const container = {
-        displays: "fixed flex flex-col bottom-16 right-16 z-40 overflow-visible",
+        displays: "fixed flex flex-col bottom-20 md:bottom-16 right-5 md:right-16 z-40 overflow-visible",
         spacings: "gap-5",
     };
     const buttonBox = (background) => ({
         displays: "flex flex-col justify-center items-center",
-        spacings: "p-3",
-        sizes: "w-16 h-16",
+        spacings: "p-1.5 md:p-3",
+        sizes: "w-12 h-12 md:w-16 md:h-16",
         styles: "rounded-full bg-black overflow-hidden",
         backgrounds: background ?? "bg-white",
         shadows: "shadow-main",

package/layout/template/sign/Layout.js

@@ -3,14 +3,14 @@ import { cn } from "../../../util";
 export default function Layout({ children, steps, script, title, }) {
     const container = {
         positions: "relative",
-        sizes: "w-full min-h-screen overflow-hidden",
-        displays: "flex flex-col items-center justify-center",
-        spacings: "px-3 xs:px-5",
+        sizes: "w-full min-h-screen h-screen md:h-fit overflow-hidden",
+        displays: "flex flex-col items-center md:justify-center",
+        spacings: "px-3 xs:px-5 py-3 xs:py-5 md:py-0",
         other: "bg-gray-50",
     };
     const headerBox = {
         display: "flex flex-row justify-between items-center",
-        sizes: "h-15 w-full md:w-112.5",
+        sizes: "h-15 shrink-0 w-full md:w-112.5",
         spacings: "px-5 mb-5",
         backgorunds: "bg-gradient-to-r from-green-dark to-crimson-burgundy rounded-lg",
     };

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

@@ -1,6 +1,3 @@
 import { InputWidget } from "../../../interface";
-interface InputWithTitleProps extends InputWidget {
-    title: string;
-}
-declare function WithTitle(props: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function WithTitle(props: InputWidget): import("react/jsx-runtime").JSX.Element;
 export default WithTitle;

package/package.json

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

package/util/convertDateToString.d.ts

@@ -1 +1 @@
-export default function formatDateToString(date: Date): string;
+export default function formatDateToString(date: Date, formatType?: "dash" | "dot" | "koreanYYMM"): string;

package/util/convertDateToString.js

@@ -1,6 +1,13 @@
-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}`;
+export default function formatDateToString(date, formatType) {
+    const fullYear = date.getFullYear();
+    const shortYear = fullYear % 100; // 두 자리 연도
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    if (formatType === "dot") {
+        return `${shortYear}.${month}.${day}`; // YY.MM.DD 형식
+    }
+    if (formatType === "koreanYYMM") {
+        return `${shortYear}년 ${month}월`; // YY년 MM월 형식
+    }
+    return `${fullYear}-${month}-${day}`; // 기본: YYYY-MM-DD
 }

package/util/createSearch.js

@@ -207,32 +207,40 @@ function createSearch({ record, } = {}) {
         const lowerQuery = query.toLowerCase();
         const isHangulQuery = isHangul(query);
         const queryChoseong = isHangulQuery ? getChoseong(query) : "";
-        // **정확한 일치 (Exact Match)**
-        const entireMatch = entries
-            .filter(([_, value]) => {
-            const normalizedValue = value.toLowerCase();
-            return (normalizedValue === lowerQuery ||
-                new RegExp(`\\b${lowerQuery}`).test(normalizedValue));
-        })
-            .map(([key, value]) => [
-            key,
-            record[key]?.[0] ?? value, // 첫 번째 키워드가 없을 경우 value를 기본값으로 사용
-            value,
-        ]);
-        // **초성 매칭 (Choseong Match)**
-        const choseongMatch = isHangulQuery
-            ? choseongEntries
-                .map((value, index) => ({ index, value }))
-                .filter(({ value: [_, value] }) => value.includes(queryChoseong))
-                .map(({ index }) => {
-                const key = entries[index][0];
-                return [
-                    key,
-                    record[key]?.[0] ?? entries[index][1], // 첫 번째 키워드가 없을 경우 대체
-                    entries[index][1],
-                ];
+        const isChoseong = getConstantVowel(lowerQuery[0] ?? "");
+        // console.log(`${lowerQuery[0]}: ${isChoseong}`);
+        let entireMatch = [];
+        if (!isChoseong) {
+            // **정확한 일치 (Exact Match)**
+            entireMatch = entries
+                .filter(([_, value]) => {
+                const normalizedValue = value.toLowerCase();
+                return (normalizedValue === lowerQuery || value.includes(lowerQuery) ||
+                    new RegExp(`\\b${lowerQuery}`).test(normalizedValue));
             })
-            : [];
+                .map(([key, value]) => [
+                key,
+                record[key]?.[0] ?? value, // 첫 번째 키워드가 없을 경우 value를 기본값으로 사용
+                value,
+            ]);
+        }
+        let choseongMatch = [];
+        if (isChoseong) {
+            // **초성 매칭 (Choseong Match)**
+            choseongMatch = isHangulQuery
+                ? choseongEntries
+                    .map((value, index) => ({ index, value }))
+                    .filter(({ value: [_, value] }) => value.includes(queryChoseong))
+                    .map(({ index }) => {
+                    const key = entries[index][0];
+                    return [
+                        key,
+                        record[key]?.[0] ?? entries[index][1], // 첫 번째 키워드가 없을 경우 대체
+                        entries[index][1],
+                    ];
+                })
+                : [];
+        }
         // **중복 제거 (EntireMatch에 포함된 키 제거)**
         const entireMatchKeys = new Set(entireMatch.map(([key]) => key));
         const filteredChoseongMatch = choseongMatch.filter(([key]) => !entireMatchKeys.has(key));
@@ -253,5 +261,14 @@ function createSearch({ record, } = {}) {
     };
     return { search };
 }
+const getConstantVowel = (kor) => {
+    const ga = 44032;
+    let uni = kor.charCodeAt(0);
+    uni = uni - ga;
+    let fn = Math.floor(uni / 588);
+    // let sn = Math.floor((uni - (fn * 588)) / 28);
+    // let tn = uni % 28;
+    return fn < 0;
+};
 const { search } = createSearch();
 export default search;

package/version.txt

@@ -1 +1 @@
-1.0.276
+1.0.278

package/widget/template/Input/Form.js

@@ -19,9 +19,9 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
         animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
     };
     const styleByFlag = () => {
-        const gray = "bg-gray-light border-green-dark";
+        const gray = "bg-gray-light/50 border-green-dark";
         const green = "bg-green-dark/10 text-green-dark border-green-dark";
-        const red = "bg-crimson-burgundy/10 text-crimson-burgundy border-crimson-burgundy";
+        const red = "bg-red-50 text-red-400 border-red-500";
         if (typeof isValid === "undefined")
             return gray;
         if (typeof isValid === "function")