@uniai-fe/uds-templates 0.4.11 → 0.4.12

package/README.md

@@ -58,6 +58,7 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
 - `/service-inquiry`
   - `ServiceInquiry.Form`
   - `ServiceInquiry.OpenButton`
+  - `ServiceInquiry.NavButton`
   - `ServiceInquiry.useOpen`
   - `ServiceInquiry.useProvideContext`
   - `ServiceInquiry.useUserContext`
@@ -107,9 +108,12 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - ui-legacy 스택 기반 모달 Provider/Root/Container + 템플릿(`Modal.Alert`, `Modal.Dialog`)
   - Storybook(`apps/design-storybook/src/stories/templates/modal`)에서 Alert/Confirm 케이스를 검증한다.
 - `/service-inquiry/**`
-  - 문의 입력 전용 form, 기본 원형 `?` open button, 커스텀 trigger용 open hook, 페이지 context 등록 hook, request context 조립 hook, 네트워크 오류 수집 hook, modal preset factory를 제공한다.
+  - 문의 입력 전용 form, 기본 원형 `?` open button, page-frame nav button, 커스텀 trigger용 open hook, 페이지 context 등록 hook, request context 조립 hook, 네트워크 오류 수집 hook, modal preset factory를 제공한다.
+  - 현재 form 기본 구조는 `이름`, `연락처`, `문의 유형`, `자세한 문의 내용` 4필드이며, `사진 첨부`는 구현 범위에서 제외한다.
   - submit transport, React Query mutation, Next.js route handler, 에러 피드백(`Modal.Alert`)은 서비스 앱이 소유한다.
   - 모듈 내부 Jotai registry를 사용하므로, layout 고정 버튼 1개와 페이지별 context 등록 hook 조합으로 ready-to-use 구성이 가능하다.
+  - `stackKey`는 필요할 때만 override하고, `useOpen` 계열은 기본적으로 현재 pathname 기준 `${pathname}/inquiry`를 사용한다.
+  - modal description은 기본으로 `"사용 중 문제가 있나요? 아래 내용을 적어 문의해 주세요."`를 사용하고 특수 문구가 필요할 때만 `dialogOptions.description`으로 덮어쓴다.
   - 로그인 후 `farm_name`, `contact`를 auto-fill + readonly로 보여야 할 때는 `formContextOptions.defaultValues`와 `farmNameField.mode`, `contactField.mode`를 함께 전달한다.
 - `/weather/**`
   - page-frame header utility에 결합되는 weather header 템플릿과 weather data hook/mock 도구를 제공한다.
@@ -126,7 +130,7 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
 2. layout 고정 버튼은 `ServiceInquiry.useUserContext()`로 모듈 내부 registry 기반 `requestContext`를 읽는다.
 3. 서비스 앱은 네트워크 오류가 발생했을 때 `ServiceInquiry.useNetworkError().reportNetworkError(...)`만 호출하고, 모듈이 이를 `user_context.network_errors`에 자동 병합한다.
 4. 각 페이지/폼은 `ServiceInquiry.useProvideContext({ labels, userContext })`로 `ServiceInquiryProvidedContext`를 등록한다.
-5. 기본 버튼은 `ServiceInquiry.OpenButton`, 커스텀 버튼은 `ServiceInquiry.useOpen`으로 모달 open을 연결한다.
+5. 비로그인 기본 버튼은 `ServiceInquiry.OpenButton`, 로그인 후 page-frame 진입 버튼은 `ServiceInquiry.NavButton`, 그 외 커스텀 버튼은 `ServiceInquiry.useOpen`으로 모달 open을 연결한다.
 6. modal footer confirm이 `ServiceInquiry.Form` submit 진입을 담당한다.
 7. 실제 submit은 서비스 앱의 `useMutation + Next.js route handler + Modal.Alert` 조합으로 처리한다.
 

package/dist/styles.css

@@ -99,6 +99,17 @@
   --service-inquiry-button-pos-left: var(--spacing-padding-10);
   --service-inquiry-button-pos-right: auto;
   --service-inquiry-button-pos-bottom: var(--spacing-padding-10);
+  --service-inquiry-field-gap: var(--spacing-padding-5);
+  --service-inquiry-type-gap: 6px;
+  --service-inquiry-type-height: 48px;
+  --service-inquiry-type-radius: 12px;
+  --service-inquiry-type-font-size: 17px;
+  --service-inquiry-type-font-weight-default: 500;
+  --service-inquiry-type-font-weight-selected: 700;
+  --service-inquiry-type-bg-default: var(--color-surface-standard);
+  --service-inquiry-type-bg-selected: var(--color-surface-static-blue);
+  --service-inquiry-type-color-default: var(--color-label-neutral);
+  --service-inquiry-type-color-selected: var(--color-primary-default);
 }
 
 /* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
@@ -1743,18 +1754,47 @@
 .service-inquiry-form {
   display: flex;
   flex-direction: column;
+  text-align: left;
 }
 
 .service-inquiry-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-5);
+  gap: var(--service-inquiry-field-gap);
 }
 
 .service-inquiry-field {
   display: flex;
   flex-direction: column;
 }
+.service-inquiry-field :where(.form-field-footer) {
+  text-align: left;
+}
+
+.service-inquiry-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--service-inquiry-type-gap);
+  width: 100%;
+}
+
+.service-inquiry-type-option {
+  width: 100%;
+  max-width: none;
+  height: var(--service-inquiry-type-height);
+  border-radius: var(--service-inquiry-type-radius);
+  background-color: var(--service-inquiry-type-bg-default);
+  color: var(--service-inquiry-type-color-default);
+  font-size: var(--service-inquiry-type-font-size);
+  font-weight: var(--service-inquiry-type-font-weight-default);
+  line-height: 1.4;
+}
+
+.service-inquiry-type-option:where([data-selected=true]) {
+  background-color: var(--service-inquiry-type-bg-selected);
+  color: var(--service-inquiry-type-color-selected);
+  font-weight: var(--service-inquiry-type-font-weight-selected);
+}
 
 .service-inquiry-open-button {
   width: var(--service-inquiry-button-width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/page-frame/desktop/components/nav/Container.tsx

@@ -15,6 +15,7 @@ export default function PageNavContainer({
   logo,
   sitemap,
   currentPath,
+  children,
 }: PageFrameDesktopNavProps) {
   const pathnameValue = usePathname();
   // currentPath를 명시하면 Next 라우터가 없는 환경에서도 선택 상태를 제어할 수 있다.
@@ -65,6 +66,7 @@ export default function PageNavContainer({
           ),
         )}
       </ul>
+      {children}
     </nav>
   );
 }

package/src/page-frame/desktop/types/nav.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { SitemapDataType } from "../../types";
 
 /**
@@ -74,4 +75,8 @@ export interface PageFrameDesktopNavProps {
    * 현재 경로.
    */
   currentPath?: string;
+  /**
+   * extra 요소
+   */
+  children?: ReactNode;
 }

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

@@ -1,10 +1,18 @@
 "use client";
 
 import clsx from "clsx";
-import { Form, Input } from "@uniai-fe/uds-primitives";
-import { useFormContext } from "react-hook-form";
+import { Chip, Form, Input } from "@uniai-fe/uds-primitives";
+import { useEffect } from "react";
 import type { ServiceInquiryFormProps } from "../types";
-import type { ServiceInquiryFormValues } from "../types";
+import type { ServiceInquiryFormValues, ServiceInquiryType } from "../types";
+import { useFormContext } from "react-hook-form";
+
+const DEFAULT_INQUIRY_TYPE_OPTIONS: ServiceInquiryType[] = [
+  "접속이 안 돼요",
+  "화면이 멈춰요",
+  "데이터가 안나와요",
+  "기타",
+];
 
 /**
  * Service Inquiry Form; 문의 입력 form
@@ -14,6 +22,7 @@ import type { ServiceInquiryFormValues } from "../types";
  * @param {ServiceInquiryFieldKey[]} [props.visibleFields] 노출 필드 목록
  * @param {ServiceInquiryInputFieldProps} [props.farmNameField] 농장명 필드 설정
  * @param {ServiceInquiryInputFieldProps} [props.contactField] 연락처 필드 설정
+ * @param {ServiceInquiryTypeFieldProps} [props.inquiryTypeField] 문의 유형 필드 설정
  * @param {ServiceInquiryTextAreaFieldProps} [props.textField] 문의 본문 필드 설정
  * @param {SubmitHandler<ServiceInquiryFormValues>} props.onSubmit 문의 제출 핸들러
  * @example
@@ -24,14 +33,24 @@ const ServiceInquiryForm = ({
   visibleFields,
   farmNameField,
   contactField,
+  inquiryTypeField,
   textField,
   onSubmit,
 }: ServiceInquiryFormProps) => {
   const form = useFormContext<ServiceInquiryFormValues>();
+  const selectedInquiryType = form.watch("inquiry_type");
 
   // 변경 설명: Modal.Dialog confirm 기본 submit과 연결되도록 form.handleSubmit 결과를 그대로 onSubmit에 바인딩한다.
   const handleSubmit = form.handleSubmit(onSubmit);
 
+  useEffect(() => {
+    form.register("inquiry_type");
+    if (!form.getValues("inquiry_type")) {
+      // 변경 설명: 문의 유형은 화면 label과 submit payload를 동일하게 유지하기 위해 한글 원문값을 그대로 기본값으로 사용한다.
+      form.setValue("inquiry_type", "접속이 안 돼요");
+    }
+  }, [form]);
+
   return (
     <form
       className={clsx("service-inquiry-form", className)}
@@ -46,7 +65,7 @@ const ServiceInquiryForm = ({
             )}
             width="full"
             headerProps={{
-              required: farmNameField?.required,
+              required: farmNameField?.required ?? true,
               ...(typeof farmNameField?.label === "string"
                 ? { label: farmNameField.label }
                 : typeof farmNameField?.label === "number"
@@ -54,7 +73,7 @@ const ServiceInquiryForm = ({
                   : {
                       labelJsx:
                         typeof farmNameField?.label === "undefined"
-                          ? "농장명"
+                          ? "이름"
                           : farmNameField.label,
                     }),
             }}
@@ -64,7 +83,7 @@ const ServiceInquiryForm = ({
               type="text"
               block={true}
               readOnly={farmNameField?.mode === "readonly"}
-              placeholder={farmNameField?.placeholder ?? "농장명 입력"}
+              placeholder={farmNameField?.placeholder ?? "이름을 입력해 주세요"}
               register={form.register("farm_name")}
             />
           </Form.Field.Template>
@@ -90,20 +109,73 @@ const ServiceInquiryForm = ({
                           : contactField.label,
                     }),
             }}
-            footer={contactField?.helper}
+            footer={
+              contactField?.helper ??
+              "필요한 경우 입력하신 연락처로 연락 드립니다."
+            }
           >
             <Input.Base
               type="text"
               block={true}
               readOnly={contactField?.mode === "readonly"}
               placeholder={
-                contactField?.placeholder ?? "이메일 또는 전화번호 입력"
+                contactField?.placeholder ?? "연락처를 입력해 주세요"
               }
               register={form.register("contact")}
             />
           </Form.Field.Template>
         ) : null}
 
+        {(visibleFields?.includes("inquiry_type") ?? true) ? (
+          <Form.Field.Template
+            className={clsx(
+              "service-inquiry-field",
+              "service-inquiry-field-inquiry-type",
+            )}
+            width="full"
+            headerProps={{
+              required: inquiryTypeField?.required ?? true,
+              ...(typeof inquiryTypeField?.label === "string"
+                ? { label: inquiryTypeField.label }
+                : typeof inquiryTypeField?.label === "number"
+                  ? { label: String(inquiryTypeField.label) }
+                  : {
+                      labelJsx:
+                        typeof inquiryTypeField?.label === "undefined"
+                          ? "문의 유형"
+                          : inquiryTypeField.label,
+                    }),
+            }}
+            footer={inquiryTypeField?.helper}
+          >
+            <div className="service-inquiry-type-grid">
+              {(inquiryTypeField?.options ?? DEFAULT_INQUIRY_TYPE_OPTIONS).map(
+                inquiryType => {
+                  return (
+                    <Chip.ClickableStyle
+                      key={inquiryType}
+                      className="service-inquiry-type-option"
+                      chipStyle="filter"
+                      fill="solid"
+                      selected={selectedInquiryType === inquiryType}
+                      // 변경 설명: inquiry_type은 영문 key 변환 없이 선택된 한글 label 원문을 그대로 submit payload로 유지한다.
+                      onClick={() =>
+                        form.setValue("inquiry_type", inquiryType, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        })
+                      }
+                    >
+                      {inquiryType}
+                    </Chip.ClickableStyle>
+                  );
+                },
+              )}
+            </div>
+          </Form.Field.Template>
+        ) : null}
+
         {(visibleFields?.includes("text") ?? true) ? (
           <Form.Field.Template
             className={clsx(
@@ -120,7 +192,7 @@ const ServiceInquiryForm = ({
                   : {
                       labelJsx:
                         typeof textField?.label === "undefined"
-                          ? "문의 내용"
+                          ? "자세한 문의 내용"
                           : textField.label,
                     }),
             }}
@@ -129,10 +201,11 @@ const ServiceInquiryForm = ({
             <Input.TextArea
               block={true}
               placeholder={
-                textField?.placeholder ?? "문의 내용을 자세히 입력해 주세요."
+                textField?.placeholder ??
+                "어떤 문제가 있었는지 적어주세요.\n예: 화면이 멈췄어요."
               }
               height={160}
-              length={10000}
+              maxLength={10000}
               register={form.register("text")}
             />
           </Form.Field.Template>

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

@@ -0,0 +1,55 @@
+"use client";
+
+import clsx from "clsx";
+import { useOpenServiceInquiry } from "../hooks";
+import Icon from "../img/inquiry.svg";
+import type { ServiceInquiryNavButtonProps } from "../types";
+
+/**
+ * Service Inquiry Nav Button; page-frame nav 문의 버튼
+ * @component
+ * @param {ServiceInquiryNavButtonProps} props page-frame nav 문의 버튼 props
+ * @param {string} [props.className] nav button className
+ * @param {string} [props.label] nav button label
+ * @param {string} [props.stackKey] modal stack key
+ * @param {ServiceInquiryFormProps} props.formProps 문의 form props
+ * @param {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [props.dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
+ * @param {() => void} [props.onOpen] 모달 open 직전 콜백
+ * @example
+ * <ServiceInquiryNavButton formProps={{ onSubmit: values => console.info(values) }} />
+ */
+export default function ServiceInquiryNavButton({
+  className,
+  label = "문의하기",
+  stackKey,
+  formProps,
+  dialogOptions,
+  onOpen,
+}: ServiceInquiryNavButtonProps) {
+  const { openServiceInquiry } = useOpenServiceInquiry({
+    stackKey,
+    formProps,
+    dialogOptions,
+    onOpen,
+  });
+
+  return (
+    <div className="page-frame-nav-item">
+      <button
+        type="button"
+        className={clsx(
+          "page-frame-nav-category",
+          "page-frame-inquiry-button",
+          className,
+        )}
+        // 변경 설명: page-frame children에 바로 주입해도 nav hover/spacing 규칙을 유지하도록 기존 nav class를 그대로 재사용한다.
+        onClick={openServiceInquiry}
+      >
+        <span className="page-frame-nav-category-icon">
+          <Icon width={24} height={24} viewBox="0 0 24 24" />
+        </span>
+        <span className="page-frame-nav-category-label">{label}</span>
+      </button>
+    </div>
+  );
+}

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

@@ -10,23 +10,22 @@ import clsx from "clsx";
  * @component
  * @param {UseOpenServiceInquiryOptions} props 문의 모달 열기 props
  * @param {string} [props.className]
- * @param {string} props.stackKey modal stack key
+ * @param {string} [props.stackKey] modal stack key
  * @param {ServiceInquiryFormProps} props.formProps 문의 form props
  * @param {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [props.dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  * @param {() => void} [props.onOpen] 모달 open 직전 콜백
  * @example
  * <ServiceInquiryOpenButton
- *   stackKey="sample"
  *   formProps={{ onSubmit: values => console.info(values) }}
  * />
  */
-const ServiceInquiryOpenButton = ({
+export default function ServiceInquiryOpenButton({
   className,
   stackKey,
   formProps,
   dialogOptions,
   onOpen,
-}: ServiceInquiryOpenButtonProps) => {
+}: ServiceInquiryOpenButtonProps) {
   const { openServiceInquiry } = useOpenServiceInquiry({
     stackKey,
     formProps,
@@ -45,6 +44,4 @@ const ServiceInquiryOpenButton = ({
       ?
     </Button.Rounded>
   );
-};
-
-export default ServiceInquiryOpenButton;
+}

package/src/service-inquiry/hooks/useOpen.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import { Modal } from "../../modal";
 import { createServiceInquiryModal } from "../utils/modal-option";
 import type {
@@ -11,14 +12,13 @@ import type {
  * Service Inquiry Hook; 문의 모달 열기 Hook
  * @hook
  * @param {UseOpenServiceInquiryOptions} options 문의 모달 열기 훅 옵션
- * @param {string} options.stackKey modal stack key
+ * @param {string} [options.stackKey] modal stack key
  * @param {ServiceInquiryFormProps} options.formProps 문의 form props
  * @param {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [options.dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  * @param {() => void} [options.onOpen] 모달 open 직전 콜백
  * @returns {UseOpenServiceInquiryReturn} 문의 모달 open 함수
  * @example
  * const { openServiceInquiry } = useOpenServiceInquiry({
- *   stackKey: "sample",
  *   formProps: { onSubmit: values => console.info(values) },
  * });
  */
@@ -29,13 +29,21 @@ export function useOpenServiceInquiry({
   onOpen,
 }: UseOpenServiceInquiryOptions): UseOpenServiceInquiryReturn {
   const { newModal } = Modal.useModal();
+  const pathname = usePathname();
 
   // 변경 설명: 커스텀 버튼은 render prop 대신 hook이 돌려주는 단일 open 함수로 연결한다.
   const openServiceInquiry = () => {
+    const resolvedPathname =
+      pathname ??
+      (typeof window === "undefined" ? "" : window.location.pathname);
+
     onOpen?.();
     newModal(
       createServiceInquiryModal({
-        stackKey,
+        // 변경 설명: stackKey를 생략하면 현재 pathname 기준 문의 모달 키를 자동 생성한다.
+        stackKey:
+          stackKey ??
+          `${resolvedPathname === "/" ? "" : resolvedPathname}/inquiry`,
         formProps,
         dialogOptions,
       }),

package/src/service-inquiry/index.tsx

@@ -1,5 +1,6 @@
 import "./index.scss";
 import ServiceInquiryForm from "./components/Form";
+import ServiceInquiryNavButton from "./components/NavButton";
 import ServiceInquiryOpenButton from "./components/OpenButton";
 import {
   useServiceInquiryNetworkError,
@@ -20,6 +21,7 @@ import {
 export const ServiceInquiry = {
   Form: ServiceInquiryForm,
   OpenButton: ServiceInquiryOpenButton,
+  NavButton: ServiceInquiryNavButton,
   useOpen: useOpenServiceInquiry,
   useNetworkError: useServiceInquiryNetworkError,
   useProvideContext: useProvideServiceInquiryContext,
@@ -32,6 +34,7 @@ export const ServiceInquiry = {
 export {
   ServiceInquiryForm,
   ServiceInquiryOpenButton,
+  ServiceInquiryNavButton,
   useServiceInquiryNetworkError,
   useOpenServiceInquiry,
   useProvideServiceInquiryContext,

package/src/service-inquiry/styles/form.scss

@@ -1,15 +1,45 @@
 .service-inquiry-form {
   display: flex;
   flex-direction: column;
+  text-align: left;
 }
 
 .service-inquiry-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-5);
+  gap: var(--service-inquiry-field-gap);
 }
 
 .service-inquiry-field {
   display: flex;
   flex-direction: column;
+
+  :where(.form-field-footer) {
+    text-align: left;
+  }
+}
+
+.service-inquiry-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--service-inquiry-type-gap);
+  width: 100%;
+}
+
+.service-inquiry-type-option {
+  width: 100%;
+  max-width: none;
+  height: var(--service-inquiry-type-height);
+  border-radius: var(--service-inquiry-type-radius);
+  background-color: var(--service-inquiry-type-bg-default);
+  color: var(--service-inquiry-type-color-default);
+  font-size: var(--service-inquiry-type-font-size);
+  font-weight: var(--service-inquiry-type-font-weight-default);
+  line-height: 1.4;
+}
+
+.service-inquiry-type-option:where([data-selected="true"]) {
+  background-color: var(--service-inquiry-type-bg-selected);
+  color: var(--service-inquiry-type-color-selected);
+  font-weight: var(--service-inquiry-type-font-weight-selected);
 }

package/src/service-inquiry/styles/variables.scss

@@ -5,4 +5,16 @@
   --service-inquiry-button-pos-left: var(--spacing-padding-10);
   --service-inquiry-button-pos-right: auto;
   --service-inquiry-button-pos-bottom: var(--spacing-padding-10);
+
+  --service-inquiry-field-gap: var(--spacing-padding-5);
+  --service-inquiry-type-gap: 6px;
+  --service-inquiry-type-height: 48px;
+  --service-inquiry-type-radius: 12px;
+  --service-inquiry-type-font-size: 17px;
+  --service-inquiry-type-font-weight-default: 500;
+  --service-inquiry-type-font-weight-selected: 700;
+  --service-inquiry-type-bg-default: var(--color-surface-standard);
+  --service-inquiry-type-bg-selected: var(--color-surface-static-blue);
+  --service-inquiry-type-color-default: var(--color-label-neutral);
+  --service-inquiry-type-color-selected: var(--color-primary-default);
 }

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

@@ -1,9 +1,13 @@
-import type { ServiceInquiryUserContext } from "./form-context";
+import type {
+  ServiceInquiryType,
+  ServiceInquiryUserContext,
+} from "./form-context";
 
 /**
  * Service Inquiry API; 문의 등록 요청
  * @property {string} text 문의 본문
  * @property {string} farm_name 문의 대상 농장명 또는 빈 문자열
+ * @property {ServiceInquiryType} inquiry_type 문의 유형 label 원문
  * @property {string[]} labels JIRA label 목록
  * @property {string} contact 문의자 연락처(email 또는 phone number)
  * @property {string} page_path 문의하기를 연 현재 페이지 URL
@@ -18,6 +22,10 @@ export interface API_Req_ServiceInquiry {
    * 문의 대상 농장명 또는 빈 문자열
    */
   farm_name: string;
+  /**
+   * 문의 유형 label 원문
+   */
+  inquiry_type: ServiceInquiryType;
   /**
    * JIRA label 목록
    */

package/src/service-inquiry/types/form-context.ts

@@ -1,10 +1,25 @@
+/**
+ * Service Inquiry Form; 문의 유형 값
+ * @typedef {"접속이 안 돼요" | "화면이 멈춰요" | "데이터가 안나와요" | "기타"} ServiceInquiryType
+ */
+export type ServiceInquiryType =
+  | "접속이 안 돼요"
+  | "화면이 멈춰요"
+  | "데이터가 안나와요"
+  | "기타";
+
 /**
  * Service Inquiry Form; 사용자 입력값
+ * @property {ServiceInquiryType} inquiry_type 문의 유형
  * @property {string} text 문의 본문
  * @property {string} farm_name 농장명 또는 빈 문자열
  * @property {string} contact 문의자 연락처
  */
 export interface ServiceInquiryFormValues {
+  /**
+   * 문의 유형
+   */
+  inquiry_type: ServiceInquiryType;
   /**
    * 문의 본문
    */

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

@@ -1,12 +1,19 @@
 import type { ReactNode } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import type { DialogTemplateOptions } from "../../modal/types";
-import type { ServiceInquiryFormValues } from "./form-context";
+import type {
+  ServiceInquiryFormValues,
+  ServiceInquiryType,
+} from "./form-context";
 
 /**
  * Service Inquiry; 노출 필드 키
  */
-export type ServiceInquiryFieldKey = "farm_name" | "contact" | "text";
+export type ServiceInquiryFieldKey =
+  | "farm_name"
+  | "contact"
+  | "inquiry_type"
+  | "text";
 
 /**
  * Service Inquiry Form; field 입력 모드
@@ -62,12 +69,27 @@ export interface ServiceInquiryTextAreaFieldProps extends ServiceInquiryFieldBas
   placeholder?: string;
 }
 
+/**
+ * Service Inquiry Form; 문의 유형 field 설정
+ * @property {ReactNode} [label] field label
+ * @property {ReactNode} [helper] field helper
+ * @property {boolean} [required] required 표시 여부
+ * @property {ServiceInquiryType[]} [options] 노출할 문의 유형 옵션 순서
+ */
+export interface ServiceInquiryTypeFieldProps extends ServiceInquiryFieldBaseProps {
+  /**
+   * 노출할 문의 유형 옵션 순서
+   */
+  options?: ServiceInquiryType[];
+}
+
 /**
  * Service Inquiry Form; 문의 입력 폼 props
  * @property {string} [className] form className
  * @property {ServiceInquiryFieldKey[]} [visibleFields] 노출 필드 목록
  * @property {ServiceInquiryInputFieldProps} [farmNameField] 농장명 필드 설정
  * @property {ServiceInquiryInputFieldProps} [contactField] 연락처 필드 설정
+ * @property {ServiceInquiryTypeFieldProps} [inquiryTypeField] 문의 유형 필드 설정
  * @property {ServiceInquiryTextAreaFieldProps} [textField] 문의 본문 필드 설정
  * @property {SubmitHandler<ServiceInquiryFormValues>} props.onSubmit 문의 제출 핸들러
  */
@@ -88,6 +110,10 @@ export interface ServiceInquiryFormProps {
    * 연락처 필드 설정
    */
   contactField?: ServiceInquiryInputFieldProps;
+  /**
+   * 문의 유형 필드 설정
+   */
+  inquiryTypeField?: ServiceInquiryTypeFieldProps;
   /**
    * 문의 본문 필드 설정
    */
@@ -100,7 +126,7 @@ export interface ServiceInquiryFormProps {
 
 /**
  * Service Inquiry Modal; 문의 모달 preset 생성 옵션
- * @property {string} stackKey modal stack key
+ * @property {string} [stackKey] modal stack key
  * @property {ServiceInquiryFormProps} formProps 문의 form props
  * @property {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  */
@@ -109,7 +135,7 @@ export interface ServiceInquiryCreateModalOptions {
   /**
    * modal stack key
    */
-  stackKey: string;
+  stackKey?: string;
   /**
    * 문의 form props
    */
@@ -122,7 +148,7 @@ export interface ServiceInquiryCreateModalOptions {
 
 /**
  * Service Inquiry Hook; 문의 모달 열기 훅 옵션
- * @property {string} stackKey modal stack key
+ * @property {string} [stackKey] modal stack key
  * @property {ServiceInquiryFormProps} formProps 문의 form props
  * @property {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  * @property {() => void} [onOpen] 모달 open 직전 콜백
@@ -137,15 +163,38 @@ export interface UseOpenServiceInquiryOptions extends ServiceInquiryCreateModalO
 /**
  * Service Inquiry Button props; 버튼 옵션
  * @property {string} [className]
- * @property {string} stackKey modal stack key
+ * @property {string} [stackKey] modal stack key
  * @property {ServiceInquiryFormProps} formProps 문의 form props
  * @property {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  * @property {() => void} [onOpen] 모달 open 직전 콜백
  */
 export interface ServiceInquiryOpenButtonProps extends UseOpenServiceInquiryOptions {
+  /**
+   * button className
+   */
   className?: string;
 }
 
+/**
+ * Service Inquiry Nav Button props; page-frame nav 문의 버튼 옵션
+ * @property {string} [className] nav button className
+ * @property {string} [label] nav button label
+ * @property {string} [stackKey] modal stack key
+ * @property {ServiceInquiryFormProps} formProps 문의 form props
+ * @property {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
+ * @property {() => void} [onOpen] 모달 open 직전 콜백
+ */
+export interface ServiceInquiryNavButtonProps extends UseOpenServiceInquiryOptions {
+  /**
+   * nav button className
+   */
+  className?: string;
+  /**
+   * nav button label
+   */
+  label?: string;
+}
+
 /**
  * Service Inquiry Hook; 문의 모달 열기 훅 반환값
  * @property {() => void} openServiceInquiry 문의 모달 open 함수

package/src/service-inquiry/utils/modal-option.tsx

@@ -9,17 +9,16 @@ import type {
  * Service Inquiry Modal; 문의 form이 포함된 Dialog option 생성기
  * @component
  * @param {ServiceInquiryCreateModalOptions} options 문의 모달 preset 생성 옵션
- * @param {string} options.stackKey modal stack key
+ * @param {string} [options.stackKey] modal stack key
  * @param {ServiceInquiryFormProps} options.formProps 문의 form props
  * @param {Partial<DialogTemplateOptions<ServiceInquiryFormValues>>} [options.dialogOptions] 문의 모달 preset 위에 덮어쓸 dialog option
  * @example
  * createServiceInquiryModal({
- *   stackKey: "service-inquiry",
  *   formProps: { onSubmit: values => console.info(values) },
  * })
  */
 export function createServiceInquiryModal({
-  stackKey,
+  stackKey = "service-inquiry",
   formProps,
   dialogOptions,
 }: ServiceInquiryCreateModalOptions) {
@@ -28,14 +27,30 @@ export function createServiceInquiryModal({
   return createDialogModal<ServiceInquiryFormValues>({
     ...dialogOptions,
     stackKey,
+    // 변경 설명: service-inquiry 모달은 Figma popup 실측값(520px)을 기본 panel width로 사용한다.
+    width: dialogOptions?.width ?? 520,
     title: dialogOptions?.title ?? "문의하기",
+    // 변경 설명: 기본 안내 문구는 figma 기준 문의 모달 description으로 고정하고 필요한 경우에만 override한다.
+    description:
+      dialogOptions?.description ??
+      "사용 중 문제가 있나요? 아래 내용을 적어 문의해 주세요.",
     // 변경 설명: 문의 모달은 title과 안내 문구를 좌측 정렬로 읽히게 하기 위해 split header를 기본값으로 사용한다.
     headerLayout: dialogOptions?.headerLayout ?? "split",
+    // 변경 설명: Figma popup은 우측 닫기 아이콘이 기본 노출 상태라 service-inquiry preset도 close button을 기본 활성화한다.
+    activeCloseButton: dialogOptions?.activeCloseButton ?? true,
     // 변경 설명: ServiceInquiryForm은 useFormContext를 직접 읽으므로 Dialog 내부 Form.Provider를 항상 활성화한다.
     formContextOptions,
     content: <ServiceInquiryForm {...formProps} />,
+    cancel: {
+      label: "취소",
+      position: "right",
+      width: "fit",
+      ...dialogOptions?.cancel,
+    },
     confirm: {
-      label: "문의 접수",
+      position: "right",
+      width: "fit",
+      label: "문의하기",
       ...dialogOptions?.confirm,
     },
   });