@edu-tosel/design 1.0.281 → 1.0.283

package/board/design/Header.design.js

@@ -23,5 +23,8 @@ function HeaderWidgetRender(props) {
     if (props.type === "select") {
         return _jsx(Select, { ...props.data });
     }
+    if (props.type === "selectToggle") {
+        return _jsx(Select.Toggle, { ...props.data });
+    }
     return null;
 }

package/interface/Board.d.ts

@@ -1,7 +1,7 @@
 import { Size, Titles } from "./Property";
 import { DataSet, DataField } from "./Data";
 import { ActionProps } from "./Action";
-import { InputWidget, LabelWidget, SelectWidget } from "./widget";
+import { InputWidget, LabelWidget, SelectToggleProps, SelectWidget } from "./widget";
 interface BoardOption {
     className?: string;
     width?: Size;
@@ -31,7 +31,11 @@ interface HeaderSelectWidget<B> {
     type: "select";
     data: SelectWidget<B>;
 }
-export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B>;
+interface HeaderSelectToggleWidget<T> {
+    type: "selectToggle";
+    data: SelectToggleProps<T>;
+}
+export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B> | HeaderSelectToggleWidget<B>;
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;

package/layout/template/home/layout/Navigation.js

@@ -146,12 +146,12 @@ function NavigationItem({ type, calendar, notice, event, }) {
     //scroll action
     const scrollWrapper = {
         displays: "flex flex-row md:flex-col",
-        sizss: "h-fit md:h-full",
-        scrollActions: "scrollbar-hidden overflow-x-scroll md:overflow-y-scroll snap-x md:snap-none",
+        sizes: "h-fit md:h-full min-w-0 min-h-0",
+        scrollActions: "scrollbar-hidden overflow-x-scroll md:overflow-y-scroll snap-x md:snap-none -webkit-overflow-scrolling-touch",
         spacings: "p-5 gap-5 scroll-pl-5",
     };
     const softBox = {
-        displays: "absolute top-0 left-0",
+        displays: "absolute top-0 left-0 pointer-events-none",
         sizes: "w-full h-5",
         backgrounds: "bg-gradient-to-b from-white to-white/0",
     };
@@ -237,6 +237,12 @@ function SearchComponent() {
         if (inputRef.current)
             inputRef.current.focus();
     };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            inputRef.current?.blur();
+        }
+    };
     const [searchText, setSearchText] = useState("");
     const isEmpty = "" === searchText;
     const { choseongMatch, entireMatch } = search(searchText);
@@ -245,12 +251,12 @@ function SearchComponent() {
     };
     const scrollWrapper = {
         displays: "flex flex-col",
-        sizss: "h-full",
-        scrollActions: "scrollbar-hidden overflow-y-scroll snap-none",
+        sizes: "h-full min-h-0 min-w-0",
+        scrollActions: "scrollbar-hidden overflow-y-scroll snap-none -webkit-overflow-scrolling-touch",
         spacings: "py-5 gap-5 scroll-pl-5",
     };
     const softBox = {
-        displays: "absolute top-[61px] left-0",
+        displays: "absolute top-[61px] left-0 pointer-events-none",
         sizes: "w-full h-5",
         backgrounds: "bg-gradient-to-b from-white to-white/0",
     };
@@ -286,5 +292,5 @@ function SearchComponent() {
     };
     return (_jsxs("div", { className: "h-[calc(100vh-300px)] md:h-full w-full", children: [_jsxs("header", { className: cn(searchBarHeader), children: [!isEmpty && (_jsx("div", { className: "absolute w-[calc(100%-40px)] flex justify-end text-gray-medium pointer-events-none", children: _jsx("div", { className: "h-fit w-fit p-1 pointer-events-auto cursor-pointer", onClick: handleClear, children: _jsx(SVG.MiniClose, {}) }) })), _jsxs("form", { className: "flex flex-auto gap-4 min-w-0 w-full", children: [_jsx("label", { className: "h-6 w-6 mt-0.5 text-green-dark", children: _jsx(SVG.Search, {}) }), _jsx("input", { type: "text", className: cn(inputBox), placeholder: "\uBB34\uC5C7\uC774\uB4E0 \uCC3E\uC544\uBCF4\uC138\uC694", value: searchText, ref: inputRef, onChange: (e) => {
                                     setSearchText(e.target.value);
-                                } })] })] }), _jsx("div", { className: cn(scrollWrapper), children: !isEmpty ? (choseongMatch.length === 0 && entireMatch.length === 0 ? (_jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "https://resource.tosel.co.kr/images/images/no-result.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" }), _jsxs("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: ["'", searchText, "'\uC5D0 \uB300\uD55C \uACB0\uACFC\uAC00 \uD544\uC694\uD55C\uAC00\uC694?"] })] })) : (_jsxs("div", { className: "flex flex-col w-full", children: [entireMatch.map((e) => (_jsxs("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: [_jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsxs("div", { className: "text-sm text-green-dark", children: ["\"", e[2], "\""] })] }), _jsx("div", { className: "w-fit rounded-md shrink-0 text-xs bg-green-dark text-white py-1 px-2", children: "\uC815\uD655\uD788 \uC77C\uCE58!" })] }))), choseongMatch.map((e) => (_jsx("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: _jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsx("div", { className: "text-sm text-gray-medium", children: e[2] })] }) })))] }))) : (_jsxs("div", { className: "flex flex-col w-full justify-center items-start px-5", children: [_jsx("div", { className: "w-full text-green-dark text-base", children: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694" }), _jsx("div", { className: "text-green-dark/50 text-sm", children: "\uCD08\uC131\uC73C\uB85C\uB3C4 \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694!" })] })) }), _jsx("div", { className: cn(softBox) })] }));
+                                }, onKeyDown: handleKeyDown })] })] }), _jsx("div", { className: cn(scrollWrapper), children: !isEmpty ? (choseongMatch.length === 0 && entireMatch.length === 0 ? (_jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "https://resource.tosel.co.kr/images/images/no-result.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" }), _jsxs("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: ["'", searchText, "'\uC5D0 \uB300\uD55C \uACB0\uACFC\uAC00 \uD544\uC694\uD55C\uAC00\uC694?"] })] })) : (_jsxs("div", { className: "flex flex-col w-full", children: [entireMatch.map((e) => (_jsxs("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: [_jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsxs("div", { className: "text-sm text-green-dark", children: ["\"", e[2], "\""] })] }), _jsx("div", { className: "w-fit rounded-md shrink-0 text-xs bg-green-dark text-white py-1 px-2", children: "\uC815\uD655\uD788 \uC77C\uCE58!" })] }))), choseongMatch.map((e) => (_jsx("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: _jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsx("div", { className: "text-sm text-gray-medium", children: e[2] })] }) })))] }))) : (_jsxs("div", { className: "flex flex-col w-full justify-center items-start px-5", children: [_jsx("div", { className: "w-full text-green-dark text-base", children: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694" }), _jsx("div", { className: "text-green-dark/50 text-sm", children: "\uCD08\uC131\uC73C\uB85C\uB3C4 \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694!" })] })) }), _jsx("div", { className: cn(softBox) })] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.281
+1.0.283