@uniai-fe/uds-templates 0.6.30 → 0.7.0

package/dist/styles.css

@@ -958,8 +958,12 @@
   gap: var(--spacing-padding-5);
 }
 
+.auth-login-keep-login {
+  align-self: flex-start;
+}
+
 .auth-login-util-container {
-  margin-top: 80px;
+  margin-top: var(--spacing-padding-10);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-padding-8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.30",
+  "version": "0.7.0",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -52,13 +52,13 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5",
-    "@uniai-fe/uds-foundation": "^0.4.2",
-    "@uniai-fe/uds-primitives": "^0.6.2",
-    "@uniai-fe/util-api": "^0.1.0",
-    "@uniai-fe/util-functions": "^0.2.3",
-    "@uniai-fe/util-jotai": "^0.1.5",
-    "@uniai-fe/util-next": "^0.2.0",
-    "@uniai-fe/util-rtc": "^0.1.0",
+    "@uniai-fe/uds-foundation": "^0.4.8",
+    "@uniai-fe/uds-primitives": "^0.8.0",
+    "@uniai-fe/util-api": "^0.1.15",
+    "@uniai-fe/util-functions": "^0.3.0",
+    "@uniai-fe/util-jotai": "^0.1.9",
+    "@uniai-fe/util-next": "^0.3.0",
+    "@uniai-fe/util-rtc": "^0.1.4",
     "jotai": "^2",
     "next": "^15",
     "react": "^19",

package/src/auth/common/auth-code/types/index.ts

@@ -107,5 +107,4 @@ export interface AuthPhoneAuthCodeTemplateProps {
 }
 
 export type AuthAuthCodeTemplateProps =
-  | AuthEmailAuthCodeTemplateProps
-  | AuthPhoneAuthCodeTemplateProps;
+  AuthEmailAuthCodeTemplateProps | AuthPhoneAuthCodeTemplateProps;

package/src/auth/login/hooks/useAuthLoginForm.ts

@@ -84,6 +84,7 @@ export function useAuthLoginForm({
         typeof passwordValue === "string"
           ? removeWhitespace(passwordValue)
           : "",
+      [fieldNames.keepLogin]: submittedValues[fieldNames.keepLogin] === true,
     };
     return onLogin(normalizedValues, event);
   });

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { useMemo } from "react";
-import { useForm } from "react-hook-form";
-import { Button } from "@uniai-fe/uds-primitives";
+import { useController, useForm } from "react-hook-form";
+import { Button, CheckboxField } from "@uniai-fe/uds-primitives";
 import type { FormEventHandler, SubmitEvent } from "react";
 import type { AuthLoginFieldOptions, AuthLoginFormValues } from "../types";
 import { useAuthLoginForm } from "../hooks";
@@ -23,6 +23,7 @@ import AuthLoginFormFieldPassword from "./Password";
 export default function AuthLoginFormField({
   idField,
   passwordField,
+  keepLoginField,
   texts,
   isSubmitting,
   formAttr,
@@ -31,16 +32,20 @@ export default function AuthLoginFormField({
   // RHF register 이름은 옵션 name이 있으면 그대로 사용하고, 없으면 key 기반으로 fallback한다.
   const idFieldName = idField?.name ?? "userId";
   const passwordFieldName = passwordField?.name ?? "userPassword";
+  const keepLoginFieldName = keepLoginField?.name ?? "keepLogin";
 
   // 1) RHF 기본값: 필드별 defaultValue가 있으면 채워 넣어 최초 렌더에서 바로 반영한다.
   const defaultValues = useMemo(
     () => ({
       [idFieldName]: idField?.defaultValue ?? "",
       [passwordFieldName]: passwordField?.defaultValue ?? "",
+      [keepLoginFieldName]: keepLoginField?.defaultChecked ?? false,
     }),
     [
       idField?.defaultValue,
       idFieldName,
+      keepLoginField?.defaultChecked,
+      keepLoginFieldName,
       passwordField?.defaultValue,
       passwordFieldName,
     ],
@@ -56,12 +61,18 @@ export default function AuthLoginFormField({
     fieldNames: {
       id: idFieldName,
       password: passwordFieldName,
+      keepLogin: keepLoginFieldName,
     },
     form,
     isSubmitting,
     onLogin,
   });
 
+  const { field: keepLoginController } = useController({
+    control: form.control,
+    name: keepLoginFieldName,
+  });
+
   const handleFormSubmit: FormEventHandler<HTMLFormElement> = event => {
     const nativeEvent =
       event.nativeEvent as unknown as SubmitEvent<HTMLFormElement>;
@@ -106,6 +117,9 @@ export default function AuthLoginFormField({
   const idLabel = idField?.label ?? texts?.idLabel ?? "아이디";
   const passwordLabel =
     passwordField?.label ?? texts?.passwordLabel ?? "비밀번호";
+  const keepLoginLabel =
+    keepLoginField?.label ?? texts?.keepLoginLabel ?? "자동 로그인";
+  const keepLoginHelper = keepLoginField?.helperText ?? texts?.keepLoginHelper;
   const isLoginSubmitting = Boolean(isSubmitting);
   // Button loading은 readonly/aria-busy 같은 상태 의미를 제공하지만, 라벨은 자동 변경하지 않는다.
   // pending 중에는 눈에 보이는 문구도 바꿔 사용자가 "요청 처리 중"임을 즉시 알 수 있게 한다.
@@ -124,6 +138,17 @@ export default function AuthLoginFormField({
     // disabled 대신 readOnly를 써서 제출 중 값 보존과 UI 잠금을 함께 맞춘다.
     readOnly: isLoginSubmitting || passwordField?.inputProps?.readOnly,
   };
+  const isKeepLoginDisabled =
+    isLoginSubmitting || Boolean(keepLoginField?.disabled);
+  const keepLoginCheckboxProps = { ...(keepLoginField ?? {}) };
+  const keepLoginFieldClassName = keepLoginCheckboxProps.fieldClassName;
+
+  delete keepLoginCheckboxProps.defaultChecked;
+  delete keepLoginCheckboxProps.disabled;
+  delete keepLoginCheckboxProps.fieldClassName;
+  delete keepLoginCheckboxProps.helperText;
+  delete keepLoginCheckboxProps.label;
+  delete keepLoginCheckboxProps.name;
 
   // aria-busy는 외부 로그인 요청 진행 상태만 전달한다.
   // 실제 사용자 피드백 modal/문구는 서비스 앱의 Modal.Alert/Dialog 흐름에서 처리한다.
@@ -163,6 +188,22 @@ export default function AuthLoginFormField({
           inputProps={passwordInputProps}
           templateProps={passwordField?.templateProps}
         />
+        <CheckboxField
+          {...keepLoginCheckboxProps}
+          ref={keepLoginController.ref}
+          name={keepLoginFieldName}
+          checked={keepLoginController.value === true}
+          disabled={isKeepLoginDisabled}
+          label={keepLoginLabel}
+          helperText={keepLoginHelper}
+          fieldClassName={["auth-login-keep-login", keepLoginFieldClassName]
+            .filter(Boolean)
+            .join(" ")}
+          onBlur={keepLoginController.onBlur}
+          onCheckedChange={checked => {
+            keepLoginController.onChange(checked === true);
+          }}
+        />
         <Button.Default
           type="submit"
           fill="solid"

package/src/auth/login/styles/login.scss

@@ -11,8 +11,12 @@
   gap: var(--spacing-padding-5);
 }
 
+.auth-login-keep-login {
+  align-self: flex-start;
+}
+
 .auth-login-util-container {
-  margin-top: 80px;
+  margin-top: var(--spacing-padding-10);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-padding-8);

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

@@ -5,6 +5,7 @@ import type { API_Res_Base } from "@uniai-fe/util-api";
  * @route /auth/user/login
  * @property {string} username - 사용자 ID
  * @property {string} password - 비밀번호
+ * @property {boolean} [keep_login] - 자동 로그인 유지 여부
  */
 export interface API_Req_Login {
   /**
@@ -15,6 +16,10 @@ export interface API_Req_Login {
    * 비밀번호
    */
   password: string;
+  /**
+   * 자동 로그인 유지 여부
+   */
+  keep_login?: boolean;
 }
 
 /**

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

@@ -10,9 +10,9 @@ import type { InputState } from "@uniai-fe/uds-primitives";
  * 로그인 폼 값 타입
  * @typedef {AuthLoginFormValues}
  * @desc
- * - 모든 로그인 필드 입력값을 문자열 레코드로 취급한다.
+ * - id/password는 문자열, keepLogin 같은 선택 필드는 boolean으로 취급한다.
  */
-export type AuthLoginFormValues = Record<string, string>;
+export type AuthLoginFormValues = Record<string, string | boolean>;
 
 /**
  * 로그인 훅 옵션; useAuthLoginForm 설정
@@ -20,8 +20,8 @@ export type AuthLoginFormValues = Record<string, string>;
  * @desc
  * - 필드 정의, useForm 반환 객체, 로그인 핸들러를 전달한다.
  * - 필드 타입은 제네릭으로 확장 가능하다.
- * @property {UseFormReturn<Record<string, string>>} form RHF useForm 반환 객체
- * @property {SubmitHandler<Record<string, string>>} onLogin 제출 콜백
+ * @property {UseFormReturn<AuthLoginFormValues>} form RHF useForm 반환 객체
+ * @property {SubmitHandler<AuthLoginFormValues>} onLogin 제출 콜백
  */
 export interface AuthLoginFieldNames {
   /**
@@ -32,6 +32,10 @@ export interface AuthLoginFieldNames {
    * 비밀번호 필드 name
    */
   password: string;
+  /**
+   * 자동 로그인 checkbox field name
+   */
+  keepLogin: string;
 }
 
 /**
@@ -69,7 +73,7 @@ export interface UseAuthLoginFormOptions {
  * @desc
  * - register/onSubmit/disabled/helpers 네 축만 노출한다.
  * - 필드는 제네릭 기반으로 key를 유지한다.
- * @property {Record<keyof TFields, UseFormRegisterReturn>} register 필드별 register 함수
+ * @property {{ id: UseFormRegisterReturn; password: UseFormRegisterReturn }} register 필드별 register 함수
  * @property {ReturnType<UseFormReturn["handleSubmit"]>} onSubmit 로그인 제출 핸들러
  * @property {boolean} disabled 버튼 disabled 여부
  * @property {Record<keyof TFields, { text?: string; state?: string }>} helpers 필드별 helper 상태

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

@@ -7,7 +7,9 @@ import type {
   InputState,
   InputPasswordProps,
   InputProps,
+  CheckboxFieldProps,
 } from "@uniai-fe/uds-primitives";
+import type { AuthLoginFormValues } from "./hooks";
 
 /**
  * Form.Field helper 상태 타입
@@ -216,12 +218,55 @@ export interface AuthLoginIdFieldOptions extends AuthLoginFieldProps<InputProps>
  */
 export interface AuthLoginPasswordFieldOptions extends AuthLoginFieldProps<InputPasswordProps> {}
 
+/**
+ * 자동 로그인 checkbox 필드 옵션
+ * @extends Omit<CheckboxFieldProps, "checked" | "defaultChecked" | "onCheckedChange" | "label" | "helperText" | "disabled" | "name">
+ * @property {string} [name] RHF checkbox field name
+ * @property {ReactNode} [label] checkbox label
+ * @property {ReactNode} [helperText] checkbox helper text
+ * @property {boolean} [defaultChecked=false] 최초 checked 여부
+ * @property {boolean} [disabled] checkbox disabled 여부
+ */
+export interface AuthLoginKeepLoginFieldOptions extends Omit<
+  CheckboxFieldProps,
+  | "checked"
+  | "defaultChecked"
+  | "onCheckedChange"
+  | "label"
+  | "helperText"
+  | "disabled"
+  | "name"
+> {
+  /**
+   * RHF checkbox field name
+   */
+  name?: string;
+  /**
+   * checkbox label
+   */
+  label?: ReactNode;
+  /**
+   * checkbox helper text
+   */
+  helperText?: ReactNode;
+  /**
+   * 최초 checked 여부
+   */
+  defaultChecked?: boolean;
+  /**
+   * checkbox disabled 여부
+   */
+  disabled?: boolean;
+}
+
 /**
  * 로그인 필드 문구 옵션
  * @property {ReactNode} [idLabel] 아이디 필드 기본 라벨
  * @property {string} [idPlaceholder] 아이디 필드 기본 placeholder
  * @property {ReactNode} [passwordLabel] 비밀번호 필드 기본 라벨
  * @property {string} [passwordPlaceholder] 비밀번호 필드 기본 placeholder
+ * @property {ReactNode} [keepLoginLabel] 자동 로그인 checkbox 기본 라벨
+ * @property {ReactNode} [keepLoginHelper] 자동 로그인 checkbox helper
  * @property {ReactNode} [submit] submit 버튼 라벨
  * @property {ReactNode} [submitting] 로그인 요청 pending 중 submit 버튼 라벨
  */
@@ -242,6 +287,14 @@ export interface AuthLoginFieldTexts {
    * 비밀번호 필드 기본 placeholder
    */
   passwordPlaceholder?: string;
+  /**
+   * 자동 로그인 checkbox 기본 라벨
+   */
+  keepLoginLabel?: ReactNode;
+  /**
+   * 자동 로그인 checkbox helper
+   */
+  keepLoginHelper?: ReactNode;
   /**
    * submit 버튼 라벨
    */
@@ -285,10 +338,11 @@ export interface AuthLoginTexts
  * 로그인 필드 옵션; form attr + 제출 핸들러 포함
  * @property {AuthLoginIdFieldOptions} [idField] 로그인 아이디 필드 옵션
  * @property {AuthLoginPasswordFieldOptions} [passwordField] 로그인 비밀번호 필드 옵션
+ * @property {AuthLoginKeepLoginFieldOptions} [keepLoginField] 자동 로그인 checkbox 필드 옵션
  * @property {AuthLoginFieldTexts} [texts] 로그인 form 기본 문구 옵션
  * @property {boolean} [isSubmitting] 외부 로그인 요청 pending 여부
  * @property {React.FormHTMLAttributes<HTMLFormElement>} [formAttr] <form /> attributes
- * @property {SubmitHandler<Record<string, string>>} onLogin 로그인 콜백 이벤트
+ * @property {SubmitHandler<AuthLoginFormValues>} onLogin 로그인 콜백 이벤트
  */
 export interface AuthLoginFieldOptions {
   /**
@@ -299,6 +353,10 @@ export interface AuthLoginFieldOptions {
    * 비밀번호 필드 설정
    */
   passwordField?: AuthLoginPasswordFieldOptions;
+  /**
+   * 자동 로그인 checkbox 필드 설정
+   */
+  keepLoginField?: AuthLoginKeepLoginFieldOptions;
   /**
    * 로그인 form 기본 문구 옵션
    */
@@ -318,7 +376,7 @@ export interface AuthLoginFieldOptions {
   /**
    * 로그인 핸들러
    */
-  onLogin: SubmitHandler<Record<string, string>>;
+  onLogin: SubmitHandler<AuthLoginFormValues>;
 }
 
 /**

package/src/auth/signup/hooks/useSignupAccountForm.ts

@@ -32,8 +32,7 @@ export function useSignupAccountForm<
   passwordRules,
 }: UseSignupAccountFormOptions<TFields>): UseSignupAccountFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
-    | AuthSignupFormValues
-    | undefined;
+    AuthSignupFormValues | undefined;
 
   const passwordFieldName = useMemo(() => {
     const config = (fields as Partial<AuthSignupAccountFields>).password;
@@ -88,12 +87,10 @@ export function useSignupAccountForm<
 
   const passwordValue =
     (values?.[passwordFieldName as keyof AuthSignupFormValues] as
-      | string
-      | undefined) ?? "";
+      string | undefined) ?? "";
   const confirmPasswordValue =
     (values?.[confirmFieldName as keyof AuthSignupFormValues] as
-      | string
-      | undefined) ?? "";
+      string | undefined) ?? "";
 
   const normalizedPasswordRules: AuthPasswordRule[] =
     passwordRules && passwordRules.length > 0

package/src/auth/signup/hooks/useSignupFarmCodeForm.ts

@@ -29,8 +29,7 @@ export function useSignupFarmCodeForm<
   onSubmit,
 }: UseSignupFarmCodeFormOptions<TFields>): UseSignupFarmCodeFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
-    | AuthSignupFormValues
-    | undefined;
+    AuthSignupFormValues | undefined;
 
   const register = useMemo(() => {
     return (Object.keys(fields) as Array<keyof TFields>).reduce(

package/src/auth/signup/hooks/useSignupUserInfoForm.ts

@@ -33,8 +33,7 @@ export function useSignupUserInfoForm<
   activeFields,
 }: UseSignupUserInfoFormOptions<TFields>): UseSignupUserInfoFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
-    | AuthSignupFormValues
-    | undefined;
+    AuthSignupFormValues | undefined;
 
   const register = useMemo(() => {
     return (Object.keys(fields) as Array<keyof TFields>).reduce(

package/src/auth/signup/hooks/useSignupVerificationForm.ts

@@ -28,8 +28,7 @@ export function useSignupVerificationForm<
   onSubmit,
 }: UseSignupVerificationFormOptions<TFields>): UseSignupVerificationFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
-    | AuthSignupFormValues
-    | undefined;
+    AuthSignupFormValues | undefined;
 
   const register = useMemo(() => {
     return (Object.keys(fields) as Array<keyof TFields>).reduce(

package/src/auth/signup/markup/AccountForm.tsx

@@ -57,8 +57,8 @@ export function AuthSignupAccountForm({
     ("password" as keyof AuthSignupAccountValues);
   const confirmFieldName =
     (fields.confirmPassword.attr?.name as
-      | keyof AuthSignupAccountValues
-      | undefined) ?? ("confirmPassword" as keyof AuthSignupAccountValues);
+      keyof AuthSignupAccountValues | undefined) ??
+    ("confirmPassword" as keyof AuthSignupAccountValues);
 
   const resolvedPasswordRules =
     passwordRules && passwordRules.length > 0

package/src/cctv/utils/data.ts

@@ -25,15 +25,13 @@ export function initCompanyList({
           renderKey: companyRenderKey,
           group_code: group.group_code,
           selected: group_index === 0,
-          cam_list: d.cam_list.map(
-            (cam): CctvCompanyCameraList => ({
-              renderKey: `${companyRenderKey}/camera_${cam.cam_id}`,
-              ...cam,
-              company_id: d.company_id,
-              company_name: d.company_name,
-              selected: false,
-            }),
-          ),
+          cam_list: d.cam_list.map((cam): CctvCompanyCameraList => ({
+            renderKey: `${companyRenderKey}/camera_${cam.cam_id}`,
+            ...cam,
+            company_id: d.company_id,
+            company_name: d.company_name,
+            selected: false,
+          })),
         };
       }),
     };

package/src/service-inquiry/types/props.ts

@@ -10,10 +10,7 @@ import type {
  * Service Inquiry; 노출 필드 키
  */
 export type ServiceInquiryFieldKey =
-  | "farm_name"
-  | "contact"
-  | "inquiry_type"
-  | "text";
+  "farm_name" | "contact" | "inquiry_type" | "text";
 
 /**
  * Service Inquiry Form; field 입력 모드

package/src/weather/_legacy/types/korea.ts

@@ -219,10 +219,4 @@ export type KMA_Res_AlertLevel = "예비특보" | "주의보" | "경보";
  * @see https://apihub.kma.go.kr/static/html/attach/wrn_table.html
  */
 export type KMA_Res_AlertCommand =
-  | "발표"
-  | "대치"
-  | "해제"
-  | "대치해제"
-  | "연장"
-  | "변경"
-  | "변경해제";
+  "발표" | "대치" | "해제" | "대치해제" | "연장" | "변경" | "변경해제";