From b33f7d9b1181cb1f05ccf2b20c78067f04bc4937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Tue, 17 Mar 2026 15:52:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[settings]=20=EB=B0=94=EB=A1=9C?=
 =?UTF-8?q?=EB=B9=8C=20=EC=97=B0=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B0=95=20+=20=EC=9D=80=ED=96=89/=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EA=B1=B0=EB=9E=98=20=EC=A1=B0=ED=9A=8C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 바로빌 연동: 액션/타입 확장, UI 보강
- 은행/카드 거래 조회 개선
- 공지 팝업 모달 수정
---
 .../BankTransactionInquiry/index.tsx          |  39 +++-
 .../CardTransactionInquiry/index.tsx          |  39 +++-
 .../NoticePopupModal/NoticePopupModal.tsx     |  11 +-
 .../settings/BarobillIntegration/actions.ts   |  77 ++++++-
 .../settings/BarobillIntegration/index.tsx    | 217 +++++++++++++++++-
 .../settings/BarobillIntegration/types.ts     |  24 ++
 6 files changed, 394 insertions(+), 13 deletions(-)

diff --git a/src/components/accounting/BankTransactionInquiry/index.tsx b/src/components/accounting/BankTransactionInquiry/index.tsx
index e70c8ee5..996b09b3 100644
--- a/src/components/accounting/BankTransactionInquiry/index.tsx
+++ b/src/components/accounting/BankTransactionInquiry/index.tsx
@@ -54,6 +54,7 @@ import {
   type BankTransactionSummaryData,
 } from './actions';
 import { TransactionFormModal } from './TransactionFormModal';
+import { syncBankTransactions } from '@/components/settings/BarobillIntegration/actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { formatNumber } from '@/lib/utils/amount';
 import { downloadExcel, type ExcelColumn } from '@/lib/utils/excel-download';
@@ -130,6 +131,7 @@ export function BankTransactionInquiry() {
   // 수정 추적 (로컬 변경사항)
   const [localChanges, setLocalChanges] = useState<Map<string, Partial<BankTransaction>>>(new Map());
   const [isBatchSaving, setIsBatchSaving] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
 
   // ===== 데이터 로드 =====
   const loadData = useCallback(async () => {
@@ -241,6 +243,26 @@ export function BankTransactionInquiry() {
     }
   }, [localChanges, loadData]);
 
+  // 바로빌 동기화
+  const handleSync = useCallback(async () => {
+    setIsSyncing(true);
+    try {
+      const sd = startDate.replace(/-/g, '');
+      const ed = endDate.replace(/-/g, '');
+      const result = await syncBankTransactions(sd, ed);
+      if (result.success && result.data) {
+        toast.success(`은행 거래 ${result.data.synced}건 동기화 완료`);
+        loadData();
+      } else {
+        toast.error(result.error || '동기화에 실패했습니다.');
+      }
+    } catch {
+      toast.error('동기화 중 오류가 발생했습니다.');
+    } finally {
+      setIsSyncing(false);
+    }
+  }, [startDate, endDate, loadData]);
+
   // 엑셀 다운로드 (프론트 xlsx 생성)
   const handleExcelDownload = useCallback(async () => {
     try {
@@ -359,9 +381,22 @@ export function BankTransactionInquiry() {
         onEndDateChange: setEndDate,
       },
 
-      // 헤더 액션: ①저장 + 엑셀 다운로드 + ②수기 입력
+      // 헤더 액션: 동기화 + ①저장 + 엑셀 다운로드 + ②수기 입력
       headerActions: () => (
         <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleSync}
+            disabled={isSyncing}
+          >
+            {isSyncing ? (
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4 mr-1" />
+            )}
+            {isSyncing ? '동기화 중...' : '동기화'}
+          </Button>
           <Button
             size="sm"
             onClick={handleBatchSave}
@@ -661,8 +696,10 @@ export function BankTransactionInquiry() {
       handleExcelDownload,
       handleCreateClick,
       handleRowClick,
+      handleSync,
       isRowModified,
       isCellModified,
+      isSyncing,
       loadData,
     ]
   );
diff --git a/src/components/accounting/CardTransactionInquiry/index.tsx b/src/components/accounting/CardTransactionInquiry/index.tsx
index 83bce790..417c3af2 100644
--- a/src/components/accounting/CardTransactionInquiry/index.tsx
+++ b/src/components/accounting/CardTransactionInquiry/index.tsx
@@ -53,6 +53,7 @@ import {
 } from './actions';
 import { ManualInputModal } from './ManualInputModal';
 import { JournalEntryModal } from './JournalEntryModal';
+import { syncCardTransactions } from '@/components/settings/BarobillIntegration/actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { formatNumber } from '@/lib/utils/amount';
 import { filterByEnum } from '@/lib/utils/search';
@@ -124,6 +125,7 @@ export function CardTransactionInquiry() {
   const [showJournalEntry, setShowJournalEntry] = useState(false);
   const [journalTransaction, setJournalTransaction] = useState<CardTransaction | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
 
   // ===== 데이터 로드 =====
   const loadData = useCallback(async () => {
@@ -290,6 +292,26 @@ export function CardTransactionInquiry() {
     setShowJournalEntry(true);
   }, []);
 
+  // 바로빌 동기화
+  const handleSync = useCallback(async () => {
+    setIsSyncing(true);
+    try {
+      const sd = startDate.replace(/-/g, '');
+      const ed = endDate.replace(/-/g, '');
+      const result = await syncCardTransactions(sd, ed);
+      if (result.success && result.data) {
+        toast.success(`카드 거래 ${result.data.synced}건 동기화 완료`);
+        loadData();
+      } else {
+        toast.error(result.error || '동기화에 실패했습니다.');
+      }
+    } catch {
+      toast.error('동기화 중 오류가 발생했습니다.');
+    } finally {
+      setIsSyncing(false);
+    }
+  }, [startDate, endDate, loadData]);
+
   const handleExcelDownload = useCallback(async () => {
     try {
       toast.info('엑셀 파일 생성 중...');
@@ -385,9 +407,22 @@ export function CardTransactionInquiry() {
         onEndDateChange: setEndDate,
       },
 
-      // 헤더 액션: 숨김보기 + 저장 + 엑셀 다운로드 + 수기 입력
+      // 헤더 액션: 동기화 + 숨김보기 + 저장 + 엑셀 다운로드 + 수기 입력
       headerActions: () => (
         <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleSync}
+            disabled={isSyncing}
+          >
+            {isSyncing ? (
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4 mr-1" />
+            )}
+            {isSyncing ? '동기화 중...' : '동기화'}
+          </Button>
           <Button
             variant="outline"
             size="sm"
@@ -767,12 +802,14 @@ export function CardTransactionInquiry() {
       showJournalEntry,
       journalTransaction,
       handleSave,
+      handleSync,
       handleExcelDownload,
       handleHide,
       handleJournalEntry,
       handleUnhide,
       handleInlineEdit,
       getEditValue,
+      isSyncing,
       loadData,
     ]
   );
diff --git a/src/components/common/NoticePopupModal/NoticePopupModal.tsx b/src/components/common/NoticePopupModal/NoticePopupModal.tsx
index fbd1230c..77d95dcf 100644
--- a/src/components/common/NoticePopupModal/NoticePopupModal.tsx
+++ b/src/components/common/NoticePopupModal/NoticePopupModal.tsx
@@ -70,15 +70,20 @@ function dismissPopupForToday(popupId: string): void {
 export function NoticePopupModal({ popup, open, onOpenChange }: NoticePopupModalProps) {
   const [dontShowToday, setDontShowToday] = React.useState(false);
 
-  const handleClose = () => {
+  const handleClose = React.useCallback(() => {
     if (dontShowToday) {
       dismissPopupForToday(popup.id);
     }
     onOpenChange(false);
-  };
+  }, [dontShowToday, popup.id, onOpenChange]);
+
+  // 체크박스 상태를 팝업 전환 시 초기화
+  React.useEffect(() => {
+    setDontShowToday(false);
+  }, [popup.id]);
 
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+    <DialogPrimitive.Root open={open} onOpenChange={() => handleClose()}>
       <DialogPrimitive.Portal>
         {/* 오버레이 */}
         <DialogPrimitive.Overlay
diff --git a/src/components/settings/BarobillIntegration/actions.ts b/src/components/settings/BarobillIntegration/actions.ts
index 64d48e70..9b877b6a 100644
--- a/src/components/settings/BarobillIntegration/actions.ts
+++ b/src/components/settings/BarobillIntegration/actions.ts
@@ -7,6 +7,9 @@ import type {
   BarobillSignupFormData,
   BankServiceFormData,
   IntegrationStatus,
+  RegisteredAccount,
+  RegisteredCard,
+  CertificateInfo,
 } from './types';
 
 // ===== 바로빌 로그인 정보 등록 =====
@@ -66,12 +69,14 @@ export async function getBankServiceUrl(
 export async function getIntegrationStatus(): Promise<ActionResult<IntegrationStatus>> {
   return executeServerAction({
     url: buildApiUrl('/api/v1/barobill/status'),
-    transform: (data: { bank_service_count?: number; account_link_count?: number; member?: { barobill_id?: string; biz_no?: string; status?: string; server_mode?: string } }) => ({
+    transform: (data: { bank_service_count?: number; account_link_count?: number; card_count?: number; member?: { barobill_id?: string; biz_no?: string; corp_name?: string; status?: string; server_mode?: string } }) => ({
       bankServiceCount: data.bank_service_count ?? 0,
       accountLinkCount: data.account_link_count ?? 0,
+      cardCount: data.card_count ?? 0,
       member: data.member ? {
         barobillId: data.member.barobill_id ?? '',
         bizNo: data.member.biz_no ?? '',
+        corpName: data.member.corp_name ?? '',
         status: data.member.status ?? '',
         serverMode: data.member.server_mode ?? '',
       } : undefined,
@@ -106,3 +111,73 @@ export async function getCertificateUrl(): Promise<ActionResult<{ url: string }>
     errorMessage: '공인인증서 등록 페이지 URL 조회에 실패했습니다.',
   });
 }
+
+// ===== 은행 거래 동기화 =====
+export async function syncBankTransactions(
+  startDate?: string,
+  endDate?: string
+): Promise<ActionResult<{ synced: number; accounts: number }>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/sync/bank'),
+    method: 'POST',
+    body: {
+      start_date: startDate,
+      end_date: endDate,
+    },
+    errorMessage: '은행 거래 동기화에 실패했습니다.',
+  });
+}
+
+// ===== 카드 거래 동기화 =====
+export async function syncCardTransactions(
+  startDate?: string,
+  endDate?: string
+): Promise<ActionResult<{ synced: number; cards: number }>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/sync/card'),
+    method: 'POST',
+    body: {
+      start_date: startDate,
+      end_date: endDate,
+    },
+    errorMessage: '카드 거래 동기화에 실패했습니다.',
+  });
+}
+
+// ===== 등록 계좌 목록 =====
+export async function getRegisteredAccounts(): Promise<ActionResult<{
+  accounts: RegisteredAccount[];
+}>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/accounts'),
+    errorMessage: '등록 계좌 조회에 실패했습니다.',
+  });
+}
+
+// ===== 등록 카드 목록 =====
+export async function getRegisteredCards(): Promise<ActionResult<{
+  cards: RegisteredCard[];
+}>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/cards'),
+    errorMessage: '등록 카드 조회에 실패했습니다.',
+  });
+}
+
+// ===== 인증서 상태 =====
+export async function getCertificateStatus(): Promise<ActionResult<{
+  certificate: CertificateInfo;
+}>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/certificate'),
+    errorMessage: '인증서 상태 조회에 실패했습니다.',
+  });
+}
+
+// ===== 충전잔액 =====
+export async function getBalance(): Promise<ActionResult<{ balance: number | null }>> {
+  return executeServerAction({
+    url: buildApiUrl('/api/v1/barobill/balance'),
+    errorMessage: '충전잔액 조회에 실패했습니다.',
+  });
+}
diff --git a/src/components/settings/BarobillIntegration/index.tsx b/src/components/settings/BarobillIntegration/index.tsx
index 0d3e32f3..313cc7e2 100644
--- a/src/components/settings/BarobillIntegration/index.tsx
+++ b/src/components/settings/BarobillIntegration/index.tsx
@@ -3,7 +3,10 @@
 import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
-import { Link2, Loader2, Edit, Check } from 'lucide-react';
+import {
+  Link2, Loader2, Edit, Check, Building2, CreditCard,
+  ShieldCheck, ShieldAlert, Wallet, AlertTriangle,
+} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -16,11 +19,24 @@ import {
   getAccountLinkUrl,
   getCardLinkUrl,
   getCertificateUrl,
+  getRegisteredAccounts,
+  getRegisteredCards,
+  getCertificateStatus,
+  getBalance,
 } from './actions';
-import type { IntegrationStatus } from './types';
+import type {
+  IntegrationStatus,
+  RegisteredAccount,
+  RegisteredCard,
+  CertificateInfo,
+} from './types';
 
 export function BarobillIntegration() {
   const [status, setStatus] = useState<IntegrationStatus | null>(null);
+  const [accounts, setAccounts] = useState<RegisteredAccount[]>([]);
+  const [cards, setCards] = useState<RegisteredCard[]>([]);
+  const [certificate, setCertificate] = useState<CertificateInfo | null>(null);
+  const [balance, setBalance] = useState<number | null>(null);
   const [loginOpen, setLoginOpen] = useState(false);
   const [signupOpen, setSignupOpen] = useState(false);
   const [bankServiceOpen, setBankServiceOpen] = useState(false);
@@ -33,13 +49,36 @@ export function BarobillIntegration() {
         setStatus(result.data);
       }
     } catch {
-      // 상태 조회 실패 시 무시 (페이지 렌더링에 영향 없음)
+      // 상태 조회 실패 시 무시
+    }
+  }, []);
+
+  const loadDashboardData = useCallback(async () => {
+    const [accountsRes, cardsRes, certRes, balanceRes] = await Promise.allSettled([
+      getRegisteredAccounts(),
+      getRegisteredCards(),
+      getCertificateStatus(),
+      getBalance(),
+    ]);
+
+    if (accountsRes.status === 'fulfilled' && accountsRes.value.success && accountsRes.value.data) {
+      setAccounts(accountsRes.value.data.accounts ?? []);
+    }
+    if (cardsRes.status === 'fulfilled' && cardsRes.value.success && cardsRes.value.data) {
+      setCards(cardsRes.value.data.cards ?? []);
+    }
+    if (certRes.status === 'fulfilled' && certRes.value.success && certRes.value.data) {
+      setCertificate(certRes.value.data.certificate ?? null);
+    }
+    if (balanceRes.status === 'fulfilled' && balanceRes.value.success && balanceRes.value.data) {
+      setBalance(balanceRes.value.data.balance ?? null);
     }
   }, []);
 
   useEffect(() => {
     loadStatus();
-  }, [loadStatus]);
+    loadDashboardData();
+  }, [loadStatus, loadDashboardData]);
 
   const handleExternalLink = useCallback(async (
     type: 'account' | 'card' | 'certificate',
@@ -66,6 +105,18 @@ export function BarobillIntegration() {
 
   const hasLogin = !!status?.member?.barobillId;
 
+  // 인증서 만료 30일 이내 경고
+  const certExpiringSoon = (() => {
+    if (!certificate?.expire_date) return false;
+    const expireDate = new Date(certificate.expire_date);
+    const now = new Date();
+    const diffDays = Math.ceil((expireDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+    return diffDays > 0 && diffDays <= 30;
+  })();
+
+  // 잔액 부족 경고 (10,000원 미만)
+  const balanceLow = balance !== null && balance < 10000;
+
   return (
     <PageLayout>
       <PageHeader
@@ -75,7 +126,159 @@ export function BarobillIntegration() {
       />
 
       <div className="space-y-6">
-        {/* 바로빌 연동 */}
+        {/* ===== 연동 현황 대시보드 ===== */}
+        {status?.member && (
+          <section>
+            <h2 className="text-lg font-semibold mb-3">연동 현황</h2>
+            <Card>
+              <CardContent className="p-5">
+                {/* 회원 정보 */}
+                <div className="flex flex-wrap items-center gap-2 mb-4 text-sm">
+                  <span className="font-medium">{status.member.barobillId}</span>
+                  <span className="text-muted-foreground">|</span>
+                  <span>{status.member.corpName || status.member.bizNo}</span>
+                  {status.member.corpName && (
+                    <>
+                      <span className="text-muted-foreground">|</span>
+                      <span className="text-muted-foreground">{status.member.bizNo}</span>
+                    </>
+                  )}
+                  <span className="text-muted-foreground">|</span>
+                  <Badge variant={status.member.serverMode === 'production' ? 'default' : 'secondary'}>
+                    {status.member.serverMode === 'production' ? '운영' : '테스트'}
+                  </Badge>
+                </div>
+
+                {/* 통계 카드 4개 */}
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                  <div className="flex items-center gap-3 rounded-lg border p-3">
+                    <Building2 className="h-5 w-5 text-blue-500 shrink-0" />
+                    <div>
+                      <p className="text-xs text-muted-foreground">계좌</p>
+                      <p className="text-lg font-semibold">{status.accountLinkCount}개</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 rounded-lg border p-3">
+                    <CreditCard className="h-5 w-5 text-purple-500 shrink-0" />
+                    <div>
+                      <p className="text-xs text-muted-foreground">카드</p>
+                      <p className="text-lg font-semibold">{status.cardCount}개</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 rounded-lg border p-3">
+                    {certificate?.is_valid ? (
+                      <ShieldCheck className="h-5 w-5 text-green-500 shrink-0" />
+                    ) : (
+                      <ShieldAlert className="h-5 w-5 text-red-500 shrink-0" />
+                    )}
+                    <div>
+                      <p className="text-xs text-muted-foreground">인증서</p>
+                      <p className="text-sm font-semibold">
+                        {certificate ? (certificate.is_valid ? '유효' : '만료') : '-'}
+                      </p>
+                      {certificate?.expire_date && (
+                        <p className="text-xs text-muted-foreground">
+                          만료: {certificate.expire_date}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 rounded-lg border p-3">
+                    <Wallet className="h-5 w-5 text-amber-500 shrink-0" />
+                    <div>
+                      <p className="text-xs text-muted-foreground">잔액</p>
+                      <p className="text-lg font-semibold">
+                        {balance !== null ? `${balance.toLocaleString()}원` : '-'}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* P2: 경고 표시 */}
+                {(certExpiringSoon || balanceLow) && (
+                  <div className="mt-4 space-y-2">
+                    {certExpiringSoon && (
+                      <div className="flex items-center gap-2 rounded-lg bg-amber-50 border border-amber-200 p-3 text-sm">
+                        <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />
+                        <span>공동인증서가 30일 이내 만료됩니다. (만료일: {certificate?.expire_date})</span>
+                        <Button
+                          variant="link"
+                          size="sm"
+                          className="ml-auto text-amber-600 px-0"
+                          onClick={() => handleExternalLink('certificate')}
+                        >
+                          인증서 갱신
+                        </Button>
+                      </div>
+                    )}
+                    {balanceLow && (
+                      <div className="flex items-center gap-2 rounded-lg bg-red-50 border border-red-200 p-3 text-sm">
+                        <AlertTriangle className="h-4 w-4 text-red-500 shrink-0" />
+                        <span>바로빌 충전잔액이 부족합니다. (현재: {balance?.toLocaleString()}원)</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </section>
+        )}
+
+        {/* ===== 등록된 계좌/카드 목록 ===== */}
+        {(accounts.length > 0 || cards.length > 0) && (
+          <section>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* 등록된 계좌 */}
+              {accounts.length > 0 && (
+                <div>
+                  <h2 className="text-lg font-semibold mb-3">
+                    등록된 계좌 <Badge variant="secondary">{accounts.length}개</Badge>
+                  </h2>
+                  <Card>
+                    <CardContent className="p-4">
+                      <ul className="space-y-2">
+                        {accounts.map((acc, idx) => (
+                          <li key={idx} className="flex items-center gap-2 text-sm">
+                            <Building2 className="h-4 w-4 text-muted-foreground shrink-0" />
+                            <span className="font-medium">{acc.bankName}</span>
+                            <span className="text-muted-foreground">{acc.bankAccountNum}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
+
+              {/* 등록된 카드 */}
+              {cards.length > 0 && (
+                <div>
+                  <h2 className="text-lg font-semibold mb-3">
+                    등록된 카드 <Badge variant="secondary">{cards.length}개</Badge>
+                  </h2>
+                  <Card>
+                    <CardContent className="p-4">
+                      <ul className="space-y-2">
+                        {cards.map((card, idx) => (
+                          <li key={idx} className="flex items-center gap-2 text-sm">
+                            <CreditCard className="h-4 w-4 text-muted-foreground shrink-0" />
+                            <span className="font-medium">{card.cardCompanyName}</span>
+                            <span className="text-muted-foreground">{card.cardNum}</span>
+                            {card.alias && (
+                              <span className="text-xs text-muted-foreground">({card.alias})</span>
+                            )}
+                          </li>
+                        ))}
+                      </ul>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
+            </div>
+          </section>
+        )}
+
+        {/* ===== 바로빌 연동 ===== */}
         <section>
           <h2 className="text-lg font-semibold mb-3">바로빌 연동</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -144,7 +347,7 @@ export function BarobillIntegration() {
           </div>
         </section>
 
-        {/* 계좌 연동 */}
+        {/* ===== 계좌 연동 ===== */}
         <section>
           <h2 className="text-lg font-semibold mb-3">계좌 연동</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -200,7 +403,7 @@ export function BarobillIntegration() {
           </div>
         </section>
 
-        {/* 카드 연동 & 공인인증서 등록 */}
+        {/* ===== 카드 연동 & 공인인증서 등록 ===== */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* 카드 연동 */}
           <section>
diff --git a/src/components/settings/BarobillIntegration/types.ts b/src/components/settings/BarobillIntegration/types.ts
index f9186153..5ed6a29e 100644
--- a/src/components/settings/BarobillIntegration/types.ts
+++ b/src/components/settings/BarobillIntegration/types.ts
@@ -54,10 +54,34 @@ export const ACCOUNT_TYPE_OPTIONS = [
 export interface IntegrationStatus {
   bankServiceCount: number;
   accountLinkCount: number;
+  cardCount: number;
   member?: {
     barobillId: string;
     bizNo: string;
+    corpName: string;
     status: string;
     serverMode: string;
   };
 }
+
+// ===== 등록 계좌 =====
+export interface RegisteredAccount {
+  bankAccountNum: string;
+  bankName: string;
+  bankCode: string;
+}
+
+// ===== 등록 카드 =====
+export interface RegisteredCard {
+  cardNum: string;
+  cardCompany: string;
+  cardCompanyName: string;
+  alias: string;
+}
+
+// ===== 인증서 상태 =====
+export interface CertificateInfo {
+  is_valid: boolean;
+  expire_date: string | null;
+  regist_date: string | null;
+}