@scglab/admin-ui 0.1.6 → 0.1.8

package/README.md

@@ -99,21 +99,21 @@ import { Text } from '@scglab/admin-ui';
 import {
   // 색상
   colors,
-  
+
   // 폰트 크기
   fontSize,
   lineHeightSize,
-  
+
   // 폰트 두께
   fontWeight,
-  
+
   // 레이아웃
   directions,
   justifies,
   justifySelfs,
   aligns,
   alignSelfs,
-  
+
   // 타입
   type ColorType,
   type FontSizeType,
@@ -213,10 +213,10 @@ yarn build
    ```bash
    # 패치 버전 (0.1.5 -> 0.1.6)
    npm version patch
-   
+
    # 마이너 버전 (0.1.5 -> 0.2.0)
    npm version minor
-   
+
    # 메이저 버전 (0.1.5 -> 1.0.0)
    npm version major
    ```
@@ -225,7 +225,7 @@ yarn build
    ```bash
    npm run build
    ```
-   
+
    빌드가 성공적으로 완료되었는지 확인하고, `dist` 폴더에 다음 파일들이 생성되었는지 확인하세요:
    - `index.cjs`, `index.js` (번들 파일)
    - `index.d.ts` (타입 정의 파일)
@@ -243,7 +243,7 @@ yarn build
    ```bash
    npm login
    ```
-   
+
    NPM 계정 정보를 입력하여 로그인합니다.
 
 2. **배포 실행**
@@ -255,7 +255,7 @@ yarn build
 3. **배포 확인**
    배포가 완료되면 다음 링크에서 확인할 수 있습니다:
    - NPM 페이지: `https://www.npmjs.com/package/@scglab/admin-ui`
-   
+
    또는 터미널에서 확인:
    ```bash
    npm view @scglab/admin-ui

package/dist/index.cjs

@@ -30,10 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AlertConfirmModal: () => AlertConfirmModal_default,
   BorderRadiusBox: () => BorderRadiusBox_default,
   BulletText: () => BulletText_default,
   Button: () => Button_default,
   Checkbox: () => Checkbox_default,
+  CommonDataModal: () => CommonDataModal_default,
   CommonTable: () => CommonTable_default,
   Divider: () => Divider_default,
   EmailInput: () => EmailInput_default,
@@ -65,7 +67,9 @@ __export(index_exports, {
   fontWeight: () => fontWeight,
   justifies: () => justifies,
   justifySelfs: () => justifySelfs,
-  lineHeightSize: () => lineHeightSize
+  lineHeightSize: () => lineHeightSize,
+  useDialogStore: () => DialogStore_default,
+  useLoadingStore: () => LoadingStore_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3597,12 +3601,194 @@ var WarningBox = ({
   );
 };
 var WarningBox_default = WarningBox;
+
+// src/store/DialogStore.tsx
+var import_zustand = require("zustand");
+var useDialogStore = (0, import_zustand.create)((set) => ({
+  isOpen: false,
+  type: "alert",
+  message: "",
+  showAlert: ({ title, message, onConfirm }) => set({
+    isOpen: true,
+    type: "alert",
+    title,
+    message,
+    onConfirm: () => {
+      onConfirm?.();
+      set({ isOpen: false });
+    }
+  }),
+  showConfirm: ({ title, message, onConfirm, onCancel }) => set({
+    isOpen: true,
+    type: "confirm",
+    title,
+    message,
+    onConfirm: () => {
+      onConfirm();
+      set({ isOpen: false });
+    },
+    onCancel: () => {
+      onCancel?.();
+      set({ isOpen: false });
+    }
+  }),
+  showPrompt: ({ title, message, defaultValue, onConfirm, onCancel }) => set({
+    isOpen: true,
+    type: "prompt",
+    title,
+    message,
+    defaultValue,
+    onConfirm: (value) => {
+      onConfirm(value || "");
+      set({ isOpen: false });
+    },
+    onCancel: () => {
+      onCancel?.();
+      set({ isOpen: false });
+    }
+  }),
+  close: () => set({ isOpen: false })
+}));
+var DialogStore_default = useDialogStore;
+
+// src/store/LoadingStore.tsx
+var import_zustand2 = require("zustand");
+var useLoadingStore = (0, import_zustand2.create)((set) => ({
+  isLoading: false,
+  setLoading: (loading) => set({ isLoading: loading })
+}));
+var LoadingStore_default = useLoadingStore;
+
+// src/components/modals/AlertConfirmModal.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var AlertConfirmModal = () => {
+  const dialog = DialogStore_default();
+  const [inputValue, setInputValue] = (0, import_react13.useState)("");
+  (0, import_react13.useEffect)(() => {
+    if (dialog.isOpen && dialog.type === "prompt") {
+      setInputValue(dialog.defaultValue || "");
+    }
+  }, [dialog.isOpen, dialog.type, dialog.defaultValue]);
+  if (!dialog.isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "fixed inset-0 flex items-center justify-center z-50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fixed inset-0 bg-black opacity-50" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BorderRadiusBox_default, { paddingX: 12, paddingY: 12, className: "bg-white z-10 min-w-[320px]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Stack_default, { direction: "col", gap: 20, wFull: true, className: "pt-12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Stack_default, { direction: "col", gap: 12, wFull: true, children: [
+        dialog.title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { size: "body16", fontWeight: "bold", className: "px-12", children: dialog.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { size: "body16", fontWeight: "regular", className: "px-12", children: typeof dialog.message === "string" ? dialog.message.split(/\n|<br\s*\/?>/gi).map((line, index, array) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react13.default.Fragment, { children: [
+          line,
+          index < array.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("br", {})
+        ] }, index)) : dialog.message }),
+        dialog.type === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "input",
+          {
+            type: "text",
+            value: inputValue,
+            onChange: (e) => setInputValue(e.target.value),
+            className: "w-full border border-line rounded p-8",
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Stack_default, { direction: "row", gap: 8, align: "center", justify: "center", children: [
+        dialog.type !== "alert" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          Button_default,
+          {
+            variant: "lower",
+            size: "medium",
+            className: "flex-1",
+            onClick: () => {
+              dialog.onCancel?.();
+              dialog.close();
+            },
+            children: "\uCDE8\uC18C"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          Button_default,
+          {
+            variant: "primary",
+            size: "medium",
+            className: "flex-1",
+            onClick: () => {
+              if (dialog.type === "prompt") {
+                dialog.onConfirm?.(inputValue);
+              } else {
+                dialog.onConfirm?.();
+              }
+              dialog.close();
+            },
+            children: "\uD655\uC778"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+var AlertConfirmModal_default = AlertConfirmModal;
+
+// src/components/modals/CommonDataModal.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function CommonDataModal({
+  modalWidth = 1100,
+  iconClose = true,
+  title,
+  titleTooltip,
+  subText,
+  data,
+  useScroll = true,
+  onClose
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "fixed inset-0 flex items-center justify-center z-50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fixed inset-0 bg-black opacity-50" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { width: toRemFunction2(modalWidth) }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      BorderRadiusBox_default,
+      {
+        radius: 12,
+        paddingX: 28,
+        paddingY: 24,
+        className: "bg-white w-full flex flex-col gap-24 relative h-full max-h-[90vh]",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack_default, { direction: "col", gap: 24, wFull: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack_default, { direction: "row", justify: "between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack_default, { direction: "col", gap: 8, align: "start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack_default, { direction: "row", gap: 20, align: "baseline", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { size: "h6", fontWeight: "bold", children: title }) }),
+              subText && subText,
+              titleTooltip && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Tooltip_default, { position: "bottom", tooltipInfo: titleTooltip })
+            ] }),
+            iconClose && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-0 border-0 bg-transparent flex items-center justify-center",
+                onClick: onClose,
+                "aria-label": "\uB2EB\uAE30",
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ColorIcTagClose_default, { width: 20, height: 20 })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "div",
+            {
+              className: `h-full ${useScroll ? "overflow-y-auto" : ""}`,
+              style: { maxHeight: "calc(90vh - 120px)" },
+              children: data
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+var CommonDataModal_default = CommonDataModal;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AlertConfirmModal,
   BorderRadiusBox,
   BulletText,
   Button,
   Checkbox,
+  CommonDataModal,
   CommonTable,
   Divider,
   EmailInput,
@@ -3634,6 +3820,8 @@ var WarningBox_default = WarningBox;
   fontWeight,
   justifies,
   justifySelfs,
-  lineHeightSize
+  lineHeightSize,
+  useDialogStore,
+  useLoadingStore
 });
 //# sourceMappingURL=index.cjs.map