@uniai-fe/uds-templates 0.1.19 → 0.1.21

package/dist/styles.css

@@ -19,7 +19,7 @@
   --modal-panel-width: 360px;
   --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
   --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
-  --modal-panel-bg: var(--color-bg-surface-static-white);
+  --modal-panel-bg: var(--color-surface-static-white);
   --modal-panel-radius: var(--theme-radius-large-1);
   --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
   --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
@@ -50,7 +50,7 @@
 /* namespace 충돌을 막기 위해 모든 @use 경로에 고유 alias를 부여한다. */
 
 
-.page-frame-container {
+.page-frame-mobile-shell {
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: min(100%, var(--uds-page-frame-max-width));
@@ -60,22 +60,22 @@
   color: inherit;
 }
 
-.page-frame-header,
-.page-frame-body,
-.page-frame-footer {
+.page-frame-mobile-shell-header,
+.page-frame-mobile-shell-body,
+.page-frame-mobile-shell-footer {
   width: 100%;
 }
 
-.page-frame-header {
+.page-frame-mobile-shell-header {
   padding-top: var(--uds-page-frame-header-padding-top);
 }
 
-.page-frame-body {
+.page-frame-mobile-shell-body {
   min-height: 0;
   overflow-y: auto;
 }
 
-.page-frame-footer {
+.page-frame-mobile-shell-footer {
   padding-bottom: var(--uds-page-frame-footer-safe-area);
 }
 
@@ -97,6 +97,55 @@
   background-color: inherit;
 }
 
+.page-frame-mobile-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-2, 8px);
+  min-height: 40px;
+}
+
+.page-frame-mobile-header__left,
+.page-frame-mobile-header__right {
+  width: 64px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.page-frame-mobile-header__back {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-padding-1, 4px);
+  padding: var(--spacing-padding-1, 4px);
+  font-size: 14px;
+  color: var(--color-label-standard);
+  cursor: pointer;
+}
+
+.page-frame-mobile-header__back-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.page-frame-mobile-header__back-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.page-frame-mobile-header__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-label-standard);
+}
+
 .page-frame-navigation {
   width: 100%;
 }
@@ -120,7 +169,7 @@
   width: 100%;
   max-width: min(var(--modal-panel-width, 360px), var(--modal-panel-max-width, calc(100vw - var(--spacing-padding-10, 32px) * 2)));
   max-height: var(--modal-panel-max-height, calc(100vh - var(--spacing-padding-10, 32px) * 2));
-  background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
+  background-color: var(--modal-panel-bg, var(--color-surface-static-white));
   border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
   box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
   pointer-events: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -48,11 +48,13 @@
     "design-templates:dev": "pnpm run dev"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5",
     "@uniai-fe/uds-foundation": "^0.1.0",
     "@uniai-fe/uds-primitives": "^0.1.0",
     "@uniai-fe/util-functions": "^0.2.0",
+    "@uniai-fe/util-jotai": "^0.1.5",
     "@uniai-fe/util-next": "^0.2.0",
-    "@tanstack/react-query": "^5",
+    "@uniai-fe/util-rtc": "^0.1.0",
     "jotai": "^2",
     "next": "^15",
     "react": "^19",
@@ -65,6 +67,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@tanstack/react-query": "^5.90.16",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
@@ -75,8 +78,9 @@
     "@uniai-fe/uds-foundation": "workspace:*",
     "@uniai-fe/uds-primitives": "workspace:*",
     "@uniai-fe/util-functions": "workspace:*",
+    "@uniai-fe/util-jotai": "workspace:*",
     "@uniai-fe/util-next": "workspace:*",
-    "@tanstack/react-query": "^5.90.16",
+    "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
     "jotai": "^2.16.1",
     "next": "^15.5.9",

package/src/auth/common/container/header/StageHeader.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
 import { PaginationCarousel } from "@uniai-fe/uds-primitives";
-import { PageFrameMobileHeader } from "../../../../page-frame/mobile/header";
+import { MobileFrameHeader } from "../../../../page-frame/mobile/components/header";
 
 import "./stage-header.scss";
 
@@ -35,7 +35,7 @@ export function AuthStageHeader({
 }: StageHeaderProps) {
   return (
     <div className={clsx("auth-stage-header", className)}>
-      <PageFrameMobileHeader
+      <MobileFrameHeader
         title={navigationTitle}
         backIcon={backIcon}
         onBack={onBack}

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

@@ -0,0 +1,13 @@
+import { jotaiStorage } from "@uniai-fe/util-jotai";
+import { atomWithStorage } from "jotai/utils";
+import type { API_Res_LoginData } from "../types";
+
+/**
+ * 로그인 사용자 정보 세션스토리지로 관리
+ * @state
+ */
+export const userDataAtom = atomWithStorage<API_Res_LoginData | null>(
+  "userData",
+  null,
+  jotaiStorage.session<API_Res_LoginData | null>(),
+);

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

@@ -0,0 +1,229 @@
+import type { API_Res_Base } from "../../../types/api";
+
+/**
+ * 로그인 API; 요청
+ * @route /auth/user/login
+ * @property {string} username - 사용자 ID
+ * @property {string} password - 비밀번호
+ */
+export interface API_Req_Login {
+  /**
+   * 사용자 ID
+   */
+  username: string;
+  /**
+   * 비밀번호
+   */
+  password: string;
+}
+
+/**
+ * 로그인 API; 응답 - 유저 정보
+ * @route /auth/user/login
+ * @property {number} id - 사용자 인덱스
+ * @property {string} username - 사용자 아이디
+ * @property {string} full_name - 사용자 이름
+ * @property {number} gender - 사용자 성별
+ * - 0: 남
+ * - 1: 여
+ * @property {string} birth_date - 사용자 생년월일
+ * - yyyy-MM-dd
+ * @property {string} email - 사용자 이메일
+ * @property {number | string} phone_number - 사용자 전화번호
+ * @property {string} joined_at - 가입일
+ * - yyyy-MM-ddTHH:mm:ss
+ * @property {string | null} closed_at - 사용자 탈퇴일
+ * @property {number} use_sms - SMS 수신 여부
+ * - 0: 수신 안함
+ * - 1: 수신
+ * @property {number} user_type - 사용자 유형
+ * - 0: 일반 사용자
+ * ...
+ * - 99: 관리자
+ */
+export interface API_Res_LoginUserInfo {
+  /**
+   * 사용자 인덱스
+   */
+  id: number;
+  /**
+   * 사용자 아이디
+   */
+  username: string;
+  /**
+   * 사용자 이름
+   */
+  full_name: string;
+  /**
+   * 사용자 성별
+   * - 0: 남
+   * - 1: 여
+   */
+  gender: number;
+  /**
+   * 사용자 생년월일
+   * - yyyy-MM-dd
+   */
+  birth_date: string;
+  /**
+   * 사용자 이메일
+   */
+  email: string;
+  /**
+   * 사용자 전화번호
+   */
+  phone_number: number | string;
+  /**
+   * 가입일
+   * - yyyy-MM-ddTHH:mm:ss
+   */
+  joined_at: string;
+  /**
+   * 사용자 탈퇴일
+   */
+  closed_at: string | null;
+  /**
+   * SMS 수신 여부
+   * - 0: 수신 안함
+   * - 1: 수신
+   */
+  use_sms: number;
+  /**
+   * 사용자 유형
+   * - 0: 일반 사용자
+   * ...
+   * - 99: 관리자
+   */
+  user_type: number;
+}
+
+/**
+ * 로그인 API; 응답 - 소속 그룹
+ * @route /auth/user/login
+ * @property {number} id - 그룹 인덱스
+ * @property {number} parent_id - 상위 그룹 인덱스
+ * @property {string} name - 그룹명
+ * @property {number} group_type - 그룹 유형
+ * - 0: 일반 그룹 (유니아이, 유통사 포함)
+ * - 1: 농장 그룹
+ * - 2: 기타 그룹
+ * @property {string} description - 그룹 설명
+ * @property {string} created_at - 그룹 생성일
+ * - yyyy-MM-ddTHH:mm:ss
+ */
+export interface API_Res_LoginGroup {
+  /**
+   * 그룹 인덱스
+   */
+  id: number;
+  /**
+   * 상위 그룹 인덱스
+   */
+  parent_id: number;
+  /**
+   * 그룹명
+   */
+  name: string;
+  /**
+   * 그룹 유형
+   * - 0: 일반 그룹 (유니아이, 유통사 포함)
+   * - 1: 농장 그룹
+   * - 2: 기타 그룹
+   */
+  group_type: number;
+  /**
+   * 그룹 설명
+   */
+  description: string;
+  /**
+   * 그룹 생성일
+   * - yyyy-MM-ddTHH:mm:ss
+   */
+  created_at: string;
+  flag: number;
+  status: number;
+}
+
+/**
+ * 로그인 API; 응답 - 역할 정보
+ * @route /auth/user/login
+ * @property {number} id - 역할 인덱스
+ * @property {string} name - 역할 이름
+ * @property {string} description - 역할 설명
+ * @property {number} create_userid - 역할을 생성한 사용자 ID
+ * @property {number} group_id - 역할이 속한 그룹 ID
+ * @property {string} created_at - 역할 생성일
+ * - yyyy-MM-ddTHH:mm:ss
+ * @property {Array<unknown>} rules - 역할 권한 목록
+ */
+export interface API_Res_LoginRole {
+  /**
+   * 역할 인덱스
+   */
+  id: number;
+  /**
+   * 역할 이름
+   */
+  name: string;
+  /**
+   * 역할 설명
+   */
+  description: string;
+  /**
+   * 역할을 생성한 사용자 ID
+   */
+  create_userid: number;
+  /**
+   * 역할이 속한 그룹 ID
+   */
+  group_id: number;
+  /**
+   * 역할 생성일
+   * - yyyy-MM-ddTHH:mm:ss
+   */
+  created_at: string;
+  rules: [];
+}
+
+/**
+ * 로그인 API; 응답 성공 데이터
+ * @route /auth/user/login
+ * @property {string} access_token - 엑세스 토큰
+ * @property {string} token_type - 엑세스 토큰 타입
+ * - bearer
+ * @property {number} expires_in - 토큰 유효기간
+ * - 초 단위
+ * @property {API_Res_LoginUserInfo} user_info - 로그인 유저 정보
+ * @property {API_Res_LoginGroup[]} groups - 소속 그룹 목록
+ * @property {API_Res_LoginGroup[]} ancestor_groups - 상위 그룹 목록
+ * @property {API_Res_LoginRole[]} roles - 역할 목록
+ */
+export interface API_Res_LoginData {
+  /**
+   * 엑세스 토큰
+   */
+  access_token: string;
+  /**
+   * 엑세스 토큰 타입
+   * - bearer
+   */
+  token_type: string;
+  /**
+   * 토큰 유효기간
+   * - 초 단위
+   */
+  expires_in: number;
+  /**
+   * 로그인 유저 정보
+   */
+  user_info: API_Res_LoginUserInfo;
+  groups: API_Res_LoginGroup[];
+  ancestor_groups: API_Res_LoginGroup[];
+  roles: API_Res_LoginRole[];
+}
+
+/**
+ * 로그인 API; 응답
+ * @route /auth/user/login
+ */
+export type API_Res_Login = API_Res_LoginData | API_Res_Base<null>;

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

@@ -0,0 +1 @@
+export type {};

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

@@ -0,0 +1,4 @@
+export type * from "./props";
+export type * from "./hooks";
+export type * from "./form";
+export type * from "./api";

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

@@ -16,7 +16,7 @@ import {
   EmailInput,
   type EmailInputProps,
 } from "@uniai-fe/uds-primitives";
-import type { FormEvent } from "react";
+import type { SubmitEvent } from "react";
 import type {
   AuthSignupAgreementOption,
   AuthSignupVerificationProps,
@@ -234,7 +234,8 @@ export function AuthSignupVerificationForm({
   const ctaDisabled =
     disabled || Boolean(submitDisabled) || !resolvedVerificationReady;
 
-  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+  // React 19에서는 onSubmit이 SubmitEvent를 요구하므로 이벤트 타입을 맞춰준다.
+  const handleFormSubmit = (event: SubmitEvent<HTMLFormElement>) => {
     formAttr?.onSubmit?.(event);
     if (event.defaultPrevented) {
       return;

package/src/cctv/apis/client.ts

@@ -0,0 +1,61 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type {
+  API_Req_CctvRtcToken,
+  API_Res_CctvCompanyGroup,
+  API_Res_CctvRtcToken,
+} from "../types";
+import { getQueryString } from "@uniai-fe/util-functions";
+
+export const getCctvCompanyList = async ({
+  username,
+  url,
+}: {
+  username: string;
+  url?: string;
+}) =>
+  await (
+    await fetch(url ?? `/api/cctv/company-list${getQueryString(username)}`)
+  ).json();
+
+export const useQueryCctvCompanyList = ({
+  username,
+  url,
+}: {
+  username: string;
+  url?: string;
+}): UseQueryResult<{ data: API_Res_CctvCompanyGroup[]; total_count: number }> =>
+  useQuery({
+    queryKey: ["cctv_company_list", username, url],
+    queryFn: () => getCctvCompanyList({ username, url }),
+    enabled: Boolean(username),
+  });
+
+export const postCctvRtcToken = async ({
+  company_id,
+  cam_id,
+  username,
+  url,
+}: API_Req_CctvRtcToken & { url?: string }): Promise<API_Res_CctvRtcToken> =>
+  await (
+    await fetch(url ?? `/api/cctv/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ companyId: company_id, camId: cam_id, username }),
+    })
+  ).json();
+
+export const useQueryCctvRtcToken = ({
+  company_id,
+  cam_id,
+  username,
+  url,
+}: API_Req_CctvRtcToken & {
+  url?: string;
+}): UseQueryResult<API_Res_CctvRtcToken> =>
+  useQuery({
+    queryKey: ["cctv_rtc_token", username, company_id, cam_id, url],
+    queryFn: () => postCctvRtcToken({ company_id, cam_id, username, url }),
+    enabled: Boolean(company_id && cam_id && username),
+  });

package/src/cctv/apis/index.ts

@@ -0,0 +1,2 @@
+export * from "./server";
+export * from "./client";

package/src/cctv/apis/server.ts

@@ -0,0 +1,188 @@
+import {
+  generateBackendQueryUrl_GET,
+  nextAPILog,
+} from "@uniai-fe/util-functions";
+import type {
+  API_Req_GetCompanyListParams,
+  API_Res_CctvCompanyGroup,
+} from "../types";
+
+export const GROUP_PRESET: API_Res_CctvCompanyGroup[] = [
+  {
+    group_code: "C",
+    group_name: "사육",
+    list: [], //meat,
+  },
+  {
+    group_code: "PS-Growing",
+    group_name: "종계(육성)",
+    list: [], //breeder,
+  },
+  {
+    group_code: "PS-Laying",
+    group_name: "종계(산란)",
+    list: [], //laying,
+  },
+  {
+    group_code: "GPS-Growing",
+    group_name: "원종계(육성)",
+    list: [], //breeder,
+  },
+  {
+    group_code: "GPS-Laying",
+    group_name: "원종계(산란)",
+    list: [], //laying,
+  },
+  {
+    group_code: "PS-Hatching",
+    group_name: "부화",
+    list: [], //hatchery,
+  },
+  {
+    group_code: "FeedFactory",
+    group_name: "사료공장",
+    list: [], //feedFactory,
+  },
+];
+
+export function getMatchedGroupList(
+  data: API_Res_CctvCompanyGroup[] = [],
+  { code, method }: { code: string; method: string },
+) {
+  if (typeof data === "undefined" || !Array.isArray(data)) return [];
+  return data
+    .filter(g => {
+      const groupCode = g.group_code;
+      if (!method || method === "includes") return groupCode.includes(code);
+      if (method === "startsWith") return groupCode.startsWith(code);
+      if (method === "endsWith") return groupCode.endsWith(code);
+      return groupCode === code;
+    })
+    .flatMap(g => g.list);
+}
+
+export function classifyGroups(
+  data: API_Res_CctvCompanyGroup[] = [],
+): API_Res_CctvCompanyGroup[] {
+  // 사육(육계)
+  const meatGroupList = getMatchedGroupList(data, {
+    code: "C-Growing",
+    method: "startsWith",
+  });
+  // 종계 - 육성
+  const PS_breederGroupList = getMatchedGroupList(data, {
+    code: "PS-Growing",
+    method: "startsWith",
+  });
+  // 종계 - 산란
+  const PS_layingGroupList = getMatchedGroupList(data, {
+    code: "PS-Laying",
+    method: "startsWith",
+  });
+  // 원종계 - 육성
+  const GPS_breederGroupList = getMatchedGroupList(data, {
+    code: "GPS-Growing",
+    method: "startsWith",
+  });
+  // 원종계 - 산란
+  const GPS_layingGroupList = getMatchedGroupList(data, {
+    code: "GPS-Laying",
+    method: "startsWith",
+  });
+  // 부화
+  const hatcheryGroupList = getMatchedGroupList(data, {
+    code: "Hatching",
+    method: "includes",
+  });
+  // 사료공장
+  const feedFactoryGroupList = getMatchedGroupList(data, {
+    code: "FeedFactory",
+    method: "includes",
+  });
+
+  const res = GROUP_PRESET.map(g => {
+    switch (g.group_code) {
+      case "C":
+        return { ...g, list: meatGroupList };
+      case "PS-Growing":
+        return { ...g, list: PS_breederGroupList };
+      case "PS-Laying":
+        return { ...g, list: PS_layingGroupList };
+      case "GPS-Growing":
+        return { ...g, list: GPS_breederGroupList };
+      case "GPS-Laying":
+        return { ...g, list: GPS_layingGroupList };
+      case "PS-Hatching":
+        return { ...g, list: hatcheryGroupList };
+      case "FeedFactory":
+        return { ...g, list: feedFactoryGroupList };
+      default:
+        return { ...g, list: [] };
+    }
+  });
+
+  return res;
+}
+
+/**
+ * CCTV; API route.ts 로직
+ * @api
+ * @route /v1/users/{username}/cctvs
+ * @param {API_Req_GetCompanyListParams} params
+ * @property {string} domain API 요청 도메인(서버)
+ * @property {string} routeUrl Next.js app/api 이하 경로 url
+ * @property {string} [queryUrl] 백엔드 요청 url
+ * @property {URLSearchParams | object} searchParams 요청 searchParams
+ */
+export async function getCompanyList({
+  domain,
+  routeUrl,
+  queryUrl,
+  searchParams,
+}: API_Req_GetCompanyListParams): Promise<{
+  res: API_Res_CctvCompanyGroup[];
+  domain: string;
+  queryUrl: string;
+  options?: ResponseInit;
+}> {
+  const username = searchParams.get("username") || "";
+  const query_url = queryUrl || `/v1/users/${username}/cctvs`;
+
+  const API_OPTION = {
+    domain,
+    queryUrl: query_url,
+    // searchParams,
+  };
+
+  if (!queryUrl && !username)
+    return {
+      res: [],
+      ...API_OPTION,
+      options: { status: 400, statusText: "유저 아이디를 확인할 수 없습니다." },
+    };
+
+  // 요청 URL 구성
+  const url = generateBackendQueryUrl_GET({
+    routeUrl,
+    ...API_OPTION,
+  });
+
+  try {
+    const originRes: { data: API_Res_CctvCompanyGroup[] } = await (
+      await fetch(url)
+    ).json();
+
+    // 응답 그룹/농장
+    const resGroups = originRes?.data || [];
+    const res = classifyGroups(resGroups);
+
+    return { res, ...API_OPTION };
+  } catch (err) {
+    nextAPILog("GET", routeUrl, url, { err });
+    return {
+      res: [],
+      ...API_OPTION,
+      options: { status: 500 },
+    };
+  }
+}