@uniai-fe/uds-templates 0.3.10 → 0.3.12

package/dist/styles.css

@@ -57,6 +57,7 @@
   --modal-dialog-title-weight: var(--font-heading-small-weight);
   --modal-dialog-body-color: var(--color-label-standard);
   --modal-dialog-body-font-size: var(--font-body-medium-size);
+  --modal-dialog-body-padding: var(--spacing-padding-7) var(--spacing-padding-8);
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);
   --auth-container-padding-inline: var(--spacing-padding-6, 24px);
@@ -517,6 +518,10 @@
   margin: 0;
 }
 
+.uds-modal-header-close-button {
+  font-size: 0;
+}
+
 .uds-modal-footer {
   padding: 0;
   border-top: none;
@@ -526,17 +531,17 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: var(--spacing-padding-6, 16px);
-  gap: var(--spacing-gap-4, 16px);
+  padding: 0 var(--spacing-padding-8) var(--spacing-padding-7);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
-  row-gap: var(--spacing-gap-4, 16px);
+  row-gap: var(--spacing-gap-4);
 }
 
 .uds-modal-footer-group {
   display: flex;
   flex: 1 1 0;
   flex-wrap: nowrap;
-  gap: var(--spacing-gap-4, 16px);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
 }
 .uds-modal-footer-group[data-position=left] {
@@ -626,18 +631,18 @@
 }
 
 .uds-modal-dialog-header-content {
-  padding: var(--spacing-padding-9) var(--spacing-padding-6) 0;
+  padding: var(--spacing-padding-9) var(--spacing-padding-8) 0;
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-gap-3, 12px);
+  gap: var(--spacing-gap-3);
 }
 
 .uds-modal-dialog-header-row-split {
@@ -647,14 +652,14 @@
 .uds-modal-dialog-header-leading {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   justify-content: center;
 }
 
 .uds-modal-dialog-header-leading-content {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--spacing-gap-1);
 }
 .uds-modal-dialog-header-leading-content > :where(p, span, strong, em):not([class]) {
   color: var(--modal-dialog-title-color);
@@ -679,7 +684,7 @@
 .uds-modal-dialog-header-trailing {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-description {
@@ -691,7 +696,7 @@
   color: var(--modal-dialog-body-color);
   font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
-  font-weight: var(--font-body-small-weight, 400);
+  font-weight: var(--font-body-small-weight);
 }
 
 .uds-modal-dialog-header[data-layout=split] .uds-modal-dialog-header-content,
@@ -705,7 +710,7 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(--modal-dialog-body-padding, var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px));
+  padding: var(--modal-dialog-body-padding, );
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);
@@ -714,11 +719,11 @@
   margin: 0;
   font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
-  font-weight: var(--font-body-small-weight, 400);
+  font-weight: var(--font-body-small-weight);
   word-break: inherit;
 }
 .uds-modal-dialog-body-content > * + * {
-  margin-top: var(--spacing-gap-2, 8px);
+  margin-top: var(--spacing-gap-2);
 }
 
 .uds-modal-surface {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.30.3",
+  "packageManager": "pnpm@10.32.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -86,7 +86,7 @@
     "@uniai-fe/util-next": "workspace:*",
     "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
-    "jotai": "^2.18.0",
+    "jotai": "^2.18.1",
     "next": "^15.5.11",
     "prettier": "^3.8.1",
     "react-hook-form": "^7.71.2",

package/src/auth/login/jotai/user.ts

@@ -58,3 +58,12 @@ export const farmIdAtom = atomWithStorage<number>(
   -1,
   jotaiStorage.session<number>(),
 );
+
+/**
+ * 로그인 사용자 농장 관리번호
+ */
+export const farmIdxAtom = atomWithStorage<number>(
+  "farmIdx",
+  -1,
+  jotaiStorage.session<number>(),
+);

package/src/auth/login/types/api.ts

@@ -1,4 +1,4 @@
-import type { API_Res_Base } from "../../../types/api";
+import type { API_Res_Base } from "@uniai-fe/util-api";
 
 /**
  * 로그인 API; 요청
@@ -34,10 +34,14 @@ export interface API_Res_LoginUserFarm {
    * 농장명
    */
   name: string;
+  /**
+   * 유니아이 농장 관리번호
+   */
+  farm_idx: number | string;
   /**
    * farm_code (농장 식별번호)
    */
-  farm_code: string;
+  farm_code: number | string;
   /**
    * 계정 권한/직책 코드
    * - OWNER: 농장주

package/src/modal/components/core/header/CloseButton.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 
 import type { ModalHeaderCloseButtonProps } from "../../../types";
+import CloseIcon from "../../../img/close.svg";
 
 /**
  * Modal Header CloseButton; 모달 헤더 닫기 버튼
@@ -26,7 +27,13 @@ export function ModalHeaderCloseButton({
       aria-label={ariaLabel}
       onClick={onClick}
     >
-      X
+      <CloseIcon
+        width={20}
+        height={20}
+        alt={ariaLabel}
+        viewBox="0 0 20 20"
+        preserveAspectRatio="xMidYMid meet"
+      />
     </button>
   );
 }

package/src/modal/hooks/useModal.ts

@@ -1,11 +1,10 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import { useAtom } from "jotai";
 
 import type {
-  CloseFlagState,
   ModalCloseRequest,
   ModalProps,
   ModalState,
@@ -29,7 +28,6 @@ const ensureDelay = (value?: number): number =>
  */
 export function useModal(): UseModalReturn {
   const [modalStacks, updateModalStack] = useAtom(modalStackAtom);
-  const [closeFlag, setCloseFlag] = useState<CloseFlagState | null>(null);
 
   const newModal = useCallback(
     <FormContext extends FieldValues>(newStack: ModalState<FormContext>) => {
@@ -89,16 +87,25 @@ export function useModal(): UseModalReturn {
 
   const closeModal = useCallback(
     ({ stackKey, callback }: ModalCloseRequest) => {
-      let resolvedDelay = DEFAULT_CLOSE_DELAY;
-      let hasTarget = false;
+      const targetStack = modalStacks.find(
+        stack => stack.stackKey === stackKey,
+      );
+
+      if (!targetStack) {
+        console.warn(
+          `[useModal] stack "${stackKey}" not found; close skipped.`,
+        );
+        return;
+      }
+
+      const resolvedDelay = ensureDelay(targetStack.modalProps.showDelay);
 
+      // 변경 설명: updater 내부 side-effect 의존을 제거하고, 현재 스택 스냅샷 기준으로 close 타이머를 확정한다.
       updateModalStack((stacks: ModalState[]) =>
         stacks.map(stack => {
           if (stack.stackKey !== stackKey) {
             return stack;
           }
-          hasTarget = true;
-          resolvedDelay = ensureDelay(stack.modalProps.showDelay);
           return {
             ...stack,
             modalProps: { ...stack.modalProps, show: false },
@@ -106,33 +113,16 @@ export function useModal(): UseModalReturn {
         }),
       );
 
-      if (!hasTarget) {
-        console.warn(
-          `[useModal] stack "${stackKey}" not found; close skipped.`,
+      // 변경 설명: close 예약 상태를 훅 local state로 두지 않고 즉시 타이머를 등록해 호출 경로별 제거 동작을 동일화한다.
+      setTimeout(() => {
+        updateModalStack((stacks: ModalState[]) =>
+          stacks.filter(stack => stack.stackKey !== stackKey),
         );
-        return;
-      }
-
-      setCloseFlag({ stackKey, showDelay: resolvedDelay, callback });
+        callback?.();
+      }, resolvedDelay);
     },
-    [updateModalStack],
+    [modalStacks, updateModalStack],
   );
 
-  useEffect(() => {
-    if (!closeFlag) {
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      updateModalStack((stacks: ModalState[]) =>
-        stacks.filter(stack => stack.stackKey !== closeFlag.stackKey),
-      );
-      closeFlag.callback?.();
-      setCloseFlag(null);
-    }, closeFlag.showDelay);
-
-    return () => clearTimeout(timer);
-  }, [closeFlag, updateModalStack]);
-
   return { modalStacks, newModal, updateModal, closeModal };
 }

package/src/modal/img/close.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1264 3.37588C15.5169 2.9854 16.1503 2.98537 16.5408 3.37588C16.9312 3.7664 16.9312 4.39976 16.5408 4.79027L11.3723 9.95791L16.5408 15.1264C16.931 15.5169 16.9304 16.1495 16.54 16.5399C16.1495 16.9304 15.5169 16.931 15.1264 16.5408L9.95793 11.3723L4.79029 16.5408C4.39974 16.931 3.76634 16.9304 3.3759 16.5399C2.9858 16.1495 2.98574 15.5168 3.3759 15.1264L8.54354 9.95791L3.3759 4.79027C2.98538 4.39974 2.98538 3.7664 3.3759 3.37588C3.76643 2.9854 4.39978 2.98537 4.79029 3.37588L9.95793 8.54352L15.1264 3.37588Z" fill="#94989E"/>
+</svg>

package/src/modal/styles/base.scss

@@ -21,6 +21,7 @@
   --modal-dialog-title-weight: var(--font-heading-small-weight);
   --modal-dialog-body-color: var(--color-label-standard);
   --modal-dialog-body-font-size: var(--font-body-medium-size);
+  --modal-dialog-body-padding: var(--spacing-padding-7) var(--spacing-padding-8);
 }
 
 .uds-modal-root {

package/src/modal/styles/container.scss

@@ -9,6 +9,9 @@
   padding: 0;
   margin: 0;
 }
+.uds-modal-header-close-button {
+  font-size: 0;
+}
 
 .uds-modal-footer {
   padding: 0;
@@ -19,17 +22,17 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: var(--spacing-padding-6, 16px);
-  gap: var(--spacing-gap-4, 16px);
+  padding: 0 var(--spacing-padding-8) var(--spacing-padding-7);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
-  row-gap: var(--spacing-gap-4, 16px);
+  row-gap: var(--spacing-gap-4);
 }
 
 .uds-modal-footer-group {
   display: flex;
   flex: 1 1 0;
   flex-wrap: nowrap;
-  gap: var(--spacing-gap-4, 16px);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
 
   &[data-position="left"] {
@@ -138,18 +141,18 @@
 }
 
 .uds-modal-dialog-header-content {
-  padding: var(--spacing-padding-9) var(--spacing-padding-6) 0;
+  padding: var(--spacing-padding-9) var(--spacing-padding-8) 0;
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-gap-3, 12px);
+  gap: var(--spacing-gap-3);
 }
 
 .uds-modal-dialog-header-row-split {
@@ -159,14 +162,14 @@
 .uds-modal-dialog-header-leading {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   justify-content: center;
 }
 
 .uds-modal-dialog-header-leading-content {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--spacing-gap-1);
 
   // 변경: header leading slot은 class 없는 직계 텍스트만 기본 타이포를 적용한다.
   > :where(p, span, strong, em):not([class]) {
@@ -195,7 +198,7 @@
 .uds-modal-dialog-header-trailing {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-description {
@@ -208,7 +211,7 @@
     color: var(--modal-dialog-body-color);
     font-size: var(--modal-dialog-body-font-size);
     line-height: 1.5em;
-    font-weight: var(--font-body-small-weight, 400);
+    font-weight: var(--font-body-small-weight);
   }
 }
 
@@ -225,10 +228,7 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(
-    --modal-dialog-body-padding,
-    var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px)
-  );
+  padding: var(--modal-dialog-body-padding,);
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);
@@ -239,11 +239,11 @@
     margin: 0;
     font-size: var(--modal-dialog-body-font-size);
     line-height: 1.5em;
-    font-weight: var(--font-body-small-weight, 400);
+    font-weight: var(--font-body-small-weight);
     word-break: inherit;
   }
 
   > * + * {
-    margin-top: var(--spacing-gap-2, 8px);
+    margin-top: var(--spacing-gap-2);
   }
 }