@edu-tosel/design 1.0.308 → 1.0.310

package/card/design/RollCard.design.js

@@ -11,9 +11,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     const [isDisabled, disabledFn] = disabled || [false, () => { }];
     const [flag, setFlag] = useState(false);
     useEffect(() => {
-        if (isFixed) {
-            setFlag(true);
-        }
+        setFlag(!!isFixed);
     }, [isFixed]);
     const childBox = {
         sizes: "h-full",
@@ -24,7 +22,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
             width: "3xl",
             height: isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
             background: isDisabled || flag ? "bg-green-light" : "bg-white",
-            boundary: flag ? "" : "shadow-main hover:shadow-green", // isFixed일 때 그림자 제거
+            boundary: isFixed ? "" : "shadow-main hover:shadow-green", // isFixed일 때 그림자 제거
             className: "p-7.5 flex flex-col gap-y-6",
         }, children: [_jsxs("div", { className: "flex flex-col gap-y-3.5 sm:flex-row justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs("div", { className: "flex 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 justify-between sm:justify-start gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled
                                     ? isFixed

package/interface/widget/Select.d.ts

@@ -37,6 +37,8 @@ export interface SelectTagProps<T> {
         className?: string;
         background?: string;
         text?: string;
+        unselectedHoverBackground?: string;
+        unselectedHoverText?: string;
     };
 }
 export interface SelectHandleProps<T> {

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.308
+1.0.310

package/widget/template/Select/Tag.js

@@ -3,7 +3,7 @@ import { cn } from "../../../util";
 import { selectOne, selectPlural } from "../../../util/select";
 export default function SelectTag(props) {
     const { state, selectOptions, selectHow, option } = props;
-    const { className, background, text } = option || {
+    const { className, background, text, unselectedHoverBackground, unselectedHoverText, } = option || {
         selectHow: "plural",
     };
     const container = {
@@ -15,14 +15,29 @@ export default function SelectTag(props) {
         background ?? "bg-green-dark",
         text ?? "text-white",
     ].join(" ");
-    const button = (key) => ({
-        sizes: "h-10",
-        styles: "rounded-full",
-        animations: "duration-300",
-        boundaries: state[0].includes(key)
-            ? isSelectedStyle
-            : "border border-gray-medium",
-    });
+    const unselectedHoverStyle = [
+        unselectedHoverBackground
+            ? unselectedHoverBackground.startsWith("hover:")
+                ? unselectedHoverBackground
+                : `hover:${unselectedHoverBackground.replace("bg-", "")}`
+            : "hover:bg-gray-light",
+        unselectedHoverText
+            ? unselectedHoverText.startsWith("hover:")
+                ? unselectedHoverText
+                : `hover:${unselectedHoverText.replace("text-", "")}`
+            : "hover:text-gray-dark",
+    ].join(" ");
+    const button = (key) => {
+        const isSelected = state[0].includes(key);
+        return {
+            sizes: "h-10",
+            styles: "rounded-md",
+            animations: "duration-300 transition-all",
+            boundaries: isSelected
+                ? isSelectedStyle // 선택된 태그는 호버 스타일 제거
+                : `bg-gray-light/50 text-gray-medium/80 ${unselectedHoverStyle}`,
+        };
+    };
     return (_jsx("div", { className: cn(container), children: selectOptions.map(({ title, value }) => (_jsx("button", { onClick: () => selectHow === "one"
                 ? selectOne({ state, key: value })
                 : selectPlural({ state, key: value }), className: cn(button(value)), children: title }, value))) }));