@uniai-fe/uds-templates 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@tanstack/react-query": ">=5 <6",
     "@uniai-fe/uds-foundation": "^0.4.8 || ^0.5.0",
-    "@uniai-fe/uds-primitives": "^0.8.0 || ^0.9.0",
+    "@uniai-fe/uds-primitives": "^0.8.0 || ^0.9.0 || ^0.10.0",
     "@uniai-fe/util-api": "^0.1.15 || ^0.2.0",
     "@uniai-fe/util-functions": "^0.3.0 || ^0.4.0",
     "@uniai-fe/util-jotai": "^0.1.9 || ^0.2.0 || ^0.3.0",
@@ -67,15 +67,15 @@
     "react-hook-form": "^7.80.0",
     "sass": "^1.101.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.3.0",
-    "@uniai-fe/react-hooks": "0.2.0",
+    "@uniai-fe/eslint-config": "0.4.0",
     "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.5.0",
-    "@uniai-fe/uds-primitives": "0.9.3",
-    "@uniai-fe/util-api": "0.2.1",
+    "@uniai-fe/react-hooks": "0.3.0",
+    "@uniai-fe/uds-primitives": "0.10.0",
     "@uniai-fe/util-functions": "0.4.1",
+    "@uniai-fe/uds-foundation": "0.5.0",
     "@uniai-fe/util-jotai": "0.3.0",
+    "@uniai-fe/util-api": "0.2.1",
     "@uniai-fe/util-next": "0.5.0",
     "@uniai-fe/util-rtc": "0.2.0"
   },

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

@@ -3,7 +3,7 @@
 import clsx from "clsx";
 import { useEffect } from "react";
 import type { SubmitEvent } from "react";
-import { useFormContext } from "react-hook-form";
+import { useFormContext, useWatch } from "react-hook-form";
 import { AuthContainer } from "../../container";
 import { Button, type ButtonProps } from "@uniai-fe/uds-primitives";
 import type { AuthCodeInputProps } from "@uniai-fe/uds-primitives";
@@ -56,7 +56,11 @@ export function AuthFindAccountCodeStep({
     form.register(codeFieldName);
   }, [form, codeFieldName]);
 
-  const codeValue = form.watch(codeFieldName) ?? "";
+  const codeValue =
+    useWatch({
+      control: form.control,
+      name: codeFieldName,
+    }) ?? "";
 
   const handleCodeValueChange = (nextValue: string) => {
     const digits = sanitizeDigits(nextValue);
@@ -88,13 +92,11 @@ export function AuthFindAccountCodeStep({
     ) : undefined);
 
   const { onSubmit: formAttrOnSubmit, ...restFormAttr } = formAttr ?? {};
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    const nativeSubmitEvent =
-      event.nativeEvent as unknown as SubmitEvent<HTMLFormElement>;
-    formAttrOnSubmit?.(nativeSubmitEvent);
+  const handleFormSubmit = (event: SubmitEvent<HTMLFormElement>) => {
+    formAttrOnSubmit?.(event);
     if (event.defaultPrevented) return;
     event.preventDefault();
-    form.handleSubmit(onSubmit)(nativeSubmitEvent);
+    form.handleSubmit(onSubmit)(event);
   };
 
   const emailTemplateProps = {

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

@@ -62,16 +62,14 @@ export function AuthFindAccountInfoStep({
       <FindAccountHeader navigation={navigation} headline={headline} />
     ) : undefined);
 
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    const nativeEvent =
-      event.nativeEvent as unknown as SubmitEvent<HTMLFormElement>;
-    formAttr?.onSubmit?.(nativeEvent);
-    if (nativeEvent.defaultPrevented) {
+  const handleFormSubmit = (event: SubmitEvent<HTMLFormElement>) => {
+    formAttr?.onSubmit?.(event);
+    if (event.defaultPrevented) {
       event.preventDefault();
       return;
     }
     event.preventDefault();
-    form.handleSubmit(onSubmit)(nativeEvent);
+    form.handleSubmit(onSubmit)(event);
   };
 
   return (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { AuthContainer } from "../../common/container";
 import { AuthStageHeader } from "../../common/container/header";
 import { Button } from "@uniai-fe/uds-primitives";
@@ -43,7 +43,14 @@ export default function FindPasswordStepReset({
     defaultValues,
   });
 
-  const watchedValues = form.watch();
+  const [passwordValue, confirmValue] = useWatch({
+    control: form.control,
+    name: [passwordFieldName, confirmFieldName],
+  });
+  const watchedValues: FindAccountPasswordValues = {
+    [passwordFieldName]: passwordValue ?? "",
+    [confirmFieldName]: confirmValue ?? "",
+  };
   const resolvedFilled = isSubmittable
     ? isSubmittable(watchedValues)
     : Object.values(watchedValues).every(value =>

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

@@ -3,7 +3,7 @@
 import { useMemo } from "react";
 import { useController, useForm } from "react-hook-form";
 import { Button, CheckboxField } from "@uniai-fe/uds-primitives";
-import type { FormEventHandler, SubmitEvent } from "react";
+import type { SubmitEventHandler } from "react";
 import type { AuthLoginFieldOptions, AuthLoginFormValues } from "../types";
 import { useAuthLoginForm } from "../hooks";
 import AuthLoginFormFieldId from "./UserId";
@@ -68,19 +68,23 @@ export default function AuthLoginFormField({
     onLogin,
   });
 
-  const { field: keepLoginController } = useController({
+  const {
+    field: {
+      onBlur: onKeepLoginBlur,
+      onChange: onKeepLoginChange,
+      ref: keepLoginRef,
+      value: keepLoginValue,
+    },
+  } = useController({
     control: form.control,
     name: keepLoginFieldName,
   });
 
-  const handleFormSubmit: FormEventHandler<HTMLFormElement> = event => {
-    const nativeEvent =
-      event.nativeEvent as unknown as SubmitEvent<HTMLFormElement>;
-
+  const handleFormSubmit: SubmitEventHandler<HTMLFormElement> = event => {
     // 소비 앱이 formAttr.onSubmit에서 analytics, validation bridge, custom preventDefault 등을
     // 처리할 수 있으므로 템플릿 guard보다 먼저 실행한다.
-    formAttr?.onSubmit?.(nativeEvent);
-    if (event.defaultPrevented || nativeEvent.defaultPrevented) {
+    formAttr?.onSubmit?.(event);
+    if (event.defaultPrevented) {
       event.preventDefault();
       return;
     }
@@ -190,18 +194,18 @@ export default function AuthLoginFormField({
         />
         <CheckboxField
           {...keepLoginCheckboxProps}
-          ref={keepLoginController.ref}
+          ref={keepLoginRef}
           name={keepLoginFieldName}
-          checked={keepLoginController.value === true}
+          checked={keepLoginValue === true}
           disabled={isKeepLoginDisabled}
           label={keepLoginLabel}
           helperText={keepLoginHelper}
           fieldClassName={["auth-login-keep-login", keepLoginFieldClassName]
             .filter(Boolean)
             .join(" ")}
-          onBlur={keepLoginController.onBlur}
+          onBlur={onKeepLoginBlur}
           onCheckedChange={checked => {
-            keepLoginController.onChange(checked === true);
+            onKeepLoginChange(checked === true);
           }}
         />
         <Button.Default

package/src/cctv/hooks/streamScheduler.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useSyncExternalStore } from "react";
 import type {
   CctvRtcStreamOptions,
   CctvRtcStreamScheduleStatus,
@@ -244,31 +244,26 @@ export function useCctvRtcStreamScheduleStatus({
    */
   scheduler: CctvRtcStreamScheduler;
 }): CctvRtcStreamScheduleStatus {
-  const [status, setStatus] = useState<CctvRtcStreamScheduleStatus>("idle");
+  const getSnapshot = useCallback(
+    (): CctvRtcStreamScheduleStatus =>
+      enabled && identityKey ? scheduler.getStatus(identityKey) : "idle",
+    [enabled, identityKey, scheduler],
+  );
+  const status = useSyncExternalStore(
+    scheduler.subscribe,
+    getSnapshot,
+    getSnapshot,
+  );
 
   useEffect(() => {
     // 필수 identity가 없거나 offline이면 scheduler에 등록하지 않고 idle로 되돌린다.
     if (!enabled || !identityKey) {
-      setStatus("idle");
       return;
     }
-
-    // scheduler mutable state를 React state로 복사해 render가 status 변화를 감지하게 한다.
-    const syncStatus = () => {
-      setStatus(scheduler.getStatus(identityKey));
-    };
-
-    // subscribe 이후 request해야 request 직후 notify도 놓치지 않는다.
-    const unsubscribe = scheduler.subscribe(syncStatus);
     const release = scheduler.request(identityKey);
 
-    // request 직후 현재 상태를 즉시 반영해 queued/granted 표시 지연을 줄인다.
-    syncStatus();
-
     return () => {
-      // cleanup 순서는 scheduler reference release 후 listener 제거로 둬 release notify를 받을 수 있게 한다.
       release();
-      unsubscribe();
     };
   }, [enabled, identityKey, scheduler]);
 

package/src/cctv/hooks/useRtcStream.ts

@@ -1,7 +1,14 @@
 "use client";
 
 // React 훅들을 활용해 WebRTC 스트림 라이프사이클을 제어한다.
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useSetAtom } from "jotai";
 
 // 토큰 발급 쿼리와 API URL 컨텍스트 훅, 타입, react-hook-form 유틸.
@@ -193,11 +200,8 @@ export function useCctvRtcStream({
   // live registry는 여러 hook instance가 같은 cam의 live 상태를 공유하는 Jotai atom이다.
   const setLiveRegistry = useSetAtom(cctvRtcLiveRegistryAtom);
 
-  // 같은 cam을 여러 위치에서 렌더할 수 있어 hook instance별 key를 한 번만 만든다.
-  const instanceKeyRef = useRef<string | null>(null);
-  if (!instanceKeyRef.current) {
-    instanceKeyRef.current = Math.random().toString(36).slice(2);
-  }
+  // 같은 cam을 여러 위치에서 렌더할 수 있어 hook instance별 stable key를 사용한다.
+  const instanceKey = useId();
 
   // WebRTC MediaStream을 연결할 video 요소 ref.
   const videoRef = useRef<HTMLVideoElement | null>(null);
@@ -215,17 +219,17 @@ export function useCctvRtcStream({
   const staleTokenRefreshKeyRef = useRef<string | null>(null);
 
   // RTCPeerConnectionState를 관찰해 UI에 노출하기 위한 상태값.
-  const [connectionState, setConnectionState] =
+  const [connectionStateValue, setConnectionState] =
     useState<RTCPeerConnectionState>("new");
 
   // 스트림 시도 중 발생한 오류 메시지를 저장한다.
-  const [streamError, setStreamError] = useState<string | null>(null);
+  const [streamErrorValue, setStreamError] = useState<string | null>(null);
 
   // 현재 스트림 연결 절차가 진행 중인지 여부.
-  const [isStreaming, setStreaming] = useState(false);
-  const [hasConnected, setHasConnected] = useState(false);
-  const [isPostConnectedReconnectReady, setPostConnectedReconnectReady] =
-    useState(false);
+  const [isStreamingValue, setStreaming] = useState(false);
+  const [streamStateIdentityKey, setStreamStateIdentityKey] = useState("");
+  const [connectedIdentityKey, setConnectedIdentityKey] = useState("");
+  const [reconnectReadyKey, setReconnectReadyKey] = useState("");
 
   // react-hook-form 컨텍스트에서 token username과 WHEP username override를 추적한다.
   const { control } = useFormContext();
@@ -235,7 +239,7 @@ export function useCctvRtcStream({
     whepUsername === undefined ? tokenUsername : whepUsername;
 
   // 카메라의 RTC 엔드포인트와 사용자명을 조합해 실제 WHEP endpoint를 계산한다.
-  const endpoint = useMemo(() => {
+  const endpoint = (() => {
     // cam_rtc가 없으면 WHEP endpoint를 만들 수 없어 이후 identity/token gate도 닫힌다.
     if (!cam?.cam_rtc) return undefined;
 
@@ -246,16 +250,22 @@ export function useCctvRtcStream({
 
     // cam_rtc 뒤의 slash 중복을 제거하고 WHEP path를 붙인다.
     return `${cam.cam_rtc.replace(/\/$/, "")}/whep${query}`;
-  }, [cam?.cam_rtc, endpointUsername]);
+  })();
 
-  const streamIdentityKey = useMemo(() => {
+  const streamIdentityKey = (() => {
     // identity 필수값이 모두 있어야 scheduler와 registry identity cleanup이 가능하다.
     if (!tokenUsername || !cam?.company_id || !cam.cam_id || !endpoint)
       return "";
 
     // token 갱신 시각은 제외해 같은 카메라 stream family를 하나의 identity로 묶는다.
     return [tokenUsername, cam.company_id, cam.cam_id, endpoint].join("|");
-  }, [cam?.cam_id, cam?.company_id, endpoint, tokenUsername]);
+  })();
+  const hasCurrentStreamState = streamStateIdentityKey === streamIdentityKey;
+  const connectionState = hasCurrentStreamState ? connectionStateValue : "new";
+  const streamError = hasCurrentStreamState ? streamErrorValue : null;
+  const isStreaming = hasCurrentStreamState ? isStreamingValue : false;
+  const hasConnected =
+    Boolean(streamIdentityKey) && connectedIdentityKey === streamIdentityKey;
 
   // scheduler grant 전에는 token query enabled가 false라 초기 token burst가 발생하지 않는다.
   const streamScheduleStatus = useCctvRtcStreamScheduleStatus({
@@ -279,7 +289,7 @@ export function useCctvRtcStream({
   const isTokenEndpointMissing = isStreamStartGranted && !tokenEndpointUrl;
   const isTokenError = tokenQuery.isError || isTokenEndpointMissing;
 
-  const streamKeyCandidate = useMemo(() => {
+  const streamKeyCandidate = (() => {
     // streamKey는 online 카메라와 endpoint/token이 모두 준비된 뒤에만 만들 수 있다.
     if (!cam?.cam_id || !cam.cam_online || !endpoint || !tokenQuery.data?.token)
       return "";
@@ -292,20 +302,7 @@ export function useCctvRtcStream({
       endpoint,
       tokenQuery.dataUpdatedAt,
     ].join("|");
-  }, [
-    cam?.cam_id,
-    cam?.cam_online,
-    cam?.company_id,
-    endpoint,
-    tokenQuery.data?.token,
-    tokenQuery.dataUpdatedAt,
-    tokenUsername,
-  ]);
-
-  useEffect(() => {
-    // identity가 바뀌면 이전 연결 성공 이력을 버려 reconnect gate를 초기 연결 상태로 되돌린다.
-    setHasConnected(false);
-  }, [streamIdentityKey]);
+  })();
 
   const reconnectReason = useMemo(
     () =>
@@ -326,21 +323,16 @@ export function useCctvRtcStream({
       !isTokenLoading &&
       !isStreaming;
 
-    if (!canStartReconnectTimer) {
-      // timer 조건이 사라지면 재연결 가능 표시도 즉시 닫는다.
-      setPostConnectedReconnectReady(false);
-      return;
-    }
+    if (!canStartReconnectTimer) return;
 
-    // 새 장애 reason이 들어올 때마다 grace/stagger 대기 상태부터 다시 시작한다.
-    setPostConnectedReconnectReady(false);
+    const nextReconnectReadyKey = `${streamIdentityKey}|${reconnectReason}`;
     const reconnectDelayMs = getPostConnectedReconnectDelayMs(
-      `${streamIdentityKey}|${reconnectReason}`,
+      nextReconnectReadyKey,
     );
 
     // cam identity 기반 delay 이후에만 UI/auto reconnect가 재시도할 수 있게 한다.
     const timeout = setTimeout(() => {
-      setPostConnectedReconnectReady(true);
+      setReconnectReadyKey(nextReconnectReadyKey);
     }, reconnectDelayMs);
 
     return () => {
@@ -404,13 +396,10 @@ export function useCctvRtcStream({
     );
   }, [streamKeyCandidate, streamRegistry]);
 
-  const canUseTokenForStream = useMemo(() => {
+  const canUseTokenForStream = (() => {
     // token 또는 streamKey 후보가 없으면 WHEP start 조건이 닫힌다.
     if (!streamKeyCandidate || !tokenQuery.data?.token) return false;
 
-    // 현재 hook이 이미 붙어 있는 streamKey면 재판정 없이 유지한다.
-    if (activeStreamKeyRef.current === streamKeyCandidate) return true;
-
     // registry에 재사용 가능한 stream이 있으면 stale token이어도 새 WHEP POST 없이 attach만 한다.
     if (hasReusableRegistryStream) return true;
 
@@ -419,12 +408,7 @@ export function useCctvRtcStream({
       dataUpdatedAt: tokenQuery.dataUpdatedAt,
       token: tokenQuery.data.token,
     });
-  }, [
-    hasReusableRegistryStream,
-    streamKeyCandidate,
-    tokenQuery.data?.token,
-    tokenQuery.dataUpdatedAt,
-  ]);
+  })();
 
   // streamKey가 빈 문자열이면 아래 stream effect가 WHEP start를 하지 않는다.
   const streamKey = canUseTokenForStream ? streamKeyCandidate : "";
@@ -478,10 +462,6 @@ export function useCctvRtcStream({
       // DOM video에는 registry cleanup과 별개로 srcObject 잔상을 즉시 비운다.
       if (currentVideo) currentVideo.srcObject = null;
 
-      // UI state도 초기 연결 전 상태로 되돌린다.
-      setConnectionState("new");
-      setStreamError(null);
-      setStreaming(false);
       return;
     }
 
@@ -527,13 +507,14 @@ export function useCctvRtcStream({
 
     // registry snapshot 변경을 hook local state와 DOM video에 반영한다.
     const unsubscribe = streamRegistry.subscribe(streamKey, snapshot => {
+      setStreamStateIdentityKey(streamIdentityKey);
       setConnectionState(snapshot.connectionState);
       setStreamError(snapshot.streamError);
       setStreaming(snapshot.isStreaming);
 
       // 한 번이라도 connected가 되면 이후 장애를 post-connected recovery로 취급한다.
       if (snapshot.connectionState === "connected") {
-        setHasConnected(true);
+        setConnectedIdentityKey(streamIdentityKey);
       }
 
       // onTrack으로 MediaStream이 들어온 뒤에만 video.srcObject를 교체한다.
@@ -549,11 +530,6 @@ export function useCctvRtcStream({
 
     // subscribe 직후 현재 snapshot을 즉시 반영해 기존 registry stream reattach 지연을 줄인다.
     const snapshot = streamRegistry.getSnapshot(streamKey);
-    setConnectionState(snapshot.connectionState);
-    setStreamError(snapshot.streamError);
-    setStreaming(snapshot.isStreaming);
-    if (snapshot.connectionState === "connected") setHasConnected(true);
-
     if (snapshot.stream) {
       // 이미 registry에 MediaStream이 있으면 첫 render cycle에서도 즉시 video에 붙인다.
       if (currentVideo.srcObject !== snapshot.stream) {
@@ -601,11 +577,11 @@ export function useCctvRtcStream({
     if (!reconnectReason) return false;
 
     // grace/stagger timer가 끝난 뒤에만 public reconnect 가능 상태를 연다.
-    return isPostConnectedReconnectReady;
+    return reconnectReadyKey === `${streamIdentityKey}|${reconnectReason}`;
   }, [
     cam?.cam_online,
     hasConnected,
-    isPostConnectedReconnectReady,
+    reconnectReadyKey,
     isStreaming,
     isTokenLoading,
     reconnectReason,
@@ -726,7 +702,6 @@ export function useCctvRtcStream({
     if (!camId) return;
 
     // 같은 cam을 여러 위치에서 렌더할 수 있어 instance 단위 live state를 보관한다.
-    const instanceKey = instanceKeyRef.current as string;
     setLiveRegistry(prev => {
       // jotai atom update는 기존 cam map을 얕은 복사해 React 변경 감지를 보장한다.
       const next = { ...prev };
@@ -735,14 +710,13 @@ export function useCctvRtcStream({
       next[camId] = perCam;
       return next;
     });
-  }, [cam?.cam_id, liveState, setLiveRegistry]);
+  }, [cam?.cam_id, instanceKey, liveState, setLiveRegistry]);
 
   useEffect(() => {
     // unmount cleanup도 cam_id 기준이라 cam이 없으면 등록할 cleanup이 없다.
     const camId = cam?.cam_id;
     if (!camId) return;
 
-    const instanceKey = instanceKeyRef.current as string;
     return () => {
       // 현재 hook instance만 제거하고 같은 cam의 다른 렌더 위치는 유지한다.
       setLiveRegistry(prev => {
@@ -759,7 +733,7 @@ export function useCctvRtcStream({
         return next;
       });
     };
-  }, [cam?.cam_id, setLiveRegistry]);
+  }, [cam?.cam_id, instanceKey, setLiveRegistry]);
 
   // 호출자에게 video ref와 상태값, 토큰 쿼리 상태를 전달한다.
   return {

package/src/cctv/types/carousel.ts

@@ -1,11 +1,11 @@
-import type { MutableRefObject, ReactNode } from "react";
+import type { ReactNode, RefObject } from "react";
 
 /**
  * CCTV Pagination Carousel Context 값 모양.
  */
 export interface CctvPaginationCarouselContextValue {
-  viewportRef: MutableRefObject<HTMLDivElement | null>;
-  trackRef: MutableRefObject<HTMLUListElement | null>;
+  viewportRef: RefObject<HTMLDivElement | null>;
+  trackRef: RefObject<HTMLUListElement | null>;
   onPrev: () => void;
   onNext: () => void;
   moveTo: (index: number) => void;

package/src/page-frame/mobile/components/page/Frame.tsx

@@ -4,7 +4,6 @@ import clsx from "clsx";
 import { MobileFrameContainer } from "./Container";
 import { MobileFrameNavigation } from "../navigation";
 import type { MobileFrameProps } from "../../types";
-import React, { useCallback } from "react";
 
 /**
  * 모바일 전용 Page Frame 래퍼; 공통 컨테이너 위에 모바일 클래스/스타일을 덧입힌다.
@@ -22,12 +21,9 @@ export function MobileFrame({
   children,
   ...rest
 }: MobileFrameProps) {
-  const Footer = useCallback(
-    (): React.ReactNode =>
-      footer ??
-      (navigationProps ? <MobileFrameNavigation {...navigationProps} /> : null),
-    [footer, navigationProps],
-  );
+  const resolvedFooter =
+    footer ??
+    (navigationProps ? <MobileFrameNavigation {...navigationProps} /> : null);
 
   return (
     <MobileFrameContainer
@@ -36,7 +32,7 @@ export function MobileFrame({
       header={header}
       headerClassName={clsx("page-frame-mobile-header", headerClassName)}
       bodyClassName={clsx("page-frame-mobile-body", bodyClassName)}
-      footer={<Footer />}
+      footer={resolvedFooter}
       footerClassName={clsx("page-frame-mobile-footer", footerClassName)}
     >
       {children}

package/src/service-inquiry/components/Form.tsx

@@ -5,7 +5,7 @@ import { Chip, Form, Input } from "@uniai-fe/uds-primitives";
 import { useEffect } from "react";
 import type { ServiceInquiryFormProps } from "../types";
 import type { ServiceInquiryFormValues, ServiceInquiryType } from "../types";
-import { useFormContext } from "react-hook-form";
+import { useFormContext, useWatch } from "react-hook-form";
 
 const DEFAULT_INQUIRY_TYPE_OPTIONS: ServiceInquiryType[] = [
   "접속이 안 돼요",
@@ -38,7 +38,10 @@ const ServiceInquiryForm = ({
   onSubmit,
 }: ServiceInquiryFormProps) => {
   const form = useFormContext<ServiceInquiryFormValues>();
-  const selectedInquiryType = form.watch("inquiry_type");
+  const selectedInquiryType = useWatch({
+    control: form.control,
+    name: "inquiry_type",
+  });
   const inquiryTypeOptions =
     inquiryTypeField?.options ?? DEFAULT_INQUIRY_TYPE_OPTIONS;
   const farmNameState = form.getFieldState("farm_name", form.formState);