@edu-tosel/design 1.0.122 → 1.0.124

package/interface/Property.d.ts

@@ -45,8 +45,10 @@ export type Click<REQ = unknown, RES = any> = (prop?: REQ) => RES;
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }
-export type FileRead = string | ArrayBuffer | null;
+export type FileDisplay = string | ArrayBuffer | null;
+export type FileRead = File | null;
 export type Disabled = boolean | OnClick;
+export type IsValid = undefined | boolean | ((value: string) => boolean | undefined);
 export type Scripts = {
     script?: string;
     subscript?: string | string[];

package/interface/widget/index.d.ts

@@ -1,5 +1,5 @@
 import { Color } from "../Color";
-import { Disabled, OnClick, Size, State } from "../Property";
+import { Disabled, IsValid, OnClick, Size, State } from "../Property";
 import { SelectOptionInput } from "./Select";
 export * from "./Box";
 export * from "./Carousel";
@@ -29,15 +29,16 @@ export interface Widget {
 export interface LabelWidget extends Widget {
     title: string;
     hoverState?: State<boolean>;
+    disabled?: Disabled;
     onClick?: OnClick;
 }
 type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
 export interface InputWidget extends Widget {
     title?: string;
     state: State<string> | State<string | undefined>;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent, value: string) => void;
     placeholder?: string;
-    isValid?: boolean | ((value: string) => boolean);
+    isValid?: IsValid;
     type?: InputType;
     button?: LabelWidget;
     maxLength?: number;

package/layout/template/Olympiad/Banner.js

@@ -6,7 +6,7 @@ export default function Banner() {
         displays: "flex justify-center items-center",
         spacings: "px-5",
         textstyles: "antialiased",
-        backgrounds: "bg-cover bg-center",
+        backgrounds: "bg-[url('images/olympiad/img-oly-bg-a.png')] bg-cover bg-center",
     };
     const explainer = {
         textstyles: "text-xl md:text-2xl font-pretendard-medium text-gray-light mix-blend-difference sm:text-green-dark sm:mix-blend-normal",

package/layout/template/Olympiad/Features.js

@@ -3,17 +3,42 @@ import { cn } from "../../../util";
 export default function Features() {
     const container = {
         sizes: "w-full h-fit p-5",
-        backgroudns: "bg-green-light",
+        spacings: "p-5 my-12",
+        displays: "flex flex-col justify-center items-center",
+        graphics: "antialiased",
+        text: "break-keep",
     };
     const boxWrapper = {
         sizes: "w-full h-fit",
-        displays: "flex flex-col gap-4",
+        displays: "flex flex-col items-center md:flex-row md:items-start md:justify-center md:max-w-6xl",
+        spacings: "gap-8",
+        animations: "duration-300",
+    };
+    const sectiontitle = {
+        textstyles: "text-xl text-center text-green-dark mb-10 font-pretendard-bold md:text-2xl",
+        animations: "duration-300",
     };
     // styling of feature box components
     const featureBox = {
-        sizes: "w-full h-80 rounded-lg",
-        backgrunds: "bg-green-dark",
+        sizes: "w-full h-fit max-w-md",
+        displays: "flex flex-col items-center md:grow",
+        spacings: "py-4",
+        animations: "duration-300",
+    };
+    const boxTitle = {
+        textstyles: "font-pretendard-bold text-lg text-center text-green-dark my-4 md:text-xl",
+        animations: "duration-300",
+    };
+    const boxSubTitle = {
+        textstyles: "font-pretendard-medium text-base text-center text-green-dark mt-6",
+        animations: "duration-300",
+    };
+    // common svg attributes
+    const svgAttributes = {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        className: "size-6 fill-green-dark",
     };
-    const boxTitle = {};
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(boxWrapper), children: [_jsx("div", { className: cn(featureBox) }), _jsx("div", { className: cn(featureBox) }), _jsx("div", { className: cn(featureBox) })] }) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(sectiontitle), children: "\uC804\uAD6D \uB2E8\uC704 \uC62C\uB9BC\uD53C\uC544\uB4DC, \uC9D1\uC5D0\uC11C \uAC04\uD3B8\uD558\uAC8C \uACBD\uD5D8\uD558\uB2E4." }), _jsx("div", { className: "h-0.5 w-1/4 mb-8 bg-green-dark rounded-lg" }), _jsxs("div", { className: cn(boxWrapper), children: [_jsxs("div", { className: cn(featureBox), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { d: "M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" }), _jsx("path", { d: "m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" })] }), _jsx("div", { className: cn(boxTitle), children: "\uC9D1\uC5D0\uC11C \uD3B8\uB9AC\uD558\uAC8C \uC751\uC2DC" }), _jsx("img", { src: "images/olympiad/img-oly-b1.png", alt: "\uCEF4\uD4E8\uD130\uB85C \uBB38\uC81C\uB97C \uD478\uB294 \uC5EC\uC131" }), _jsx("div", { className: cn(boxSubTitle), children: "\uC5B4\uB514\uC11C\uB098 \uC628\uB77C\uC778 \uBE0C\uB77C\uC6B0\uC800 \uC2DC\uD5D8 \uC751\uC2DC\uAC00 \uAC00\uB2A5\uD569\uB2C8\uB2E4." })] }), _jsxs("div", { className: cn(featureBox), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(boxTitle), children: "\uAD6D\uB0B4 \uC720\uC77C\uC758 \uC218\uC0C1\uD61C\uD0DD" }), _jsx("img", { src: "images/olympiad/img-oly-b2.png", alt: "\uD2B8\uB85C\uD53C\uB97C \uB4E4\uACE0 \uC88B\uC544\uD558\uB294 \uC0AC\uB78C" }), _jsx("div", { className: cn(boxSubTitle), children: "\uB300\uD68C \uC6B0\uC2B9\uC790\uC5D0\uAC8C\uB294 \uACE0\uB824\uB300\uD559\uAD50 \uAE30\uAD00\uC7A5\uC0C1\uC774 \uC218\uC5EC\uB429\uB2C8\uB2E4." })] }), _jsxs("div", { className: cn(featureBox), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(boxTitle), children: "\uAC04\uD3B8\uD55C \uACB0\uACFC \uD655\uC778" }), _jsx("img", { src: "images/olympiad/img-oly-b3.png", alt: "\uD2B8\uB85C\uD53C\uB97C \uB4E4\uACE0 \uC88B\uC544\uD558\uB294 \uC0AC\uB78C" }), _jsx("div", { className: cn(boxSubTitle), children: "\uB300\uC2DC\uBCF4\uB4DC\uC5D0\uC11C \uC218\uC0C1\uC5EC\uBD80\uB97C \uAC04\uD3B8\uD558\uAC8C \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })] })] }));
 }

package/modal/design/ConfirmModal.design.js

@@ -10,7 +10,7 @@ export default function ConfirmModalDesign({ titles, showAction, buttons, childr
         positions: "absolute bottom-4 md:bottom-5 right-2 md:right-5",
         displays: "flex gap-1 md:gap-2.5",
     };
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: option, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: option, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, option, disabled }) => (_jsx(Label.Button, { title: title, onClick: onClick, disabled: disabled, option: {
                             ...option,
                             width: "lg",
                             height: "sm",

package/modal/template/Confirm/Confirm.js

@@ -7,9 +7,8 @@ export default function Confirm(props) {
     const { className } = props.option ?? {};
     const container = {
         displays: "flex flex-col",
-        margins: "mt-2.5",
-        className,
         sizes: "w-full h-60",
+        styles: className ?? "mt-2.5",
     };
     return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.widgets?.map((widget, index) => (_createElement(ConfirmModalWidget, { ...widget, key: index }))) }), option: {
             ...props.option,

package/modal/template/Confirm/Reimage.d.ts

@@ -1,8 +1,9 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { FileRead, State } from "../../../interface";
+import { FileDisplay, FileRead, State } from "../../../interface";
 interface ReimageProps extends Omit<ConfirmModalProps, "children"> {
     data: {
         image: State<FileRead>;
+        display: State<FileDisplay>;
         nowImage: string;
     };
 }

package/modal/template/Confirm/Reimage.js

@@ -5,7 +5,8 @@ import { cn } from "../../../util";
 import SVG from "../../../asset/SVG";
 export default function Reimage(props) {
     const { data } = props;
-    const [selectedImage, setSelectedImage] = data.image;
+    const [selectedImageDisplay, setSelectedImageDisplay] = data.display;
+    const [_, setSelectedImage] = data.image;
     const ref = useRef(null);
     const labelBox = {
         displays: "flex items-center pl-5",
@@ -17,12 +18,13 @@ export default function Reimage(props) {
         if (file) {
             const reader = new FileReader();
             reader.onloadend = () => {
-                setSelectedImage(reader.result);
+                setSelectedImage(file);
+                setSelectedImageDisplay(reader.result);
             };
             reader.readAsDataURL(file);
         }
     };
-    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex flex-col gap-y-5.5 mt-4.5", children: [_jsx("div", { className: cn(labelBox), children: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." }), _jsxs("div", { className: "flex w-full justify-center gap-x-12", children: [_jsx(ImageFrame, { image: data.nowImage, script: "\uD604\uC7AC \uC0AC\uC9C4" }), _jsx(SVG.Direction.Right, { className: "mt-7.5" }), _jsx(ImageFrame, { onClick: () => ref.current?.click(), image: selectedImage, script: "\uC0C8\uB85C\uC6B4 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "w-full flex flex-col items-center text-xs text-gray-medium", children: [_jsx("div", { children: "\uB4F1\uB85D\uB41C \uC0AC\uC9C4\uC740 \uC218\uD5D8\uD45C \uBC1C\uAE09\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0AC\uC6A9\uB429\uB2C8\uB2E4." }), _jsx("div", { children: "\uAC00\uAE09\uC801 1:1 \uBE44\uC728, 100*100px \uC774\uC0C1\uC758 \uC0AC\uC9C4\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694." })] }), _jsx("input", { ref: ref, type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden" })] }) }));
+    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex flex-col gap-y-5.5 mt-4.5", children: [_jsx("div", { className: cn(labelBox), children: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." }), _jsxs("div", { className: "flex w-full justify-center gap-x-12", children: [_jsx(ImageFrame, { image: data.nowImage, script: "\uD604\uC7AC \uC0AC\uC9C4" }), _jsx(SVG.Direction.Right, { className: "mt-7.5" }), _jsx(ImageFrame, { onClick: () => ref.current?.click(), image: selectedImageDisplay, script: "\uC0C8\uB85C\uC6B4 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "w-full flex flex-col items-center text-xs text-gray-medium", children: [_jsx("div", { children: "\uB4F1\uB85D\uB41C \uC0AC\uC9C4\uC740 \uC218\uD5D8\uD45C \uBC1C\uAE09\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0AC\uC6A9\uB429\uB2C8\uB2E4." }), _jsx("div", { children: "\uAC00\uAE09\uC801 1:1 \uBE44\uC728, 100*100px \uC774\uC0C1\uC758 \uC0AC\uC9C4\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694." })] }), _jsx("input", { ref: ref, type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden" })] }) }));
 }
 function ImageFrame({ image, script, onClick }) {
     const imageBox = {

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.122
+1.0.124

package/widget/design/Label.design.d.ts

@@ -1,2 +1,2 @@
 import { LabelWidget } from "../../interface";
-export default function LabelDesign({ title, onClick, option, hoverState, }: LabelWidget): import("react/jsx-runtime").JSX.Element;
+export default function LabelDesign({ title, onClick, disabled, option, hoverState, }: LabelWidget): import("react/jsx-runtime").JSX.Element;

package/widget/design/Label.design.js

@@ -19,9 +19,13 @@ const heightSize = {
     sm: "h-11.25",
     md: "h-12.25",
 };
-export default function LabelDesign({ title, onClick, option, hoverState, }) {
+export default function LabelDesign({ title, onClick, disabled, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
-    const { width, height, text, background, className, disabled, boundary } = option ?? {};
+    const { width, height, text, background, className, boundary } = option ?? {};
+    const container = {
+        positions: className ?? "relative",
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
+    };
     const body = {
         positions: "relative z-10",
         sizes: "w-full h-full",
@@ -38,9 +42,7 @@ export default function LabelDesign({ title, onClick, option, hoverState, }) {
             ? "rounded-md text-xs"
             : "rounded-lgx",
     };
-    const container = {
-        className,
-        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled, option: {
+                    background: "",
+                } })] }));
 }

package/widget/template/Input/Form.d.ts

@@ -1,2 +1,2 @@
 import { InputWidget } from "../../../interface";
-export default function InputForm({ title, state, placeholder, isValid, type, button, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;
+export default function InputForm({ title, state, placeholder, isValid, type, onKeyDown, button, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/Input/Form.js

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
 import Obstacle from "../Obstacle";
-export default function InputForm({ title, state, placeholder, isValid, type, button, maxLength, disabled, }) {
+export default function InputForm({ title, state, placeholder, isValid, type, onKeyDown, button, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
     const ref = useRef(null);
@@ -23,7 +23,11 @@ export default function InputForm({ title, state, placeholder, isValid, type, bu
         if (typeof isValid === "undefined")
             return gray;
         if (typeof isValid === "function")
-            return isValid(value ?? "") ? green : red;
+            return typeof isValid(value ?? "") === "undefined"
+                ? gray
+                : isValid(value ?? "")
+                    ? green
+                    : red;
         if (isValid)
             return green;
         return red;
@@ -39,7 +43,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, bu
             !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
-    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
+    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
                             if (maxLength && e.target.value.length > maxLength)
                                 return;
                             setValue(e.target.value);

package/widget/template/Input/index.js

@@ -28,7 +28,7 @@ function Input({ state, onKeyDown, placeholder, option }) {
         pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
 }
 Input.Form = Form;
 export default Input;

package/widget/template/Label.d.ts

@@ -1,7 +1,7 @@
 import { LabelWidget } from "../../interface";
 declare function Label({ title, option }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, hoverTitle, onClick, option, }: Omit<LabelWidget, "hoverState"> & {
+    var Button: ({ title, hoverTitle, onClick, disabled, option, }: Omit<LabelWidget, "hoverState"> & {
         hoverTitle?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 }

package/widget/template/Label.js

@@ -5,9 +5,9 @@ function Label({ title, option }) {
     const [hover, setHover] = useState(false);
     return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], option: { ...option, width: "sm", height: "xs" } }));
 }
-function Button({ title, hoverTitle, onClick, option, }) {
+function Button({ title, hoverTitle, onClick, disabled, option, }) {
     const [hover, setHover] = useState(false);
-    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], option: {
+    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, disabled: disabled, hoverState: [hover, setHover], option: {
             ...option,
             width: option?.width ?? "md",
             height: option?.height ?? "sm",