@edu-tosel/design 1.0.305 → 1.0.307

package/asset/SVG.d.ts

@@ -73,5 +73,9 @@ declare const SVG: {
     Search: typeof Search;
     MiniClose: typeof MiniClose;
     MiniCheck: typeof MiniCheck;
+    TestOption: {
+        Home: ({ color }: import("./svg/TestOption").TestOptionProps) => import("react/jsx-runtime").JSX.Element;
+        Official: ({ color }: import("./svg/TestOption").TestOptionProps) => import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default SVG;

package/asset/SVG.js

@@ -18,6 +18,7 @@ import User from "./svg/User";
 import Search from "./svg/Search";
 import MiniClose from "./svg/MiniClose";
 import MiniCheck from "./svg/MiniCheck";
+import TestOption from "./svg/TestOption";
 const SVG = {
     TOSEL,
     Close,
@@ -39,5 +40,6 @@ const SVG = {
     Search,
     MiniClose,
     MiniCheck,
+    TestOption,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -18,6 +18,7 @@ import User from "./svg/User";
 import Search from "./svg/Search";
 import MiniClose from "./svg/MiniClose";
 import MiniCheck from "./svg/MiniCheck";
+import TestOption from "./svg/TestOption";
 
 const SVG = {
   TOSEL,
@@ -40,6 +41,7 @@ const SVG = {
   Search,
   MiniClose,
   MiniCheck,
+  TestOption,
 };
 
 export default SVG;

package/asset/svg/TestOption.d.ts

@@ -0,0 +1,10 @@
+export interface TestOptionProps {
+    color?: string;
+}
+declare const TestOption: {
+    Home: typeof Home;
+    Official: typeof Official;
+};
+declare function Home({ color }: TestOptionProps): import("react/jsx-runtime").JSX.Element;
+declare function Official({ color }: TestOptionProps): import("react/jsx-runtime").JSX.Element;
+export default TestOption;

package/asset/svg/TestOption.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const TestOption = {
+    Home,
+    Official,
+};
+function Home({ color }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: cn("size-6", color || "text-white"), children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }));
+}
+function Official({ color }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: cn("size-6", color || "text-white"), children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z" }) }));
+}
+export default TestOption;

package/asset/svg/TestOption.tsx

@@ -0,0 +1,51 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface TestOptionProps {
+  color?: string; // 테일윈드 텍스트 색상 클래스 (예: "text-red-500", "text-blue-400")
+}
+
+const TestOption = {
+  Home,
+  Official,
+};
+
+function Home({ color }: TestOptionProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className={cn("size-6", color || "text-white")}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+
+function Official({ color }: TestOptionProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className={cn("size-6", color || "text-white")}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"
+      />
+    </svg>
+  );
+}
+
+export default TestOption;

package/card/design/RollCard.design.js

@@ -13,10 +13,6 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     useEffect(() => {
         if (isFixed) {
             setFlag(true);
-            const timer = setTimeout(() => {
-                setFlag(false);
-            }, 800);
-            return () => clearTimeout(timer);
         }
     }, [isFixed]);
     const childBox = {
@@ -27,7 +23,8 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     return (_jsxs(Card, { option: {
             width: "3xl",
             height: isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
-            background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
+            background: isDisabled || flag ? "bg-green-light" : "bg-white",
+            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

@@ -1,10 +1,12 @@
 import { Widget } from ".";
 import { Size, State } from "../Property";
+import { ReactNode } from "react";
 type SelectOptionTuple<T> = [T, string];
 export interface SelectOption<T> {
     value: T;
     title?: string;
     icon?: string;
+    iconComponent?: ReactNode;
 }
 export type SelectOptionInput<T> = SelectOption<T> | SelectOptionTuple<T>;
 export declare function toSelectOption<T>(option: SelectOptionInput<T>): SelectOption<T>;
@@ -19,6 +21,8 @@ export interface SelectSwitchProps<T> {
     option?: {
         size?: Size;
         text?: string;
+        selectedText?: string;
+        unselectedText?: string;
         className?: string;
     };
 }

package/layout/template/Tab.d.ts

@@ -10,6 +10,7 @@ interface Options {
 export default function Tab({ tabs, option, state, }: {
     tabs: (Button & {
         isStatic?: boolean;
+        isCompleted?: boolean;
     })[];
     option?: Options;
     state?: State<boolean[]>;

package/layout/template/Tab.js

@@ -18,7 +18,7 @@ export default function Tab({ tabs, option, state, }) {
         displays: "flex shrink-0",
         sizes: "w-full xl:w-fit h-fit",
         spacings: "xl:mt-2.5 p-2.5 gap-2.5",
-        backgrounds: boundary ?? "bg-white/50 xl:bg-white/30",
+        backgrounds: boundary ?? "bg-gray-light xl:bg-gray-light ",
         styles: "rounded-0 xl:rounded-xl",
         scrollStyling: "overflow-y-scroll scrollbar-hidden",
     };
@@ -26,9 +26,9 @@ export default function Tab({ tabs, option, state, }) {
         displays: "flex shrink-0 justify-center items-center",
         styles: "rounded-md duration-500 ",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "lg"]}`,
-        font: text ?? "text-green-dark",
+        font: text ?? "text-gray-medium",
     };
-    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick, disabled, isStatic, option }, index) => (_jsx("button", { onClick: () => {
+    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick, disabled, isStatic, isCompleted, option }, index) => (_jsx("button", { onClick: () => {
                 if (disabled) {
                     if (typeof disabled === "function")
                         return disabled();
@@ -39,6 +39,9 @@ export default function Tab({ tabs, option, state, }) {
                 return onClick && onClick();
             }, className: cn(button, `${!isStatic &&
                 tabsSelection[index] &&
-                `${background ?? "bg-white"} rounded-2xl`}`, `${isStatic &&
-                `${option?.background ?? "bg-green-dark"} ${option?.text ?? "text-white"} `}`), children: title }, title))) }));
+                `${background ?? "bg-white"} rounded-2xl shadow-main text-green-dark`}`, `${isStatic &&
+                `${option?.background ?? "bg-green-dark"} ${option?.text ?? "text-white"} `}`, `${!isStatic &&
+                !tabsSelection[index] &&
+                isCompleted &&
+                "text-green-dark"}`), children: title }, title))) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.305
+1.0.307

package/widget/template/Select/Switch.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption, } from "../../../interface/widget/Select";
 import { cn } from "../../../util";
+import React from "react";
 const paddingSize = {
     sm: "p-1",
     md: "p-1.5",
@@ -38,7 +39,7 @@ const boundarySize = {
 };
 function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput.map(toSelectOption);
-    const { text, size, className } = option ?? {};
+    const { text, selectedText, unselectedText, size, className } = option ?? {};
     const container = {
         className,
     };
@@ -51,12 +52,28 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
     };
     const button = (flag) => ({
         displays: "flex flex-1 gap-x-3 justify-center items-center",
-        backgrounds: flag ? "bg-white" : "bg-transparent",
+        backgrounds: flag ? "bg-white shadow-main" : "bg-transparent",
         sizes: size === "sm" && buttonSize[size ?? "sm"],
-        text,
+        text: flag ? selectedText || text : unselectedText || text, // 선택 상태에 따라 다른 텍스트 스타일 적용
         textSizes: textSize[size ?? "md"],
         boundaries: boundarySize[size ?? "md"],
+        animations: !flag && "hover:bg-white/50",
     });
-    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: selectOptions?.map(({ value, icon, iconComponent, title }) => {
+                const isSelected = value === state[0];
+                const currentTextColor = isSelected
+                    ? selectedText || text
+                    : unselectedText || text;
+                return (_jsxs("button", { onClick: () => state[1](value), className: cn(button(isSelected)), children: [iconComponent
+                            ? typeof iconComponent === "object" &&
+                                iconComponent !== null &&
+                                "type" in iconComponent
+                                ? // React 컴포넌트인 경우 color prop을 추가해서 클론
+                                    React.cloneElement(iconComponent, {
+                                        color: currentTextColor,
+                                    })
+                                : iconComponent
+                            : icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)));
+            }) }) }));
 }
 export default SelectSwitch;