refactor(WEB): DataTable 개선 및 회계 상세 컴포넌트 리팩토링

- DataTable 컴포넌트 기능 확장 및 코드 개선 - 회계 상세 컴포넌트(Bill/Deposit/Purchase/Sales/Withdrawal) 리팩토링 - 엑셀 다운로드 유틸리티 개선 - 대시보드 및 각종 리스트 페이지 업데이트 - dashboard_type2 페이지 추가 - 프론트엔드 개선 로드맵 문서 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 11:03:19 +09:00
parent 0db6302652
commit e14335b635
33 changed files with 1354 additions and 217 deletions
--- a/src/app/[locale]/(protected)/board/[boardCode]/page.tsx
+++ b/src/app/[locale]/(protected)/board/[boardCode]/page.tsx
@@ -231,14 +231,14 @@ export default function BoardCodePage() {
  };

  // 테이블 컬럼
-  const tableColumns: TableColumn[] = [
+  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
    { key: 'title', label: '제목', className: 'min-w-[200px]' },
    { key: 'author', label: '작성자', className: 'w-[120px]' },
    { key: 'views', label: '조회수', className: 'w-[80px] text-center' },
    { key: 'status', label: '상태', className: 'w-[100px] text-center' },
    { key: 'createdAt', label: '등록일', className: 'w-[120px] text-center' },
-  ];
+  ], []);

  // 테이블 행 렌더링
  const renderTableRow = useCallback(
--- a/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx
+++ b/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx
@@ -244,14 +244,14 @@ function DynamicBoardListContent({ boardCode }: { boardCode: string }) {
  };

  // 테이블 컬럼
-  const tableColumns: TableColumn[] = [
+  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
    { key: 'title', label: '제목', className: 'min-w-[200px]' },
    { key: 'author', label: '작성자', className: 'w-[120px]' },
    { key: 'views', label: '조회수', className: 'w-[80px] text-center' },
    { key: 'status', label: '상태', className: 'w-[100px] text-center' },
    { key: 'createdAt', label: '등록일', className: 'w-[120px] text-center' },
-  ];
+  ], []);

  // 테이블 행 렌더링
  const renderTableRow = useCallback(
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/DashboardType2.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/DashboardType2.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { LayoutDashboard } from 'lucide-react';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { RollingText, type RollingItem } from './RollingText';
+import { OverviewTab } from './tabs/OverviewTab';
+import { FinanceTab } from './tabs/FinanceTab';
+import { SalesTab } from './tabs/SalesTab';
+import { ExpenseTab } from './tabs/ExpenseTab';
+import { ScheduleTab } from './tabs/ScheduleTab';
+import {
+  scheduleStats,
+  overviewStats,
+  financeStats,
+  salesStats,
+  expenseStats,
+  scheduleTodayItems,
+  scheduleIssueItems,
+} from './mockData';
+
+interface TabConfig {
+  value: string;
+  label: string;
+  badge?: number;
+  rollingItems: RollingItem[];
+}
+
+const toRolling = (stats: { label: string; value: string; color?: string }[]): RollingItem[] =>
+  stats.map((s) => ({ label: s.label, value: s.value, color: (s.color ?? 'default') as RollingItem['color'] }));
+
+const TABS: TabConfig[] = [
+  {
+    value: 'schedule',
+    label: '일정/이슈',
+    badge: scheduleTodayItems.length + scheduleIssueItems.length,
+    rollingItems: toRolling(scheduleStats),
+  },
+  {
+    value: 'overview',
+    label: '전체 요약',
+    rollingItems: toRolling(overviewStats),
+  },
+  {
+    value: 'finance',
+    label: '재무 관리',
+    rollingItems: toRolling(financeStats),
+  },
+  {
+    value: 'sales',
+    label: '영업/매출',
+    rollingItems: toRolling(salesStats),
+  },
+  {
+    value: 'expense',
+    label: '경비 관리',
+    rollingItems: toRolling(expenseStats),
+  },
+];
+
+export function DashboardType2() {
+  const [activeTab, setActiveTab] = useState('schedule');
+  const [globalTick, setGlobalTick] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setGlobalTick((prev) => prev + 1);
+    }, 2500);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <PageLayout>
+      <div className="p-3 md:p-6">
+        <PageHeader
+          title="대시보드"
+          description="주요 경영 지표를 한눈에 확인합니다."
+          icon={LayoutDashboard}
+        />
+
+        <div className="mt-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="bg-transparent border-b rounded-none w-full gap-0 p-0 h-auto justify-start flex-wrap">
+              {TABS.map((tab) => (
+                <TabsTrigger
+                  key={tab.value}
+                  value={tab.value}
+                  className="relative flex-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-3 py-2.5 lg:px-5 lg:py-3.5 text-sm lg:text-base font-medium text-muted-foreground data-[state=active]:text-primary whitespace-nowrap"
+                >
+                  <span className="flex items-center gap-1.5">
+                    <span>{tab.label}</span>
+                    {tab.badge != null && tab.badge > 0 && (
+                      <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none">
+                        {tab.badge}
+                      </span>
+                    )}
+                  </span>
+                  <span className={`hidden xl:inline-flex items-center gap-1.5 ml-1.5 w-[180px] overflow-hidden ${activeTab === tab.value ? 'invisible' : ''}`}>
+                    <span className="text-muted-foreground/40 flex-shrink-0">|</span>
+                    <span className="flex-1 overflow-hidden"><RollingText items={tab.rollingItems} globalTick={globalTick} /></span>
+                  </span>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+
+            <div className="mt-6">
+              <TabsContent value="schedule"><ScheduleTab /></TabsContent>
+              <TabsContent value="overview"><OverviewTab /></TabsContent>
+              <TabsContent value="finance"><FinanceTab /></TabsContent>
+              <TabsContent value="sales"><SalesTab /></TabsContent>
+              <TabsContent value="expense"><ExpenseTab /></TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/RollingText.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/RollingText.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export interface RollingItem {
+  label: string;
+  value: string;
+  color?: 'default' | 'green' | 'blue' | 'red' | 'orange';
+}
+
+interface RollingTextProps {
+  items: RollingItem[];
+  globalTick: number;
+}
+
+const valueColorMap: Record<string, string> = {
+  default: 'text-foreground font-bold',
+  green: 'text-green-600 font-bold',
+  blue: 'text-blue-600 font-bold',
+  red: 'text-red-600 font-bold',
+  orange: 'text-orange-600 font-bold',
+};
+
+export function RollingText({ items, globalTick }: RollingTextProps) {
+  const [displayIndex, setDisplayIndex] = useState(() =>
+    items.length > 0 ? globalTick % items.length : 0,
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+  const isPausedRef = useRef(false);
+  const displayIndexRef = useRef(displayIndex);
+
+  useEffect(() => {
+    if (items.length <= 1) return;
+    if (isPausedRef.current) return;
+
+    const targetIndex = globalTick % items.length;
+    if (targetIndex === displayIndexRef.current) return;
+
+    setIsAnimating(true);
+    const timeout = setTimeout(() => {
+      setDisplayIndex(targetIndex);
+      displayIndexRef.current = targetIndex;
+      setIsAnimating(false);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [globalTick, items.length]);
+
+  const handleMouseEnter = useCallback(() => {
+    isPausedRef.current = true;
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    isPausedRef.current = false;
+    const targetIndex = globalTick % items.length;
+    setDisplayIndex(targetIndex);
+    displayIndexRef.current = targetIndex;
+  }, [globalTick, items.length]);
+
+  if (items.length === 0) return null;
+
+  const item = items[displayIndex];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 text-sm transition-all duration-300 cursor-default ${
+        isAnimating ? 'opacity-0 translate-y-1' : 'opacity-100 translate-y-0'
+      }`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <span className="text-muted-foreground">{item.label}</span>
+      <span className={valueColorMap[item.color ?? 'default']}>{item.value}</span>
+    </span>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/StatCards.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/StatCards.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import type { StatCard } from './mockData';
+
+const colorMap: Record<string, string> = {
+  default: 'text-foreground',
+  green: 'text-green-600',
+  blue: 'text-blue-600',
+  red: 'text-red-600',
+  orange: 'text-orange-600',
+};
+
+export function StatCards({ stats }: { stats: StatCard[] }) {
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat, i) => (
+        <div key={i} className="bg-card border rounded-xl p-4">
+          <p className="text-xs md:text-sm text-muted-foreground mb-1 whitespace-nowrap">{stat.label}</p>
+          <p className={`text-lg md:text-xl font-bold ${colorMap[stat.color ?? 'default']}`}>
+            {stat.value}
+          </p>
+          {stat.change && (
+            <p className={`text-xs mt-1 ${stat.changeDirection === 'up' ? 'text-green-500' : 'text-red-500'}`}>
+              {stat.change}
+            </p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/mockData.ts
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/mockData.ts
@@ -0,0 +1,118 @@
+/** dashboard_type2 목업 데이터 */
+
+export interface StatCard {
+  label: string;
+  value: string;
+  color?: 'default' | 'green' | 'blue' | 'red' | 'orange';
+  change?: string;
+  changeDirection?: 'up' | 'down';
+}
+
+export interface TableRow {
+  [key: string]: string | number;
+}
+
+// === 전체 요약 탭 ===
+export const overviewStats: StatCard[] = [
+  { label: '현금성 자산', value: '305억', color: 'blue', change: '+5.2%', changeDirection: 'up' },
+  { label: '당월 매출', value: '12.8억', color: 'green', change: '+8.3%', changeDirection: 'up' },
+  { label: '당월 미수금', value: '10.1억', color: 'red', change: '+2.1%', changeDirection: 'up' },
+  { label: '당월 지출', value: '8.5억', color: 'orange', change: '-3.2%', changeDirection: 'down' },
+];
+
+export const overviewRecentOrders: TableRow[] = [
+  { no: 1, 거래처: '(주)대한건설', 품목: '전동개폐기 SET', 금액: '45,000,000', 상태: '진행중', 담당자: '김영민' },
+  { no: 2, 거래처: '삼성엔지니어링', 품목: '자동제어 시스템', 금액: '128,000,000', 상태: '완료', 담당자: '이수진' },
+  { no: 3, 거래처: '현대건설', 품목: '환기 시스템', 금액: '67,500,000', 상태: '진행중', 담당자: '박준혁' },
+  { no: 4, 거래처: 'LG전자', 품목: '공조기 제어반', 금액: '32,000,000', 상태: '대기', 담당자: '최민지' },
+  { no: 5, 거래처: 'SK에코플랜트', 품목: '모터 제어반', 금액: '89,000,000', 상태: '진행중', 담당자: '정하윤' },
+];
+
+// === 재무 관리 탭 ===
+export const financeStats: StatCard[] = [
+  { label: '현금성 자산 합계', value: '-1,392만', color: 'red', change: '+5.2%', changeDirection: 'up' },
+  { label: '외국환(USD) 합계', value: '$0', color: 'default', change: '+2.1%', changeDirection: 'up' },
+  { label: '입금 합계', value: '0원', color: 'green', change: '+12.0%', changeDirection: 'up' },
+  { label: '출금 합계', value: '0원', color: 'default', change: '-8.0%', changeDirection: 'down' },
+];
+
+export const financeExpenseData: TableRow[] = [
+  { no: 1, 항목: '매입', 금액: '5,234만', 전월대비: '+10.5%', 비율: '42%' },
+  { no: 2, 항목: '카드', 금액: '985만', 전월대비: '+3.2%', 비율: '8%' },
+  { no: 3, 항목: '발행어음', 금액: '0원', 전월대비: '-', 비율: '0%' },
+  { no: 4, 항목: '인건비', 금액: '3,200만', 전월대비: '+1.5%', 비율: '26%' },
+  { no: 5, 항목: '운영비', 금액: '1,580만', 전월대비: '-5.3%', 비율: '13%' },
+  { no: 6, 항목: '기타', 금액: '1,350만', 전월대비: '+7.8%', 비율: '11%' },
+];
+
+export const financeCardData: TableRow[] = [
+  { no: 1, 카드명: '법인카드(신한)', 사용액: '450만', 미정리: '2건', 한도: '1,000만', 잔여한도: '550만' },
+  { no: 2, 카드명: '법인카드(국민)', 사용액: '320만', 미정리: '1건', 한도: '800만', 잔여한도: '480만' },
+  { no: 3, 카드명: '법인카드(하나)', 사용액: '215만', 미정리: '2건', 한도: '500만', 잔여한도: '285만' },
+];
+
+// === 영업/매출 탭 ===
+export const salesStats: StatCard[] = [
+  { label: '수주 건수', value: '7건', color: 'blue' },
+  { label: '누적 미수금', value: '10억 3,186만', color: 'red' },
+  { label: '당월 미수금', value: '10억 2,586만', color: 'orange' },
+  { label: '채권추심 중', value: '4,782만', color: 'red' },
+];
+
+export const salesReceivableData: TableRow[] = [
+  { no: 1, 거래처: '(주)대한건설', 매출액: '120,000,000', 입금액: '80,000,000', 미수금: '40,000,000', 경과일: '45일', 상태: '정상' },
+  { no: 2, 거래처: '삼성엔지니어링', 매출액: '250,000,000', 입금액: '150,000,000', 미수금: '100,000,000', 경과일: '92일', 상태: '주의' },
+  { no: 3, 거래처: '현대건설', 매출액: '67,500,000', 입금액: '67,500,000', 미수금: '0', 경과일: '-', 상태: '완료' },
+  { no: 4, 거래처: 'SK에코플랜트', 매출액: '89,000,000', 입금액: '45,000,000', 미수금: '44,000,000', 경과일: '30일', 상태: '정상' },
+  { no: 5, 거래처: 'LG전자', 매출액: '32,000,000', 입금액: '0', 미수금: '32,000,000', 경과일: '120일', 상태: '위험' },
+];
+
+export const salesDebtData: TableRow[] = [
+  { no: 1, 거래처: '(주)동양전자', 채권액: '1,500만', 추심단계: '내용증명 발송', 경과일: '180일', 회수가능성: '중' },
+  { no: 2, 거래처: '(주)한국테크', 채권액: '2,300만', 추심단계: '법적조치 진행', 경과일: '250일', 회수가능성: '하' },
+  { no: 3, 거래처: '(주)미래산업', 채권액: '982만', 추심단계: '분할상환 협의', 경과일: '95일', 회수가능성: '상' },
+];
+
+// === 경비 관리 탭 ===
+export const expenseStats: StatCard[] = [
+  { label: '접대비 사용', value: '1,000만', color: 'blue' },
+  { label: '접대비 잔여한도', value: '2,190만', color: 'green' },
+  { label: '복리후생비 사용', value: '0원', color: 'default' },
+  { label: '복리후생비 잔여한도', value: '960만', color: 'green' },
+];
+
+export const expenseEntertainmentData: TableRow[] = [
+  { no: 1, 일자: '2026-02-03', 사용자: '김대표', 거래처: '(주)대한건설', 금액: '350,000', 용도: '식사', 결제수단: '법인카드' },
+  { no: 2, 일자: '2026-02-05', 사용자: '이부장', 거래처: '삼성엔지니어링', 금액: '520,000', 용도: '골프', 결제수단: '법인카드' },
+  { no: 3, 일자: '2026-02-07', 사용자: '김대표', 거래처: 'LG전자', 금액: '180,000', 용도: '식사', 결제수단: '법인카드' },
+  { no: 4, 일자: '2026-02-08', 사용자: '박이사', 거래처: 'SK에코플랜트', 금액: '450,000', 용도: '선물', 결제수단: '현금' },
+];
+
+export const expenseWelfareData: TableRow[] = [
+  { no: 1, 항목: '식대', 월한도: '200,000', 사용액: '180,000', 잔여: '20,000', 비고: '비과세 한도 내' },
+  { no: 2, 항목: '교통비', 월한도: '100,000', 사용액: '85,000', 잔여: '15,000', 비고: '-' },
+  { no: 3, 항목: '경조사비', 월한도: '200,000', 사용액: '100,000', 잔여: '100,000', 비고: '-' },
+  { no: 4, 항목: '체육문화비', 월한도: '100,000', 사용액: '0', 잔여: '100,000', 비고: '-' },
+];
+
+// === 일정/이슈 탭 ===
+export const scheduleStats: StatCard[] = [
+  { label: '오늘 일정', value: '4건', color: 'blue' },
+  { label: '이번 주 일정', value: '12건', color: 'default' },
+  { label: '미처리 이슈', value: '3건', color: 'red' },
+  { label: '이번 달 마감', value: '2건', color: 'orange' },
+];
+
+export const scheduleTodayItems = [
+  { id: 1, time: '09:00', title: '대한건설 현장 미팅', type: 'meeting' as const, person: '김영민' },
+  { id: 2, time: '11:00', title: '삼성엔지니어링 견적 검토', type: 'task' as const, person: '이수진' },
+  { id: 3, time: '14:00', title: '월간 실적 보고', type: 'report' as const, person: '박준혁' },
+  { id: 4, time: '16:00', title: 'SK에코플랜트 납품 확인', type: 'delivery' as const, person: '정하윤' },
+];
+
+export const scheduleIssueItems = [
+  { id: 1, date: '2026-02-08', title: '전동개폐기 납기 지연 (3일)', priority: 'high' as const, assignee: '김영민' },
+  { id: 2, date: '2026-02-09', title: '자재 단가 인상 통보 (동 파이프)', priority: 'medium' as const, assignee: '최민지' },
+  { id: 3, date: '2026-02-10', title: '품질 검사 부적합 2건 발생', priority: 'high' as const, assignee: '박준혁' },
+  { id: 4, date: '2026-02-10', title: '현대건설 설계 변경 요청', priority: 'medium' as const, assignee: '이수진' },
+];
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/ExpenseTab.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/ExpenseTab.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { expenseStats, expenseEntertainmentData, expenseWelfareData } from '../mockData';
+import { StatCards } from '../StatCards';
+
+export function ExpenseTab() {
+  return (
+    <div className="space-y-6">
+      <StatCards stats={expenseStats} />
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base font-semibold">접대비 사용 내역</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm min-w-[600px]">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">일자</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">사용자</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">거래처</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">금액</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">용도</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {expenseEntertainmentData.map((row, i) => (
+                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                      <td className="px-4 py-3">{row['일자']}</td>
+                      <td className="px-4 py-3">{row['사용자']}</td>
+                      <td className="px-4 py-3 font-medium">{row['거래처']}</td>
+                      <td className="px-4 py-3 text-right">{row['금액']}</td>
+                      <td className="px-4 py-3">{row['용도']}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base font-semibold">복리후생비 항목별 현황</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm min-w-[600px]">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">항목</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">월한도</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">사용액</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">잔여</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">비고</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {expenseWelfareData.map((row, i) => (
+                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                      <td className="px-4 py-3 font-medium">{row['항목']}</td>
+                      <td className="px-4 py-3 text-right">{row['월한도']}</td>
+                      <td className="px-4 py-3 text-right">{row['사용액']}</td>
+                      <td className="px-4 py-3 text-right text-green-600 font-medium">{row['잔여']}</td>
+                      <td className="px-4 py-3 text-muted-foreground text-xs">{row['비고']}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/FinanceTab.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/FinanceTab.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { financeStats, financeExpenseData, financeCardData } from '../mockData';
+import { StatCards } from '../StatCards';
+
+export function FinanceTab() {
+  return (
+    <div className="space-y-6">
+      <StatCards stats={financeStats} />
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base font-semibold">당월 예상 지출 내역</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm min-w-[500px]">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">항목</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">금액</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">전월대비</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">비율</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {financeExpenseData.map((row, i) => (
+                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                      <td className="px-4 py-3 font-medium">{row['항목']}</td>
+                      <td className="px-4 py-3 text-right">{row['금액']}</td>
+                      <td className="px-4 py-3 text-right">
+                        <span className={String(row['전월대비']).startsWith('+') ? 'text-red-500' : String(row['전월대비']).startsWith('-') ? 'text-green-500' : ''}>
+                          {row['전월대비']}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-right text-muted-foreground">{row['비율']}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base font-semibold">카드 사용 현황</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm min-w-[500px]">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">카드명</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">사용액</th>
+                    <th className="px-4 py-3 text-center font-medium text-muted-foreground">미정리</th>
+                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">잔여한도</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {financeCardData.map((row, i) => (
+                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                      <td className="px-4 py-3 font-medium">{row['카드명']}</td>
+                      <td className="px-4 py-3 text-right">{row['사용액']}</td>
+                      <td className="px-4 py-3 text-center text-orange-500 font-medium">{row['미정리']}</td>
+                      <td className="px-4 py-3 text-right">{row['잔여한도']}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/OverviewTab.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/OverviewTab.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { overviewStats, overviewRecentOrders } from '../mockData';
+import { StatCards } from '../StatCards';
+
+export function OverviewTab() {
+  return (
+    <div className="space-y-6">
+      <StatCards stats={overviewStats} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold">최근 수주 현황</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm min-w-[600px]">
+              <thead>
+                <tr className="border-b bg-muted/50">
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">거래처</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">품목</th>
+                  <th className="px-4 py-3 text-right font-medium text-muted-foreground">금액</th>
+                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">상태</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">담당자</th>
+                </tr>
+              </thead>
+              <tbody>
+                {overviewRecentOrders.map((row, i) => (
+                  <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                    <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                    <td className="px-4 py-3 font-medium">{row['거래처']}</td>
+                    <td className="px-4 py-3">{row['품목']}</td>
+                    <td className="px-4 py-3 text-right">{row['금액']}</td>
+                    <td className="px-4 py-3 text-center">
+                      <StatusBadge status={row['상태'] as string} />
+                    </td>
+                    <td className="px-4 py-3">{row['담당자']}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    '진행중': 'bg-blue-100 text-blue-700',
+    '완료': 'bg-green-100 text-green-700',
+    '대기': 'bg-gray-100 text-gray-600',
+    '주의': 'bg-yellow-100 text-yellow-700',
+    '위험': 'bg-red-100 text-red-700',
+  };
+  return (
+    <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] ?? 'bg-gray-100 text-gray-600'}`}>
+      {status}
+    </span>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/SalesTab.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/SalesTab.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { salesStats, salesReceivableData, salesDebtData } from '../mockData';
+import { StatCards } from '../StatCards';
+
+export function SalesTab() {
+  return (
+    <div className="space-y-6">
+      <StatCards stats={salesStats} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold">미수금 현황</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm min-w-[700px]">
+              <thead>
+                <tr className="border-b bg-muted/50">
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">거래처</th>
+                  <th className="px-4 py-3 text-right font-medium text-muted-foreground">매출액</th>
+                  <th className="px-4 py-3 text-right font-medium text-muted-foreground">입금액</th>
+                  <th className="px-4 py-3 text-right font-medium text-muted-foreground">미수금</th>
+                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">경과일</th>
+                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">상태</th>
+                </tr>
+              </thead>
+              <tbody>
+                {salesReceivableData.map((row, i) => (
+                  <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                    <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                    <td className="px-4 py-3 font-medium">{row['거래처']}</td>
+                    <td className="px-4 py-3 text-right">{row['매출액']}</td>
+                    <td className="px-4 py-3 text-right">{row['입금액']}</td>
+                    <td className="px-4 py-3 text-right font-medium">{row['미수금']}</td>
+                    <td className="px-4 py-3 text-center">{row['경과일']}</td>
+                    <td className="px-4 py-3 text-center">
+                      <StatusBadge status={row['상태'] as string} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold">채권추심 현황</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm min-w-[700px]">
+              <thead>
+                <tr className="border-b bg-muted/50">
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">거래처</th>
+                  <th className="px-4 py-3 text-right font-medium text-muted-foreground">채권액</th>
+                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">추심단계</th>
+                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">경과일</th>
+                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">회수가능성</th>
+                </tr>
+              </thead>
+              <tbody>
+                {salesDebtData.map((row, i) => (
+                  <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
+                    <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
+                    <td className="px-4 py-3 font-medium">{row['거래처']}</td>
+                    <td className="px-4 py-3 text-right">{row['채권액']}</td>
+                    <td className="px-4 py-3">{row['추심단계']}</td>
+                    <td className="px-4 py-3 text-center">{row['경과일']}</td>
+                    <td className="px-4 py-3 text-center">
+                      <PossibilityBadge level={row['회수가능성'] as string} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    '정상': 'bg-green-100 text-green-700',
+    '완료': 'bg-green-100 text-green-700',
+    '주의': 'bg-yellow-100 text-yellow-700',
+    '위험': 'bg-red-100 text-red-700',
+  };
+  return (
+    <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] ?? 'bg-gray-100 text-gray-600'}`}>
+      {status}
+    </span>
+  );
+}
+
+function PossibilityBadge({ level }: { level: string }) {
+  const styles: Record<string, string> = {
+    '상': 'bg-green-100 text-green-700',
+    '중': 'bg-yellow-100 text-yellow-700',
+    '하': 'bg-red-100 text-red-700',
+  };
+  return (
+    <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[level] ?? 'bg-gray-100 text-gray-600'}`}>
+      {level}
+    </span>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/ScheduleTab.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/_components/tabs/ScheduleTab.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { scheduleStats, scheduleTodayItems, scheduleIssueItems } from '../mockData';
+import { StatCards } from '../StatCards';
+import { Clock, AlertTriangle, FileText, Truck, Users } from 'lucide-react';
+
+export function ScheduleTab() {
+  return (
+    <div className="space-y-6">
+      <StatCards stats={scheduleStats} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold">오늘 일정</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-3">
+            {scheduleTodayItems.map((item) => (
+              <div key={item.id} className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/30 transition-colors">
+                <div className="flex-shrink-0 mt-0.5">
+                  <ScheduleIcon type={item.type} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium">{item.title}</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{item.person}</p>
+                </div>
+                <div className="flex-shrink-0">
+                  <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">{item.time}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold">미처리 이슈</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-3">
+            {scheduleIssueItems.map((item) => (
+              <div key={item.id} className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/30 transition-colors">
+                <div className="flex-shrink-0 mt-0.5">
+                  <PriorityIcon priority={item.priority} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium">{item.title}</p>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-xs text-muted-foreground">{item.date}</span>
+                    <span className="text-xs text-muted-foreground">|</span>
+                    <span className="text-xs text-muted-foreground">{item.assignee}</span>
+                  </div>
+                </div>
+                <div className="flex-shrink-0">
+                  <PriorityBadge priority={item.priority} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ScheduleIcon({ type }: { type: string }) {
+  const iconClass = "w-4 h-4";
+  switch (type) {
+    case 'meeting': return <Users className={`${iconClass} text-blue-500`} />;
+    case 'task': return <FileText className={`${iconClass} text-green-500`} />;
+    case 'report': return <Clock className={`${iconClass} text-orange-500`} />;
+    case 'delivery': return <Truck className={`${iconClass} text-purple-500`} />;
+    default: return <Clock className={`${iconClass} text-gray-500`} />;
+  }
+}
+
+function PriorityIcon({ priority }: { priority: string }) {
+  if (priority === 'high') return <AlertTriangle className="w-4 h-4 text-red-500" />;
+  return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
+}
+
+function PriorityBadge({ priority }: { priority: string }) {
+  const styles: Record<string, string> = {
+    high: 'bg-red-100 text-red-700',
+    medium: 'bg-yellow-100 text-yellow-700',
+    low: 'bg-green-100 text-green-700',
+  };
+  const labels: Record<string, string> = { high: '긴급', medium: '보통', low: '낮음' };
+  return (
+    <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${styles[priority] ?? 'bg-gray-100 text-gray-600'}`}>
+      {labels[priority] ?? priority}
+    </span>
+  );
+}
--- a/src/app/[locale]/(protected)/dashboard_type2/page.tsx
+++ b/src/app/[locale]/(protected)/dashboard_type2/page.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { DashboardType2 } from './_components/DashboardType2';
+
+/**
+ * Dashboard Type 2 - 탭 기반 대시보드
+ *
+ * 기존 보고서형 대시보드(dashboard)와 달리 탭으로 세부 항목을 나눈 구성
+ * - 전체 요약: 핵심 KPI + 최근 수주
+ * - 재무 관리: 일일일보 + 지출/카드 현황
+ * - 영업/매출: 미수금 + 채권추심
+ * - 경비 관리: 접대비 + 복리후생비
+ * - 일정/이슈: 오늘 일정 + 미처리 이슈
+ *
+ * URL: /ko/dashboard_type2
+ */
+export default function DashboardType2Page() {
+  return <DashboardType2 />;
+}
--- a/src/app/[locale]/(protected)/production/dashboard/page.tsx
+++ b/src/app/[locale]/(protected)/production/dashboard/page.tsx
@@ -4,19 +4,16 @@
 * 경로: /[locale]/(protected)/production/dashboard
 */

-import { Suspense } from 'react';
-import ProductionDashboard from '@/components/production/ProductionDashboard';
+'use client';
+
+import dynamic from 'next/dynamic';
 import { ListPageSkeleton } from '@/components/ui/skeleton';

-export default function ProductionDashboardPage() {
-  return (
-    <Suspense fallback={<ListPageSkeleton showHeader={false} showStats={true} statsCount={6} />}>
-      <ProductionDashboard />
-    </Suspense>
-  );
-}
+const ProductionDashboard = dynamic(
+  () => import('@/components/production/ProductionDashboard'),
+  { loading: () => <ListPageSkeleton showHeader={false} showStats={true} statsCount={6} /> }
+);

-export const metadata = {
-  title: '생산 현황판',
-  description: '공장별 작업 현황을 확인합니다.',
-};
+export default function ProductionDashboardPage() {
+  return <ProductionDashboard />;
+}
--- a/src/app/[locale]/(protected)/reports/comprehensive-analysis/page.tsx
+++ b/src/app/[locale]/(protected)/reports/comprehensive-analysis/page.tsx
@@ -1,7 +1,13 @@
 'use client';

-import { MainDashboard } from '@/components/business/MainDashboard';
+import dynamic from 'next/dynamic';
+import { ListPageSkeleton } from '@/components/ui/skeleton';
+
+const MainDashboard = dynamic(
+  () => import('@/components/business/MainDashboard').then(mod => ({ default: mod.MainDashboard })),
+  { loading: () => <ListPageSkeleton showHeader={false} showStats={true} statsCount={4} /> }
+);

 export default function ComprehensiveAnalysisPage() {
  return <MainDashboard />;
-}
+}
--- a/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
+++ b/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
@@ -15,7 +15,7 @@
 * - 페이지 기반 CRUD (등록/수정/상세 → 별도 페이지로 이동)
 */

-import { useState, useRef, useEffect, useCallback, useTransition } from "react";
+import { useState, useRef, useEffect, useCallback, useTransition, useMemo } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ClientDetailClientV2 } from '@/components/clients/ClientDetailClientV2';
 import { useClientList, Client } from "@/hooks/useClientList";
@@ -435,7 +435,7 @@ export default function CustomerAccountManagementPage() {
  };

  // 테이블 컬럼 정의
-  const tableColumns: TableColumn[] = [
+  const tableColumns: TableColumn[] = useMemo(() => [
    { key: "rowNumber", label: "번호", className: "px-4" },
    { key: "code", label: "코드", className: "px-4" },
    { key: "clientType", label: "구분", className: "px-4" },
@@ -443,7 +443,7 @@ export default function CustomerAccountManagementPage() {
    { key: "representative", label: "대표자", className: "px-4" },
    { key: "manager", label: "담당자", className: "px-4" },
    { key: "phone", label: "전화번호", className: "px-4" },
-  ];
+  ], []);

  // 테이블 행 렌더링
  const renderTableRow = (
--- a/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx
+++ b/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx
@@ -11,7 +11,7 @@
 * - API 연동 완료 (2025-01-08)
 */

-import { useState, useRef, useEffect, useCallback, useTransition } from "react";
+import { useState, useRef, useEffect, useCallback, useTransition, useMemo } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { OrderRegistration, OrderFormData, createOrder } from "@/components/orders";
 import {
@@ -473,7 +473,7 @@ function OrderListContent() {
  }, []);

  // 테이블 컬럼 정의 (16개: 체크박스, 번호, 로트번호, 현장명, 출고예정일, 접수일, 수주처, 제품명, 수신자, 수신주소, 수신처, 배송, 담당자, 틀수, 상태, 비고)
-  const tableColumns: TableColumn[] = [
+  const tableColumns: TableColumn[] = useMemo(() => [
    { key: "rowNumber", label: "번호", className: "px-2 text-center" },
    { key: "lotNumber", label: "로트번호", className: "px-2" },
    { key: "siteName", label: "현장명", className: "px-2" },
@@ -489,7 +489,7 @@ function OrderListContent() {
    { key: "frameCount", label: "틀수", className: "px-2 text-center" },
    { key: "status", label: "상태", className: "px-2" },
    { key: "remarks", label: "비고", className: "px-2" },
-  ];
+  ], []);

  // 테이블 행 렌더링 (16개 컬럼: 체크박스, 번호, 로트번호, 현장명, 출고예정일, 접수일, 수주처, 제품명, 수신자, 수신주소, 수신처, 배송, 담당자, 틀수, 상태, 비고)
  const renderTableRow = (