i18n 적용

2025-12-10 15:56:51 +09:00
parent 73e9bc6a1c
commit f71207aeb5
127 changed files with 7346 additions and 2079 deletions
@@ -4,6 +4,8 @@ import { useState } from "react";
 import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormControllerPanelMessages } from "@/features/i18n/messages/editorFormControllerPanel";

 interface FormControllerPanelProps {
  block: Block; // type === "form"
@@ -18,6 +20,8 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
  const [showSheetsGuide, setShowSheetsGuide] = useState(false);

  const formProps = block.props as FormBlockProps;
+  const locale = useAppLocale();
+  const m = getEditorFormControllerPanelMessages(locale);

  const sheetsScriptExample = (() => {
    const tokens = computeFormControllerPublicTokens(block, blocks);
@@ -71,13 +75,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
  return (
    <div className="space-y-4 text-xs">
      <p className="text-slate-400">
-        이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
-        엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
+        {m.introTextPrefix}
+        <code className="font-mono text-[11px]">/api/forms/submit</code>
+        {m.introTextSuffix}
      </p>

      <div className="space-y-2">
        <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">전송 대상</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.submitTargetLabel}</span>
          <select
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            value={formProps.submitTarget ?? "internal"}
@@ -87,18 +92,18 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
              } as any)
            }
          >
-            <option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
-            <option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
+            <option value="internal">{m.submitTargetOptionInternal}</option>
+            <option value="webhook">{m.submitTargetOptionWebhook}</option>
          </select>
        </label>

        {formProps.submitTarget === "webhook" && (
          <div className="space-y-3">
            <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.webhookUrlLabel}</span>
              <input
                className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder="예: https://script.google.com/macros/s/.../exec"
+                placeholder={m.webhookUrlPlaceholder}
                value={formProps.destinationUrl ?? ""}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
@@ -108,7 +113,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
              />
            </label>
            <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-500 dark:text-slate-400">전송 포맷</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.payloadFormatLabel}</span>
              <select
                className="w-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                value={formProps.payloadFormat ?? "form"}
@@ -118,12 +123,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                  } as any)
                }
              >
-                <option value="form">폼 데이터 (x-www-form-urlencoded)</option>
-                <option value="json">JSON (application/json)</option>
+                <option value="form">{m.payloadFormatOptionForm}</option>
+                <option value="json">{m.payloadFormatOptionJson}</option>
              </select>
            </label>
            <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-500 dark:text-slate-400">HTTP 메서드</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.httpMethodLabel}</span>
              <select
                className="w-28 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                value={formProps.method ?? "POST"}
@@ -138,10 +143,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
              </select>
            </label>
            <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">Authorization 토큰 (옵션)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.authTokenLabel}</span>
              <input
                className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder="예: Bearer xxxxxx"
+                placeholder={m.authTokenPlaceholder}
                value={formProps.headers?.Authorization ?? ""}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
@@ -154,10 +159,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
              />
            </label>
            <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.extraParamsLabel}</span>
              <textarea
                className="w-full h-16 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder={"예:\nsource=landing\nformId=contact-hero"}
+                placeholder={m.extraParamsPlaceholder}
                value={Object.entries(formProps.extraParams ?? {})
                  .map(([k, v]) => `${k}=${v}`)
                  .join("\n")}
@@ -186,7 +191,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                onClick={() => setShowSheetsGuide(true)}
              >
-                Google Sheets 연동 가이드
+                {m.sheetsGuideButtonLabel}
              </button>
            </div>
          </div>
@@ -194,9 +199,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
      </div>

      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 레이아웃</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.layoutSectionTitle}</h3>
        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>폼 너비 모드</span>
+          <span>{m.formWidthModeLabel}</span>
          <select
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            value={formProps.formWidthMode ?? "auto"}
@@ -206,14 +211,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
              } as any)
            }
          >
-            <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="auto">{m.formWidthModeOptionAuto}</option>
+            <option value="full">{m.formWidthModeOptionFull}</option>
+            <option value="fixed">{m.formWidthModeOptionFixed}</option>
          </select>
        </label>
        {(formProps.formWidthMode ?? "auto") === "fixed" && (
          <NumericPropertyControl
-            label="폼 고정 너비 (px)"
+            label={m.formFixedWidthLabel}
            unitLabel="(px)"
            value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
            min={160}
@@ -232,17 +237,17 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
          />
        )}
        <NumericPropertyControl
-          label="폼 위/아래 여백 (px)"
+          label={m.marginYLabel}
          unitLabel="(px)"
          value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
          min={0}
          max={160}
          step={4}
          presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "compact", label: "좁게", value: 16 },
-            { id: "normal", label: "보통", value: 24 },
-            { id: "spacious", label: "넓게", value: 40 },
+            { id: "none", label: m.marginYPresetNone, value: 0 },
+            { id: "compact", label: m.marginYPresetCompact, value: 16 },
+            { id: "normal", label: m.marginYPresetNormal, value: 24 },
+            { id: "spacious", label: m.marginYPresetSpacious, value: 40 },
          ]}
          onChangeValue={(v) =>
            updateBlock(selectedBlockId, {
@@ -253,12 +258,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
      </div>

      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 메시지</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.messagesSectionTitle}</h3>
        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>성공 메시지</span>
+          <span>{m.successMessageLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            placeholder="예: 성공적으로 전송되었습니다."
+            placeholder={m.successMessagePlaceholder}
            value={formProps.successMessage ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
@@ -268,10 +273,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
          />
        </label>
        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>에러 메시지</span>
+          <span>{m.errorMessageLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            placeholder="예: 전송 중 오류가 발생했습니다."
+            placeholder={m.errorMessagePlaceholder}
            value={formProps.errorMessage ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
@@ -283,10 +288,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
      </div>

      <div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 컨트롤러</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.controllerSectionTitle}</h3>

-        <fieldset className="space-y-2" aria-label="폼 필드 매핑">
-          <legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
+        <fieldset className="space-y-2" aria-label={m.fieldMappingAriaLabel}>
+          <legend className="text-[11px] text-slate-400 mb-1">{m.fieldMappingLegend}</legend>
          {blocks
            .filter((b) =>
              b.type === "formInput" ||
@@ -355,10 +360,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
        </fieldset>

        <div className="space-y-1">
-          <span className="text-[11px] text-slate-400">Submit 버튼</span>
+          <span className="text-[11px] text-slate-400">{m.submitButtonLabel}</span>
          <select
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="Submit 버튼"
+            aria-label={m.submitButtonAriaLabel}
            value={formProps.submitButtonId ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
@@ -393,27 +398,26 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
          <div className="w-full max-w-xl rounded border border-slate-200 bg-white px-4 py-3 text-xs text-slate-900 shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
            <div className="mb-2 flex items-center justify-between">
-              <h4 className="text-[11px] font-semibold">Google Sheets 연동 가이드</h4>
+              <h4 className="text-[11px] font-semibold">{m.sheetsGuideHeading}</h4>
              <button
                type="button"
                className="text-[11px] text-slate-400 hover:text-slate-100"
                onClick={() => setShowSheetsGuide(false)}
-                aria-label="Google Sheets 연동 가이드 닫기"
+                aria-label={m.sheetsGuideCloseAriaLabel}
              >
-                닫기
+                ×
              </button>
            </div>
            <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
-              구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다.
-              아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
+              {m.sheetsGuideIntro}
            </p>
            <ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2">
-              <li>Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.</li>
-              <li>시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.</li>
-              <li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li>
+              <li>{m.sheetsGuideStep1}</li>
+              <li>{m.sheetsGuideStep2}</li>
+              <li>{m.sheetsGuideStep3}</li>
            </ol>
            <div className="mt-2 space-y-1">
-              <span className="text-[11px] text-slate-500 dark:text-slate-400">예시 Apps Script 코드</span>
+              <span className="text-[11px] text-slate-500 dark:text-slate-400">{m.sheetsGuideExampleCodeLabel}</span>
              <textarea
                className="w-full h-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                readOnly