@edu-tosel/design 1.0.154 → 1.0.156

package/widget/template/Select/Select.js

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