@edu-tosel/design 1.0.263 → 1.0.265

package/board/design/Board.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { Action, Label } from "../..";
+import { useGalleryContext } from "../../layout/template/GalleryContext";
 const widthSize = {
     xs: "w-20",
     sm: "w-24",
@@ -22,6 +23,7 @@ const heightSize = {
     auto: "h-auto",
 };
 export function Board({ children, action, option, debug, buttons, }) {
+    const isUnderGallery = useGalleryContext();
     const { shows } = action ?? {};
     const { width, height, isRounded, className, noMobile, background, boundary, } = option ?? {};
     const container = {
@@ -29,7 +31,11 @@ export function Board({ children, action, option, debug, buttons, }) {
         width: widthSize[width ?? "full"],
         noMobile: noMobile && "hidden xl:block",
         debug: debug && isDebug(`border-2  border-${debug}`),
-        height: "h-[calc(100%-56px)]",
+        height: isUnderGallery
+            ? "h-full xl:h-[calc(100%-30px)]"
+            : buttons
+                ? "h-full xl:h-[calc(100%-100px)]"
+                : "h-full xl:h-[calc(100%-30px)]",
     };
     const body = {
         positions: "relative",

package/board/template/CanvasBoard.js

@@ -9,7 +9,7 @@ export default function CanvasBoard({ header, children, action, buttons, option,
     };
     const body = {
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
-        sizes: "h-[calc(100%-60px)]",
+        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",
         classNames: option?.className,

package/interface/Board.d.ts

@@ -21,6 +21,7 @@ export interface BoardProps<B> {
     option?: BoardOption;
     debug?: string;
     buttons?: LabelWidget[];
+    isUnderGallery?: Boolean;
 }
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {

package/layout/template/Gallery.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GalleryProvider } from "./GalleryContext";
 import Action from "./Action";
 import Tab from "./Tab";
 import { cn } from "../../util";
@@ -8,12 +9,15 @@ export default function Gallery({ action, children, option, }) {
     const container = {
         displays: "relative flex flex-col-reverse xl:flex-col",
         position: "top-0 justify-end xl:justify-start",
-        sizes: "h-[calc(100%)] xl:h-[calc(100%-76px)] w-full",
+        sizes: "w-full",
+        heightOption: action?.tabs
+            ? "h-[calc(100%-56px)] xl:h-[calc(100%-76px)]"
+            : "h-[calc(100%-76px)]",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
-                    className: cn(tabBox),
-                    text,
-                    background,
-                    boundary,
-                } }))] }));
+    return (_jsx(GalleryProvider, { children: _jsxs("div", { className: cn(container), children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
+                        className: cn(tabBox),
+                        text,
+                        background,
+                        boundary,
+                    } }))] }) }));
 }

package/layout/template/GalleryContext.d.ts

@@ -0,0 +1,4 @@
+export declare const useGalleryContext: () => boolean;
+export declare const GalleryProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/layout/template/GalleryContext.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const GalleryContext = createContext(null);
+export const useGalleryContext = () => {
+    const context = useContext(GalleryContext);
+    return context ?? false; // 기본값으로 false 반환
+};
+export const GalleryProvider = ({ children, }) => (_jsx(GalleryContext.Provider, { value: true, children: children }));

package/layout/template/dashboard/Navigation.js

@@ -1,15 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useActionStore } from "../../../store";
 import { cn } from "../../../util";
 import Action from "../Action";
 import { useResponsive } from "../../../hook";
 function Container({ children }) {
-    const { events } = useActionStore();
     const isMmd = useResponsive("mmd");
-    useEffect(() => {
-        console.log(events);
-    }, [events]);
     return (_jsx(Action.Show, { actions: [[isMmd || "dashboardMenu", _jsx(Contents, { children: children })]], children: null }));
 }
 function Contents({ children, showAction, }) {

package/package.json

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

package/util/formatKoreanPhoneNumber.d.ts

@@ -0,0 +1 @@
+export default function formatKoreanPhoneNumber(phoneNumber: string): string;

package/util/formatKoreanPhoneNumber.js

@@ -0,0 +1,23 @@
+export default function formatKoreanPhoneNumber(phoneNumber) {
+    const cleanedNumber = phoneNumber.replace(/[^\d]/g, "");
+    if (/^02\d{7,8}$/.test(cleanedNumber)) {
+        return cleanedNumber.length === 9
+            ? `${cleanedNumber.slice(0, 2)}-${cleanedNumber.slice(2, 5)}-${cleanedNumber.slice(5)}`
+            : `${cleanedNumber.slice(0, 2)}-${cleanedNumber.slice(2, 6)}-${cleanedNumber.slice(6)}`;
+    }
+    else if (/^0[3-9]\d{8}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 3)}-${cleanedNumber.slice(3, 7)}-${cleanedNumber.slice(7)}`;
+    }
+    else if (/^010\d{8}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 3)}-${cleanedNumber.slice(3, 7)}-${cleanedNumber.slice(7)}`;
+    }
+    else if (/^1\d{4,9}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 4)}-${cleanedNumber.slice(4)}`;
+    }
+    return phoneNumber;
+}
+// console.log(formatKoreanPhoneNumber("01012345678")); // 010-1234-5678
+// console.log(formatKoreanPhoneNumber("0212345678"));  // 02-123-4567
+// console.log(formatKoreanPhoneNumber("0311234567"));  // 031-123-4567
+// console.log(formatKoreanPhoneNumber("15881234"));    // 1588-1234
+// console.log(formatKoreanPhoneNumber("03011123456")); // 030-111-23456

package/util/index.d.ts

@@ -10,6 +10,7 @@ export { default as convertDateToString } from "./convertDateToString";
 export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
+export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -10,6 +10,7 @@ export { default as convertDateToString } from "./convertDateToString";
 export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
+export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.263
+1.0.265