From e6e58bfc251aa352f770466a35c6b0ab13e97aef Mon Sep 17 00:00:00 2001
From: HYOJIN <hjkim4@gcsc.co.kr>
Date: Fri, 27 Mar 2026 11:20:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Bypass=20API=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20SPA=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=EC=B9=A8=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#63)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WebClient Bean 드롭다운 표시 텍스트를 description만 표시
- bypass_api_param에 example 컬럼 추가 (Swagger placeholder 사용자 설정)
- 목록 기본 뷰를 리스트뷰(테이블)로 변경
- 도메인명 드롭다운 필터 추가
- WebViewController에 /bypass-config 경로 추가 (SPA 새로고침 404 해결)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/api/bypassApi.ts                 |  1 +
 .../src/components/bypass/BypassStepBasic.tsx |  2 +-
 .../components/bypass/BypassStepParams.tsx    | 11 ++++++
 frontend/src/pages/BypassConfig.tsx           | 39 ++++++++++++++-----
 .../global/controller/WebViewController.java  |  4 +-
 .../snp/batch/global/dto/BypassParamDto.java  |  3 ++
 .../batch/global/model/BypassApiParam.java    |  6 +++
 .../batch/service/BypassCodeGenerator.java    |  4 +-
 .../batch/service/BypassConfigService.java    |  2 +
 9 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/frontend/src/api/bypassApi.ts b/frontend/src/api/bypassApi.ts
index 046258c..abdcab7 100644
--- a/frontend/src/api/bypassApi.ts
+++ b/frontend/src/api/bypassApi.ts
@@ -14,6 +14,7 @@ export interface BypassParamDto {
     paramIn: string;      // PATH, QUERY, BODY
     required: boolean;
     description: string;
+    example: string;      // Swagger @Parameter example 값
     sortOrder: number;
 }
 
diff --git a/frontend/src/components/bypass/BypassStepBasic.tsx b/frontend/src/components/bypass/BypassStepBasic.tsx
index e5b3ea2..5056b07 100644
--- a/frontend/src/components/bypass/BypassStepBasic.tsx
+++ b/frontend/src/components/bypass/BypassStepBasic.tsx
@@ -79,7 +79,7 @@ export default function BypassStepBasic({
                         <option value="">선택하세요</option>
                         {webclientBeans.map((bean) => (
                             <option key={bean.name} value={bean.name}>
-                                {bean.name}{bean.description ? ` — ${bean.description}` : ''}
+                                {bean.description || bean.name}
                             </option>
                         ))}
                     </select>
diff --git a/frontend/src/components/bypass/BypassStepParams.tsx b/frontend/src/components/bypass/BypassStepParams.tsx
index 6f0cf02..cd767e1 100644
--- a/frontend/src/components/bypass/BypassStepParams.tsx
+++ b/frontend/src/components/bypass/BypassStepParams.tsx
@@ -15,6 +15,7 @@ function createEmptyParam(sortOrder: number): BypassParamDto {
         paramIn: 'QUERY',
         required: false,
         description: '',
+        example: '',
         sortOrder,
     };
 }
@@ -58,6 +59,7 @@ export default function BypassStepParams({ params, onChange }: BypassStepParamsP
                                 <th className="pb-2 text-left font-medium text-wing-muted pr-3 min-w-[100px]">위치</th>
                                 <th className="pb-2 text-center font-medium text-wing-muted pr-3 w-14">필수</th>
                                 <th className="pb-2 text-left font-medium text-wing-muted pr-3">설명</th>
+                                <th className="pb-2 text-left font-medium text-wing-muted pr-3 min-w-[120px]">Example</th>
                                 <th className="pb-2 w-10"></th>
                             </tr>
                         </thead>
@@ -112,6 +114,15 @@ export default function BypassStepParams({ params, onChange }: BypassStepParamsP
                                             className="w-full px-2 py-1.5 text-sm rounded border border-wing-border bg-wing-surface text-wing-text placeholder:text-wing-muted focus:outline-none focus:ring-1 focus:ring-wing-accent/50"
                                         />
                                     </td>
+                                    <td className="py-2 pr-3">
+                                        <input
+                                            type="text"
+                                            value={param.example}
+                                            onChange={(e) => handleChange(index, 'example', e.target.value)}
+                                            placeholder="예: 9876543"
+                                            className="w-full px-2 py-1.5 text-sm rounded border border-wing-border bg-wing-surface text-wing-text placeholder:text-wing-muted focus:outline-none focus:ring-1 focus:ring-wing-accent/50"
+                                        />
+                                    </td>
                                     <td className="py-2">
                                         <button
                                             type="button"
diff --git a/frontend/src/pages/BypassConfig.tsx b/frontend/src/pages/BypassConfig.tsx
index b0ddc60..a1ea498 100644
--- a/frontend/src/pages/BypassConfig.tsx
+++ b/frontend/src/pages/BypassConfig.tsx
@@ -32,8 +32,9 @@ export default function BypassConfig() {
     const [configs, setConfigs] = useState<BypassConfigResponse[]>([]);
     const [loading, setLoading] = useState(true);
     const [webclientBeans, setWebclientBeans] = useState<WebClientBeanInfo[]>([]);
-    const [viewMode, setViewMode] = useState<ViewMode>('card');
+    const [viewMode, setViewMode] = useState<ViewMode>('table');
     const [searchTerm, setSearchTerm] = useState('');
+    const [selectedDomain, setSelectedDomain] = useState('');
 
     const [modalOpen, setModalOpen] = useState(false);
     const [editConfig, setEditConfig] = useState<BypassConfigResponse | null>(null);
@@ -110,15 +111,21 @@ export default function BypassConfig() {
         }
     };
 
+    const domainNames = useMemo(() => {
+        const names = [...new Set(configs.map((c) => c.domainName))];
+        return names.sort();
+    }, [configs]);
+
     const filteredConfigs = useMemo(() => {
-        if (!searchTerm.trim()) return configs;
-        const term = searchTerm.toLowerCase();
-        return configs.filter(
-            (c) =>
-                c.domainName.toLowerCase().includes(term) ||
-                c.displayName.toLowerCase().includes(term),
-        );
-    }, [configs, searchTerm]);
+        return configs.filter((c) => {
+            const matchesSearch =
+                !searchTerm.trim() ||
+                c.domainName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                c.displayName.toLowerCase().includes(searchTerm.toLowerCase());
+            const matchesDomain = !selectedDomain || c.domainName === selectedDomain;
+            return matchesSearch && matchesDomain;
+        });
+    }, [configs, searchTerm, selectedDomain]);
 
     if (loading) return <LoadingSpinner />;
 
@@ -177,6 +184,18 @@ export default function BypassConfig() {
                         )}
                     </div>
 
+                    {/* 도메인 드롭다운 필터 */}
+                    <select
+                        value={selectedDomain}
+                        onChange={(e) => setSelectedDomain(e.target.value)}
+                        className="px-3 py-2 text-sm rounded-lg border border-wing-border bg-wing-surface text-wing-text"
+                    >
+                        <option value="">전체 도메인</option>
+                        {domainNames.map((name) => (
+                            <option key={name} value={name}>{name}</option>
+                        ))}
+                    </select>
+
                     {/* 뷰 전환 토글 */}
                     <div className="flex rounded-lg border border-wing-border overflow-hidden">
                         <button
@@ -215,7 +234,7 @@ export default function BypassConfig() {
                     </div>
                 </div>
 
-                {searchTerm && (
+                {(searchTerm || selectedDomain) && (
                     <p className="mt-2 text-xs text-wing-muted">
                         {filteredConfigs.length}개 API 검색됨
                     </p>
diff --git a/src/main/java/com/snp/batch/global/controller/WebViewController.java b/src/main/java/com/snp/batch/global/controller/WebViewController.java
index 1c120c1..916a4ab 100644
--- a/src/main/java/com/snp/batch/global/controller/WebViewController.java
+++ b/src/main/java/com/snp/batch/global/controller/WebViewController.java
@@ -15,8 +15,10 @@ public class WebViewController {
     @GetMapping({"/", "/jobs", "/executions", "/executions/{id:\\d+}",
                  "/recollects", "/recollects/{id:\\d+}",
                  "/schedules", "/schedule-timeline", "/monitoring",
+                 "/bypass-config",
                  "/jobs/**", "/executions/**", "/recollects/**",
-                 "/schedules/**", "/schedule-timeline/**", "/monitoring/**"})
+                 "/schedules/**", "/schedule-timeline/**", "/monitoring/**",
+                 "/bypass-config/**"})
     public String forward() {
         return "forward:/index.html";
     }
diff --git a/src/main/java/com/snp/batch/global/dto/BypassParamDto.java b/src/main/java/com/snp/batch/global/dto/BypassParamDto.java
index 38571bd..0885d12 100644
--- a/src/main/java/com/snp/batch/global/dto/BypassParamDto.java
+++ b/src/main/java/com/snp/batch/global/dto/BypassParamDto.java
@@ -33,4 +33,7 @@ public class BypassParamDto {
 
     /** 정렬 순서 */
     private Integer sortOrder;
+
+    /** Swagger @Parameter example 값 */
+    private String example;
 }
diff --git a/src/main/java/com/snp/batch/global/model/BypassApiParam.java b/src/main/java/com/snp/batch/global/model/BypassApiParam.java
index a55e662..a86288c 100644
--- a/src/main/java/com/snp/batch/global/model/BypassApiParam.java
+++ b/src/main/java/com/snp/batch/global/model/BypassApiParam.java
@@ -74,4 +74,10 @@ public class BypassApiParam {
     @Column(name = "sort_order", nullable = false)
     @Builder.Default
     private Integer sortOrder = 0;
+
+    /**
+     * Swagger @Parameter example 값
+     */
+    @Column(name = "example", length = 200)
+    private String example;
 }
diff --git a/src/main/java/com/snp/batch/service/BypassCodeGenerator.java b/src/main/java/com/snp/batch/service/BypassCodeGenerator.java
index 31ded63..6d4d447 100644
--- a/src/main/java/com/snp/batch/service/BypassCodeGenerator.java
+++ b/src/main/java/com/snp/batch/service/BypassCodeGenerator.java
@@ -283,7 +283,9 @@ public class BypassCodeGenerator {
                     String description = p.getDescription() != null ? p.getDescription() : p.getParamName();
                     String javaType = toJavaType(p.getParamType());
                     String paramName = p.getParamName();
-                    String example = getDefaultExample(p.getParamType());
+                    String example = (p.getExample() != null && !p.getExample().isEmpty())
+                            ? p.getExample()
+                            : getDefaultExample(p.getParamType());
                     return switch (p.getParamIn().toUpperCase()) {
                         case "PATH" -> "@Parameter(description = \"" + description + "\", example = \"" + example + "\")\n"
                                 + "                @PathVariable " + javaType + " " + paramName;
diff --git a/src/main/java/com/snp/batch/service/BypassConfigService.java b/src/main/java/com/snp/batch/service/BypassConfigService.java
index cb40d29..5e4c0d7 100644
--- a/src/main/java/com/snp/batch/service/BypassConfigService.java
+++ b/src/main/java/com/snp/batch/service/BypassConfigService.java
@@ -170,6 +170,7 @@ public class BypassConfigService {
                 .required(dto.getRequired() != null ? dto.getRequired() : true)
                 .description(dto.getDescription())
                 .sortOrder(dto.getSortOrder() != null ? dto.getSortOrder() : 0)
+                .example(dto.getExample())
                 .build();
     }
 
@@ -182,6 +183,7 @@ public class BypassConfigService {
                 .required(param.getRequired())
                 .description(param.getDescription())
                 .sortOrder(param.getSortOrder())
+                .example(param.getExample())
                 .build();
     }
 }