[agent-pipeline] pipe-20260306183434-ewn8 round-2

frontend/app/(main)/admin/batch-management/page.tsx

@@ -540,42 +540,42 @@ export default function BatchManagementPage() {
 
       {/* 배치 타입 선택 모달 */}
       {isBatchTypeModalOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <Card className="w-full max-w-2xl mx-4">
+          <Card className="mx-4 w-full max-w-2xl">
             <CardHeader>
               <CardTitle className="text-center">배치 타입 선택</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                 {/* DB → DB */}
                 <div
-                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
+                  className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('db-to-db')}
                 >
-                  <div className="flex items-center justify-center mb-4">
+                  <div className="mb-4 flex items-center justify-center">
-                    <Database className="w-8 h-8 text-blue-600 mr-2" />
+                    <Database className="mr-2 h-8 w-8 text-primary" />
-                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
+                    <ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
-                    <Database className="w-8 h-8 text-blue-600" />
+                    <Database className="h-8 w-8 text-primary" />
                   </div>
                   <div className="text-center">
-                    <div className="font-medium text-lg mb-2">DB → DB</div>
+                    <div className="mb-2 text-lg font-medium">DB → DB</div>
-                    <div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
+                    <div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
                   </div>
                 </div>
 
                 {/* REST API → DB */}
                 <div
-                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
+                  className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('restapi-to-db')}
                 >
-                  <div className="flex items-center justify-center mb-4">
+                  <div className="mb-4 flex items-center justify-center">
-                    <Globe className="w-8 h-8 text-green-600 mr-2" />
+                    <Globe className="mr-2 h-8 w-8 text-success" />
-                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
+                    <ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
-                    <Database className="w-8 h-8 text-green-600" />
+                    <Database className="h-8 w-8 text-success" />
                   </div>
                   <div className="text-center">
-                    <div className="font-medium text-lg mb-2">REST API → DB</div>
+                    <div className="mb-2 text-lg font-medium">REST API → DB</div>
-                    <div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
+                    <div className="text-sm text-muted-foreground">REST API에서 데이터베이스로 데이터 수집</div>
                   </div>
                 </div>
               </div>

frontend/components/common/EditableSpreadsheet.tsx

@@ -894,7 +894,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
             const colName = columns[col];
             const increment = columnIncrements.get(col);
             
-            if (increment !== null) {
+            if (typeof increment === 'number') {
               // 숫자 패턴 증가 모드
               // 마지막 선택 행의 값을 기준으로 증가
               const lastValue = String(data[norm.endRow]?.[colName] ?? "");
@@ -929,7 +929,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
             const colName = columns[col];
             const increment = columnIncrements.get(col);
             
-            if (increment !== null) {
+            if (typeof increment === 'number') {
               // 숫자 패턴 감소 모드
               const firstValue = String(data[norm.startRow]?.[colName] ?? "");
               const step = (targetRow - norm.startRow) * increment;

frontend/components/v2/V2Date.tsx

@@ -700,7 +700,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
     }
   };
 
-  const showLabel = label && style?.labelDisplay !== false && style?.labelDisplay !== "false";
+  const showLabel = label && style?.labelDisplay !== false;
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 

frontend/components/v2/V2Input.tsx

@@ -962,7 +962,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   };
 
   const actualLabel = label || style?.labelText;
-  const showLabel = actualLabel && style?.labelDisplay !== false && style?.labelDisplay !== "false";
+  const showLabel = actualLabel && style?.labelDisplay !== false;
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 

frontend/components/v2/V2Select.tsx

@@ -1145,7 +1145,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
       }
     };
 
-    const showLabel = label && style?.labelDisplay !== false && style?.labelDisplay !== "false";
+    const showLabel = label && style?.labelDisplay !== false;
     const componentWidth = size?.width || style?.width;
     const componentHeight = size?.height || style?.height;
 

run-responsive-e2e.mjs

@@ -0,0 +1,119 @@
+import { chromium } from '/Users/gbpark/ERP-node/node_modules/playwright/index.mjs';
+import { writeFileSync } from 'fs';
+
+const results = [];
+let passed = true;
+let failReason = '';
+
+async function login(page) {
+  await page.goto('http://localhost:9771/login');
+  await page.waitForLoadState('networkidle');
+
+  await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
+  await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
+
+  await Promise.all([
+    page.waitForURL(url => !url.toString().includes('/login'), { timeout: 30000 }),
+    page.getByRole('button', { name: '로그인' }).click(),
+  ]);
+  await page.waitForLoadState('networkidle');
+}
+
+async function run() {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    // 로그인
+    await login(page);
+    results.push('✅ 로그인 성공');
+
+    // ─── 1. batch-management 375px 카드 뷰 전환 확인 ───
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto('http://localhost:9771/admin/batch-management');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const batchHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (batchHasError) throw new Error('batch-management 에러 오버레이 발견');
+    results.push('✅ batch-management 에러 없음');
+
+    // 페이지 정상 렌더링 확인
+    const batchBodyVisible = await page.locator('body').isVisible();
+    if (!batchBodyVisible) throw new Error('batch-management body 렌더링 실패');
+    results.push('✅ batch-management body 렌더링 정상');
+
+    // 가로 오버플로우 확인 (카드 뷰는 375px 내에 들어와야 함)
+    const batchScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ batch-management scrollWidth: ${batchScrollWidth}px`);
+    if (batchScrollWidth > 420) throw new Error(`batch-management 가로 오버플로우: ${batchScrollWidth}px`);
+    results.push('✅ batch-management 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-batch-375.png', fullPage: true });
+    results.push('✅ batch-management 스크린샷 저장');
+
+    // ─── 2. audit-log 375px 카드 뷰 전환 확인 ───
+    await page.goto('http://localhost:9771/admin/audit-log');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const auditHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (auditHasError) throw new Error('audit-log 에러 오버레이 발견');
+    results.push('✅ audit-log 에러 없음');
+
+    const auditBodyVisible = await page.locator('body').isVisible();
+    if (!auditBodyVisible) throw new Error('audit-log body 렌더링 실패');
+    results.push('✅ audit-log body 렌더링 정상');
+
+    const auditScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ audit-log scrollWidth: ${auditScrollWidth}px`);
+    if (auditScrollWidth > 420) throw new Error(`audit-log 가로 오버플로우: ${auditScrollWidth}px`);
+    results.push('✅ audit-log 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-audit-375.png', fullPage: true });
+    results.push('✅ audit-log 스크린샷 저장');
+
+    // ─── 3. standards 375px 레이아웃 깨짐 확인 ───
+    await page.goto('http://localhost:9771/admin/standards');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const standardsHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (standardsHasError) throw new Error('standards 에러 오버레이 발견');
+    results.push('✅ standards 에러 없음');
+
+    const standardsBodyVisible = await page.locator('body').isVisible();
+    if (!standardsBodyVisible) throw new Error('standards body 렌더링 실패');
+    results.push('✅ standards body 렌더링 정상');
+
+    const standardsScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ standards scrollWidth: ${standardsScrollWidth}px`);
+    if (standardsScrollWidth > 420) throw new Error(`standards 가로 오버플로우: ${standardsScrollWidth}px`);
+    results.push('✅ standards 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result.png', fullPage: true });
+    results.push('✅ standards 스크린샷 저장');
+
+  } catch (err) {
+    passed = false;
+    failReason = err.message;
+    results.push(`❌ 실패: ${err.message}`);
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-fail.png', fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+run().then(() => {
+  const output = results.join('\n');
+  console.log(output);
+  const finalResult = passed ? 'RESULT: PASS' : `RESULT: FAIL - ${failReason}`;
+  writeFileSync('/tmp/pw-responsive-result.txt', output + '\n' + finalResult);
+  console.log(finalResult);
+  process.exit(passed ? 0 : 1);
+}).catch(err => {
+  const msg = `치명적 오류: ${err.message}`;
+  console.error(msg);
+  writeFileSync('/tmp/pw-responsive-result.txt', msg + '\nRESULT: FAIL - ' + err.message);
+  process.exit(1);
+});