From cd39b2fc4d89bcc8babe0f248422e816db19be81 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 4 Dec 2025 18:34:29 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=20=EC=8B=A0=EA=B7=9C=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI/UX=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/batch-management-new/page.tsx       | 1475 +++++++++--------
 1 file changed, 764 insertions(+), 711 deletions(-)

diff --git a/frontend/app/(main)/admin/batch-management-new/page.tsx b/frontend/app/(main)/admin/batch-management-new/page.tsx
index 29f36270..3093ed10 100644
--- a/frontend/app/(main)/admin/batch-management-new/page.tsx
+++ b/frontend/app/(main)/admin/batch-management-new/page.tsx
@@ -568,18 +568,9 @@ export default function BatchManagementNewPage() {
 
   return (
     <div className="container mx-auto space-y-6 p-6">
-      <div className="flex items-center justify-between">
+      {/* 페이지 헤더 */}
+      <div className="border-b pb-4">
         <h1 className="text-3xl font-bold">고급 배치 생성</h1>
-        <div className="flex space-x-2">
-          <Button onClick={loadConnections} variant="outline">
-            <RefreshCw className="mr-2 h-4 w-4" />
-            새로고침
-          </Button>
-          <Button onClick={handleSave}>
-            <Save className="mr-2 h-4 w-4" />
-            저장
-          </Button>
-        </div>
       </div>
 
       {/* 기본 정보 */}
@@ -649,28 +640,30 @@ export default function BatchManagementNewPage() {
         </CardContent>
       </Card>
 
-      {/* FROM 설정 */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center">
-            {batchType === "restapi-to-db" ? (
-              <>
-                <Globe className="mr-2 h-5 w-5" />
-                FROM: REST API (소스)
-              </>
-            ) : (
-              <>
-                <Database className="mr-2 h-5 w-5" />
-                FROM: 데이터베이스 (소스)
-              </>
-            )}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* REST API 설정 (REST API → DB) */}
-          {batchType === "restapi-to-db" && (
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {/* FROM/TO 설정 - 가로 배치 */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        {/* FROM 설정 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              {batchType === "restapi-to-db" ? (
+                <>
+                  <Globe className="mr-2 h-5 w-5" />
+                  FROM: REST API (소스)
+                </>
+              ) : (
+                <>
+                  <Database className="mr-2 h-5 w-5" />
+                  FROM: 데이터베이스 (소스)
+                </>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* REST API 설정 (REST API → DB) */}
+            {batchType === "restapi-to-db" && (
+              <div className="space-y-4">
+                {/* API 서버 URL */}
                 <div>
                   <Label htmlFor="fromApiUrl">API 서버 URL *</Label>
                   <Input
@@ -680,6 +673,8 @@ export default function BatchManagementNewPage() {
                     placeholder="https://api.example.com"
                   />
                 </div>
+
+                {/* 인증 토큰 설정 */}
                 <div>
                   <Label>인증 토큰 (Authorization)</Label>
                   {/* 토큰 설정 방식 선택 */}
@@ -745,9 +740,8 @@ export default function BatchManagementNewPage() {
                       : "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
                   </p>
                 </div>
-              </div>
 
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {/* 엔드포인트 */}
                 <div>
                   <Label htmlFor="fromEndpoint">엔드포인트 *</Label>
                   <Input
@@ -757,6 +751,8 @@ export default function BatchManagementNewPage() {
                     placeholder="/api/users"
                   />
                 </div>
+
+                {/* HTTP 메서드 */}
                 <div>
                   <Label>HTTP 메서드</Label>
                   <Select value={fromApiMethod} onValueChange={(value: any) => setFromApiMethod(value)}>
@@ -771,64 +767,63 @@ export default function BatchManagementNewPage() {
                     </SelectContent>
                   </Select>
                 </div>
-              </div>
 
-              {/* 데이터 배열 경로 */}
-              <div>
-                <Label htmlFor="dataArrayPath">데이터 배열 경로</Label>
-                <Input
-                  id="dataArrayPath"
-                  value={dataArrayPath}
-                  onChange={(e) => setDataArrayPath(e.target.value)}
-                  placeholder="response (예: data.items, results)"
-                />
-                <p className="mt-1 text-xs text-gray-500">
-                  API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
-                  <br />
-                  예시: response, data.items, result.list
-                </p>
-              </div>
-
-              {/* Request Body (POST/PUT/DELETE용) */}
-              {(fromApiMethod === "POST" || fromApiMethod === "PUT" || fromApiMethod === "DELETE") && (
+                {/* 데이터 배열 경로 */}
                 <div>
-                  <Label htmlFor="fromApiBody">Request Body (JSON)</Label>
-                  <Textarea
-                    id="fromApiBody"
-                    value={fromApiBody}
-                    onChange={(e) => setFromApiBody(e.target.value)}
-                    placeholder='{"username": "myuser", "token": "abc"}'
-                    className="min-h-[100px]"
-                    rows={5}
+                  <Label htmlFor="dataArrayPath">데이터 배열 경로</Label>
+                  <Input
+                    id="dataArrayPath"
+                    value={dataArrayPath}
+                    onChange={(e) => setDataArrayPath(e.target.value)}
+                    placeholder="response (예: data.items, results)"
                   />
-                  <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
-                </div>
-              )}
-
-              {/* API 파라미터 설정 */}
-              <div className="space-y-4">
-                <div className="border-t pt-4">
-                  <Label className="text-base font-medium">API 파라미터 설정</Label>
-                  <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                  <p className="mt-1 text-xs text-gray-500">
+                    API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
+                    <br />
+                    예시: response, data.items, result.list
+                  </p>
                 </div>
 
-                <div>
-                  <Label>파라미터 타입</Label>
-                  <Select value={apiParamType} onValueChange={(value: any) => setApiParamType(value)}>
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">파라미터 없음</SelectItem>
-                      <SelectItem value="url">URL 파라미터 (/api/users/{"{userId}"})</SelectItem>
-                      <SelectItem value="query">쿼리 파라미터 (/api/users?userId=123)</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+                {/* Request Body (POST/PUT/DELETE용) */}
+                {(fromApiMethod === "POST" || fromApiMethod === "PUT" || fromApiMethod === "DELETE") && (
+                  <div>
+                    <Label htmlFor="fromApiBody">Request Body (JSON)</Label>
+                    <Textarea
+                      id="fromApiBody"
+                      value={fromApiBody}
+                      onChange={(e) => setFromApiBody(e.target.value)}
+                      placeholder='{"username": "myuser", "token": "abc"}'
+                      className="min-h-[100px]"
+                      rows={5}
+                    />
+                    <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
+                  </div>
+                )}
 
-                {apiParamType !== "none" && (
-                  <>
-                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {/* API 파라미터 설정 */}
+                <div className="space-y-4">
+                  <div className="border-t pt-4">
+                    <Label className="text-base font-medium">API 파라미터 설정</Label>
+                    <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                  </div>
+
+                  <div>
+                    <Label>파라미터 타입</Label>
+                    <Select value={apiParamType} onValueChange={(value: any) => setApiParamType(value)}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">파라미터 없음</SelectItem>
+                        <SelectItem value="url">URL 파라미터 (/api/users/{"{userId}"})</SelectItem>
+                        <SelectItem value="query">쿼리 파라미터 (/api/users?userId=123)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {apiParamType !== "none" && (
+                    <>
+                      {/* 파라미터명 */}
                       <div>
                         <Label htmlFor="apiParamName">파라미터명 *</Label>
                         <Input
@@ -838,6 +833,8 @@ export default function BatchManagementNewPage() {
                           placeholder="userId, id, email 등"
                         />
                       </div>
+
+                      {/* 파라미터 소스 */}
                       <div>
                         <Label>파라미터 소스</Label>
                         <Select value={apiParamSource} onValueChange={(value: any) => setApiParamSource(value)}>
@@ -850,253 +847,229 @@ export default function BatchManagementNewPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                    </div>
 
-                    <div>
-                      <Label htmlFor="apiParamValue">
-                        {apiParamSource === "static" ? "파라미터 값" : "파라미터 템플릿"} *
-                      </Label>
-                      <Input
-                        id="apiParamValue"
-                        value={apiParamValue}
-                        onChange={(e) => setApiParamValue(e.target.value)}
-                        placeholder={
-                          apiParamSource === "static"
-                            ? "123, john@example.com 등"
-                            : "{{user_id}}, {{email}} 등 (실행 시 치환됨)"
-                        }
-                      />
-                      {apiParamSource === "dynamic" && (
-                        <p className="mt-1 text-xs text-gray-500">
-                          동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
-                        </p>
+                      <div>
+                        <Label htmlFor="apiParamValue">
+                          {apiParamSource === "static" ? "파라미터 값" : "파라미터 템플릿"} *
+                        </Label>
+                        <Input
+                          id="apiParamValue"
+                          value={apiParamValue}
+                          onChange={(e) => setApiParamValue(e.target.value)}
+                          placeholder={
+                            apiParamSource === "static"
+                              ? "123, john@example.com 등"
+                              : "{{user_id}}, {{email}} 등 (실행 시 치환됨)"
+                          }
+                        />
+                        {apiParamSource === "dynamic" && (
+                          <p className="mt-1 text-xs text-gray-500">
+                            동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
+                          </p>
+                        )}
+                      </div>
+
+                      {apiParamType === "url" && (
+                        <div className="rounded-lg bg-blue-50 p-3">
+                          <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-blue-700">
+                            엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
+                          </div>
+                          <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
+                        </div>
                       )}
+
+                      {apiParamType === "query" && (
+                        <div className="rounded-lg bg-green-50 p-3">
+                          <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-green-700">
+                            실제 호출: {fromEndpoint || "/api/users"}?{apiParamName || "userId"}=
+                            {apiParamValue || "123"}
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {/* API 호출 미리보기 정보 */}
+                {fromApiUrl && fromEndpoint && (
+                  <div className="rounded-lg bg-gray-50 p-3">
+                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-gray-600">
+                      {fromApiMethod} {fromApiUrl}
+                      {apiParamType === "url" && apiParamName && apiParamValue
+                        ? fromEndpoint.replace(`{${apiParamName}}`, apiParamValue) || fromEndpoint + `/${apiParamValue}`
+                        : fromEndpoint}
+                      {apiParamType === "query" && apiParamName && apiParamValue
+                        ? `?${apiParamName}=${apiParamValue}`
+                        : ""}
                     </div>
-
-                    {apiParamType === "url" && (
-                      <div className="rounded-lg bg-blue-50 p-3">
-                        <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
-                        <div className="mt-1 text-sm text-blue-700">
-                          엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
-                        </div>
-                        <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
-                      </div>
-                    )}
-
-                    {apiParamType === "query" && (
-                      <div className="rounded-lg bg-green-50 p-3">
-                        <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
-                        <div className="mt-1 text-sm text-green-700">
-                          실제 호출: {fromEndpoint || "/api/users"}?{apiParamName || "userId"}={apiParamValue || "123"}
-                        </div>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* API URL + 엔드포인트 + 인증 토큰 설정 완료 시 미리보기 버튼 표시 */}
-              {fromApiUrl &&
-                fromEndpoint &&
-                ((authTokenMode === "direct" && fromApiKey) || (authTokenMode === "db" && authServiceName)) && (
-                  <div className="space-y-3">
-                    <div className="rounded-lg bg-gray-50 p-3">
-                      <div className="text-sm font-medium text-gray-700">API 호출 미리보기</div>
-                      <div className="mt-1 text-sm text-gray-600">
-                        {fromApiMethod} {fromApiUrl}
-                        {apiParamType === "url" && apiParamName && apiParamValue
-                          ? fromEndpoint.replace(`{${apiParamName}}`, apiParamValue) ||
-                            fromEndpoint + `/${apiParamValue}`
-                          : fromEndpoint}
-                        {apiParamType === "query" && apiParamName && apiParamValue
-                          ? `?${apiParamName}=${apiParamValue}`
-                          : ""}
-                      </div>
+                    {((authTokenMode === "direct" && fromApiKey) || (authTokenMode === "db" && authServiceName)) && (
                       <div className="mt-1 text-xs text-gray-500">
                         {authTokenMode === "direct"
                           ? `Authorization: Bearer ${fromApiKey.substring(0, 15)}...`
                           : `Authorization: DB 토큰 (${authServiceName})`}
                       </div>
-                      {apiParamType !== "none" && apiParamName && apiParamValue && (
-                        <div className="mt-1 text-xs text-blue-600">
-                          파라미터: {apiParamName} = {apiParamValue} (
-                          {apiParamSource === "static" ? "고정값" : "동적값"})
-                        </div>
-                      )}
-                    </div>
-                    <Button onClick={previewRestApiData} variant="outline" className="w-full">
-                      <RefreshCw className="mr-2 h-4 w-4" />
-                      API 데이터 미리보기
-                    </Button>
+                    )}
+                    {apiParamType !== "none" && apiParamName && apiParamValue && (
+                      <div className="mt-1 text-xs text-blue-600">
+                        파라미터: {apiParamName} = {apiParamValue} ({apiParamSource === "static" ? "고정값" : "동적값"})
+                      </div>
+                    )}
                   </div>
                 )}
-            </div>
-          )}
+              </div>
+            )}
 
-          {/* DB 설정 (DB → REST API) */}
-          {batchType === "db-to-restapi" && (
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                <div>
-                  <Label>소스 연결 *</Label>
-                  <Select
-                    value={fromConnection?.id?.toString() || fromConnection?.type || ""}
-                    onValueChange={handleFromConnectionChange}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="연결을 선택하세요" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {connections.map((connection) => (
-                        <SelectItem
-                          key={connection.id || "internal"}
-                          value={connection.id ? connection.id.toString() : "internal"}
-                        >
-                          {connection.name} ({connection.type === "internal" ? "내부 DB" : connection.db_type})
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label>소스 테이블 *</Label>
-                  <Select value={fromTable} onValueChange={handleFromTableChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="테이블을 선택하세요" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Array.isArray(fromTables) &&
-                        fromTables.map((table: string) => (
-                          <SelectItem key={table} value={table}>
-                            {table.toUpperCase()}
+            {/* DB 설정 (DB → REST API) */}
+            {batchType === "db-to-restapi" && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    <Label>소스 연결 *</Label>
+                    <Select
+                      value={fromConnection?.id?.toString() || fromConnection?.type || ""}
+                      onValueChange={handleFromConnectionChange}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="연결을 선택하세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {connections.map((connection) => (
+                          <SelectItem
+                            key={connection.id || "internal"}
+                            value={connection.id ? connection.id.toString() : "internal"}
+                          >
+                            {connection.name} ({connection.type === "internal" ? "내부 DB" : connection.db_type})
                           </SelectItem>
                         ))}
-                    </SelectContent>
-                  </Select>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label>소스 테이블 *</Label>
+                    <Select value={fromTable} onValueChange={handleFromTableChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="테이블을 선택하세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Array.isArray(fromTables) &&
+                          fromTables.map((table: string) => (
+                            <SelectItem key={table} value={table}>
+                              {table.toUpperCase()}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-              </div>
 
-              {/* 컬럼 선택 UI */}
-              {fromColumns.length > 0 && (
-                <div>
-                  <Label>컬럼 선택 (선택된 컬럼이 API로 전송됩니다)</Label>
-                  <div className="mt-2 grid max-h-60 grid-cols-2 gap-2 overflow-y-auto rounded-lg border p-3 md:grid-cols-3 lg:grid-cols-4">
-                    {fromColumns.map((column) => (
-                      <div key={column.column_name} className="flex items-center space-x-2">
-                        <input
-                          type="checkbox"
-                          id={`col-${column.column_name}`}
-                          checked={selectedColumns.includes(column.column_name)}
-                          onChange={(e) => {
-                            if (e.target.checked) {
-                              setSelectedColumns([...selectedColumns, column.column_name]);
-                            } else {
-                              setSelectedColumns(selectedColumns.filter((col) => col !== column.column_name));
-                            }
-                          }}
-                          className="rounded border-gray-300"
-                        />
-                        <label
-                          htmlFor={`col-${column.column_name}`}
-                          className="flex-1 cursor-pointer text-sm"
-                          title={`타입: ${column.data_type} | NULL: ${column.is_nullable ? "Y" : "N"}`}
-                        >
-                          {column.column_name}
-                        </label>
-                      </div>
-                    ))}
-                  </div>
-
-                  {/* 선택된 컬럼 개수 표시 */}
-                  <div className="mt-2 text-xs text-gray-500">
-                    선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
-                  </div>
-
-                  {/* 빠른 매핑 버튼들 */}
-                  {selectedColumns.length > 0 && toApiFields.length > 0 && (
-                    <div className="mt-3 rounded-lg border border-green-200 bg-green-50 p-3">
-                      <div className="mb-2 text-sm font-medium text-green-800">빠른 매핑</div>
-                      <div className="flex flex-wrap gap-2">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const mapping: Record<string, string> = {};
-                            selectedColumns.forEach((col) => {
-                              // 스마트 매핑 로직
-                              const matchingApiField = toApiFields.find((apiField) => {
-                                const colLower = col.toLowerCase();
-                                const apiLower = apiField.toLowerCase();
-
-                                // 정확한 매치
-                                if (colLower === apiLower) return true;
-
-                                // 언더스코어 무시 매치
-                                if (colLower.replace(/_/g, "") === apiLower.replace(/_/g, "")) return true;
-                                // 의미적 매핑
-                                if (
-                                  (colLower.includes("created") || colLower.includes("reg")) &&
-                                  (apiLower.includes("date") || apiLower.includes("time"))
-                                )
-                                  return true;
-                                if (
-                                  (colLower.includes("updated") || colLower.includes("mod")) &&
-                                  (apiLower.includes("date") || apiLower.includes("time"))
-                                )
-                                  return true;
-                                if (colLower.includes("id") && apiLower.includes("id")) return true;
-                                if (colLower.includes("name") && apiLower.includes("name")) return true;
-                                if (colLower.includes("code") && apiLower.includes("code")) return true;
-
-                                return false;
-                              });
-
-                              if (matchingApiField) {
-                                mapping[col] = matchingApiField;
+                {/* 컬럼 선택 UI */}
+                {fromColumns.length > 0 && (
+                  <div>
+                    <Label>컬럼 선택 (선택된 컬럼이 API로 전송됩니다)</Label>
+                    <div className="mt-2 grid max-h-60 grid-cols-2 gap-2 overflow-y-auto rounded-lg border p-3 md:grid-cols-3 lg:grid-cols-4">
+                      {fromColumns.map((column) => (
+                        <div key={column.column_name} className="flex items-center space-x-2">
+                          <input
+                            type="checkbox"
+                            id={`col-${column.column_name}`}
+                            checked={selectedColumns.includes(column.column_name)}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedColumns([...selectedColumns, column.column_name]);
+                              } else {
+                                setSelectedColumns(selectedColumns.filter((col) => col !== column.column_name));
                               }
-                            });
-                            setDbToApiFieldMapping(mapping);
-                            toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
-                          }}
-                          className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
-                        >
-                          스마트 자동 매핑
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setDbToApiFieldMapping({});
-                            toast.success("매핑이 초기화되었습니다.");
-                          }}
-                          className="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
-                        >
-                          매핑 초기화
-                        </button>
-                      </div>
+                            }}
+                            className="rounded border-gray-300"
+                          />
+                          <label
+                            htmlFor={`col-${column.column_name}`}
+                            className="flex-1 cursor-pointer text-sm"
+                            title={`타입: ${column.data_type} | NULL: ${column.is_nullable ? "Y" : "N"}`}
+                          >
+                            {column.column_name}
+                          </label>
+                        </div>
+                      ))}
                     </div>
-                  )}
 
-                  {/* 자동 생성된 JSON 미리보기 */}
-                  {selectedColumns.length > 0 && (
-                    <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                      <div className="mb-2 text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
-                      <pre className="overflow-x-auto font-mono text-xs text-blue-600">
-                        {JSON.stringify(
-                          selectedColumns.reduce(
-                            (obj, col) => {
-                              const apiField = dbToApiFieldMapping[col] || col; // 매핑된 API 필드명 또는 원본 컬럼명
-                              obj[apiField] = `{{${col}}}`;
-                              return obj;
-                            },
-                            {} as Record<string, string>,
-                          ),
-                          null,
-                          2,
-                        )}
-                      </pre>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const autoJson = JSON.stringify(
+                    {/* 선택된 컬럼 개수 표시 */}
+                    <div className="mt-2 text-xs text-gray-500">
+                      선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
+                    </div>
+
+                    {/* 빠른 매핑 버튼들 */}
+                    {selectedColumns.length > 0 && toApiFields.length > 0 && (
+                      <div className="mt-3 rounded-lg border border-green-200 bg-green-50 p-3">
+                        <div className="mb-2 text-sm font-medium text-green-800">빠른 매핑</div>
+                        <div className="flex flex-wrap gap-2">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const mapping: Record<string, string> = {};
+                              selectedColumns.forEach((col) => {
+                                // 스마트 매핑 로직
+                                const matchingApiField = toApiFields.find((apiField) => {
+                                  const colLower = col.toLowerCase();
+                                  const apiLower = apiField.toLowerCase();
+
+                                  // 정확한 매치
+                                  if (colLower === apiLower) return true;
+
+                                  // 언더스코어 무시 매치
+                                  if (colLower.replace(/_/g, "") === apiLower.replace(/_/g, "")) return true;
+                                  // 의미적 매핑
+                                  if (
+                                    (colLower.includes("created") || colLower.includes("reg")) &&
+                                    (apiLower.includes("date") || apiLower.includes("time"))
+                                  )
+                                    return true;
+                                  if (
+                                    (colLower.includes("updated") || colLower.includes("mod")) &&
+                                    (apiLower.includes("date") || apiLower.includes("time"))
+                                  )
+                                    return true;
+                                  if (colLower.includes("id") && apiLower.includes("id")) return true;
+                                  if (colLower.includes("name") && apiLower.includes("name")) return true;
+                                  if (colLower.includes("code") && apiLower.includes("code")) return true;
+
+                                  return false;
+                                });
+
+                                if (matchingApiField) {
+                                  mapping[col] = matchingApiField;
+                                }
+                              });
+                              setDbToApiFieldMapping(mapping);
+                              toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
+                            }}
+                            className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                          >
+                            스마트 자동 매핑
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setDbToApiFieldMapping({});
+                              toast.success("매핑이 초기화되었습니다.");
+                            }}
+                            className="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
+                          >
+                            매핑 초기화
+                          </button>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* 자동 생성된 JSON 미리보기 */}
+                    {selectedColumns.length > 0 && (
+                      <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                        <div className="mb-2 text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
+                        <pre className="overflow-x-auto font-mono text-xs text-blue-600">
+                          {JSON.stringify(
                             selectedColumns.reduce(
                               (obj, col) => {
                                 const apiField = dbToApiFieldMapping[col] || col; // 매핑된 API 필드명 또는 원본 컬럼명
@@ -1107,22 +1080,321 @@ export default function BatchManagementNewPage() {
                             ),
                             null,
                             2,
-                          );
-                          setToApiBody(autoJson);
-                          toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
+                          )}
+                        </pre>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const autoJson = JSON.stringify(
+                              selectedColumns.reduce(
+                                (obj, col) => {
+                                  const apiField = dbToApiFieldMapping[col] || col; // 매핑된 API 필드명 또는 원본 컬럼명
+                                  obj[apiField] = `{{${col}}}`;
+                                  return obj;
+                                },
+                                {} as Record<string, string>,
+                              ),
+                              null,
+                              2,
+                            );
+                            setToApiBody(autoJson);
+                            toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
+                          }}
+                          className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                        >
+                          Request Body에 적용
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* TO 설정 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              {batchType === "restapi-to-db" ? (
+                <>
+                  <Database className="mr-2 h-5 w-5" />
+                  TO: 데이터베이스 (대상)
+                </>
+              ) : (
+                <>
+                  <Globe className="mr-2 h-5 w-5" />
+                  TO: REST API (대상)
+                </>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* DB 설정 (REST API → DB) - 단계적 활성화 */}
+            {batchType === "restapi-to-db" && (
+              <div className="space-y-4">
+                {/* 1. 커넥션 선택 - 항상 활성화 */}
+                <div>
+                  <Label>데이터베이스 커넥션 선택 *</Label>
+                  <Select onValueChange={handleToConnectionChange}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="커넥션을 선택하세요" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {connections.map((connection, index) => (
+                        <SelectItem
+                          key={connection.id || `internal-${index}`}
+                          value={connection.id ? connection.id.toString() : "internal"}
+                        >
+                          {connection.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 2. 테이블 선택 - 커넥션 선택 후 활성화 */}
+                <div className={toTables.length === 0 ? "pointer-events-none opacity-50" : ""}>
+                  <Label>테이블 선택 *</Label>
+                  <Select onValueChange={handleToTableChange} disabled={toTables.length === 0}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={toTables.length === 0 ? "먼저 커넥션을 선택하세요" : "테이블을 선택하세요"}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {toTables.map((table: string) => (
+                        <SelectItem key={table} value={table}>
+                          {table.toUpperCase()}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 3. 저장 모드 - 테이블 선택 후 활성화 */}
+                <div className={!toTable ? "pointer-events-none opacity-50" : ""}>
+                  <Label>저장 모드</Label>
+                  <div className="mt-2 flex gap-4">
+                    <label className="flex cursor-pointer items-center gap-2">
+                      <input
+                        type="radio"
+                        name="saveMode"
+                        value="INSERT"
+                        checked={saveMode === "INSERT"}
+                        onChange={() => {
+                          setSaveMode("INSERT");
+                          setConflictKey("");
                         }}
-                        className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
-                      >
-                        Request Body에 적용
-                      </button>
-                    </div>
+                        className="h-4 w-4"
+                        disabled={!toTable}
+                      />
+                      <span className="text-sm">INSERT (새 데이터 추가)</span>
+                    </label>
+                    <label className="flex cursor-pointer items-center gap-2">
+                      <input
+                        type="radio"
+                        name="saveMode"
+                        value="UPSERT"
+                        checked={saveMode === "UPSERT"}
+                        onChange={() => setSaveMode("UPSERT")}
+                        className="h-4 w-4"
+                        disabled={!toTable}
+                      />
+                      <span className="text-sm">UPSERT (있으면 업데이트, 없으면 추가)</span>
+                    </label>
+                  </div>
+                </div>
+
+                {/* 4. 충돌 기준 컬럼 - UPSERT 선택 후 활성화 */}
+                <div className={saveMode !== "UPSERT" ? "pointer-events-none opacity-50" : ""}>
+                  <Label htmlFor="conflictKey">충돌 기준 컬럼 (Conflict Key) *</Label>
+                  <Select value={conflictKey} onValueChange={setConflictKey} disabled={saveMode !== "UPSERT"}>
+                    <SelectTrigger className="mt-2">
+                      <SelectValue
+                        placeholder={
+                          saveMode !== "UPSERT" ? "UPSERT 모드를 선택하세요" : "UPSERT 기준 컬럼을 선택하세요"
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {toColumns.map((col) => (
+                        <SelectItem key={col.column_name} value={col.column_name}>
+                          {col.column_name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="mt-1 text-xs text-gray-500">
+                    이 컬럼 값이 같으면 UPDATE, 없으면 INSERT 합니다. (예: device_serial_number)
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* REST API 설정 (DB → REST API) */}
+            {batchType === "db-to-restapi" && (
+              <div className="space-y-4">
+                {/* API 서버 URL */}
+                <div>
+                  <Label htmlFor="toApiUrl">API 서버 URL *</Label>
+                  <Input
+                    id="toApiUrl"
+                    value={toApiUrl}
+                    onChange={(e) => setToApiUrl(e.target.value)}
+                    placeholder="https://api.example.com"
+                  />
+                </div>
+
+                {/* API 키 */}
+                <div>
+                  <Label htmlFor="toApiKey">API 키 *</Label>
+                  <Input
+                    id="toApiKey"
+                    value={toApiKey}
+                    onChange={(e) => setToApiKey(e.target.value)}
+                    placeholder="ak_your_api_key_here"
+                  />
+                </div>
+
+                {/* 엔드포인트 */}
+                <div>
+                  <Label htmlFor="toEndpoint">엔드포인트 *</Label>
+                  <Input
+                    id="toEndpoint"
+                    value={toEndpoint}
+                    onChange={(e) => setToEndpoint(e.target.value)}
+                    placeholder="/api/users"
+                  />
+                  {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
+                    <p className="mt-1 text-xs text-gray-500">
+                      실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : "{ID}"}
+                    </p>
                   )}
                 </div>
-              )}
-            </div>
+
+                {/* HTTP 메서드 */}
+                <div>
+                  <Label>HTTP 메서드</Label>
+                  <Select value={toApiMethod} onValueChange={(value: any) => setToApiMethod(value)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="POST">POST (데이터 생성)</SelectItem>
+                      <SelectItem value="PUT">PUT (데이터 업데이트)</SelectItem>
+                      <SelectItem value="DELETE">DELETE (데이터 삭제)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* URL 경로 파라미터 설정 (PUT/DELETE용) */}
+                {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
+                  <div>
+                    <Label>URL 경로 파라미터 컬럼 *</Label>
+                    <Select value={urlPathColumn} onValueChange={setUrlPathColumn}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="URL 경로에 사용할 컬럼을 선택하세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {selectedColumns.map((column) => (
+                          <SelectItem key={column} value={column}>
+                            {column} (예: /api/users/{`{${column}}`})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="mt-1 text-xs text-gray-500">
+                      PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
+                    </p>
+                  </div>
+                )}
+
+                {/* TO API 미리보기 버튼 */}
+                <div className="flex justify-center">
+                  <button
+                    type="button"
+                    onClick={previewToApiData}
+                    className="flex items-center space-x-2 rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
+                  >
+                    <Eye className="h-4 w-4" />
+                    <span>API 필드 미리보기</span>
+                  </button>
+                </div>
+
+                {/* TO API 필드 표시 */}
+                {toApiFields.length > 0 && (
+                  <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                    <div className="mb-2 text-sm font-medium text-green-800">
+                      API 필드 목록 ({toApiFields.length}개)
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {toApiFields.map((field) => (
+                        <span key={field} className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+                          {field}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Request Body 템플릿 */}
+                {(toApiMethod === "POST" || toApiMethod === "PUT") && (
+                  <div>
+                    <Label htmlFor="toApiBody">Request Body 템플릿 (JSON)</Label>
+                    <textarea
+                      id="toApiBody"
+                      value={toApiBody}
+                      onChange={(e) => setToApiBody(e.target.value)}
+                      placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
+                      className="h-24 w-full rounded-md border p-2 font-mono text-sm"
+                    />
+                    <div className="mt-1 text-xs text-gray-500">
+                      DB 컬럼 값을 {"{{컬럼명}}"} 형태로 매핑하세요. 예: {"{{user_id}}, {{user_name}}"}
+                    </div>
+                  </div>
+                )}
+
+                {/* API 호출 정보 */}
+                {toApiUrl && toApiKey && toEndpoint && (
+                  <div className="rounded-lg bg-gray-50 p-3">
+                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-gray-600">
+                      {toApiMethod} {toApiUrl}
+                      {toEndpoint}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-500">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
+                    {toApiBody && (
+                      <div className="mt-1 text-xs text-blue-600">Body: {toApiBody.substring(0, 50)}...</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* API 데이터 미리보기 버튼 - FROM/TO 섹션 아래 */}
+      {batchType === "restapi-to-db" && (
+        <div className="flex justify-center">
+          <Button
+            onClick={previewRestApiData}
+            variant="outline"
+            disabled={!fromApiUrl || !fromEndpoint || !toTable}
+            className="gap-2"
+          >
+            <RefreshCw className="h-4 w-4" />
+            데이터 불러오고 매핑하기
+          </Button>
+          {(!fromApiUrl || !fromEndpoint || !toTable) && (
+            <p className="ml-4 flex items-center text-xs text-gray-500">
+              FROM 섹션과 TO 섹션의 필수 값을 모두 입력해야 합니다.
+            </p>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      )}
 
       {/* 매핑 UI - 배치 타입별 동적 렌더링 */}
       {/* REST API → DB 매핑 */}
@@ -1148,257 +1420,17 @@ export default function BatchManagementNewPage() {
         />
       )}
 
-      {/* TO 설정 */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center">
-            {batchType === "restapi-to-db" ? (
-              <>
-                <Database className="mr-2 h-5 w-5" />
-                TO: 데이터베이스 (대상)
-              </>
-            ) : (
-              <>
-                <Globe className="mr-2 h-5 w-5" />
-                TO: REST API (대상)
-              </>
-            )}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* DB 설정 (REST API → DB) */}
-          {batchType === "restapi-to-db" && (
-            <>
-              <div>
-                <Label>데이터베이스 커넥션 선택</Label>
-                <Select onValueChange={handleToConnectionChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="커넥션을 선택하세요" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {connections.map((connection, index) => (
-                      <SelectItem
-                        key={connection.id || `internal-${index}`}
-                        value={connection.id ? connection.id.toString() : "internal"}
-                      >
-                        {connection.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </>
-          )}
-
-          {/* REST API 설정 (DB → REST API) */}
-          {batchType === "db-to-restapi" && (
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                <div>
-                  <Label htmlFor="toApiUrl">API 서버 URL *</Label>
-                  <Input
-                    id="toApiUrl"
-                    value={toApiUrl}
-                    onChange={(e) => setToApiUrl(e.target.value)}
-                    placeholder="https://api.example.com"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="toApiKey">API 키 *</Label>
-                  <Input
-                    id="toApiKey"
-                    value={toApiKey}
-                    onChange={(e) => setToApiKey(e.target.value)}
-                    placeholder="ak_your_api_key_here"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                <div>
-                  <Label htmlFor="toEndpoint">엔드포인트 *</Label>
-                  <Input
-                    id="toEndpoint"
-                    value={toEndpoint}
-                    onChange={(e) => setToEndpoint(e.target.value)}
-                    placeholder="/api/users"
-                  />
-                  {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
-                    <p className="mt-1 text-xs text-gray-500">
-                      💡 실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : "{ID}"}
-                    </p>
-                  )}
-                </div>
-                <div>
-                  <Label>HTTP 메서드</Label>
-                  <Select value={toApiMethod} onValueChange={(value: any) => setToApiMethod(value)}>
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="POST">POST (데이터 생성)</SelectItem>
-                      <SelectItem value="PUT">PUT (데이터 업데이트)</SelectItem>
-                      <SelectItem value="DELETE">DELETE (데이터 삭제)</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* URL 경로 파라미터 설정 (PUT/DELETE용) */}
-              {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
-                <div>
-                  <Label>URL 경로 파라미터 컬럼 *</Label>
-                  <Select value={urlPathColumn} onValueChange={setUrlPathColumn}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="URL 경로에 사용할 컬럼을 선택하세요" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {selectedColumns.map((column) => (
-                        <SelectItem key={column} value={column}>
-                          {column} (예: /api/users/{`{${column}}`})
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="mt-1 text-xs text-gray-500">
-                    PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
-                  </p>
-                </div>
-              )}
-
-              {/* TO API 미리보기 버튼 */}
-              <div className="flex justify-center">
-                <button
-                  type="button"
-                  onClick={previewToApiData}
-                  className="flex items-center space-x-2 rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
-                >
-                  <Eye className="h-4 w-4" />
-                  <span>API 필드 미리보기</span>
-                </button>
-              </div>
-
-              {/* TO API 필드 표시 */}
-              {toApiFields.length > 0 && (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-3">
-                  <div className="mb-2 text-sm font-medium text-green-800">API 필드 목록 ({toApiFields.length}개)</div>
-                  <div className="flex flex-wrap gap-2">
-                    {toApiFields.map((field) => (
-                      <span key={field} className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">
-                        {field}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Request Body 템플릿 */}
-              {(toApiMethod === "POST" || toApiMethod === "PUT") && (
-                <div>
-                  <Label htmlFor="toApiBody">Request Body 템플릿 (JSON)</Label>
-                  <textarea
-                    id="toApiBody"
-                    value={toApiBody}
-                    onChange={(e) => setToApiBody(e.target.value)}
-                    placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
-                    className="h-24 w-full rounded-md border p-2 font-mono text-sm"
-                  />
-                  <div className="mt-1 text-xs text-gray-500">
-                    DB 컬럼 값을 {"{{컬럼명}}"} 형태로 매핑하세요. 예: {"{{user_id}}, {{user_name}}"}
-                  </div>
-                </div>
-              )}
-
-              {toApiUrl && toApiKey && toEndpoint && (
-                <div className="rounded-lg bg-gray-50 p-3">
-                  <div className="text-sm font-medium text-gray-700">API 호출 미리보기</div>
-                  <div className="mt-1 text-sm text-gray-600">
-                    {toApiMethod} {toApiUrl}
-                    {toEndpoint}
-                  </div>
-                  <div className="mt-1 text-xs text-gray-500">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
-                  {toApiBody && <div className="mt-1 text-xs text-blue-600">Body: {toApiBody.substring(0, 50)}...</div>}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* 테이블/컬럼 선택 (REST API → DB만) */}
-          {batchType === "restapi-to-db" && toTables.length > 0 && (
-            <div>
-              <Label>테이블 선택</Label>
-              <Select onValueChange={handleToTableChange}>
-                <SelectTrigger>
-                  <SelectValue placeholder="테이블을 선택하세요" />
-                </SelectTrigger>
-                <SelectContent>
-                  {toTables.map((table: string) => (
-                    <SelectItem key={table} value={table}>
-                      {table.toUpperCase()}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          )}
-
-          {/* INSERT/UPSERT 설정 (테이블 선택 후에만 표시) */}
-          {batchType === "restapi-to-db" && toTable && toColumns.length > 0 && (
-            <div className="space-y-4 border-t pt-4">
-              <div>
-                <Label>저장 모드</Label>
-                <div className="mt-2 flex gap-4">
-                  <label className="flex cursor-pointer items-center gap-2">
-                    <input
-                      type="radio"
-                      name="saveMode"
-                      value="INSERT"
-                      checked={saveMode === "INSERT"}
-                      onChange={() => {
-                        setSaveMode("INSERT");
-                        setConflictKey("");
-                      }}
-                      className="h-4 w-4"
-                    />
-                    <span className="text-sm">INSERT (새 데이터 추가)</span>
-                  </label>
-                  <label className="flex cursor-pointer items-center gap-2">
-                    <input
-                      type="radio"
-                      name="saveMode"
-                      value="UPSERT"
-                      checked={saveMode === "UPSERT"}
-                      onChange={() => setSaveMode("UPSERT")}
-                      className="h-4 w-4"
-                    />
-                    <span className="text-sm">UPSERT (있으면 업데이트, 없으면 추가)</span>
-                  </label>
-                </div>
-              </div>
-              {saveMode === "UPSERT" && (
-                <div>
-                  <Label htmlFor="conflictKey">충돌 기준 컬럼 (Conflict Key) *</Label>
-                  <Select value={conflictKey} onValueChange={setConflictKey}>
-                    <SelectTrigger className="mt-2">
-                      <SelectValue placeholder="UPSERT 기준 컬럼을 선택하세요" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {toColumns.map((col) => (
-                        <SelectItem key={col.column_name} value={col.column_name}>
-                          {col.column_name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="mt-1 text-xs text-gray-500">
-                    이 컬럼 값이 같으면 UPDATE, 없으면 INSERT 합니다. (예: device_serial_number)
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+      {/* 하단 액션 버튼 */}
+      <div className="flex items-center justify-end gap-2 border-t pt-6">
+        <Button onClick={loadConnections} variant="outline" className="gap-2">
+          <RefreshCw className="h-4 w-4" />
+          새로고침
+        </Button>
+        <Button onClick={handleSave} className="gap-2">
+          <Save className="h-4 w-4" />
+          저장
+        </Button>
+      </div>
     </div>
   );
 }
@@ -1449,148 +1481,169 @@ const RestApiToDbMappingCard = memo(function RestApiToDbMappingCard({
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle>컬럼 매핑 설정</CardTitle>
-          <Button variant="outline" size="sm" onClick={addMapping} className="h-8 gap-1">
-            <Plus className="h-4 w-4" />
-            매핑 추가
-          </Button>
-        </div>
+        <CardTitle>컬럼 매핑 설정</CardTitle>
         <CardDescription>DB 컬럼에 API 필드 또는 고정값을 매핑합니다.</CardDescription>
       </CardHeader>
       <CardContent>
-        {mappingList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-8 text-center">
-            <p className="text-muted-foreground text-sm">매핑이 없습니다.</p>
-            <Button variant="link" onClick={addMapping} className="mt-2">
-              매핑 추가하기
-            </Button>
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          {/* 왼쪽: 샘플 데이터 */}
+          <div className="flex flex-col">
+            <div className="mb-3 flex h-8 items-center">
+              <h4 className="text-sm font-semibold">샘플 데이터 (최대 3개)</h4>
+            </div>
+            {sampleJsonList.length > 0 ? (
+              <div className="bg-muted/30 h-[360px] overflow-y-auto rounded-lg border p-3">
+                <div className="space-y-2">
+                  {sampleJsonList.map((json, index) => (
+                    <div key={index} className="bg-background rounded border p-2">
+                      <pre className="font-mono text-xs whitespace-pre-wrap">{json}</pre>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="flex h-[360px] items-center justify-center rounded-lg border border-dashed">
+                <p className="text-muted-foreground text-sm">
+                  API 데이터 미리보기를 실행하면 샘플 데이터가 표시됩니다.
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
-          <div className="space-y-3">
-            {mappingList.map((mapping, index) => (
-              <div key={mapping.id} className="bg-muted/30 flex items-center gap-3 rounded-lg border p-3">
-                {/* 순서 표시 */}
-                <div className="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium">
-                  {index + 1}
-                </div>
 
-                {/* DB 컬럼 선택 (좌측 - TO) */}
-                <div className="w-44 shrink-0">
-                  <Select
-                    value={mapping.dbColumn || "none"}
-                    onValueChange={(value) => updateMapping(mapping.id, { dbColumn: value === "none" ? "" : value })}
-                  >
-                    <SelectTrigger className="h-9">
-                      <SelectValue placeholder="DB 컬럼 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">선택 안함</SelectItem>
-                      {toColumns.map((col) => {
-                        const isUsed =
-                          mappedDbColumns.includes(col.column_name) && mapping.dbColumn !== col.column_name;
-                        return (
-                          <SelectItem key={col.column_name} value={col.column_name} disabled={isUsed}>
-                            <div className="flex items-center gap-2">
-                              <span className={isUsed ? "text-muted-foreground" : ""}>{col.column_name}</span>
-                              <span className="text-muted-foreground text-xs">({col.data_type})</span>
-                            </div>
-                          </SelectItem>
-                        );
-                      })}
-                    </SelectContent>
-                  </Select>
-                </div>
+          {/* 오른쪽: 매핑 영역 (스크롤) */}
+          <div className="flex flex-col">
+            <div className="mb-3 flex h-8 items-center justify-between">
+              <h4 className="text-sm font-semibold">매핑 설정</h4>
+              <Button variant="outline" size="sm" onClick={addMapping} className="h-8 gap-1">
+                <Plus className="h-4 w-4" />
+                매핑 추가
+              </Button>
+            </div>
 
-                {/* 화살표 */}
-                <ArrowLeft className="text-muted-foreground h-4 w-4 shrink-0" />
-
-                {/* 소스 타입 선택 */}
-                <div className="w-28 shrink-0">
-                  <Select
-                    value={mapping.sourceType}
-                    onValueChange={(value: "api" | "fixed") =>
-                      updateMapping(mapping.id, {
-                        sourceType: value,
-                        apiField: value === "fixed" ? "" : mapping.apiField,
-                        fixedValue: value === "api" ? "" : mapping.fixedValue,
-                      })
-                    }
-                  >
-                    <SelectTrigger className="h-9">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="api">API 필드</SelectItem>
-                      <SelectItem value="fixed">고정값</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {/* API 필드 선택 또는 고정값 입력 (우측 - FROM) */}
-                <div className="flex-1">
-                  {mapping.sourceType === "api" ? (
-                    <Select
-                      value={mapping.apiField || "none"}
-                      onValueChange={(value) => updateMapping(mapping.id, { apiField: value === "none" ? "" : value })}
-                    >
-                      <SelectTrigger className="h-9">
-                        <SelectValue placeholder="API 필드 선택" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="none">선택 안함</SelectItem>
-                        {fromApiFields.map((field) => (
-                          <SelectItem key={field} value={field}>
-                            <div className="flex items-center gap-2">
-                              <span>{field}</span>
-                              {firstSample && firstSample[field] !== undefined && (
-                                <span className="text-muted-foreground text-xs">
-                                  (예: {String(firstSample[field]).substring(0, 20)}
-                                  {String(firstSample[field]).length > 20 ? "..." : ""})
-                                </span>
-                              )}
-                            </div>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  ) : (
-                    <Input
-                      value={mapping.fixedValue}
-                      onChange={(e) => updateMapping(mapping.id, { fixedValue: e.target.value })}
-                      placeholder="고정값 입력 (예: lsthira, COMPANY_A)"
-                      className="h-9"
-                    />
-                  )}
-                </div>
-
-                {/* 삭제 버튼 */}
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => removeMapping(mapping.id)}
-                  className="text-muted-foreground hover:text-destructive h-8 w-8 shrink-0"
-                >
-                  <Trash2 className="h-4 w-4" />
+            {mappingList.length === 0 ? (
+              <div className="flex h-[360px] flex-col items-center justify-center rounded-lg border border-dashed text-center">
+                <p className="text-muted-foreground text-sm">매핑이 없습니다.</p>
+                <Button variant="link" onClick={addMapping} className="mt-2">
+                  매핑 추가하기
                 </Button>
               </div>
-            ))}
-          </div>
-        )}
+            ) : (
+              <div className="bg-muted/30 h-[360px] space-y-3 overflow-y-auto rounded-lg border p-3">
+                {mappingList.map((mapping, index) => (
+                  <div key={mapping.id} className="bg-background flex items-center gap-2 rounded-lg border p-3">
+                    {/* 순서 표시 */}
+                    <div className="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium">
+                      {index + 1}
+                    </div>
 
-        {/* 샘플 데이터 미리보기 */}
-        {sampleJsonList.length > 0 && (
-          <div className="bg-muted/30 mt-4 rounded-lg border p-3">
-            <div className="mb-2 text-sm font-medium">샘플 데이터 (최대 3개)</div>
-            <div className="max-h-32 space-y-2 overflow-y-auto">
-              {sampleJsonList.map((json, index) => (
-                <div key={index} className="bg-background rounded border p-2 text-xs">
-                  <pre className="whitespace-pre-wrap">{json}</pre>
-                </div>
-              ))}
-            </div>
+                    {/* DB 컬럼 선택 (좌측 - TO) */}
+                    <div className="w-36 shrink-0">
+                      <Select
+                        value={mapping.dbColumn || "none"}
+                        onValueChange={(value) =>
+                          updateMapping(mapping.id, { dbColumn: value === "none" ? "" : value })
+                        }
+                      >
+                        <SelectTrigger className="h-9">
+                          <SelectValue placeholder="DB 컬럼" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">선택 안함</SelectItem>
+                          {toColumns.map((col) => {
+                            const isUsed =
+                              mappedDbColumns.includes(col.column_name) && mapping.dbColumn !== col.column_name;
+                            return (
+                              <SelectItem key={col.column_name} value={col.column_name} disabled={isUsed}>
+                                <div className="flex items-center gap-2">
+                                  <span className={isUsed ? "text-muted-foreground" : ""}>{col.column_name}</span>
+                                  <span className="text-muted-foreground text-xs">({col.data_type})</span>
+                                </div>
+                              </SelectItem>
+                            );
+                          })}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 화살표 */}
+                    <ArrowLeft className="text-muted-foreground h-4 w-4 shrink-0" />
+
+                    {/* 소스 타입 선택 */}
+                    <div className="w-24 shrink-0">
+                      <Select
+                        value={mapping.sourceType}
+                        onValueChange={(value: "api" | "fixed") =>
+                          updateMapping(mapping.id, {
+                            sourceType: value,
+                            apiField: value === "fixed" ? "" : mapping.apiField,
+                            fixedValue: value === "api" ? "" : mapping.fixedValue,
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-9">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="api">API 필드</SelectItem>
+                          <SelectItem value="fixed">고정값</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* API 필드 선택 또는 고정값 입력 (우측 - FROM) */}
+                    <div className="min-w-0 flex-1">
+                      {mapping.sourceType === "api" ? (
+                        <Select
+                          value={mapping.apiField || "none"}
+                          onValueChange={(value) =>
+                            updateMapping(mapping.id, { apiField: value === "none" ? "" : value })
+                          }
+                        >
+                          <SelectTrigger className="h-9">
+                            <SelectValue placeholder="API 필드" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="none">선택 안함</SelectItem>
+                            {fromApiFields.map((field) => (
+                              <SelectItem key={field} value={field}>
+                                <div className="flex items-center gap-2">
+                                  <span>{field}</span>
+                                  {firstSample && firstSample[field] !== undefined && (
+                                    <span className="text-muted-foreground text-xs">
+                                      (예: {String(firstSample[field]).substring(0, 15)}
+                                      {String(firstSample[field]).length > 15 ? "..." : ""})
+                                    </span>
+                                  )}
+                                </div>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <Input
+                          value={mapping.fixedValue}
+                          onChange={(e) => updateMapping(mapping.id, { fixedValue: e.target.value })}
+                          placeholder="고정값 입력"
+                          className="h-9"
+                        />
+                      )}
+                    </div>
+
+                    {/* 삭제 버튼 */}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeMapping(mapping.id)}
+                      className="text-muted-foreground hover:text-destructive h-8 w-8 shrink-0"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </CardContent>
     </Card>
   );