테마 적용

src/app/editor/forms/FormControllerPanel.tsx

@@ -76,10 +76,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
       </p>
 
       <div className="space-y-2">
-        <div className="flex flex-col gap-1">
-          <span className="text-slate-400">전송 대상</span>
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-500 dark:text-slate-400">전송 대상</span>
           <select
-            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            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"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -90,14 +90,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
             <option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
             <option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
           </select>
-        </div>
+        </label>
 
         {formProps.submitTarget === "webhook" && (
           <div className="space-y-3">
             <label className="flex flex-col gap-1">
-              <span className="text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
+              <span className="text-slate-500 dark:text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
               <input
-                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                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"
                 value={formProps.destinationUrl ?? ""}
                 onChange={(e) =>
@@ -108,9 +108,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               />
             </label>
             <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-400">전송 포맷</span>
+              <span className="text-slate-500 dark:text-slate-400">전송 포맷</span>
               <select
-                className="w-40 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                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"}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -123,9 +123,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               </select>
             </label>
             <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-400">HTTP 메서드</span>
+              <span className="text-slate-500 dark:text-slate-400">HTTP 메서드</span>
               <select
-                className="w-28 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                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"}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -138,9 +138,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               </select>
             </label>
             <label className="flex flex-col gap-1">
-              <span className="text-slate-400">Authorization 토큰 (옵션)</span>
+              <span className="text-slate-500 dark:text-slate-400">Authorization 토큰 (옵션)</span>
               <input
-                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                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"
                 value={formProps.headers?.Authorization ?? ""}
                 onChange={(e) =>
@@ -154,9 +154,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               />
             </label>
             <label className="flex flex-col gap-1">
-              <span className="text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
+              <span className="text-slate-500 dark:text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
               <textarea
-                className="w-full h-16 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500"
+                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"}
                 value={Object.entries(formProps.extraParams ?? {})
                   .map(([k, v]) => `${k}=${v}`)
@@ -183,7 +183,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
             <div className="flex justify-end">
               <button
                 type="button"
-                className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] text-slate-100 hover:bg-slate-800"
+                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 연동 가이드
@@ -194,11 +194,11 @@ 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-200">폼 레이아웃</h3>
-        <label className="flex flex-col gap-1 text-xs text-slate-400">
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 레이아웃</h3>
+        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
           <span>폼 너비 모드</span>
           <select
-            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            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"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -253,11 +253,11 @@ 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-200">폼 메시지</h3>
-        <label className="flex flex-col gap-1 text-xs text-slate-400">
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 메시지</h3>
+        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
           <span>성공 메시지</span>
           <input
-            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            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="예: 성공적으로 전송되었습니다."
             value={formProps.successMessage ?? ""}
             onChange={(e) =>
@@ -267,10 +267,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
             }
           />
         </label>
-        <label className="flex flex-col gap-1 text-xs text-slate-400">
+        <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
           <span>에러 메시지</span>
           <input
-            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            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="예: 전송 중 오류가 발생했습니다."
             value={formProps.errorMessage ?? ""}
             onChange={(e) =>
@@ -283,7 +283,7 @@ 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-200">폼 컨트롤러</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 컨트롤러</h3>
 
         <fieldset className="space-y-2" aria-label="폼 필드 매핑">
           <legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
@@ -313,11 +313,11 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               return (
                 <label
                   key={fieldId}
-                  className="flex items-center gap-2 text-[11px] text-slate-200"
+                  className="flex items-center gap-2 text-[11px] text-slate-800 dark:text-slate-200"
                 >
                   <input
                     type="checkbox"
-                    className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                    className="h-3 w-3 rounded border border-slate-300 bg-white text-slate-900 dark:border-slate-600 dark:bg-slate-900"
                     checked={checked}
                     onChange={(e) => {
                       const current = formProps.fieldIds ?? [];
@@ -334,7 +334,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                   <label className="inline-flex items-center gap-1 text-[11px] text-slate-400">
                     <input
                       type="checkbox"
-                      className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                      className="h-3 w-3 rounded border border-slate-300 bg-white text-slate-900 dark:border-slate-600 dark:bg-slate-900"
                       checked={required}
                       onChange={(e) => {
                         const current = formProps.requiredFieldIds ?? [];
@@ -357,7 +357,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
         <div className="space-y-1">
           <span className="text-[11px] text-slate-400">Submit 버튼</span>
           <select
-            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            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 버튼"
             value={formProps.submitButtonId ?? ""}
             onChange={(e) =>
@@ -390,10 +390,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
       </div>
 
       {showSheetsGuide && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70">
-          <div className="w-full max-w-xl rounded border border-slate-800 bg-slate-950 px-4 py-3 shadow-lg">
+        <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 text-slate-100">Google Sheets 연동 가이드</h4>
+              <h4 className="text-[11px] font-semibold">Google Sheets 연동 가이드</h4>
               <button
                 type="button"
                 className="text-[11px] text-slate-400 hover:text-slate-100"
@@ -403,7 +403,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                 닫기
               </button>
             </div>
-            <p className="text-[11px] text-slate-400 leading-relaxed">
+            <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
               구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다.
               아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
             </p>
@@ -413,9 +413,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               <li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li>
             </ol>
             <div className="mt-2 space-y-1">
-              <span className="text-[11px] text-slate-400">예시 Apps Script 코드</span>
+              <span className="text-[11px] text-slate-500 dark:text-slate-400">예시 Apps Script 코드</span>
               <textarea
-                className="w-full h-40 rounded border border-slate-800 bg-slate-950 px-2 py-1 text-[11px] font-mono text-slate-200"
+                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
                 value={sheetsScriptExample}
               />