@edu-tosel/design 1.0.54 → 1.0.55

package/asset/SVG.d.ts

@@ -33,6 +33,7 @@ declare const SVG: {
             size?: number | undefined;
             theme?: import("../interface/Theme").Theme | undefined;
         }) => import("react/jsx-runtime").JSX.Element;
+        RightArrow: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
     };
     Phone: typeof Phone;
     Profile: typeof Profile;

package/asset/svg/Operation.d.ts

@@ -10,9 +10,11 @@ declare function Checked({ flag, size, theme, }: {
     size?: number;
     theme?: Theme;
 }): import("react/jsx-runtime").JSX.Element;
+declare function RightArrow({ onClick }: Operation): import("react/jsx-runtime").JSX.Element;
 declare const Operation: {
     Plus: typeof Plus;
     Minus: typeof Minus;
     Checked: typeof Checked;
+    RightArrow: typeof RightArrow;
 };
 export default Operation;

package/asset/svg/Operation.js

@@ -16,9 +16,13 @@ function Checked({ flag, size, theme, }) {
     };
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size ?? "40", height: size ?? "40", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: flag ? color[theme ?? "green"] : "#F0F0F0" }), _jsx("path", { d: "M30.5 18.5L24 30.5L18 24", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
 }
+function RightArrow({ onClick }) {
+    return (_jsxs("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: "#105652" }), _jsx("path", { d: "M20 24H28M24 20L28 24L24 28", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
 const Operation = {
     Plus,
     Minus,
     Checked,
+    RightArrow,
 };
 export default Operation;

package/asset/svg/Operation.tsx

@@ -95,10 +95,36 @@ function Checked({
     </svg>
   );
 }
+function RightArrow({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#105652"
+      />
+      <path
+        d="M20 24H28M24 20L28 24L24 28"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
 
 const Operation = {
   Plus,
   Minus,
   Checked,
+  RightArrow,
 };
 export default Operation;

package/card/design/RollCard.design.d.ts

@@ -1,2 +1,2 @@
 import { RollCardProps } from "../../interface";
-export default function RollCardDesign({ titles, state, isDisabled, isFixed, children, }: RollCardProps): import("react/jsx-runtime").JSX.Element;
+export default function RollCardDesign({ titles, state, disabled, isFixed, children, }: RollCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/RollCard.design.js

@@ -5,8 +5,9 @@ import { Action, Shelf } from "../../layout";
 import Card from "./Card.design";
 import { useEffect, useState } from "react";
 import { cn } from "../../util";
-export default function RollCardDesign({ titles, state, isDisabled, isFixed, children, }) {
+export default function RollCardDesign({ titles, state, disabled, isFixed, children, }) {
     const [isOpen, setIsOpen] = state;
+    const [isDisabled, disabledFn] = disabled || [false, () => { }];
     const [flag, setFlag] = useState(false);
     useEffect(() => {
         if (isFixed) {
@@ -24,13 +25,19 @@ export default function RollCardDesign({ titles, state, isDisabled, isFixed, chi
     return (_jsxs(Card, { options: {
             width: "2xl",
             height: !isFixed && isOpen ? "xs" : "3xs",
-            background: flag ? "bg-green-dark/10" : "bg-white",
+            background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",
-        }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: isFixed ? (flag ? "추가됨" : "수정하기") : "접수중", options: {
-                                    background: flag ? "bg-green-dark" : "bg-green-dark/10",
-                                    text: flag ? "text-white" : "bg-green-dark",
+        }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled
+                                    ? isFixed
+                                        ? flag
+                                            ? "추가됨"
+                                            : "수정하기"
+                                        : "접수중"
+                                    : "접수 완료", options: {
+                                    background: isDisabled || flag ? "bg-green-dark" : "bg-green-dark/10",
+                                    text: isDisabled || flag ? "text-white" : "bg-green-dark",
                                 } }), _jsx(Action.Replace, { actions: [
-                                    [isDisabled, null],
+                                    [isDisabled, _jsx(SVG.Operation.RightArrow, { onClick: disabledFn })],
                                     [!isDisabled && isFixed, _jsx(SVG.Operation.Checked, { flag: true })],
                                     [
                                         !isDisabled && !isFixed && !isOpen,

package/interface/Card.d.ts

@@ -127,6 +127,6 @@ export interface RollCardProps extends CardProps {
     };
     state: State<boolean>;
     isFixed?: boolean;
-    isDisabled?: boolean;
+    disabled?: [boolean, OnClick];
 }
 export {};

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.54
+1.0.55

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
 import { HTMLSelectElement } from "../../../interface";
-export default function SelectLG<T>({ state, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -1,18 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
 import { useActionStore } from "../../../store";
 import { useFlag } from "../../../hook";
-0;
+import { cn } from "../../../util";
+import { useTransition, animated } from "react-spring";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
-    md: "w-40",
+    md: "w-38",
     lg: "w-50",
 };
 const heightSize = {
     xs: "h-6.5",
+    sm: "h-9",
 };
-export default function SelectLG({ state, }) {
+export default function SelectLG({ state, selectOptions, placeholder, options, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -22,6 +24,8 @@ export default function SelectLG({ state, }) {
     const [isHover, setIsHover] = useState(false);
     const [filteredOptions, setFilterdOptions] = useState([]);
     const [index, setIndex] = useState();
+    const listRef = useRef(null);
+    const itemRefs = useRef([]);
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
     const onKeyDown = (e) => {
         if (!filteredOptions)
@@ -32,10 +36,71 @@ export default function SelectLG({ state, }) {
             setText(filteredOptions[index][1]);
             return setValue(filteredOptions[index][0]);
         }
-        if (e.key === "ArrowDown")
-            return setIndex((index + 1) % filteredOptions.length);
-        if (e.key === "ArrowUp")
-            return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+        if (e.key === "ArrowDown") {
+            setIndex((index + 1) % filteredOptions.length);
+        }
+        if (e.key === "ArrowUp") {
+            setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+        }
+    };
+    useEffect(() => {
+        setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
+    }, [search, selectOptions]);
+    useEffect(() => {
+        if (typeof index === "number" && itemRefs.current[index]) {
+            itemRefs.current[index]?.scrollIntoView({ block: "nearest" });
+        }
+    }, [index]);
+    const isLong = selectOptions && selectOptions.length >= 4;
+    const container = {
+        positions: "relative ",
+        displays: "flex flex-col",
+    };
+    const button = {
+        displays: "flex items-center",
+        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "sm"]}`,
+        styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
+        shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
+    };
+    const input = {
+        positions: "absolute z-30",
+        layouts: cn(button),
+        styles: "focus:outline-none text-xs pl-1.5",
+    };
+    const body = {
+        positions: "absolute z-30",
+        displays: "flex flex-col gap-1",
+        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-40`,
+        paddings: "p-2",
+        styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
+    };
+    const label = {
+        displays: "flex items-center",
+        sizes: "h-7 w-full",
+        paddings: "px-2",
+        styles: "rounded-sm duration-500",
+        fonts: "text-xs text-gray-dim hover:bg-green-dark hover:text-white",
     };
-    return _jsx("select", { className: "w-64 h-32 border-2" });
+    const inputTransition = useTransition(isOpen, {
+        from: { top: 44 },
+        enter: { top: 44 },
+        leave: { top: 44 },
+        config: { duration: 0 },
+    });
+    const bodyTransitions = useTransition(isOpen, {
+        from: { top: isLong ? 88 : 44 },
+        enter: { top: isLong ? 88 : 44 },
+        leave: { top: isLong ? 88 : 44 },
+        config: { duration: 0 },
+    });
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, 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[0])?.[1] })) : (_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: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+                                setValue(value);
+                                setText(text);
+                                return setIsOpen(false);
+                            }, className: cn(label, order === index
+                                ? "bg-green-dark text-white w-full"
+                                : "w-auto"), children: text }) }, id + value))) })));
+            })] }));
 }

package/widget/template/Select/Select.js

@@ -7,7 +7,7 @@ import { useFlag } from "../../../hook";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
-    md: "w-40",
+    md: "w-38",
     lg: "w-50",
 };
 const heightSize = {