@uniai-fe/uds-templates 0.4.0 → 0.4.2

package/dist/styles.css

@@ -746,6 +746,46 @@
     transition: none;
   }
 }
+.auth-stage-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+  padding: 0 var(--spacing-padding-1, 4px);
+}
+
+.auth-stage-step {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.auth-stage-step-pagination {
+  --pagination-carousel-gap: 6px;
+}
+
+.auth-stage-headline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-1, 4px);
+}
+
+.auth-stage-headline-text {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  color: var(--color-label-standard);
+  font-family: "Pretendard JP Variable", "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.auth-stage-headline-description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--color-label-assistive);
+  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
 
 
 .auth-container {
@@ -826,6 +866,10 @@
   margin-top: var(--spacing-padding-4, 16px);
 }
 
+.auth-code-field {
+  margin-top: var(--spacing-gap-6);
+}
+
 .auth-login-form {
   display: flex;
   flex-direction: column;
@@ -1067,6 +1111,59 @@
   margin: 0;
 }
 
+.password-confirm-field {
+  margin-top: var(--spacing-gap-6);
+}
+
+.auth-password-helper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-3);
+  margin-top: var(--spacing-gap-2);
+}
+
+.auth-password-helper-column {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-gap-1);
+}
+
+.auth-set-password-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+}
+.auth-set-password-icon svg path {
+  fill: var(--color-label-assistive);
+}
+
+.auth-password-helper-text {
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+  color: var(--color-label-assistive);
+}
+
+.auth-password-helper-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+}
+.auth-password-helper-item[data-state=complete] .auth-password-helper-text {
+  color: var(--color-success);
+}
+.auth-password-helper-item[data-state=complete] .auth-set-password-icon svg path {
+  fill: var(--color-success);
+}
+.auth-password-helper-item[data-state=error] .auth-password-helper-text {
+  color: var(--color-error);
+}
+.auth-password-helper-item[data-state=error] .auth-set-password-icon svg path {
+  fill: var(--color-error);
+}
+
 .auth-signup-form {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.32.0",
+  "packageManager": "pnpm@10.33.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -66,11 +66,11 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19"
+    "dayjs": "^1.11.20"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query": "^5.95.2",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -86,11 +86,11 @@
     "@uniai-fe/util-next": "workspace:*",
     "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
-    "jotai": "^2.18.1",
+    "jotai": "^2.19.0",
     "next": "^15.5.11",
     "prettier": "^3.8.1",
-    "react-hook-form": "^7.71.2",
-    "sass": "^1.97.3",
+    "react-hook-form": "^7.72.0",
+    "sass": "^1.98.0",
     "typescript": "~5.9.3"
   }
 }

package/src/auth/common/container/index.scss

@@ -1,3 +1,5 @@
+@use "./header/stage-header.scss";
+
 :root {
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);

package/src/auth/common/container/index.tsx

@@ -1,5 +1,4 @@
 import "./index.scss";
-import "./header/stage-header.scss";
 
 export { AuthStageHeader } from "./header";
 export { AuthContainer } from "./AuthContainer";

package/src/auth/common/find/markup/InfoStep.tsx

@@ -91,7 +91,8 @@ export function AuthFindAccountInfoStep({
         <div className="auth-find-account-fields">
           <AuthFindAccountFieldBase
             className={clsx("auth-find-field-name", nameField.className)}
-            label="이름"
+            // 첫 번째 필드 라벨도 서비스 앱이 주입한 값을 우선 따르도록 preset 하드코딩을 제거한다.
+            label={nameField.label ?? "이름"}
             templateProps={nameField.templateProps}
             inputProps={{
               name: nameFieldName,

package/src/auth/find-id/markup/StepComplete.tsx

@@ -24,7 +24,7 @@ export default function FindIdStepComplete({
       title={title ?? "아이디 찾기 완료"}
       description={description ?? "로그인 페이지로 이동하여 로그인합니다."}
       cta={{
-        label: cta?.label ?? "로그인하기",
+        label: cta?.label ?? "확인",
         buttonProps: cta?.buttonProps,
       }}
     >

package/src/auth/find-password/index.scss

@@ -1 +1,3 @@
 @use "../common/find/styles/find-account.scss";
+// StepReset password helper는 외부 앱의 `@uniai-fe/uds-templates/css` 엔트리에도 포함돼야 한다.
+@use "../common/password/styles/set-password.scss";

package/src/auth/find-password/markup/StepComplete.tsx

@@ -20,7 +20,7 @@ export default function FindPasswordStepComplete({
       title={title ?? "비밀번호 변경 완료"}
       description={description ?? "로그인 페이지로 이동하여 로그인해 주세요."}
       cta={{
-        label: cta?.label ?? "로그인하기",
+        label: cta?.label ?? "확인",
         buttonProps: cta?.buttonProps,
       }}
     />

package/src/auth/index.scss

@@ -0,0 +1,7 @@
+@use "./common/container/index.scss" as authCommonContainer;
+@use "./common/complete/index.scss" as authCommonComplete;
+@use "./common/auth-code/styles/index.scss" as authCommonAuthCode;
+@use "./login/index.scss" as authLogin;
+@use "./find-id/index.scss" as authFindId;
+@use "./find-password/index.scss" as authFindPassword;
+@use "./signup/styles/signup.scss" as authSignup;

package/src/auth/index.tsx

@@ -1,4 +1,4 @@
-import "./login/index.scss";
+import "./index.scss";
 
 import {
   AuthContainer,

package/src/auth/login/markup/FormField.tsx

@@ -81,7 +81,10 @@ export default function AuthLoginFormField({
           register={register.id}
           helper={idHelper}
           label={idField?.label ?? "아이디"}
-          placeholder={idField?.placeholder ?? "아이디를 입력해 주세요"}
+          placeholder={
+            idField?.placeholder ??
+            `${idField?.label ?? "아이디"}를 입력해 주세요`
+          }
           inputProps={idField?.inputProps}
           templateProps={idField?.templateProps}
         />

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

@@ -51,6 +51,58 @@ export interface API_Res_LoginUserFarm {
   user_access_role: string;
 }
 
+/**
+ * 로그인 API; 응답 - 소속 부서 정보
+ * @route /auth/user/login
+ * @property {number} org_id 소속 조직 인덱스
+ * @property {string} org_name 소속 조직명
+ * @property {string} org_type 소속 조직 유형 코드
+ * @property {number} parent_org_id 상위 조직 인덱스
+ * @property {string} parent_org_name 상위 조직명
+ * @property {number} root_org_id 최상위 조직 인덱스
+ * @property {string} root_org_name 최상위 조직명
+ * @property {number} position_id 직책 인덱스
+ * @property {string} position_name 직책명
+ */
+export interface API_Res_LoginUserAuth {
+  /**
+   * 소속 조직 인덱스
+   */
+  org_id: number;
+  /**
+   * 소속 조직명
+   */
+  org_name: string;
+  /**
+   * 소속 조직 유형 코드
+   */
+  org_type: string;
+  /**
+   * 상위 조직 인덱스
+   */
+  parent_org_id: number;
+  /**
+   * 상위 조직명
+   */
+  parent_org_name: string;
+  /**
+   * 최상위 조직 인덱스
+   */
+  root_org_id: number;
+  /**
+   * 최상위 조직명
+   */
+  root_org_name: string;
+  /**
+   * 직책 인덱스
+   */
+  position_id: number;
+  /**
+   * 직책명
+   */
+  position_name: string;
+}
+
 /**
  * 로그인 API; 응답 - 유저 정보
  * @route /auth/user/login
@@ -120,6 +172,19 @@ export interface API_Res_LoginUserInfo {
    * @property {string} user_access_role 계정 권한/직책 코드 (OWNER: 농장주, EMPLOYEE: 농장직원, REGIONAL_MANAGER: 지역소장)
    */
   user_farms: API_Res_LoginUserFarm[];
+  /**
+   * (avic 전용) 소속부서 정보
+   * @property {number} org_id 소속 조직 인덱스
+   * @property {string} org_name 소속 조직명
+   * @property {string} org_type 소속 조직 유형 코드
+   * @property {number} parent_org_id 상위 조직 인덱스
+   * @property {string} parent_org_name 상위 조직명
+   * @property {number} root_org_id 최상위 조직 인덱스
+   * @property {string} root_org_name 최상위 조직명
+   * @property {number} position_id 직책 인덱스
+   * @property {string} position_name 직책명
+   */
+  avic_organizations: API_Res_LoginUserAuth[];
   /**
    * 가입일 (UTC)
    * - yyyy-MM-ddTHH:mm:ss

package/src/cctv/index.tsx

@@ -1,5 +1,3 @@
-import "./index.scss";
-
 /**
  * CCTV; viewer, cam-list, pagination, api/hook/jotai 도구를 함께 제공하는 엔트리
  */

package/src/index.scss

@@ -3,15 +3,9 @@
 
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
 /* namespace 충돌을 막기 위해 모든 @use 경로에 고유 alias를 부여한다. */
-@use "./page-frame/desktop/index.scss" as pageFrameDesktop;
-@use "./page-frame/mobile/index.scss" as pageFrameMobile;
+@use "./page-frame/index.scss" as pageFrameStyles;
 @use "./modal/index.scss" as modalStyles;
 
-@use "./auth/common/container/index.scss" as authCommonContainer;
-@use "./auth/common/complete/index.scss" as authCommonComplete;
-@use "./auth/login/index.scss" as authLogin;
-@use "./auth/find-id/index.scss" as authFindId;
-@use "./auth/find-password/index.scss" as authFindPassword;
-@use "./auth/signup/styles/signup.scss" as authSignup;
+@use "./auth/index.scss" as authStyles;
 @use "./weather/index.scss" as weatherStyles;
 @use "./cctv/index.scss" as cctvStyles;

package/src/index.tsx

@@ -1,3 +1,6 @@
+import "./modal/index.scss";
+import "./cctv/index.scss";
+
 export * from "./page-frame";
 export * from "./auth";
 export * from "./modal";

package/src/modal/index.tsx

@@ -1,5 +1,3 @@
-import "./index.scss";
-
 import { modalStackAtom } from "./jotai/atoms";
 import {
   ModalNamespace,

package/src/page-frame/desktop/components/header/util/setting/Button.tsx

@@ -64,8 +64,9 @@ export default function PageHeaderSettingButton({
   }, [menuItems]);
 
   const isMatchRouteGroup = useMemo(
-    () => pathname.startsWith(commonRoute),
-    [pathname, commonRoute],
+    // Storybook의 next/navigation mock에서는 pathname이 null일 수 있어 fallback 경로를 재사용한다.
+    () => resolvedPath.startsWith(commonRoute),
+    [resolvedPath, commonRoute],
   );
 
   const dropdownItems: DropdownTemplateItem[] = useMemo(

package/src/page-frame/desktop/index.tsx

@@ -1,5 +1,3 @@
-import "./index.scss";
-
 import Frame from "./components";
 
 /**

package/src/page-frame/index.scss

@@ -0,0 +1,2 @@
+@use "./desktop/index.scss" as pageFrameDesktop;
+@use "./mobile/index.scss" as pageFrameMobile;

package/src/page-frame/index.tsx

@@ -1,3 +1,5 @@
+import "./index.scss";
+
 import { DesktopFrame } from "./desktop";
 import { MobileFrame } from "./mobile";
 

package/src/page-frame/mobile/components/header/Header.tsx

@@ -2,7 +2,6 @@ import clsx from "clsx";
 import type { ReactNode } from "react";
 
 import IconBackward from "../../img/chevron-backward.svg";
-import "../../styles/header.scss";
 
 export interface MobileFrameHeaderProps {
   className?: string;

package/src/page-frame/mobile/components/header/index.ts

@@ -1,3 +1,5 @@
+// MobileFrameHeader direct barrel 소비에서도 header 스타일을 함께 로드한다.
+import "../../styles/header.scss";
 import { MobileFrameHeader } from "./Header";
 
 const Header = {

package/src/page-frame/mobile/index.tsx

@@ -1,5 +1,3 @@
-import "./index.scss";
-
 import { MobileFrame } from "./components/page/Frame";
 
 /**

package/src/weather/components/icon/Weather.tsx

@@ -1,8 +1,12 @@
+"use client";
+
 import Image from "next/image";
 import clsx from "clsx";
 
 import assetUrl from "../../../asset-url";
 
+// Storybook의 next/image mock과 동일한 client boundary에서 weather icon을 렌더한다.
+
 /**
  * 날씨; 아이콘
  * @desc

package/src/weather/index.tsx

@@ -1,5 +1,5 @@
-// Weather UI 컴포넌트 전용 스타일을 로드한다.
-import "./styles/weather.scss";
+// Weather 엔트리는 category stylesheet index만 통해 공용 스타일을 로드한다.
+import "./index.scss";
 
 /**
  * Weather; page-header 템플릿과 api/hook/jotai/mock 도구를 함께 제공하는 엔트리