@edu-tosel/design 1.0.329 → 1.0.331

package/board/design/Header.design.js

@@ -23,6 +23,9 @@ function HeaderWidgetRender(props) {
     if (props.type === "select") {
         return _jsx(Select, { ...props.data });
     }
+    if (props.type === "selectLG") {
+        return _jsx(Select.LG, { ...props.data });
+    }
     if (props.type === "button") {
         return (_jsx(Label.Button, { ...props.data, option: {
                 ...props.data.option,

package/card/template/ProgressCard/Large.js

@@ -17,7 +17,7 @@ const text = {
 };
 export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
     const contentsWrapper = {
-        displays: "flex flex-col justify-center items-center",
+        displays: "flex flex-col justify-cente  r items-center",
         sizes: "w-full h-full",
         spacings: "gap-5",
     };
@@ -26,23 +26,30 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
         displays: "hidden sm:flex justify-start items-center",
         sizes: "w-150 h-19",
     };
-    const stepBox = (flag) => ({
+    const stepBox = (flag, isCurrent) => ({
         displays: "flex-1 flex flex-col justify-between",
         sizes: "h-full",
-        backgrounds: flag ? bgLight[theme ?? "green"] : "bg-transparent",
+        backgrounds: isCurrent ? bgLight[theme ?? "green"] : "bg-transparent",
         boundaries: "rounded-md p-2.5",
-        texts: flag ? "text-gray-dark" : "text-gray-medium",
+        texts: isCurrent
+            ? "text-gray-dark"
+            : flag
+                ? "text-gray-dark"
+                : "text-gray-medium",
     });
     const titleBox = {
         positions: " xl:absolute top-7.5 md:top-12 right-4 md:right-12",
         displays: "flex flex-col sm:flex-row gap-x-5 xl:flex-col items-center xl:items-end gap-y-3",
     };
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
+    // 현재 진행 중인 단계 찾기 (첫 번째 false인 단계)
+    const currentStepIndex = checks.findIndex((check) => !check);
+    const isCurrentStep = (index) => index === currentStepIndex;
     return (_jsx(CardDesign, { option: {
             ...option,
             width: "full",
             height: "2xs",
-        }, children: _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
+        }, children: _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index], isCurrentStep(index))), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
                                         if (titles.link)
                                             window.location.href = titles.link.path;
                                     }, className: "text-base leading-none underline text-gray-medium", children: titles.link.title }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }) }));

package/interface/Board.d.ts

@@ -31,6 +31,10 @@ interface HeaderSelectWidget<B> {
     type: "select";
     data: SelectWidget<B>;
 }
+interface HeaderSelectLGWidget<B> {
+    type: "selectLG";
+    data: SelectWidget<B>;
+}
 interface HeaderSelectToggleWidget<T> {
     type: "selectToggle";
     data: SelectToggleProps<T>;
@@ -39,7 +43,7 @@ interface HeaderButtonWidget {
     type: "button";
     data: LabelWidget;
 }
-export type HeaderWidgetType<B1, B2, B3, B4> = HeaderInputWidget | HeaderSelectWidget<B1> | HeaderSelectToggleWidget<B2> | HeaderButtonWidget;
+export type HeaderWidgetType<B1, B2, B3, B4> = HeaderInputWidget | HeaderSelectWidget<B1> | HeaderSelectLGWidget<B1> | HeaderSelectToggleWidget<B2> | HeaderButtonWidget;
 export interface BoardHeaderProps<B1, B2, B3, B4> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;

package/interface/Shelf.d.ts

@@ -19,5 +19,7 @@ export interface ShelfProps {
     debug?: string;
     className?: string;
     option?: Option;
+    scrollAction?: string;
+    sticky?: boolean;
 }
 export {};

package/layout/design/Shelf.design.d.ts

@@ -1,2 +1,2 @@
 import { ShelfProps } from "../../interface";
-export default function Shelf({ children, className, option, titles, debug, }: ShelfProps): import("react/jsx-runtime").JSX.Element;
+export default function Shelf({ children, className, option, titles, debug, scrollAction, }: ShelfProps): import("react/jsx-runtime").JSX.Element;

package/layout/design/Shelf.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../../text";
 import { cn, isDebug } from "../../util";
-export default function Shelf({ children, className, option, titles, debug, }) {
+export default function Shelf({ children, className, option, titles, debug, scrollAction, }) {
     const { title, titleColor } = titles ?? {};
     const { titleSize, subtitleSize, isSize, width, height } = option ?? {};
     const container = {
@@ -9,6 +9,7 @@ export default function Shelf({ children, className, option, titles, debug, }) {
         optionWidth: width ?? "w-full xl:w-auto",
         optionHeight: height ?? "h-fit",
         sizes: isSize && "w-full h-fit",
+        scrollAction: scrollAction,
         debug: debug && isDebug(`border-2  ${debug}`),
     };
     const titleBox = {

package/layout/template/Shelf.d.ts

@@ -5,6 +5,6 @@ declare namespace Shelf {
     var Row: ({ titles, children, className, debug }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
     var Col: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
     var Fourthird: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
-    var Quarter: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
+    var Quarter: ({ titles, children, debug, className, sticky, }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
 }
 export default Shelf;

package/layout/template/Shelf.js

@@ -62,12 +62,12 @@ function Fourthird({ titles, children, debug, className }) {
             height: "h-fit",
         }, debug: debug, children: children }));
 }
-function Quarter({ titles, children, debug, className }) {
+function Quarter({ titles, children, debug, className, sticky = false, }) {
     const container = {
         displays: "flex flex-col",
         className: className ?? "gap-y-7.5",
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), scrollAction: sticky ? "sticky top-0" : undefined, option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
             width: "flex-grow basis-[450px] max-w-full min-w-[450px]",

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.329
+1.0.331

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

@@ -114,11 +114,11 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
     });
     return (_jsxs("div", { className: cn(container), onClick: () => setIsOwn(true), onKeyDown: onKeyDown, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label(false)), 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: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions && filteredOptions.length > 0 ? (filteredOptions.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setIndex(order);
                                 setValue(value);
                                 setText(String(title));
                                 return setIsOpen(false);
-                            }, className: cn(label(order === index)), children: title }) }, id + value))) })));
+                            }, className: cn(label(order === index)), children: title }) }, id + value)))) : (_jsx("div", { className: "flex items-center justify-center py-4 text-xs text-gray-400", children: "\uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })) })));
             })] }));
 }