@uniai-fe/uds-templates 0.4.4 → 0.4.6

package/dist/styles.css

@@ -94,6 +94,11 @@
   /* Controls */
   --cctv-open-button-color-on: var(--color-common-99);
   --cctv-open-button-color-off: var(--color-label-disabled);
+  --service-inquiry-button-width: var(--button-round-height-large);
+  --service-inquiry-button-pos-top: auto;
+  --service-inquiry-button-pos-left: var(--spacing-padding-10);
+  --service-inquiry-button-pos-right: auto;
+  --service-inquiry-button-pos-bottom: var(--spacing-padding-10);
 }
 
 /* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
@@ -1733,6 +1738,8 @@
   margin-top: var(--spacing-gap-8);
 }
 
+
+
 .service-inquiry-form {
   display: flex;
   flex-direction: column;
@@ -1750,17 +1757,12 @@
 }
 
 .service-inquiry-open-button {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  border: 1px solid var(--color-border-standard-cool-gray);
-  background: var(--color_100);
-  color: var(--color-label-neutral);
-  font-size: 24px;
-  font-weight: 400;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  cursor: pointer;
+  width: var(--service-inquiry-button-width);
+  --button-round-padding-inline-large: 0px;
+  position: fixed;
+  top: var(--service-inquiry-button-pos-top);
+  left: var(--service-inquiry-button-pos-left);
+  right: var(--service-inquiry-button-pos-right);
+  bottom: var(--service-inquiry-button-pos-bottom);
+  z-index: 100;
 }

package/package.json

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

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@uniai-fe/uds-primitives";
 import { useOpenServiceInquiry } from "../hooks";
 import type { UseOpenServiceInquiryOptions } from "../types";
 
@@ -31,15 +32,15 @@ const ServiceInquiryOpenButton = ({
   });
 
   return (
-    <button
-      type="button"
+    <Button.Rounded
       className="service-inquiry-open-button"
-      aria-label="문의하기"
+      priority="tertiary"
+      size="large"
       // 변경 설명: 기본 제공 버튼은 고정 원형 `?` 버튼 사양으로 렌더링한다.
       onClick={openServiceInquiry}
     >
       ?
-    </button>
+    </Button.Rounded>
   );
 };
 

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

@@ -1,2 +1,3 @@
+@use "./variables.scss";
 @use "./form.scss";
 @use "./open-button.scss";

package/src/service-inquiry/styles/open-button.scss

@@ -1,15 +1,11 @@
 .service-inquiry-open-button {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  border: 1px solid var(--color-border-standard-cool-gray);
-  background: var(--color_100);
-  color: var(--color-label-neutral);
-  font-size: 24px;
-  font-weight: 400;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  cursor: pointer;
+  width: var(--service-inquiry-button-width);
+  --button-round-padding-inline-large: 0px;
+
+  position: fixed;
+  top: var(--service-inquiry-button-pos-top);
+  left: var(--service-inquiry-button-pos-left);
+  right: var(--service-inquiry-button-pos-right);
+  bottom: var(--service-inquiry-button-pos-bottom);
+  z-index: 100;
 }

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

@@ -0,0 +1,8 @@
+:root {
+  --service-inquiry-button-width: var(--button-round-height-large);
+
+  --service-inquiry-button-pos-top: auto;
+  --service-inquiry-button-pos-left: var(--spacing-padding-10);
+  --service-inquiry-button-pos-right: auto;
+  --service-inquiry-button-pos-bottom: var(--spacing-padding-10);
+}

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

@@ -23,12 +23,16 @@ export function createServiceInquiryModal({
   formProps,
   dialogOptions,
 }: ServiceInquiryCreateModalOptions) {
+  const formContextOptions = dialogOptions?.formContextOptions ?? {};
+
   return createDialogModal<ServiceInquiryFormValues>({
     ...dialogOptions,
     stackKey,
     title: dialogOptions?.title ?? "문의하기",
     // 변경 설명: 문의 모달은 title과 안내 문구를 좌측 정렬로 읽히게 하기 위해 split header를 기본값으로 사용한다.
     headerLayout: dialogOptions?.headerLayout ?? "split",
+    // 변경 설명: ServiceInquiryForm은 useFormContext를 직접 읽으므로 Dialog 내부 Form.Provider를 항상 활성화한다.
+    formContextOptions,
     content: <ServiceInquiryForm {...formProps} />,
     confirm: {
       label: "문의 접수",