2 files changed, 120 insertions, 0 deletions
diff --git a/components/s-erp-import/import-card.tsx b/components/s-erp-import/import-card.tsx
new file mode 100644
index 00000000..43f2aa35
--- /dev/null
+++ b/components/s-erp-import/import-card.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { importExcel } from '@/lib/s-erp-import/actions'
+import { RPAInfo } from './rpa-info'
+
+export function ImportButton({ tableName, count }: { tableName: string; count: number }) {
+  const [pending, setPending] = React.useState(false)
+  const [currentCount, setCurrentCount] = React.useState(count)
+  const [statusMsg, setStatusMsg] = React.useState<string | null>(null)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  const onClickImport = () => fileInputRef.current?.click()
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setPending(true)
+    try {
+      console.log(`[SAP Import] 시작: ${tableName}, 파일: ${file.name}, 크기: ${file.size} bytes`)
+      const res = await importExcel(tableName, file)
+      if (res?.success) {
+        setCurrentCount((c) => c + (res.inserted ?? 0))
+        console.log(`[SAP Import] 성공: ${tableName}, 입력 건수: ${res.inserted ?? 0}`)
+        setStatusMsg(`${res.inserted ?? 0}건`)
+      } else {
+        console.error(`[SAP Import] 실패: ${tableName}, 사유: ${res?.message ?? '임포트 실패'}`)
+        if ((res as any)?.unknownHeaders) {
+          console.error(`[SAP Import] 매핑 실패 헤더:`, (res as any).unknownHeaders)
+        }
+        if ((res as any)?.errors) {
+          console.error(`[SAP Import] 유효성 오류 상세:`, (res as any).errors)
+        }
+        setStatusMsg(`데이터 저장에 실패하였습니다.`)
+      }
+    } catch (err: any) {
+      console.error(`[SAP Import] 예외 발생: ${tableName}, 에러: ${err?.message ?? err}`)
+      setStatusMsg(`데이터 저장에 실패하였습니다.`)
+    } finally {
+      console.log(`[SAP Import] 종료: ${tableName}`)
+      setPending(false)
+      e.target.value = ''
+    }
+  }
+
+  return (
+    <div 
+      className="border rounded p-4"
+      data-testid={`import-controls-${tableName}`}
+      data-table-name={tableName}
+      data-current-count={currentCount}
+    >
+      <div className="flex items-center gap-6">
+        <button 
+          onClick={onClickImport} 
+          disabled={pending} 
+          className="w-[300px] py-2 border rounded hover:bg-gray-100 transition-colors duration-200"
+          data-testid={`upload-button-${tableName}`}
+          data-table-name={tableName}
+          data-action="upload"
+          data-status={pending ? 'uploading' : 'idle'}
+          data-button-text={tableName}
+        >
+          {tableName}
+        </button>
+        {statusMsg && (
+          <span 
+            className="text-base"
+            data-testid={`status-message-${tableName}`}
+            data-table-name={tableName}
+            data-message={statusMsg}
+          >
+            {statusMsg}
+          </span>
+        )}
+        <input 
+          ref={fileInputRef} 
+          type="file" 
+          accept=".xlsx,.xls" 
+          className="hidden" 
+          onChange={onFileChange}
+          data-testid={`file-input-${tableName}`}
+          data-table-name={tableName}
+          data-file-types=".xlsx,.xls"
+        />
+      </div>
+      <RPAInfo tableName={tableName} count={currentCount} />
+    </div>
+  )
+}
+
+
diff --git a/components/s-erp-import/rpa-info.tsx b/components/s-erp-import/rpa-info.tsx
new file mode 100644
index 00000000..80bbec19
--- /dev/null
+++ b/components/s-erp-import/rpa-info.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+
+interface RPAInfoProps {
+  tableName: string
+  count: number
+}
+
+export function RPAInfo({ tableName, count }: RPAInfoProps) {
+  return (
+    <div 
+      className="text-xs text-gray-500 mt-1"
+      data-testid={`rpa-info-${tableName}`}
+      data-table-name={tableName}
+    >
+      <div data-testid={`table-name-${tableName}`}>
+        테이블명: {tableName}
+      </div>
+      <div data-testid={`current-count-${tableName}`}>
+        현재 데이터: {count}건
+      </div>
+      <div data-testid={`file-types-${tableName}`}>
+        지원 파일: .xlsx, .xls
+      </div>
+    </div>
+  )
+}