@edu-tosel/design 1.0.265 → 1.0.267

package/asset/SVG.d.ts

@@ -10,6 +10,8 @@ import TOSEL from "./svg/TOSEL";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 declare const SVG: {
     TOSEL: typeof TOSEL;
     Close: typeof Close;
@@ -63,5 +65,7 @@ declare const SVG: {
     };
     HallofFame: typeof HallofFame;
     User: typeof User;
+    Search: typeof Search;
+    MiniClose: typeof MiniClose;
 };
 export default SVG;

package/asset/SVG.js

@@ -15,6 +15,8 @@ import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 const SVG = {
     TOSEL,
     Close,
@@ -33,5 +35,7 @@ const SVG = {
     Collab,
     HallofFame,
     User,
+    Search,
+    MiniClose,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -15,6 +15,8 @@ import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 
 const SVG = {
   TOSEL,
@@ -34,6 +36,8 @@ const SVG = {
   Collab,
   HallofFame,
   User,
+  Search,
+  MiniClose,
 };
 
 export default SVG;

package/asset/svg/MiniClose.d.ts

@@ -0,0 +1,4 @@
+import { OnClick } from "../../interface";
+export default function MiniClose({ onClick }: {
+    onClick?: OnClick;
+}): import("react/jsx-runtime").JSX.Element;

package/asset/svg/MiniClose.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MiniClose({ onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5", children: _jsx("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z", "clip-rule": "evenodd" }) }));
+}

package/asset/svg/MiniClose.tsx

@@ -0,0 +1,19 @@
+import { OnClick } from "../../interface";
+
+export default function MiniClose({ onClick }: { onClick?: OnClick }) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className="size-5"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

package/asset/svg/Search.d.ts

@@ -0,0 +1 @@
+export default function Search(): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Search.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Search() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: [_jsx("path", { "vector-effect": "non-scaling-stroke", d: "m19 19-3.5-3.5", stroke: "#475569", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), _jsx("circle", { "vector-effect": "non-scaling-stroke", cx: "11", cy: "11", r: "6", stroke: "#475569", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+}

package/asset/svg/Search.tsx

@@ -0,0 +1,24 @@
+export default function Search() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+      <path
+        vector-effect="non-scaling-stroke"
+        d="m19 19-3.5-3.5"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        vector-effect="non-scaling-stroke"
+        cx="11"
+        cy="11"
+        r="6"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/board/design/Header.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "../../interface/Board";
-export default function BoardHeader<B>({ titles, tag, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader<B>({ titles, tag, widgets, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/design/Header.design.js

@@ -1,18 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../widget";
-export default function BoardHeader({ titles, tag, option, }) {
+export default function BoardHeader({ titles, tag, widgets, option, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
     const { background, text, boundary } = option ?? {};
     const container = {
         positions: "top-0 left-0 z-30 relative flex items-center",
-        paddings: "px-7.5",
+        paddings: "px-3.5 md:px-7.5",
         backgrounds: background ?? "bg-white",
         texts: text ?? "text-black",
         sizes: "w-full h-15",
         boundary: boundary ?? "border-b-2 border-green-dark ",
         rounded: "xl:rounded-t-xl",
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "relative flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "relative flex items-center ml-auto gap-4", children: [widgets?.map((Widget, index) => (_jsx(HeaderWidgetRender, { ...Widget }, index))), selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }) }));
+}
+function HeaderWidgetRender(props) {
+    if (props.type === "input") {
+        return _jsx(Input, { ...props.data });
+    }
+    if (props.type === "select") {
+        return _jsx(Select, { ...props.data });
+    }
+    return null;
 }

package/board/template/CanvasBoard.js

@@ -11,7 +11,7 @@ export default function CanvasBoard({ header, children, action, buttons, option,
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
         sizes: header ? "h-[calc(100%-60px)]" : "h-full",
         paddings: `${header ? "pb-5" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
-        scrollStyles: "overflow-y-scroll scrollbar-hidden",
+        scrollStyles: "overflow-scroll scrollbar-hidden ",
         classNames: option?.className,
     };
     return (_jsxs(Board, { action: action, buttons: buttons, option: { ...option, className: "", isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Action.Replace, { actions: action?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));

package/globals.css

@@ -82,8 +82,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .box-shadow-sm {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
 }
-.border-gradient-green-to-red {
-}
 
 .x-shape {
   position: relative;
@@ -267,3 +265,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+/* related to font rendering in safari engine */
+* {
+  font-synthesis: none !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.stacking-context {
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  mask-image: radial-gradient(white, black);
+  -webkit-mask-composite: destination-in;
+  mask-composite: intersect;
+}

package/interface/Board.d.ts

@@ -21,8 +21,17 @@ export interface BoardProps<B> {
     option?: BoardOption;
     debug?: string;
     buttons?: LabelWidget[];
-    isUnderGallery?: Boolean;
+    isUnderGallery?: boolean;
 }
+interface HeaderInputWidget {
+    type: "input";
+    data: InputWidget;
+}
+interface HeaderSelectWidget<B> {
+    type: "select";
+    data: SelectWidget<B>;
+}
+export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B>;
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
@@ -31,6 +40,7 @@ export interface BoardHeaderProps<B> {
         selects?: SelectWidget<B>[];
         inputs?: InputWidget[];
     };
+    widgets?: HeaderWidgetType<B>[];
     option?: {
         background?: string;
         text?: string;

package/interface/Shelf.d.ts

@@ -4,6 +4,7 @@ interface Option {
     titleSize?: string;
     subtitleSize?: string;
     overflowScroll?: boolean;
+    display?: string;
     width?: string;
     height?: string;
     gap?: "xy" | "x" | "y" | "none";

package/interface/domain/Tag.d.ts

@@ -1,3 +1,3 @@
-type Tag = "NEW" | "REG" | "RCU";
+type Tag = "NEW" | "REG" | "RCU" | "UDT";
 export declare const tagString: Record<Tag, string>;
 export type { Tag };

package/interface/domain/Tag.js

@@ -1,5 +1,6 @@
 export const tagString = {
     NEW: "신규론칭",
     REG: "정기시험",
-    RCU: "모집 중"
+    RCU: "모집 중",
+    UDT: "새소식",
 };

package/interface/widget/Carousel.d.ts

@@ -1,6 +1,6 @@
 import { OnClick, Titles } from "../Property";
 export type { CarouselContent };
-type Tag = "NEW" | "REG" | "RCU";
+type Tag = "NEW" | "REG" | "RCU" | "UDT";
 interface Option {
     background: string;
     text: string;

package/layout/design/Shelf.design.js

@@ -6,8 +6,8 @@ export default function Shelf({ children, className, option, titles, debug, }) {
     const { titleSize, subtitleSize, isSize, width, height } = option ?? {};
     const container = {
         displays: "flex flex-col gap-6",
-        optionHeight: width ?? "w-full",
-        optionWidth: height ?? "h-fit",
+        optionWidth: width ?? "w-full xl:w-auto",
+        optionHeight: height ?? "h-fit",
         sizes: isSize && "w-full h-fit",
         debug: debug && isDebug(`border-2  ${debug}`),
     };

package/layout/index.d.ts

@@ -1,13 +1,9 @@
 export { default as Action } from "./template/Action";
-export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
-export { default as Books } from "./template/Books";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
-export { default as Olympiad } from "./template/Olympiad";
-export { default as Regexam } from "./template/Regexam";
 export { default as Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
@@ -16,10 +12,5 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
-export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
-export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
-export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
-export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
-export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";

package/layout/index.js

@@ -1,13 +1,9 @@
 export { default as Action } from "./template/Action";
-export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
-export { default as Books } from "./template/Books";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
-export { default as Olympiad } from "./template/Olympiad";
-export { default as Regexam } from "./template/Regexam";
 export { default as Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
@@ -16,10 +12,5 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
-export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
-export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
-export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
-export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
-export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";

package/layout/template/Ticket/Extension.js

@@ -17,9 +17,9 @@ export default function TicketExtension({ props, option }) {
     };
     const ref = useRef(null);
     const handlePrint = useReactToPrint({
-        content: () => ref.current,
+        contentRef: ref,
     });
-    return (_jsxs("div", { className: cn(body), children: [_jsx(Ticket, { ref: ref, props: props }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [!noPrint && (_jsx("div", { className: "md:flex hidden", children: _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: handlePrint, option: {
+    return (_jsxs("div", { className: cn(body), children: [_jsx(Ticket, { ref: ref, props: props }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [!noPrint && (_jsx("div", { className: "md:flex hidden", children: _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: () => handlePrint(), option: {
                                 width: "md",
                                 height: "sm",
                                 background: "bg-white shadow-main",

package/layout/template/home/Promotion.js

@@ -87,6 +87,7 @@ function Banner({ onClick, image, option }) {
         displays: "absolute",
         positions: "bottom-0 left-0",
         background: `bg-cover bg-center`,
+        boundaries: "rounded-xl md:rounded-2xl",
     };
     return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onClick: onClick, children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
 }

package/layout/template/home/Service.js

@@ -101,6 +101,7 @@ function Banner({ titles, onClick, image, option }) {
         displays: "absolute",
         positions: "bottom-0 left-0",
         background: `bg-cover bg-center`,
+        boundaries: "rounded-xl md:rounded-2xl",
     };
     return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), onClick: onClick, children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
 }

package/layout/template/home/layout/Carousel.js

@@ -62,9 +62,23 @@ export default function Carousel({ contents, }) {
         background,
         animations: "duration-300",
     };
+    const titleWrapper = {
+        displays: "flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
+        sizes: "w-full h-fit xxs:w-fit md:w-72",
+        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5",
+        animations: "duration-500",
+        //debug: "border-red-500 border-2",
+    };
     const titleSet = {
-        displays: "flex items-center lex gap-4 flex-row xxs:gap-4 xxs:items-start xxs:flex-col md:gap-2",
+        displays: "flex flex gap-4 flex-row justify-start xxs:justify-center xxs:gap-4 xxs:items-start xxs:flex-col xxs:shrink-0  md:gap-2",
         sizes: "w-fit md:w-full h-fit",
+        //debug: "border-2 border-green-500",
+    };
+    const subtitleStyles = {
+        displays: "flex flex-col justify-center",
+        sizes: "w-full h-10 xxs:w-fit xxs:h-fit",
+        spacings: "my-2 xxs:mt-0",
+        textStyles: "text-sm md:text-base break-keep",
     };
     const body = {
         displays: "flex flex-none flex-col items-center justify-center md:flex-row",
@@ -73,21 +87,26 @@ export default function Carousel({ contents, }) {
         animations: "duration-500",
     };
     const tagBox = {
-        displays: "flex justify-center items-center",
+        displays: "flex justify-center items-center shrink-0",
         sizes: "w-fit h-fit px-2 py-1 md:px-2.5 md:py-1.5",
         background: tag.background,
         fonts: "text-white font-pretendard-medium text-sm md:text-base leading-none",
         styles: "rounded-md",
     };
+    const buttonBoxPosition = {
+        display: "absolute flex justify-center items-center md:static md:justify-start",
+        sizes: "w-full h-fit left-0 bottom-0 z-10",
+        spacings: "ml-0 md:ml-10 xm:ml-0",
+    };
     const buttonBox = {
+        displays: "relative justify-center items-center gap-1 flex z-10",
         animations: "duration-500",
-        displays: "justify-center items-center gap-1 flex z-10",
-        sizes: "w-30 h-10 md:h-6.25 md:w-23.25 bg-gray-dark rounded-full",
+        sizes: "w-34 h-10 md:h-6.25 md:w-26 bg-gray-dark rounded-full",
         paddings: "px-1.5 mt-0 mb-5 md:mt-12 ",
     };
-    const buttonBoxPosition = {
-        display: "absolute flex justify-center items-center md:static md:justify-start ",
-        sizes: "w-full h-fit left-0 bottom-0 z-10",
+    const handlePosition = {
+        displays: "absolute flex justify-between items-center",
+        sizes: "w-full h-full",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
 }