260706_1_계정, 로그인, 보안 초안 작성

A08_Support/A08_Support_UI_Page.ts

@@ -13,6 +13,7 @@
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, createInputField } from "@ui/ui_template_elements";
 import { isBlank, isValidEmail } from "@util/common_util_validate";
+import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
 import "./A08_Support_UI_Style.css";
 
 /** locale 헬퍼 */
@@ -93,12 +94,19 @@ export function renderA08Support(root: HTMLElement): void {
     type: "text",
     required: true,
   });
+
   const emailField = createInputField({
     label: L("A08_Support_Field_Email"),
     placeholder: L("A08_Support_Field_Email_Placeholder"),
     type: "email",
     required: true,
   });
+  const phoneField = createInputField({
+    label: L("A08_Support_Field_Phone"),
+    placeholder: L("A08_Support_Field_Phone_Placeholder"),
+    type: "tel",
+    required: false,
+  });
   const subjectField = createInputField({
     label: L("A08_Support_Field_Subject"),
     placeholder: L("A08_Support_Field_Subject_Placeholder"),
@@ -132,6 +140,7 @@ export function renderA08Support(root: HTMLElement): void {
 
     const name = nameField.input.value;
     const email = emailField.input.value;
+    const phone = phoneField.input.value;
     const subject = subjectField.input.value;
     const message = messageField.textarea.value;
 
@@ -161,16 +170,47 @@ export function renderA08Support(root: HTMLElement): void {
       return;
     }
 
-    // TODO: POST /api/a08/support 연동. 성공 시 폼 초기화 후 성공 메시지 표시.
-    form.reset();
-    messageField.textarea.value = "";
-    successMsg.hidden = false;
+    // API 호출: POST /api/a08/support
+    (async () => {
+      try {
+        const response = await fetch("/api/a08/support", {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, email, phone: phone || null, subject, message }),
+        });
+        if (!response.ok) {
+          const error = (await response.json()) as { detail?: string };
+          throw new Error(error.detail ?? "요청 실패");
+        }
+        form.reset();
+        messageField.textarea.value = "";
+        successMsg.hidden = false;
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "오류 발생";
+        nameField.setError(msg);
+      }
+    })();
   }
 
   form.addEventListener("submit", onA08_Support_Submit_Click);
-  form.append(nameField.root, emailField.root, subjectField.root, messageField.root, submitBtn);
+  form.append(
+    nameField.root,
+    emailField.root,
+    phoneField.root,
+    subjectField.root,
+    messageField.root,
+    submitBtn,
+  );
 
   card.append(title, subtitle, successMsg, form);
   page.append(card);
   root.append(page);
+
+  // 백그라운드에서 세션 정보 로드 (페이지 렌더링을 지연시키지 않음)
+  (async () => {
+    const sessionUser = await fetchSessionUser();
+    if (sessionUser?.name) nameField.input.value = sessionUser.name;
+    if (sessionUser?.email) emailField.input.value = sessionUser.email;
+  })();
 }