From 3e4ad775a6fe92faeef3166809c927db34f994a2 Mon Sep 17 00:00:00 2001
From: DEV-SERVER <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 01:58:32 +0900
Subject: [PATCH 01/24] ci: add Jenkinsfile for CI/CD pipeline
 (develop/stage/main)

---
 Jenkinsfile | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 Jenkinsfile

diff --git a/Jenkinsfile b/Jenkinsfile
new file mode 100644
index 00000000..456ee964
--- /dev/null
+++ b/Jenkinsfile
@@ -0,0 +1,106 @@
+pipeline {
+    agent any
+
+    environment {
+        DEPLOY_USER = 'hskwon'
+        RELEASE_ID  = new Date().format('yyyyMMdd_HHmmss')
+    }
+
+    stages {
+        stage('Checkout') {
+            steps { checkout scm }
+        }
+
+        stage('Prepare Env') {
+            steps {
+                script {
+                    def envFile = "/var/lib/jenkins/env-files/react/.env.${env.BRANCH_NAME}"
+                    sh "cp ${envFile} .env.local"
+                }
+            }
+        }
+
+        stage('Install') {
+            steps {
+                sh 'npm ci'
+            }
+        }
+
+        stage('Build') {
+            steps {
+                sh 'npm run build'
+            }
+        }
+
+        // ── develop → 개발서버 배포 ──
+        stage('Deploy Development') {
+            when { branch 'develop' }
+            steps {
+                sshagent(credentials: ['deploy-ssh-key']) {
+                    sh """
+                        rsync -az --delete \
+                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/
+
+                        scp .env.local ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/.env.local
+
+                        ssh ${DEPLOY_USER}@114.203.209.83 'cd /home/webservice/react && pm2 restart sam-front'
+                    """
+                }
+            }
+        }
+
+        // ── stage → 운영서버 Stage 배포 ──
+        stage('Deploy Stage') {
+            when { branch 'stage' }
+            steps {
+                sshagent(credentials: ['deploy-ssh-key']) {
+                    sh """
+                        ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react-stage/releases/${RELEASE_ID}'
+
+                        rsync -az --delete \
+                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/
+
+                        scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/.env.local
+
+                        ssh ${DEPLOY_USER}@211.117.60.189 '
+                            ln -sfn /home/webservice/react-stage/releases/${RELEASE_ID} /home/webservice/react-stage/current &&
+                            cd /home/webservice && pm2 reload sam-front-stage 2>/dev/null || pm2 start react-stage/current/node_modules/.bin/next --name sam-front-stage -- start -p 3100 &&
+                            cd /home/webservice/react-stage/releases && ls -1dt */ | tail -n +4 | xargs rm -rf 2>/dev/null || true
+                        '
+                    """
+                }
+            }
+        }
+
+        // ── main → 운영서버 Production 배포 ──
+        stage('Deploy Production') {
+            when { branch 'main' }
+            steps {
+                sshagent(credentials: ['deploy-ssh-key']) {
+                    sh """
+                        ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react/releases/${RELEASE_ID}'
+
+                        rsync -az --delete \
+                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/
+
+                        scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/.env.local
+
+                        ssh ${DEPLOY_USER}@211.117.60.189 '
+                            ln -sfn /home/webservice/react/releases/${RELEASE_ID} /home/webservice/react/current &&
+                            cd /home/webservice && pm2 reload sam-front &&
+                            cd /home/webservice/react/releases && ls -1dt */ | tail -n +6 | xargs rm -rf 2>/dev/null || true
+                        '
+                    """
+                }
+            }
+        }
+    }
+
+    post {
+        success { echo "✅ react 배포 완료 (${env.BRANCH_NAME})" }
+        failure { echo "❌ react 배포 실패 (${env.BRANCH_NAME})" }
+    }
+}

From ec492e382925dc67a4cec8e3970365a0442887a5 Mon Sep 17 00:00:00 2001
From: DEV-SERVER <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 02:05:27 +0900
Subject: [PATCH 02/24] =?UTF-8?q?ci:=20fix=20npm=20ci=20=E2=86=92=20npm=20?=
 =?UTF-8?q?install=20(package-lock.json=20not=20tracked)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 456ee964..ead090bf 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -22,7 +22,7 @@ pipeline {
 
         stage('Install') {
             steps {
-                sh 'npm ci'
+                sh 'npm install --prefer-offline'
             }
         }
 

From 6a469181cdc1a6b3b3f25878c8dcb7b5b5b14752 Mon Sep 17 00:00:00 2001
From: DEV-SERVER <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 02:22:36 +0900
Subject: [PATCH 03/24] =?UTF-8?q?fix(ci):=20rsync=20trailing=20slash=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20PM2=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=EC=84=B8=EC=8A=A4=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- rsync source 경로 trailing slash 제거 (.next/, node_modules/, public/ → .next, node_modules, public)
- trailing slash로 디렉토리 내용이 root에 풀리는 문제 해결
- dev deploy에 --exclude .git, .env*, ecosystem.config.* 추가
- PM2 프로세스명: sam-front → sam-react (개발서버)
---
 Jenkinsfile | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index ead090bf..a0789999 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -39,12 +39,15 @@ pipeline {
                 sshagent(credentials: ['deploy-ssh-key']) {
                     sh """
                         rsync -az --delete \
-                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            --exclude='.git' \
+                            --exclude='.env*' \
+                            --exclude='ecosystem.config.*' \
+                            .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/
 
                         scp .env.local ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/.env.local
 
-                        ssh ${DEPLOY_USER}@114.203.209.83 'cd /home/webservice/react && pm2 restart sam-front'
+                        ssh ${DEPLOY_USER}@114.203.209.83 'cd /home/webservice/react && pm2 restart sam-react'
                     """
                 }
             }
@@ -59,7 +62,7 @@ pipeline {
                         ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react-stage/releases/${RELEASE_ID}'
 
                         rsync -az --delete \
-                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/
 
                         scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/.env.local
@@ -83,7 +86,7 @@ pipeline {
                         ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react/releases/${RELEASE_ID}'
 
                         rsync -az --delete \
-                            .next/ package.json package-lock.json next.config.ts public/ node_modules/ \
+                            .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/
 
                         scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/.env.local
@@ -100,7 +103,7 @@ pipeline {
     }
 
     post {
-        success { echo "✅ react 배포 완료 (${env.BRANCH_NAME})" }
-        failure { echo "❌ react 배포 실패 (${env.BRANCH_NAME})" }
+        success { echo '✅ react 배포 완료 (' + env.BRANCH_NAME + ')' }
+        failure { echo '❌ react 배포 실패 (' + env.BRANCH_NAME + ')' }
     }
 }

From b8dfa3d88742141c3672ff32550857900fe647d8 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, 24 Feb 2026 13:01:41 +0900
Subject: [PATCH 04/24] =?UTF-8?q?feat(WEB):=20CEO=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=EA=B0=95?=
 =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20validation=20=EB=AA=A8=EB=93=88=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CalendarSection 일정 CRUD 기능 확장 (상세 모달 연동)
- ScheduleDetailModal 개선
- CEO 대시보드 섹션별 API 키 통일
- validation.ts → validation/ 모듈 분리 (item-schemas, utils)
- formatters.ts 확장
- date.ts 유틸 추가
- SignupPage/EmployeeForm/AddCompanyDialog 등 소규모 개선
- PaymentHistory/PopupManagement utils 정리

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/auth/SignupPage.tsx            |   5 +-
 .../dialogs/DashboardSettingsDialog.tsx       |   2 +-
 .../modals/ScheduleDetailModal.tsx            |  77 ++--
 .../CEODashboard/sections/CalendarSection.tsx | 293 +++++++++++----
 .../sections/DailyAttendanceSection.tsx       |   2 +-
 .../sections/DebtCollectionSection.tsx        |   2 +-
 .../sections/EnhancedSections.tsx             |   6 +-
 .../sections/PurchaseStatusSection.tsx        |   2 +-
 .../sections/SalesStatusSection.tsx           |   2 +-
 .../sections/StatusBoardSection.tsx           |  12 +-
 .../sections/TodayIssueSection.tsx            |  10 +-
 .../sections/UnshippedSection.tsx             |   2 +-
 .../CEODashboard/sections/VatSection.tsx      |   2 +-
 .../hr/EmployeeManagement/EmployeeForm.tsx    |   5 +-
 .../AddCompanyDialog.tsx                      |   3 +-
 .../PaymentHistoryManagement/utils.ts         |   8 +-
 .../settings/PopupManagement/utils.ts         |   7 +-
 src/lib/formatters.ts                         |  39 +-
 src/lib/utils/date.ts                         |  11 +
 src/lib/utils/validation/common.ts            | 110 ++++++
 src/lib/utils/validation/form-schemas.ts      | 191 ++++++++++
 src/lib/utils/validation/index.ts             |  31 ++
 .../item-schemas.ts}                          | 342 +-----------------
 src/lib/utils/validation/utils.ts             |  64 ++++
 24 files changed, 726 insertions(+), 502 deletions(-)
 create mode 100644 src/lib/utils/validation/common.ts
 create mode 100644 src/lib/utils/validation/form-schemas.ts
 create mode 100644 src/lib/utils/validation/index.ts
 rename src/lib/utils/{validation.ts => validation/item-schemas.ts} (52%)
 create mode 100644 src/lib/utils/validation/utils.ts

diff --git a/src/components/auth/SignupPage.tsx b/src/components/auth/SignupPage.tsx
index a7fc3465..17412831 100644
--- a/src/components/auth/SignupPage.tsx
+++ b/src/components/auth/SignupPage.tsx
@@ -25,6 +25,7 @@ import {
 } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
+import { extractDigits } from '@/lib/formatters';
 
 export function SignupPage() {
   const router = useRouter();
@@ -64,7 +65,7 @@ export function SignupPage() {
   // 사업자등록번호 자동 포맷팅 (000-00-00000)
   const formatBusinessNumber = (value: string) => {
     // 숫자만 추출
-    const numbers = value.replace(/[^\d]/g, '');
+    const numbers = extractDigits(value);
 
     // 최대 10자리까지만
     const limited = numbers.slice(0, 10);
@@ -87,7 +88,7 @@ export function SignupPage() {
   // 핸드폰 번호 자동 포맷팅 (010-1111-1111 or 010-111-1111)
   const formatPhoneNumber = (value: string) => {
     // 숫자만 추출
-    const numbers = value.replace(/[^\d]/g, '');
+    const numbers = extractDigits(value);
 
     // 최대 11자리까지만
     const limited = numbers.slice(0, 11);
diff --git a/src/components/business/CEODashboard/dialogs/DashboardSettingsDialog.tsx b/src/components/business/CEODashboard/dialogs/DashboardSettingsDialog.tsx
index 85ddff71..96d0b139 100644
--- a/src/components/business/CEODashboard/dialogs/DashboardSettingsDialog.tsx
+++ b/src/components/business/CEODashboard/dialogs/DashboardSettingsDialog.tsx
@@ -889,7 +889,7 @@ export function DashboardSettingsDialog({
           ))}
         </div>
 
-        <DialogFooter className="flex gap-3 p-4 border-t border-gray-200 sm:justify-center">
+        <DialogFooter className="flex flex-row gap-3 p-4 border-t border-gray-200 justify-center">
           <Button
             variant="outline"
             onClick={handleCancel}
diff --git a/src/components/business/CEODashboard/modals/ScheduleDetailModal.tsx b/src/components/business/CEODashboard/modals/ScheduleDetailModal.tsx
index 048d462c..976d385c 100644
--- a/src/components/business/CEODashboard/modals/ScheduleDetailModal.tsx
+++ b/src/components/business/CEODashboard/modals/ScheduleDetailModal.tsx
@@ -126,35 +126,30 @@ export function ScheduleDetailModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && handleCancel()}>
-      <DialogContent className="w-[95vw] max-w-[480px] sm:max-w-[480px] p-6">
+      <DialogContent className="w-[95vw] max-w-[480px] sm:max-w-[480px] p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
         <DialogHeader className="pb-2">
           <DialogTitle className="text-lg font-bold">일정 상세</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-6 py-4">
+        <div className="space-y-4 py-2">
           {/* 제목 */}
-          <div className="flex items-center gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0">
-              제목
-            </label>
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">제목</label>
             <Input
               value={formData.title}
               onChange={(e) => handleFieldChange('title', e.target.value)}
               placeholder="제목"
-              className="flex-1"
             />
           </div>
 
           {/* 대상 (부서) */}
-          <div className="flex items-center gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0">
-              대상
-            </label>
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">대상</label>
             <Select
               value={formData.department}
               onValueChange={(value) => handleFieldChange('department', value)}
             >
-              <SelectTrigger className="flex-1">
+              <SelectTrigger>
                 <SelectValue placeholder="부서명" />
               </SelectTrigger>
               <SelectContent>
@@ -168,33 +163,31 @@ export function ScheduleDetailModal({
           </div>
 
           {/* 기간 */}
-          <div className="flex items-center gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0">
-              기간
-            </label>
-            <div className="flex-1 flex items-center gap-2">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">기간</label>
+            <div className="flex flex-col gap-2">
               <DatePicker
                 value={formData.startDate}
                 onChange={(value) => handleFieldChange('startDate', value)}
                 size="sm"
-                className="flex-1"
-              />
-              <span className="text-gray-400 px-1">~</span>
-              <DatePicker
-                value={formData.endDate}
-                onChange={(value) => handleFieldChange('endDate', value)}
-                size="sm"
-                className="flex-1"
+                className="w-full"
               />
+              <div className="flex items-center gap-2">
+                <span className="text-gray-400 text-xs">~</span>
+                <DatePicker
+                  value={formData.endDate}
+                  onChange={(value) => handleFieldChange('endDate', value)}
+                  size="sm"
+                  className="w-full"
+                />
+              </div>
             </div>
           </div>
 
           {/* 시간 */}
-          <div className="flex items-start gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0 pt-2">
-              시간
-            </label>
-            <div className="flex-1 space-y-3">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">시간</label>
+            <div className="space-y-3">
               {/* 종일 체크박스 */}
               <div className="flex items-center gap-2">
                 <Checkbox
@@ -215,15 +208,15 @@ export function ScheduleDetailModal({
                     value={formData.startTime}
                     onChange={(value) => handleFieldChange('startTime', value)}
                     placeholder="시작 시간"
-                    className="flex-1"
+                    className="flex-1 min-w-0"
                     minuteStep={5}
                   />
-                  <span className="text-gray-400 px-1">~</span>
+                  <span className="text-gray-400 shrink-0">~</span>
                   <TimePicker
                     value={formData.endTime}
                     onChange={(value) => handleFieldChange('endTime', value)}
                     placeholder="종료 시간"
-                    className="flex-1"
+                    className="flex-1 min-w-0"
                     minuteStep={5}
                   />
                 </div>
@@ -232,11 +225,9 @@ export function ScheduleDetailModal({
           </div>
 
           {/* 색상 */}
-          <div className="flex items-center gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0">
-              색상
-            </label>
-            <div className="flex gap-3">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">색상</label>
+            <div className="flex gap-3 flex-wrap">
               {COLOR_OPTIONS.map((color) => (
                 <button
                   key={color.value}
@@ -254,20 +245,18 @@ export function ScheduleDetailModal({
           </div>
 
           {/* 내용 */}
-          <div className="flex items-start gap-6">
-            <label className="w-10 text-sm font-medium text-gray-700 shrink-0 pt-2">
-              내용
-            </label>
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">내용</label>
             <Textarea
               value={formData.content}
               onChange={(e) => handleFieldChange('content', e.target.value)}
               placeholder="내용"
-              className="flex-1 min-h-[120px] resize-none"
+              className="min-h-[100px] resize-none"
             />
           </div>
         </div>
 
-        <DialogFooter className="flex gap-2 pt-2">
+        <DialogFooter className="flex flex-row gap-2 pt-2">
           {isEditMode && onDelete && (
             <Button
               variant="outline"
diff --git a/src/components/business/CEODashboard/sections/CalendarSection.tsx b/src/components/business/CEODashboard/sections/CalendarSection.tsx
index 7894f599..32e327f7 100644
--- a/src/components/business/CEODashboard/sections/CalendarSection.tsx
+++ b/src/components/business/CEODashboard/sections/CalendarSection.tsx
@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Plus, ExternalLink } from 'lucide-react';
+import { Plus, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
 import { ScheduleCalendar } from '@/components/common/ScheduleCalendar';
 import type { ScheduleEvent } from '@/components/common/ScheduleCalendar/types';
 import { getCalendarEventsForYear, type CalendarEvent } from '@/constants/calendarEvents';
@@ -243,50 +243,238 @@ export function CalendarSection({
     setCurrentDate(date);
   };
 
+  // 모바일 리스트뷰: 현재 월의 모든 날짜와 이벤트
+  const monthDaysWithEvents = useMemo(() => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const days: Array<{
+      date: Date;
+      dateStr: string;
+      label: string;
+      isToday: boolean;
+      isWeekend: boolean;
+      events: ScheduleEvent[];
+    }> = [];
+
+    for (let d = 1; d <= daysInMonth; d++) {
+      const date = new Date(year, month, d);
+      const mm = String(month + 1).padStart(2, '0');
+      const dd = String(d).padStart(2, '0');
+      const dateStr = `${year}-${mm}-${dd}`;
+      const dayOfWeek = date.getDay();
+
+      const dayEvents = calendarEvents.filter(
+        (ev) => ev.startDate <= dateStr && ev.endDate >= dateStr
+      );
+
+      days.push({
+        date,
+        dateStr,
+        label: `${d}일 ${dayNames[dayOfWeek]}요일`,
+        isToday: date.getTime() === today.getTime(),
+        isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
+        events: dayEvents,
+      });
+    }
+    return days;
+  }, [currentDate, calendarEvents]);
+
+  const handleMobilePrevMonth = () => {
+    const prev = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
+    setCurrentDate(prev);
+  };
+
+  const handleMobileNextMonth = () => {
+    const next = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+    setCurrentDate(next);
+  };
+
   return (
     <Card>
       <CardContent className="p-6">
-        {/* 섹션 헤더: 타이틀 + 필터들 */}
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold">캘린더</h3>
-          <div className="flex items-center gap-2">
-          {/* 부서 필터 */}
-          <Select
-            value={deptFilter}
-            onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
-          >
-            <SelectTrigger className="min-w-[80px] w-auto h-8">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {DEPT_FILTER_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        {/* 모바일: 스티키 헤더 (타이틀+필터+월네비) */}
+        <div className="lg:hidden sticky top-12 z-10 bg-white -mx-6 px-6 pt-2 pb-3 border-b border-gray-100">
+          <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
+            <h3 className="text-lg font-semibold shrink-0">캘린더</h3>
+            <div className="flex items-center gap-2">
+              {/* 부서 필터 */}
+              <Select
+                value={deptFilter}
+                onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
+              >
+                <SelectTrigger className="min-w-[80px] w-auto h-8">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {DEPT_FILTER_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
-          {/* 업무 필터 */}
-          <Select
-            value={taskFilter}
-            onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
-          >
-            <SelectTrigger className="min-w-[80px] w-auto h-8">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {TASK_FILTER_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+              {/* 업무 필터 */}
+              <Select
+                value={taskFilter}
+                onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
+              >
+                <SelectTrigger className="min-w-[80px] w-auto h-8">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {TASK_FILTER_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 월 네비게이션 */}
+          <div className="flex items-center justify-center gap-4">
+            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobilePrevMonth}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-semibold whitespace-nowrap">
+              {currentDate.getFullYear()}년 {currentDate.getMonth() + 1}월
+            </span>
+            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobileNextMonth}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
           </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* 데스크탑: 일반 헤더 */}
+        <div className="hidden lg:flex items-center justify-between mb-4 flex-wrap gap-2">
+          <h3 className="text-lg font-semibold shrink-0">캘린더</h3>
+          <div className="flex items-center gap-2">
+            <Select
+              value={deptFilter}
+              onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
+            >
+              <SelectTrigger className="min-w-[80px] w-auto h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {DEPT_FILTER_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={taskFilter}
+              onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
+            >
+              <SelectTrigger className="min-w-[80px] w-auto h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {TASK_FILTER_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* 모바일: 리스트뷰 */}
+        <div className="lg:hidden pt-3">
+
+          {/* 일별 리스트 */}
+          <div className="space-y-1">
+            {monthDaysWithEvents.map((day) => {
+              const hasEvents = day.events.length > 0;
+              const isSelected = selectedDate && day.date.getTime() === selectedDate.getTime();
+              return (
+                <div
+                  key={day.dateStr}
+                  className={`rounded-lg px-3 py-2.5 cursor-pointer transition-colors ${
+                    isSelected ? 'bg-blue-50 ring-1 ring-blue-200' :
+                    day.isToday ? 'bg-amber-50' : ''
+                  } ${!hasEvents && !day.isToday && !isSelected ? 'opacity-50' : ''}`}
+                  onClick={() => handleDateClick(day.date)}
+                >
+                  {/* 날짜 + 일정등록 버튼 */}
+                  <div className="flex items-center justify-between mb-1">
+                    <div className={`text-sm font-medium ${
+                      day.isWeekend ? 'text-red-500' : 'text-gray-900'
+                    } ${day.isToday ? 'font-bold' : ''}`}>
+                      {day.label}
+                      {day.isToday && <span className="ml-1 text-amber-600 text-xs font-semibold">(오늘)</span>}
+                    </div>
+                    {isSelected && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-6 text-xs gap-0.5 px-2"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onScheduleEdit?.({
+                            id: '',
+                            title: '',
+                            startDate: day.dateStr,
+                            endDate: day.dateStr,
+                            type: 'schedule',
+                          });
+                        }}
+                      >
+                        <Plus className="h-3 w-3" />
+                        일정등록
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* 이벤트 목록 (날짜 아래) */}
+                  {hasEvents ? (
+                    <div className="space-y-1 pl-1">
+                      {day.events.slice(0, 3).map((ev) => {
+                        const evData = ev.data as Record<string, unknown>;
+                        const evType = evData?._type as string;
+                        const colorMap: Record<string, string> = {
+                          holiday: 'bg-red-500',
+                          tax: 'bg-orange-500',
+                          schedule: 'bg-blue-500',
+                          order: 'bg-green-500',
+                          construction: 'bg-purple-500',
+                          issue: 'bg-red-400',
+                        };
+                        const dotColor = colorMap[evType] || 'bg-gray-400';
+                        const title = evData?.name as string || evData?.title as string || ev.title;
+                        const cleanTitle = title?.replace(/^[🔴🟠]\s*/, '') || '';
+                        return (
+                          <div key={ev.id} className="flex items-center gap-1.5 text-xs text-gray-700">
+                            <span className={`w-2 h-2 rounded-full shrink-0 ${dotColor}`} />
+                            <span className="truncate">{cleanTitle}</span>
+                          </div>
+                        );
+                      })}
+                      {day.events.length > 3 && (
+                        <div className="text-xs text-gray-400 pl-3.5">+{day.events.length - 3}건</div>
+                      )}
+                    </div>
+                  ) : null}
+
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 데스크탑: 기존 캘린더 + 상세 */}
+        <div className="hidden lg:grid lg:grid-cols-2 gap-6">
           {/* 캘린더 영역 */}
           <div>
             <ScheduleCalendar
@@ -297,25 +485,22 @@ export function CalendarSection({
               onEventClick={handleEventClick}
               onMonthChange={handleMonthChange}
               maxEventsPerDay={4}
-              weekStartsOn={1} // 월요일 시작 (기획서)
+              weekStartsOn={1}
               className="[&_.weekend]:bg-yellow-50"
             />
           </div>
 
           {/* 선택된 날짜 일정 + 이슈 목록 */}
           <div className="border rounded-lg p-4">
-            {/* 헤더: 날짜 + 일정등록 버튼 */}
             <div className="flex items-center justify-between mb-2">
               <h4 className="text-lg font-semibold">
                 {selectedDate ? formatSelectedDate(selectedDate) : '날짜를 선택하세요'}
               </h4>
-              {/* 일정등록 버튼 */}
               <Button
                 variant="outline"
                 size="sm"
                 className="h-7 text-xs gap-1"
                 onClick={() => {
-                  // 선택된 날짜 기준으로 새 일정 등록
                   const year = selectedDate?.getFullYear() || new Date().getFullYear();
                   const month = String((selectedDate?.getMonth() || new Date().getMonth()) + 1).padStart(2, '0');
                   const day = String(selectedDate?.getDate() || new Date().getDate()).padStart(2, '0');
@@ -334,7 +519,6 @@ export function CalendarSection({
               </Button>
             </div>
 
-            {/* 총 N건 */}
             <div className="text-sm text-muted-foreground mb-4">
               총 {totalItemCount}건
             </div>
@@ -345,7 +529,6 @@ export function CalendarSection({
               </div>
             ) : (
               <div className="space-y-3 max-h-[calc(100vh-400px)] overflow-y-auto pr-1">
-                {/* 공휴일/세금일정 목록 */}
                 {selectedDateItems.staticEvents.map((event) => {
                   const eventData = event.data as CalendarEvent & { _type: string };
                   const isHoliday = eventData.type === 'holiday';
@@ -369,36 +552,25 @@ export function CalendarSection({
                   );
                 })}
 
-                {/* 일정 목록 */}
                 {selectedDateItems.schedules.map((schedule) => (
                   <div
                     key={schedule.id}
                     className="p-3 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                     onClick={() => onScheduleClick?.(schedule)}
                   >
-                    {/* 제목 */}
-                    <div className="font-medium text-base mb-1">
-                      {schedule.title}
-                    </div>
-                    {/* 부서명 | 날짜 | 시간 */}
-                    <div className="text-sm text-muted-foreground">
-                      {formatScheduleDetail(schedule)}
-                    </div>
+                    <div className="font-medium text-base mb-1">{schedule.title}</div>
+                    <div className="text-sm text-muted-foreground">{formatScheduleDetail(schedule)}</div>
                   </div>
                 ))}
 
-                {/* 이슈 목록 */}
                 {selectedDateItems.issues.map((issue) => (
                   <div
                     key={issue.id}
                     className="p-3 border border-red-200 rounded-lg hover:bg-red-50 transition-colors cursor-pointer"
                     onClick={() => {
-                      if (issue.path) {
-                        router.push(`/ko${issue.path}`);
-                      }
+                      if (issue.path) router.push(`/ko${issue.path}`);
                     }}
                   >
-                    {/* 뱃지 + 제목 */}
                     <div className="flex items-start gap-2 mb-1">
                       <Badge
                         variant="secondary"
@@ -406,11 +578,8 @@ export function CalendarSection({
                       >
                         {issue.badge}
                       </Badge>
-                      <span className="font-medium text-sm flex-1">
-                        {issue.content}
-                      </span>
+                      <span className="font-medium text-sm flex-1">{issue.content}</span>
                     </div>
-                    {/* 시간 + 상세보기 */}
                     <div className="flex items-center justify-between text-xs text-muted-foreground">
                       <span>{issue.time}</span>
                       {issue.path && (
diff --git a/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx b/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
index 95aa0d66..1dc86a96 100644
--- a/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
+++ b/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
@@ -120,7 +120,7 @@ export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
             </Select>
           </div>
           <div className="overflow-x-auto">
-            <table className="w-full text-sm">
+            <table className="w-full text-sm min-w-[400px]">
               <thead>
                 <tr className="bg-gray-50 border-b">
                   <th className="px-4 py-2 text-center text-gray-600 font-medium w-12">No</th>
diff --git a/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx b/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
index 2635aaa0..32952560 100644
--- a/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
+++ b/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
@@ -33,7 +33,7 @@ export function DebtCollectionSection({ data }: DebtCollectionSectionProps) {
           colorTheme="red"
         />
 
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
           {data.cards.map((card, idx) => (
             <AmountCardItem
               key={card.id}
diff --git a/src/components/business/CEODashboard/sections/EnhancedSections.tsx b/src/components/business/CEODashboard/sections/EnhancedSections.tsx
index 60197bb2..28882ae5 100644
--- a/src/components/business/CEODashboard/sections/EnhancedSections.tsx
+++ b/src/components/business/CEODashboard/sections/EnhancedSections.tsx
@@ -94,7 +94,7 @@ export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyRepor
 
       {/* 카드 내용 */}
       <div style={{ backgroundColor: '#ffffff' }} className="p-6">
-        <div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           {data.cards.map((card, idx) => {
             const style = CARD_STYLES[idx] || CARD_STYLES[0];
             const CardIcon = style.Icon;
@@ -240,7 +240,7 @@ export function EnhancedStatusBoardSection({ items, itemSettings }: EnhancedStat
         </div>
 
         {/* 카드 그리드 */}
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
           {filteredItems.map((item) => {
             const isHighlighted = item.isHighlighted;
             const style = ITEM_STYLES[item.label] || DEFAULT_STYLE;
@@ -325,7 +325,7 @@ export function EnhancedMonthlyExpenseSection({ data, onCardClick }: EnhancedMon
         </div>
 
         {/* 카드 그리드 */}
-        <div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           {/* 카드 1: 매입 */}
           <div
             style={{ backgroundColor: '#f5f3ff', borderColor: '#ddd6fe' }}
diff --git a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
index 971e6269..49b812f8 100644
--- a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
@@ -229,7 +229,7 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
           </div>
         </div>
         <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm min-w-[500px]">
             <thead>
               <tr className="bg-gray-50 border-b">
                 <th className="px-4 py-2 text-left text-gray-600 font-medium">날짜</th>
diff --git a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
index 46260e7b..b0af22a1 100644
--- a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
@@ -234,7 +234,7 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
           </div>
         </div>
         <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm min-w-[500px]">
             <thead>
               <tr className="bg-gray-50 border-b">
                 <th className="px-4 py-2 text-left text-gray-600 font-medium">날짜</th>
diff --git a/src/components/business/CEODashboard/sections/StatusBoardSection.tsx b/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
index 29261702..3f90e560 100644
--- a/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
+++ b/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
@@ -39,22 +39,12 @@ export function StatusBoardSection({ items, itemSettings }: StatusBoardSectionPr
       })
     : items;
 
-  // 아이템 개수에 따른 동적 그리드 클래스 (xs: 344px Galaxy Fold 지원)
-  const getGridColsClass = () => {
-    const count = filteredItems.length;
-    if (count <= 1) return 'grid-cols-1';
-    if (count === 2) return 'grid-cols-1 xs:grid-cols-2';
-    if (count === 3) return 'grid-cols-1 xs:grid-cols-2 md:grid-cols-3';
-    // 4개 이상: 최대 4열, 넘치면 아래로
-    return 'grid-cols-1 xs:grid-cols-2 md:grid-cols-4';
-  };
-
   return (
     <Card>
       <CardContent className="p-6">
         <SectionTitle title="현황판" badge="warning" />
 
-        <div className={`grid ${getGridColsClass()} gap-3`}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
           {filteredItems.map((item) => (
             <IssueCardItem
               key={item.id}
diff --git a/src/components/business/CEODashboard/sections/TodayIssueSection.tsx b/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
index f19db36e..72e1591f 100644
--- a/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
+++ b/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
@@ -293,11 +293,11 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
 
           {/* 날짜 네비게이션 (이전 이슈 탭일 때만) */}
           {activeTab === 'past' && (
-            <div className="flex items-center gap-1 shrink-0">
+            <div className="flex items-center gap-1 min-w-0">
               <Button
                 variant="outline"
                 size="sm"
-                className="h-8 px-2"
+                className="h-8 px-1.5 shrink-0"
                 onClick={handlePrevDate}
               >
                 <ChevronLeft className="h-4 w-4" />
@@ -308,14 +308,14 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
                 onChange={handleDatePickerChange}
                 size="sm"
                 displayFormat="yyyy년 MM월 dd일"
-                className="w-[170px]"
+                className="min-w-0 flex-1"
                 align="start"
                 sideOffset={4}
               />
               <Button
                 variant="outline"
                 size="sm"
-                className="h-8 px-2"
+                className="h-8 px-1.5 shrink-0"
                 onClick={handleNextDate}
                 disabled={isNextDisabled}
               >
@@ -326,7 +326,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
 
           {/* 필터 */}
           <Select value={filter} onValueChange={setFilter}>
-            <SelectTrigger className="w-44 h-9 ml-auto">
+            <SelectTrigger className="w-44 h-9">
               <SelectValue placeholder="전체" />
             </SelectTrigger>
             <SelectContent>
diff --git a/src/components/business/CEODashboard/sections/UnshippedSection.tsx b/src/components/business/CEODashboard/sections/UnshippedSection.tsx
index 5973ce4f..b135cda7 100644
--- a/src/components/business/CEODashboard/sections/UnshippedSection.tsx
+++ b/src/components/business/CEODashboard/sections/UnshippedSection.tsx
@@ -78,7 +78,7 @@ export function UnshippedSection({ data }: UnshippedSectionProps) {
             </div>
           </div>
           <div className="overflow-x-auto">
-            <table className="w-full text-sm">
+            <table className="w-full text-sm min-w-[550px]">
               <thead>
                 <tr className="bg-gray-50 border-b">
                   <th className="px-4 py-2 text-center text-gray-600 font-medium w-12">No</th>
diff --git a/src/components/business/CEODashboard/sections/VatSection.tsx b/src/components/business/CEODashboard/sections/VatSection.tsx
index 9a04370b..2a230f58 100644
--- a/src/components/business/CEODashboard/sections/VatSection.tsx
+++ b/src/components/business/CEODashboard/sections/VatSection.tsx
@@ -15,7 +15,7 @@ export function VatSection({ data, onClick }: VatSectionProps) {
       <CardContent className="p-6">
         <SectionTitle title="부가세 현황" badge="warning" />
 
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
           {data.cards.map((card) => (
             <AmountCardItem
               key={card.id}
diff --git a/src/components/hr/EmployeeManagement/EmployeeForm.tsx b/src/components/hr/EmployeeManagement/EmployeeForm.tsx
index 295c5529..97c03d17 100644
--- a/src/components/hr/EmployeeManagement/EmployeeForm.tsx
+++ b/src/components/hr/EmployeeManagement/EmployeeForm.tsx
@@ -46,6 +46,7 @@ import {
 } from './types';
 import { getPositions, getDepartments, uploadProfileImage, type PositionItem, type DepartmentItem } from './actions';
 import { getProfileImageUrl } from './utils';
+import { extractDigits } from '@/lib/formatters';
 
 // 부서 트리 구조 타입
 interface DepartmentTreeNode extends DepartmentItem {
@@ -272,7 +273,7 @@ export function EmployeeForm({
 
   // 휴대폰 번호 자동 하이픈 포맷팅
   const formatPhoneNumber = (value: string): string => {
-    const numbers = value.replace(/[^0-9]/g, '');
+    const numbers = extractDigits(value);
     if (numbers.length <= 3) return numbers;
     if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
     return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
@@ -280,7 +281,7 @@ export function EmployeeForm({
 
   // 주민등록번호 자동 하이픈 포맷팅
   const formatResidentNumber = (value: string): string => {
-    const numbers = value.replace(/[^0-9]/g, '');
+    const numbers = extractDigits(value);
     if (numbers.length <= 6) return numbers;
     return `${numbers.slice(0, 6)}-${numbers.slice(6, 13)}`;
   };
diff --git a/src/components/settings/CompanyInfoManagement/AddCompanyDialog.tsx b/src/components/settings/CompanyInfoManagement/AddCompanyDialog.tsx
index f1fb59fb..163b3714 100644
--- a/src/components/settings/CompanyInfoManagement/AddCompanyDialog.tsx
+++ b/src/components/settings/CompanyInfoManagement/AddCompanyDialog.tsx
@@ -20,6 +20,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { extractDigits } from '@/lib/formatters';
 
 interface AddCompanyDialogProps {
   open: boolean;
@@ -36,7 +37,7 @@ export function AddCompanyDialog({ open, onOpenChange }: AddCompanyDialogProps)
 
   // 숫자만 입력 가능 (10자리 제한)
   const handleBusinessNumberChange = (value: string) => {
-    const numbersOnly = value.replace(/[^0-9]/g, '');
+    const numbersOnly = extractDigits(value);
     if (numbersOnly.length <= 10) {
       setBusinessNumber(numbersOnly);
     }
diff --git a/src/components/settings/PaymentHistoryManagement/utils.ts b/src/components/settings/PaymentHistoryManagement/utils.ts
index 12590b68..fdf80687 100644
--- a/src/components/settings/PaymentHistoryManagement/utils.ts
+++ b/src/components/settings/PaymentHistoryManagement/utils.ts
@@ -1,6 +1,6 @@
 import type { PaymentApiData, PaymentHistory, PaymentStatus } from './types';
 import { PAYMENT_METHOD_LABELS } from './types';
-import { formatDate } from '@/lib/utils/date';
+import { formatDate, toDateString } from '@/lib/utils/date';
 
 // ===== API → Frontend 변환 =====
 export function transformApiToFrontend(apiData: PaymentApiData): PaymentHistory {
@@ -11,12 +11,12 @@ export function transformApiToFrontend(apiData: PaymentApiData): PaymentHistory
   const paymentMethodLabel = PAYMENT_METHOD_LABELS[apiData.payment_method] || apiData.payment_method;
 
   // 구독 기간
-  const periodStart = subscription?.started_at?.split('T')[0] || '';
-  const periodEnd = subscription?.ended_at?.split('T')[0] || '';
+  const periodStart = toDateString(subscription?.started_at);
+  const periodEnd = toDateString(subscription?.ended_at);
 
   return {
     id: String(apiData.id),
-    paymentDate: apiData.paid_at?.split('T')[0] || formatDate(apiData.created_at),
+    paymentDate: toDateString(apiData.paid_at) || formatDate(apiData.created_at),
     subscriptionName: plan?.name || '구독',
     paymentMethod: paymentMethodLabel,
     subscriptionPeriod: {
diff --git a/src/components/settings/PopupManagement/utils.ts b/src/components/settings/PopupManagement/utils.ts
index 18eab644..1c1a1ae0 100644
--- a/src/components/settings/PopupManagement/utils.ts
+++ b/src/components/settings/PopupManagement/utils.ts
@@ -3,6 +3,7 @@
  */
 
 import type { Popup, PopupFormData, PopupTarget, PopupStatus } from './types';
+import { toDateString } from '@/lib/utils/date';
 
 // ============================================
 // API 응답 타입 정의
@@ -55,9 +56,9 @@ export function transformApiToFrontend(apiData: PopupApiData): Popup {
     status: apiData.status as PopupStatus,
     author: apiData.creator?.name || '관리자',
     authorId: apiData.created_by ? String(apiData.created_by) : '',
-    createdAt: apiData.created_at?.split('T')[0] || '',
-    startDate: apiData.started_at?.split('T')[0] || '',
-    endDate: apiData.ended_at?.split('T')[0] || '',
+    createdAt: toDateString(apiData.created_at),
+    startDate: toDateString(apiData.started_at),
+    endDate: toDateString(apiData.ended_at),
   };
 }
 
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts
index 7980e228..54d801c8 100644
--- a/src/lib/formatters.ts
+++ b/src/lib/formatters.ts
@@ -165,6 +165,14 @@ export function parseNumber(formatted: string): number {
   return isNaN(num) ? 0 : num;
 }
 
+/**
+ * 숫자만 추출 (범용)
+ * 전화번호, 사업자번호 등 포맷팅 전처리에 사용
+ */
+export function extractDigits(value: string): string {
+  return value.replace(/\D/g, '');
+}
+
 /**
  * Leading zero 제거 (01 → 1)
  */
@@ -188,34 +196,3 @@ export function removeLeadingZeros(value: string): string {
   return value.replace(/^0+/, '') || '0';
 }
 
-/**
- * 숫자만 추출 (음수, 소수점 허용 옵션)
- */
-export function extractNumbers(value: string, options?: {
-  allowNegative?: boolean;
-  allowDecimal?: boolean;
-}): string {
-  const { allowNegative = false, allowDecimal = false } = options || {};
-
-  let pattern = '\\d';
-  if (allowNegative) pattern = '-?' + pattern;
-  if (allowDecimal) pattern = pattern + '|\\.';
-
-  const regex = new RegExp(`[^${allowNegative ? '-' : ''}${allowDecimal ? '.' : ''}\\d]`, 'g');
-  let result = value.replace(regex, '');
-
-  // 중복 마이너스 제거 (첫 번째만 유지)
-  if (allowNegative && result.includes('-')) {
-    const isNegative = result.startsWith('-');
-    result = result.replace(/-/g, '');
-    if (isNegative) result = '-' + result;
-  }
-
-  // 중복 소수점 제거 (첫 번째만 유지)
-  if (allowDecimal && result.includes('.')) {
-    const parts = result.split('.');
-    result = parts[0] + (parts.length > 1 ? '.' + parts.slice(1).join('') : '');
-  }
-
-  return result;
-}
\ No newline at end of file
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index c76fe152..490fda11 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -58,6 +58,17 @@ export function formatDateForInput(dateStr: string | null | undefined): string {
   return getLocalDateString(date);
 }
 
+/**
+ * ISO 문자열에서 날짜 부분(YYYY-MM-DD)만 추출
+ * null/undefined 시 빈 문자열 반환 (폼 데이터 변환용)
+ * @example toDateString("2025-01-06T00:00:00.000Z") // "2025-01-06"
+ * @example toDateString(null) // ""
+ */
+export function toDateString(isoString: string | null | undefined): string {
+  if (!isoString) return '';
+  return isoString.split('T')[0];
+}
+
 /**
  * 날짜 표시용 포맷 (YYYY-MM-DD)
  * @example formatDate("2025-01-06T00:00:00.000Z") // "2025-01-06"
diff --git a/src/lib/utils/validation/common.ts b/src/lib/utils/validation/common.ts
new file mode 100644
index 00000000..2081ab88
--- /dev/null
+++ b/src/lib/utils/validation/common.ts
@@ -0,0 +1,110 @@
+/**
+ * 공통 Zod 검증 스키마
+ *
+ * 품목명, 품목유형, 날짜, 숫자, BOM 등 여러 스키마에서 공유하는 기본 블록
+ */
+
+import { z } from 'zod';
+
+// ===== 내부 전용 스키마 =====
+
+/**
+ * 품목 코드 검증
+ * 형식: {업체코드}-{품목유형}-{일련번호}
+ * 예: KD-FG-001
+ *
+ * 현재 사용하지 않음 (품목 코드 자동 생성)
+ */
+export const _itemCodeSchema = z.string()
+  .min(1, '품목 코드를 입력해주세요')
+  .regex(
+    /^[A-Z0-9]+-[A-Z]{2}-\d+$/,
+    '품목 코드 형식이 올바르지 않습니다 (예: KD-FG-001)'
+  );
+
+// ===== 공통 필드 스키마 =====
+
+/**
+ * 품목명 검증
+ */
+export const itemNameSchema = z.preprocess(
+  (val) => val === undefined || val === null ? "" : val,
+  z.string().min(1, '품목명을 입력해주세요').max(200, '품목명은 200자 이내로 입력해주세요')
+);
+
+/**
+ * 품목 유형 검증
+ */
+export const itemTypeSchema = z.enum(['FG', 'PT', 'SM', 'RM', 'CS'], {
+  message: '품목 유형을 선택해주세요',
+});
+
+/**
+ * 단위 검증
+ *
+ * 현재 사용하지 않음 (materialUnitSchema로 대체)
+ */
+export const _unitSchema = z.string()
+  .min(1, '단위를 입력해주세요')
+  .max(20, '단위는 20자 이내로 입력해주세요');
+
+/**
+ * 양수 검증 (가격, 수량 등)
+ * undefined나 빈 문자열은 검증하지 않음
+ */
+export const positiveNumberSchema = z.union([
+  z.number().positive('0보다 큰 값을 입력해주세요'),
+  z.string().transform((val) => parseFloat(val)).pipe(z.number().positive('0보다 큰 값을 입력해주세요')),
+  z.undefined(),
+  z.null(),
+  z.literal('')
+]).optional();
+
+/**
+ * 날짜 검증 (YYYY-MM-DD)
+ * 빈 문자열이나 undefined는 검증하지 않음
+ */
+export const dateSchema = z.preprocess(
+  (val) => {
+    if (val === undefined || val === null || val === '') return undefined;
+    return val;
+  },
+  z.string()
+    .regex(/^\d{4}-\d{2}-\d{2}$/, '날짜 형식이 올바르지 않습니다 (YYYY-MM-DD)')
+    .optional()
+);
+
+// ===== BOM 라인 스키마 =====
+
+/**
+ * 절곡품 전개도 상세 스키마
+ */
+export const bendingDetailSchema = z.object({
+  id: z.string(),
+  no: z.number().int().positive(),
+  input: z.number(),
+  elongation: z.number().default(-1),
+  calculated: z.number(),
+  sum: z.number(),
+  shaded: z.boolean().default(false),
+  aAngle: z.number().optional(),
+});
+
+/**
+ * BOM 라인 스키마
+ */
+export const bomLineSchema = z.object({
+  id: z.string(),
+  childItemCode: z.string().min(1, '하위 품목 코드를 입력해주세요'),
+  childItemName: z.string().min(1, '하위 품목명을 입력해주세요'),
+  quantity: z.number().positive('수량은 0보다 커야 합니다'),
+  unit: z.string().min(1, '단위를 입력해주세요'),
+  unitPrice: positiveNumberSchema,
+  quantityFormula: z.string().optional(),
+  note: z.string().max(500).optional(),
+
+  // 절곡품 관련
+  isBending: z.boolean().optional(),
+  bendingDiagram: z.string().url().optional(),
+  bendingDetails: z.array(bendingDetailSchema).optional(),
+});
diff --git a/src/lib/utils/validation/form-schemas.ts b/src/lib/utils/validation/form-schemas.ts
new file mode 100644
index 00000000..25cd6988
--- /dev/null
+++ b/src/lib/utils/validation/form-schemas.ts
@@ -0,0 +1,191 @@
+/**
+ * 폼 데이터 Zod 검증 스키마
+ *
+ * 품목 생성/수정/필터용 스키마
+ */
+
+import { z } from 'zod';
+import { itemTypeSchema, bendingDetailSchema } from './common';
+import {
+  productSchema,
+  productSchemaBase,
+  partSchemaBase,
+  materialSchemaBase,
+  materialSchema,
+  consumableSchemaBase,
+  consumableSchema,
+} from './item-schemas';
+
+// ===== 폼 데이터 스키마 (생성/수정용) =====
+
+/**
+ * 품목 생성 폼 스키마
+ * (id, createdAt, updatedAt 제외)
+ *
+ * discriminatedUnion은 omit()을 지원하지 않으므로,
+ * 각 스키마에 대해 개별적으로 omit을 적용합니다.
+ */
+// partSchemaBase를 omit한 후 itemType merge - refinement는 마지막에 적용
+const partSchemaForForm = partSchemaBase
+  .omit({ createdAt: true, updatedAt: true })
+  .merge(z.object({ itemType: z.literal('PT') }))
+  .superRefine((data, ctx) => {
+    // 1단계: 부품 유형 필수
+    if (!data.partType || data.partType === '') {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: '부품 유형을 선택해주세요',
+        path: ['partType'],
+      });
+      return; // 부품 유형이 없으면 더 이상 검증하지 않음
+    }
+
+    // 2단계: 부품 유형이 있을 때만 품목명 필수
+    if (!data.category1 || data.category1 === '') {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: '품목명을 선택해주세요',
+        path: ['category1'],
+      });
+      return; // 품목명이 없으면 더 이상 검증하지 않음 (설치유형 등 체크 안 함)
+    }
+
+    // 3단계: 조립 부품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
+    if (data.partType === 'ASSEMBLY') {
+      if (!data.installationType) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '설치 유형을 선택해주세요',
+          path: ['installationType'],
+        });
+      }
+      if (!data.sideSpecWidth) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '측면 규격 (가로)를 입력해주세요',
+          path: ['sideSpecWidth'],
+        });
+      }
+      if (!data.sideSpecHeight) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '측면 규격 (세로)를 입력해주세요',
+          path: ['sideSpecHeight'],
+        });
+      }
+      if (!data.assemblyLength) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '길이를 선택해주세요',
+          path: ['assemblyLength'],
+        });
+      }
+    }
+
+    // 절곡품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
+    if (data.partType === 'BENDING') {
+      // 단계별 검증: 종류(category2) → 재질(material) → 폭 합계 → 모양&길이
+      if (!data.category2 || data.category2 === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '종류를 선택해주세요',
+          path: ['category2'],
+        });
+        return; // 종류가 없으면 재질, 폭 합계, 모양&길이 체크 안 함
+      }
+      if (!data.material) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '재질을 선택해주세요',
+          path: ['material'],
+        });
+        return; // 재질이 없으면 폭 합계, 모양&길이 체크 안 함
+      }
+      if (!data.length) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '폭 합계를 입력해주세요',
+          path: ['length'],
+        });
+        return; // 폭 합계가 없으면 모양&길이 체크 안 함
+      }
+      if (!data.bendingLength) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '모양&길이를 선택해주세요',
+          path: ['bendingLength'],
+        });
+      }
+    }
+
+    // 구매 부품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
+    if (data.partType === 'PURCHASED') {
+      if (data.category1 === 'electric_opener') {
+        if (!data.electricOpenerPower) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: '전원을 선택해주세요',
+            path: ['electricOpenerPower'],
+          });
+        }
+        if (!data.electricOpenerCapacity) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: '용량을 선택해주세요',
+            path: ['electricOpenerCapacity'],
+          });
+        }
+      }
+      if (data.category1 === 'motor' && !data.motorVoltage) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '전압을 선택해주세요',
+          path: ['motorVoltage'],
+        });
+      }
+      if (data.category1 === 'chain' && !data.chainSpec) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '체인 규격을 선택해주세요',
+          path: ['chainSpec'],
+        });
+      }
+    }
+  });
+
+export const createItemFormSchema = z.discriminatedUnion('itemType', [
+  productSchema.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('FG') }),
+  partSchemaForForm, // itemType이 이미 merge되어 있음
+  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('SM') }),
+  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('RM') }),
+  consumableSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('CS') }),
+]);
+
+/**
+ * 품목 수정 폼 스키마
+ * (모든 필드 선택적)
+ *
+ * discriminatedUnion은 partial()도 지원하지 않으므로,
+ * 각 스키마에 대해 개별적으로 처리합니다.
+ */
+export const updateItemFormSchema = z.discriminatedUnion('itemType', [
+  productSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('FG') }),
+  partSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('PT') }),
+  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('SM') }),
+  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('RM') }),
+  consumableSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('CS') }),
+]);
+
+// ===== 필터 스키마 =====
+
+/**
+ * 품목 목록 필터 스키마
+ */
+export const itemFilterSchema = z.object({
+  itemType: itemTypeSchema.optional(),
+  search: z.string().optional(),
+  category1: z.string().optional(),
+  category2: z.string().optional(),
+  category3: z.string().optional(),
+  isActive: z.boolean().optional(),
+});
diff --git a/src/lib/utils/validation/index.ts b/src/lib/utils/validation/index.ts
new file mode 100644
index 00000000..e8527bfa
--- /dev/null
+++ b/src/lib/utils/validation/index.ts
@@ -0,0 +1,31 @@
+/**
+ * Zod 검증 스키마 barrel export
+ *
+ * 기존 `@/lib/utils/validation` 경로 호환성 유지
+ */
+
+// common
+export { bendingDetailSchema, bomLineSchema } from './common';
+
+// item-schemas
+export {
+  productSchema,
+  partSchema,
+  materialSchema,
+  consumableSchema,
+  itemMasterSchema,
+} from './item-schemas';
+
+// form-schemas
+export { createItemFormSchema, updateItemFormSchema, itemFilterSchema } from './form-schemas';
+
+// utils
+export { getSchemaByItemType, formatZodError } from './utils';
+export type {
+  ItemMasterFormData,
+  CreateItemFormData,
+  UpdateItemFormData,
+  ItemFilterFormData,
+  BOMLineFormData,
+  BendingDetailFormData,
+} from './utils';
diff --git a/src/lib/utils/validation.ts b/src/lib/utils/validation/item-schemas.ts
similarity index 52%
rename from src/lib/utils/validation.ts
rename to src/lib/utils/validation/item-schemas.ts
index b8efc0e3..0d910b59 100644
--- a/src/lib/utils/validation.ts
+++ b/src/lib/utils/validation/item-schemas.ts
@@ -1,119 +1,25 @@
 /**
- * Zod 검증 스키마
+ * 품목유형별 Zod 검증 스키마
  *
- * react-hook-form과 함께 사용하는 폼 검증
+ * FG(제품), PT(부품), SM/RM(원자재/부자재), CS(소모품) 스키마 정의
  */
 
 import { z } from 'zod';
-import type { ItemType } from '@/types/item';
-
-// ===== 공통 스키마 =====
-
-/**
- * 품목 코드 검증
- * 형식: {업체코드}-{품목유형}-{일련번호}
- * 예: KD-FG-001
- *
- * 현재 사용하지 않음 (품목 코드 자동 생성)
- */
-const _itemCodeSchema = z.string()
-  .min(1, '품목 코드를 입력해주세요')
-  .regex(
-    /^[A-Z0-9]+-[A-Z]{2}-\d+$/,
-    '품목 코드 형식이 올바르지 않습니다 (예: KD-FG-001)'
-  );
-
-/**
- * 품목명 검증
- */
-const itemNameSchema = z.preprocess(
-  (val) => val === undefined || val === null ? "" : val,
-  z.string().min(1, '품목명을 입력해주세요').max(200, '품목명은 200자 이내로 입력해주세요')
-);
-
-/**
- * 품목 유형 검증
- */
-const itemTypeSchema = z.enum(['FG', 'PT', 'SM', 'RM', 'CS'], {
-  message: '품목 유형을 선택해주세요',
-});
-
-/**
- * 단위 검증
- *
- * 현재 사용하지 않음 (materialUnitSchema로 대체)
- */
-const _unitSchema = z.string()
-  .min(1, '단위를 입력해주세요')
-  .max(20, '단위는 20자 이내로 입력해주세요');
-
-/**
- * 양수 검증 (가격, 수량 등)
- * undefined나 빈 문자열은 검증하지 않음
- */
-const positiveNumberSchema = z.union([
-  z.number().positive('0보다 큰 값을 입력해주세요'),
-  z.string().transform((val) => parseFloat(val)).pipe(z.number().positive('0보다 큰 값을 입력해주세요')),
-  z.undefined(),
-  z.null(),
-  z.literal('')
-]).optional();
-
-/**
- * 날짜 검증 (YYYY-MM-DD)
- * 빈 문자열이나 undefined는 검증하지 않음
- */
-const dateSchema = z.preprocess(
-  (val) => {
-    if (val === undefined || val === null || val === '') return undefined;
-    return val;
-  },
-  z.string()
-    .regex(/^\d{4}-\d{2}-\d{2}$/, '날짜 형식이 올바르지 않습니다 (YYYY-MM-DD)')
-    .optional()
-);
-
-// ===== BOM 라인 스키마 =====
-
-/**
- * 절곡품 전개도 상세 스키마
- */
-export const bendingDetailSchema = z.object({
-  id: z.string(),
-  no: z.number().int().positive(),
-  input: z.number(),
-  elongation: z.number().default(-1),
-  calculated: z.number(),
-  sum: z.number(),
-  shaded: z.boolean().default(false),
-  aAngle: z.number().optional(),
-});
-
-/**
- * BOM 라인 스키마
- */
-export const bomLineSchema = z.object({
-  id: z.string(),
-  childItemCode: z.string().min(1, '하위 품목 코드를 입력해주세요'),
-  childItemName: z.string().min(1, '하위 품목명을 입력해주세요'),
-  quantity: z.number().positive('수량은 0보다 커야 합니다'),
-  unit: z.string().min(1, '단위를 입력해주세요'),
-  unitPrice: positiveNumberSchema,
-  quantityFormula: z.string().optional(),
-  note: z.string().max(500).optional(),
-
-  // 절곡품 관련
-  isBending: z.boolean().optional(),
-  bendingDiagram: z.string().url().optional(),
-  bendingDetails: z.array(bendingDetailSchema).optional(),
-});
+import {
+  itemNameSchema,
+  itemTypeSchema,
+  dateSchema,
+  positiveNumberSchema,
+  bomLineSchema,
+  bendingDetailSchema,
+} from './common';
 
 // ===== 품목 마스터 기본 스키마 =====
 
 /**
  * 품목 마스터 공통 필드
  */
-const itemMasterBaseSchema = z.object({
+export const itemMasterBaseSchema = z.object({
   // 공통 필수 필드
   itemCode: z.string().optional(), // 자동생성되므로 선택 사항
   itemName: itemNameSchema,
@@ -185,7 +91,7 @@ const productFieldsSchema = z.object({
  * 제품(FG) 전체 스키마 (refinement 없이)
  * 제품에는 가격 정보가 없으므로 제거
  */
-const productSchemaBase = itemMasterBaseSchema
+export const productSchemaBase = itemMasterBaseSchema
   .omit({
     purchasePrice: true,
     salesPrice: true,
@@ -268,7 +174,7 @@ const partFieldsSchema = z.object({
  * 부품(PT) 전체 스키마 (refinement 없이)
  * 부품은 itemName을 사용하지 않으므로 선택 사항으로 변경
  */
-const partSchemaBase = itemMasterBaseSchema
+export const partSchemaBase = itemMasterBaseSchema
   .extend({
     itemName: z.string().max(200).optional(), // 부품은 itemName 선택 사항
   })
@@ -422,7 +328,7 @@ const materialUnitSchema = z.preprocess(
  * 원자재/부자재 Base 스키마 (refinement 없음, 필드만 정의)
  * specification, unit을 필수로 정의 (z.object로 완전히 새로 정의)
  */
-const materialSchemaBase = z.object({
+export const materialSchemaBase = z.object({
   // 공통 필수 필드
   itemCode: z.string().optional(),
   itemName: itemNameSchema,
@@ -479,7 +385,7 @@ export const materialSchema = materialSchemaBase;
  * 소모품 Base 스키마
  * specification, unit을 필수로 오버라이드
  */
-const consumableSchemaBase = itemMasterBaseSchema
+export const consumableSchemaBase = itemMasterBaseSchema
   .extend({
     specification: materialSpecificationSchema, // optional → 필수로 변경
     unit: materialUnitSchema, // optional → 필수로 변경
@@ -505,221 +411,3 @@ export const itemMasterSchema = z.discriminatedUnion('itemType', [
   materialSchema.extend({ itemType: z.literal('RM') }),
   consumableSchema.extend({ itemType: z.literal('CS') }),
 ]);
-
-// ===== 폼 데이터 스키마 (생성/수정용) =====
-
-/**
- * 품목 생성 폼 스키마
- * (id, createdAt, updatedAt 제외)
- *
- * discriminatedUnion은 omit()을 지원하지 않으므로,
- * 각 스키마에 대해 개별적으로 omit을 적용합니다.
- */
-// partSchemaBase를 omit한 후 itemType merge - refinement는 마지막에 적용
-const partSchemaForForm = partSchemaBase
-  .omit({ createdAt: true, updatedAt: true })
-  .merge(z.object({ itemType: z.literal('PT') }))
-  .superRefine((data, ctx) => {
-    // 1단계: 부품 유형 필수
-    if (!data.partType || data.partType === '') {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: '부품 유형을 선택해주세요',
-        path: ['partType'],
-      });
-      return; // 부품 유형이 없으면 더 이상 검증하지 않음
-    }
-
-    // 2단계: 부품 유형이 있을 때만 품목명 필수
-    if (!data.category1 || data.category1 === '') {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: '품목명을 선택해주세요',
-        path: ['category1'],
-      });
-      return; // 품목명이 없으면 더 이상 검증하지 않음 (설치유형 등 체크 안 함)
-    }
-
-    // 3단계: 조립 부품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
-    if (data.partType === 'ASSEMBLY') {
-      if (!data.installationType) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '설치 유형을 선택해주세요',
-          path: ['installationType'],
-        });
-      }
-      if (!data.sideSpecWidth) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '측면 규격 (가로)를 입력해주세요',
-          path: ['sideSpecWidth'],
-        });
-      }
-      if (!data.sideSpecHeight) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '측면 규격 (세로)를 입력해주세요',
-          path: ['sideSpecHeight'],
-        });
-      }
-      if (!data.assemblyLength) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '길이를 선택해주세요',
-          path: ['assemblyLength'],
-        });
-      }
-    }
-
-    // 절곡품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
-    if (data.partType === 'BENDING') {
-      // 단계별 검증: 종류(category2) → 재질(material) → 폭 합계 → 모양&길이
-      if (!data.category2 || data.category2 === '') {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '종류를 선택해주세요',
-          path: ['category2'],
-        });
-        return; // 종류가 없으면 재질, 폭 합계, 모양&길이 체크 안 함
-      }
-      if (!data.material) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '재질을 선택해주세요',
-          path: ['material'],
-        });
-        return; // 재질이 없으면 폭 합계, 모양&길이 체크 안 함
-      }
-      if (!data.length) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '폭 합계를 입력해주세요',
-          path: ['length'],
-        });
-        return; // 폭 합계가 없으면 모양&길이 체크 안 함
-      }
-      if (!data.bendingLength) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '모양&길이를 선택해주세요',
-          path: ['bendingLength'],
-        });
-      }
-    }
-
-    // 구매 부품 전용 필드 (partType과 category1이 모두 있을 때만 실행됨)
-    if (data.partType === 'PURCHASED') {
-      if (data.category1 === 'electric_opener') {
-        if (!data.electricOpenerPower) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: '전원을 선택해주세요',
-            path: ['electricOpenerPower'],
-          });
-        }
-        if (!data.electricOpenerCapacity) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: '용량을 선택해주세요',
-            path: ['electricOpenerCapacity'],
-          });
-        }
-      }
-      if (data.category1 === 'motor' && !data.motorVoltage) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '전압을 선택해주세요',
-          path: ['motorVoltage'],
-        });
-      }
-      if (data.category1 === 'chain' && !data.chainSpec) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: '체인 규격을 선택해주세요',
-          path: ['chainSpec'],
-        });
-      }
-    }
-  });
-
-export const createItemFormSchema = z.discriminatedUnion('itemType', [
-  productSchema.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('FG') }),
-  partSchemaForForm, // itemType이 이미 merge되어 있음
-  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('SM') }),
-  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('RM') }),
-  consumableSchemaBase.omit({ createdAt: true, updatedAt: true }).extend({ itemType: z.literal('CS') }),
-]);
-
-/**
- * 품목 수정 폼 스키마
- * (모든 필드 선택적)
- *
- * discriminatedUnion은 partial()도 지원하지 않으므로,
- * 각 스키마에 대해 개별적으로 처리합니다.
- */
-export const updateItemFormSchema = z.discriminatedUnion('itemType', [
-  productSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('FG') }),
-  partSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('PT') }),
-  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('SM') }),
-  materialSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('RM') }),
-  consumableSchemaBase.omit({ createdAt: true, updatedAt: true }).partial().extend({ itemType: z.literal('CS') }),
-]);
-
-// ===== 필터 스키마 =====
-
-/**
- * 품목 목록 필터 스키마
- */
-export const itemFilterSchema = z.object({
-  itemType: itemTypeSchema.optional(),
-  search: z.string().optional(),
-  category1: z.string().optional(),
-  category2: z.string().optional(),
-  category3: z.string().optional(),
-  isActive: z.boolean().optional(),
-});
-
-// ===== 타입 추출 =====
-
-export type ItemMasterFormData = z.infer<typeof itemMasterSchema>;
-export type CreateItemFormData = z.infer<typeof createItemFormSchema>;
-export type UpdateItemFormData = z.infer<typeof updateItemFormSchema>;
-export type ItemFilterFormData = z.infer<typeof itemFilterSchema>;
-export type BOMLineFormData = z.infer<typeof bomLineSchema>;
-export type BendingDetailFormData = z.infer<typeof bendingDetailSchema>;
-
-// ===== 유틸리티 함수 =====
-
-/**
- * 품목 유형에 따른 스키마 선택
- */
-export function getSchemaByItemType(itemType: ItemType) {
-  switch (itemType) {
-    case 'FG':
-      return productSchema;
-    case 'PT':
-      return partSchema;
-    case 'SM':
-    case 'RM':
-      return materialSchema;
-    case 'CS':
-      return consumableSchema;
-    default:
-      return itemMasterBaseSchema;
-  }
-}
-
-/**
- * 에러 메시지 한글화
- */
-export function formatZodError(error: z.ZodError): Record<string, string> {
-  const formatted: Record<string, string> = {};
-
-  error.issues.forEach((err) => {
-    const path = err.path.join('.');
-    formatted[path] = err.message;
-  });
-
-  return formatted;
-}
\ No newline at end of file
diff --git a/src/lib/utils/validation/utils.ts b/src/lib/utils/validation/utils.ts
new file mode 100644
index 00000000..f343358c
--- /dev/null
+++ b/src/lib/utils/validation/utils.ts
@@ -0,0 +1,64 @@
+/**
+ * 검증 유틸리티 함수 및 타입 추출
+ */
+
+import { z } from 'zod';
+import type { ItemType } from '@/types/item';
+import { bendingDetailSchema, bomLineSchema } from './common';
+import {
+  productSchema,
+  partSchema,
+  materialSchema,
+  consumableSchema,
+  itemMasterSchema,
+  itemMasterBaseSchema,
+} from './item-schemas';
+import {
+  createItemFormSchema,
+  updateItemFormSchema,
+  itemFilterSchema,
+} from './form-schemas';
+
+// ===== 타입 추출 =====
+
+export type ItemMasterFormData = z.infer<typeof itemMasterSchema>;
+export type CreateItemFormData = z.infer<typeof createItemFormSchema>;
+export type UpdateItemFormData = z.infer<typeof updateItemFormSchema>;
+export type ItemFilterFormData = z.infer<typeof itemFilterSchema>;
+export type BOMLineFormData = z.infer<typeof bomLineSchema>;
+export type BendingDetailFormData = z.infer<typeof bendingDetailSchema>;
+
+// ===== 유틸리티 함수 =====
+
+/**
+ * 품목 유형에 따른 스키마 선택
+ */
+export function getSchemaByItemType(itemType: ItemType) {
+  switch (itemType) {
+    case 'FG':
+      return productSchema;
+    case 'PT':
+      return partSchema;
+    case 'SM':
+    case 'RM':
+      return materialSchema;
+    case 'CS':
+      return consumableSchema;
+    default:
+      return itemMasterBaseSchema;
+  }
+}
+
+/**
+ * 에러 메시지 한글화
+ */
+export function formatZodError(error: z.ZodError): Record<string, string> {
+  const formatted: Record<string, string> = {};
+
+  error.issues.forEach((err) => {
+    const path = err.path.join('.');
+    formatted[path] = err.message;
+  });
+
+  return formatted;
+}

From 446243910fa061d2d9c7f1bd724e2db7723196bb Mon Sep 17 00:00:00 2001
From: DEV-SERVER <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 13:20:48 +0900
Subject: [PATCH 05/24] =?UTF-8?q?refactor:=20stage=20=EB=B8=8C=EB=9E=9C?=
 =?UTF-8?q?=EC=B9=98=20=EC=A0=9C=EA=B1=B0,=20main=EC=97=90=EC=84=9C=20Stag?=
 =?UTF-8?q?e=E2=86=92=EC=8A=B9=EC=9D=B8=E2=86=92Production=20=EB=B0=B0?=
 =?UTF-8?q?=ED=8F=AC=20=ED=9D=90=EB=A6=84=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- develop: 개발서버 자동 배포 (변경 없음)
- main: Stage 자동 배포 → Jenkins 승인 → Production 재빌드+배포
- stage 브랜치 더 이상 사용 안함
- Next.js는 빌드 시 env 바인딩되므로 Stage/Production 별도 빌드
---
 Jenkinsfile | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index a0789999..ef4607be 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -14,22 +14,22 @@ pipeline {
         stage('Prepare Env') {
             steps {
                 script {
-                    def envFile = "/var/lib/jenkins/env-files/react/.env.${env.BRANCH_NAME}"
-                    sh "cp ${envFile} .env.local"
+                    if (env.BRANCH_NAME == 'main') {
+                        sh "cp /var/lib/jenkins/env-files/react/.env.stage .env.local"
+                    } else {
+                        def envFile = "/var/lib/jenkins/env-files/react/.env.${env.BRANCH_NAME}"
+                        sh "cp ${envFile} .env.local"
+                    }
                 }
             }
         }
 
         stage('Install') {
-            steps {
-                sh 'npm install --prefer-offline'
-            }
+            steps { sh 'npm install --prefer-offline' }
         }
 
         stage('Build') {
-            steps {
-                sh 'npm run build'
-            }
+            steps { sh 'npm run build' }
         }
 
         // ── develop → 개발서버 배포 ──
@@ -53,9 +53,9 @@ pipeline {
             }
         }
 
-        // ── stage → 운영서버 Stage 배포 ──
+        // ── main → 운영서버 Stage 배포 ──
         stage('Deploy Stage') {
-            when { branch 'stage' }
+            when { branch 'main' }
             steps {
                 sshagent(credentials: ['deploy-ssh-key']) {
                     sh """
@@ -77,6 +77,26 @@ pipeline {
             }
         }
 
+        // ── 운영 배포 승인 ──
+        stage('Production Approval') {
+            when { branch 'main' }
+            steps {
+                timeout(time: 24, unit: 'HOURS') {
+                    input message: 'Stage 확인 후 운영 배포를 진행하시겠습니까?\nStage: https://stage.sam.it.kr',
+                          ok: '운영 배포 진행'
+                }
+            }
+        }
+
+        // ── main → Production 재빌드 (운영 환경변수) ──
+        stage('Rebuild for Production') {
+            when { branch 'main' }
+            steps {
+                sh "cp /var/lib/jenkins/env-files/react/.env.main .env.local"
+                sh 'npm run build'
+            }
+        }
+
         // ── main → 운영서버 Production 배포 ──
         stage('Deploy Production') {
             when { branch 'main' }

From be3a6c05968ce117688423eab490e4f8f1f8e3aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 17:41:21 +0900
Subject: [PATCH 06/24] =?UTF-8?q?ci:Jenkinsfile=202-branch=20=EC=A0=84?=
 =?UTF-8?q?=EB=9E=B5=EC=9C=BC=EB=A1=9C=20=EC=A0=84=ED=99=98=20(stage=20?=
 =?UTF-8?q?=EB=B8=8C=EB=9E=9C=EC=B9=98=20=EC=A0=9C=EA=B1=B0,=20main?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20Stage=E2=86=92=EC=8A=B9=EC=9D=B8=E2=86=92P?=
 =?UTF-8?q?roduction)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index ef4607be..dfd52f3d 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -15,6 +15,7 @@ pipeline {
             steps {
                 script {
                     if (env.BRANCH_NAME == 'main') {
+                        // main: Stage 빌드 먼저 (승인 후 Production 재빌드)
                         sh "cp /var/lib/jenkins/env-files/react/.env.stage .env.local"
                     } else {
                         def envFile = "/var/lib/jenkins/env-files/react/.env.${env.BRANCH_NAME}"
@@ -39,14 +40,10 @@ pipeline {
                 sshagent(credentials: ['deploy-ssh-key']) {
                     sh """
                         rsync -az --delete \
-                            --exclude='.git' \
-                            --exclude='.env*' \
-                            --exclude='ecosystem.config.*' \
+                            --exclude='.git' --exclude='.env*' --exclude='ecosystem.config.*' \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/
-
                         scp .env.local ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/.env.local
-
                         ssh ${DEPLOY_USER}@114.203.209.83 'cd /home/webservice/react && pm2 restart sam-react'
                     """
                 }
@@ -60,13 +57,10 @@ pipeline {
                 sshagent(credentials: ['deploy-ssh-key']) {
                     sh """
                         ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react-stage/releases/${RELEASE_ID}'
-
                         rsync -az --delete \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/
-
                         scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/.env.local
-
                         ssh ${DEPLOY_USER}@211.117.60.189 '
                             ln -sfn /home/webservice/react-stage/releases/${RELEASE_ID} /home/webservice/react-stage/current &&
                             cd /home/webservice && pm2 reload sam-front-stage 2>/dev/null || pm2 start react-stage/current/node_modules/.bin/next --name sam-front-stage -- start -p 3100 &&
@@ -104,13 +98,10 @@ pipeline {
                 sshagent(credentials: ['deploy-ssh-key']) {
                     sh """
                         ssh ${DEPLOY_USER}@211.117.60.189 'mkdir -p /home/webservice/react/releases/${RELEASE_ID}'
-
                         rsync -az --delete \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/
-
                         scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/.env.local
-
                         ssh ${DEPLOY_USER}@211.117.60.189 '
                             ln -sfn /home/webservice/react/releases/${RELEASE_ID} /home/webservice/react/current &&
                             cd /home/webservice && pm2 reload sam-front &&
@@ -126,4 +117,4 @@ pipeline {
         success { echo '✅ react 배포 완료 (' + env.BRANCH_NAME + ')' }
         failure { echo '❌ react 배포 실패 (' + env.BRANCH_NAME + ')' }
     }
-}
+}
\ No newline at end of file

From 4681a2a6a4ff88f3649c1c7f3730a9ad64b8afce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 20:45:49 +0900
Subject: [PATCH 07/24] =?UTF-8?q?ci:Jenkinsfile=20Slack=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=EC=B6=94=EA=B0=80=20(slackSend=20#product=5Finfra)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index dfd52f3d..677173ad 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -114,7 +114,13 @@ pipeline {
     }
 
     post {
-        success { echo '✅ react 배포 완료 (' + env.BRANCH_NAME + ')' }
-        failure { echo '❌ react 배포 실패 (' + env.BRANCH_NAME + ')' }
+        success {
+            slackSend channel: '#product_infra', color: 'good',
+                message: "✅ *react* 배포 성공 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
+        }
+        failure {
+            slackSend channel: '#product_infra', color: 'danger',
+                message: "❌ *react* 배포 실패 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
+        }
     }
 }
\ No newline at end of file

From 1a4a009543ced79fa3c2047cc498e62da3f4c3a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 21:00:04 +0900
Subject: [PATCH 08/24] =?UTF-8?q?ci:Jenkinsfile=20=EB=B9=8C=EB=93=9C=20?=
 =?UTF-8?q?=EC=8B=9C=EC=9E=91=20Slack=20=EC=95=8C=EB=A6=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 677173ad..b158af79 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -8,7 +8,11 @@ pipeline {
 
     stages {
         stage('Checkout') {
-            steps { checkout scm }
+            steps {
+                slackSend channel: '#product_infra', color: '#439FE0',
+                    message: "🚀 *react* 빌드 시작 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
+                checkout scm
+            }
         }
 
         stage('Prepare Env') {

From 830567d6c92454ca049e1c0913c4ed2f69e929e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 21:53:46 +0900
Subject: [PATCH 09/24] =?UTF-8?q?fix:slackSend=EC=97=90=20tokenCredentialI?=
 =?UTF-8?q?d=20=EC=B6=94=EA=B0=80=20(credential=20null=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index b158af79..7780d3f9 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -119,11 +119,11 @@ pipeline {
 
     post {
         success {
-            slackSend channel: '#product_infra', color: 'good',
+            slackSend channel: '#product_infra', color: 'good', tokenCredentialId: 'slack-token',
                 message: "✅ *react* 배포 성공 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
         }
         failure {
-            slackSend channel: '#product_infra', color: 'danger',
+            slackSend channel: '#product_infra', color: 'danger', tokenCredentialId: 'slack-token',
                 message: "❌ *react* 배포 실패 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
         }
     }

From 0d4393fc34df14f5e5ce09ccada3eba79c96b2d3 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, 24 Feb 2026 21:54:21 +0900
Subject: [PATCH 10/24] =?UTF-8?q?feat(WEB):=20CEO=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=84=20=EC=84=B9=EC=85=98=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B0=98=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EnhancedSections 공통 컴포넌트 추출 (SectionCard, StatItem, StatusBadge 등)
- 전 섹션(매출/매입/생산/출근/미출하/건설/캘린더/일보 등) 공통 패턴 적용
- components.tsx 공통 UI 컴포넌트 강화
- CLAUDE.md Git Workflow 섹션 추가 (develop/stage/main 플로우)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                     |  62 ++++
 .../business/CEODashboard/components.tsx      | 135 ++++++---
 .../CEODashboard/sections/CalendarSection.tsx | 192 ++++++-------
 .../sections/CardManagementSection.tsx        |  72 +++--
 .../sections/ConstructionSection.tsx          |  69 ++---
 .../sections/DailyAttendanceSection.tsx       | 110 ++++----
 .../sections/DailyProductionSection.tsx       | 229 +++++++--------
 .../sections/DailyReportSection.tsx           |  41 ++-
 .../sections/DebtCollectionSection.tsx        |  62 ++--
 .../sections/EnhancedSections.tsx             | 267 ++++++++----------
 .../sections/EntertainmentSection.tsx         |  60 ++--
 .../sections/MonthlyExpenseSection.tsx        |  46 +--
 .../sections/PurchaseStatusSection.tsx        | 195 ++++++-------
 .../sections/ReceivableSection.tsx            |  84 +++---
 .../sections/SalesStatusSection.tsx           | 188 +++++-------
 .../sections/StatusBoardSection.tsx           |  18 +-
 .../sections/TodayIssueSection.tsx            |  53 ++--
 .../sections/UnshippedSection.tsx             | 111 ++++----
 .../CEODashboard/sections/VatSection.tsx      |  46 +--
 .../CEODashboard/sections/WelfareSection.tsx  |  60 ++--
 20 files changed, 1011 insertions(+), 1089 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index ca070ed4..e7fed7c5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -17,6 +17,68 @@ sam_project:
 
 ---
 
+## Git Workflow
+**Priority**: 🔴
+
+### 브랜치 구조
+| 브랜치 | 역할 | 커밋 상태 |
+|--------|------|-----------|
+| `develop` | 평소 작업 브랜치 (자유롭게) | 지저분해도 OK |
+| `stage` | QA/테스트 환경 | 기능별 squash 정리 |
+| `main` | 배포용 (기본 브랜치) | 검증된 것만 |
+| `feature/*` | 큰 기능/실험적 작업 시 | 선택적 사용 |
+
+### "git 올려줘" 단축 명령어
+`git 올려줘` 입력 시 **develop에 push**:
+1. `git status` → 2. `git diff --stat` → 3. `git add -A` → 4. `git commit` (자동 메시지) → 5. `git push origin develop`
+
+- `snapshot.txt`, `.DS_Store` 파일은 항상 제외
+- develop에서 자유롭게 커밋 (커밋 메시지 정리 불필요)
+
+### main에 올리기 (기능별 squash merge)
+사용자가 "main에 올려줘" 또는 특정 기능을 main에 올리라고 지시할 때만 실행.
+**절대 자동으로 main에 push하지 않음.**
+
+```bash
+# 기능별로 squash merge
+git checkout main
+git merge --squash develop   # 또는 cherry-pick으로 특정 커밋만 선별
+git commit -m "feat: [기능명]"
+git push origin main
+git checkout develop
+```
+
+기능별로 나눠서 올리는 경우:
+```bash
+# 예: "대시보드랑 거래처 main에 올려줘"
+git checkout main
+git cherry-pick --no-commit <대시보드커밋1> <대시보드커밋2>
+git commit -m "feat: CEO 대시보드 캘린더 기능 구현"
+
+git cherry-pick --no-commit <거래처커밋1> <거래처커밋2>
+git commit -m "feat: 거래처 관리 개선"
+
+git push origin main
+git checkout develop
+```
+
+**핵심: main에는 기능 단위 커밋만 → 문제 시 `git revert`로 해당 기능만 롤백 가능**
+
+### feature 브랜치 사용 기준
+| 상황 | 방법 |
+|------|------|
+| 일반 작업 | develop에서 바로 |
+| 1주일+ 걸리는 큰 기능 | feature/* 따서 작업 |
+| 실험적 시도 | feature/* 따서 작업 |
+| 백엔드와 동시 수정 건 | 각자 feature/* 권장 |
+
+### 금지 사항
+- ❌ main에 직접 커밋/push
+- ❌ `git push --force` (main/develop)
+- ❌ 사용자 지시 없이 main에 merge
+
+---
+
 ## Client Component 사용 원칙
 **Priority**: 🔴
 
diff --git a/src/components/business/CEODashboard/components.tsx b/src/components/business/CEODashboard/components.tsx
index 924e9523..52c4d1c2 100644
--- a/src/components/business/CEODashboard/components.tsx
+++ b/src/components/business/CEODashboard/components.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import {
   Check,
   AlertTriangle,
@@ -7,6 +8,7 @@ import {
   AlertCircle,
   TrendingUp,
   TrendingDown,
+  ChevronDown,
   type LucideIcon,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
@@ -18,18 +20,18 @@ import type { CheckPoint, CheckPointType, AmountCard, HighlightColor } from './t
 // 섹션별 컬러 테마 타입
 export type SectionColorTheme = 'blue' | 'purple' | 'orange' | 'green' | 'red' | 'amber' | 'cyan' | 'pink' | 'emerald' | 'indigo';
 
-// 컬러 테마별 스타일
-export const SECTION_THEME_STYLES: Record<SectionColorTheme, { bg: string; border: string; iconBg: string; labelColor: string; accentColor: string }> = {
-  blue: { bg: '#eff6ff', border: '#bfdbfe', iconBg: '#3b82f6', labelColor: '#1d4ed8', accentColor: '#3b82f6' },
-  purple: { bg: '#faf5ff', border: '#e9d5ff', iconBg: '#a855f7', labelColor: '#7c3aed', accentColor: '#a855f7' },
-  orange: { bg: '#fff7ed', border: '#fed7aa', iconBg: '#f97316', labelColor: '#ea580c', accentColor: '#f97316' },
-  green: { bg: '#f0fdf4', border: '#bbf7d0', iconBg: '#22c55e', labelColor: '#16a34a', accentColor: '#22c55e' },
-  red: { bg: '#fef2f2', border: '#fecaca', iconBg: '#ef4444', labelColor: '#dc2626', accentColor: '#ef4444' },
-  amber: { bg: '#fffbeb', border: '#fde68a', iconBg: '#f59e0b', labelColor: '#d97706', accentColor: '#f59e0b' },
-  cyan: { bg: '#ecfeff', border: '#a5f3fc', iconBg: '#06b6d4', labelColor: '#0891b2', accentColor: '#06b6d4' },
-  pink: { bg: '#fdf2f8', border: '#fbcfe8', iconBg: '#ec4899', labelColor: '#db2777', accentColor: '#ec4899' },
-  emerald: { bg: '#ecfdf5', border: '#a7f3d0', iconBg: '#10b981', labelColor: '#059669', accentColor: '#10b981' },
-  indigo: { bg: '#eef2ff', border: '#c7d2fe', iconBg: '#6366f1', labelColor: '#4f46e5', accentColor: '#6366f1' },
+// 컬러 테마별 스타일 (다크모드 지원 Tailwind 클래스)
+export const SECTION_THEME_STYLES: Record<SectionColorTheme, { bgClass: string; borderClass: string; iconBg: string; labelClass: string; accentColor: string }> = {
+  blue: { bgClass: 'bg-blue-50 dark:bg-blue-900/30', borderClass: 'border-blue-200 dark:border-blue-800', iconBg: '#3b82f6', labelClass: 'text-blue-700 dark:text-blue-300', accentColor: '#3b82f6' },
+  purple: { bgClass: 'bg-purple-50 dark:bg-purple-900/30', borderClass: 'border-purple-200 dark:border-purple-800', iconBg: '#a855f7', labelClass: 'text-purple-700 dark:text-purple-300', accentColor: '#a855f7' },
+  orange: { bgClass: 'bg-orange-50 dark:bg-orange-900/30', borderClass: 'border-orange-200 dark:border-orange-800', iconBg: '#f97316', labelClass: 'text-orange-700 dark:text-orange-300', accentColor: '#f97316' },
+  green: { bgClass: 'bg-green-50 dark:bg-green-900/30', borderClass: 'border-green-200 dark:border-green-800', iconBg: '#22c55e', labelClass: 'text-green-700 dark:text-green-300', accentColor: '#22c55e' },
+  red: { bgClass: 'bg-red-50 dark:bg-red-900/30', borderClass: 'border-red-200 dark:border-red-800', iconBg: '#ef4444', labelClass: 'text-red-700 dark:text-red-300', accentColor: '#ef4444' },
+  amber: { bgClass: 'bg-amber-50 dark:bg-amber-900/30', borderClass: 'border-amber-200 dark:border-amber-800', iconBg: '#f59e0b', labelClass: 'text-amber-700 dark:text-amber-300', accentColor: '#f59e0b' },
+  cyan: { bgClass: 'bg-cyan-50 dark:bg-cyan-900/30', borderClass: 'border-cyan-200 dark:border-cyan-800', iconBg: '#06b6d4', labelClass: 'text-cyan-700 dark:text-cyan-300', accentColor: '#06b6d4' },
+  pink: { bgClass: 'bg-pink-50 dark:bg-pink-900/30', borderClass: 'border-pink-200 dark:border-pink-800', iconBg: '#ec4899', labelClass: 'text-pink-700 dark:text-pink-300', accentColor: '#ec4899' },
+  emerald: { bgClass: 'bg-emerald-50 dark:bg-emerald-900/30', borderClass: 'border-emerald-200 dark:border-emerald-800', iconBg: '#10b981', labelClass: 'text-emerald-700 dark:text-emerald-300', accentColor: '#10b981' },
+  indigo: { bgClass: 'bg-indigo-50 dark:bg-indigo-900/30', borderClass: 'border-indigo-200 dark:border-indigo-800', iconBg: '#6366f1', labelClass: 'text-indigo-700 dark:text-indigo-300', accentColor: '#6366f1' },
 };
 
 /**
@@ -249,31 +251,21 @@ export const AmountCardItem = ({
     return formatKoreanAmount(amount);
   };
 
-  // 테마 적용 시 스타일
-  const cardStyle = themeStyle && !card.isHighlighted ? {
-    backgroundColor: themeStyle.bg,
-    borderColor: themeStyle.border,
-  } : undefined;
-
   return (
     <Card
       className={cn(
-        'relative',
+        'relative border',
         onClick && 'cursor-pointer hover:shadow-lg transition-all hover:scale-[1.02]',
-        card.isHighlighted && 'border-red-300 bg-red-50',
-        !themeStyle && !card.isHighlighted && 'border',
+        card.isHighlighted && 'border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/30',
+        themeStyle && !card.isHighlighted && cn(themeStyle.bgClass, themeStyle.borderClass),
         className
       )}
-      style={cardStyle}
     >
       {/* 건수 뱃지 (오른쪽 상단) */}
       {showCountBadge && card.subLabel && (
         <div
-          className="absolute top-3 right-3 px-2 py-0.5 rounded-full text-xs font-bold"
-          style={{
-            backgroundColor: themeStyle ? themeStyle.iconBg : '#ef4444',
-            color: '#ffffff'
-          }}
+          className="absolute top-3 right-3 px-2 py-0.5 rounded-full text-xs font-bold text-white"
+          style={{ backgroundColor: themeStyle ? themeStyle.iconBg : '#ef4444' }}
         >
           {card.subLabel}
         </div>
@@ -299,9 +291,8 @@ export const AmountCardItem = ({
           <p
             className={cn(
               "text-sm font-medium truncate",
-              card.isHighlighted ? 'text-red-600' : 'text-muted-foreground'
+              card.isHighlighted ? 'text-red-600' : themeStyle ? themeStyle.labelClass : 'text-muted-foreground'
             )}
-            style={themeStyle && !card.isHighlighted ? { color: themeStyle.labelColor } : undefined}
           >
             {card.label}
           </p>
@@ -309,7 +300,7 @@ export const AmountCardItem = ({
 
         {/* 금액 */}
         <p className={cn(
-          "text-2xl font-bold",
+          "text-2xl font-bold text-foreground",
           card.isHighlighted && 'text-red-600'
         )}>
           {formatCardAmount(card.amount)}
@@ -318,11 +309,12 @@ export const AmountCardItem = ({
         {/* 트렌드 표시 (pill 형태, 금액 아래에 배치) */}
         {showTrend && trendValue && (
           <div
-            className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit"
-            style={{
-              backgroundColor: trendDirection === 'up' ? '#dcfce7' : '#fee2e2',
-              color: trendDirection === 'up' ? '#16a34a' : '#dc2626'
-            }}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit",
+              trendDirection === 'up'
+                ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+            )}
           >
             {trendDirection === 'up' ? (
               <TrendingUp className="h-3 w-3 shrink-0" />
@@ -360,10 +352,12 @@ export const AmountCardItem = ({
             {card.subLabel && card.subAmount === undefined && !card.previousLabel && (
               subLabelAsBadge && themeStyle ? (
                 <span
-                  className="text-xs font-medium px-2 py-0.5 rounded-full border truncate w-fit max-w-full"
+                  className={cn(
+                    "text-xs font-medium px-2 py-0.5 rounded-full border truncate w-fit max-w-full",
+                    themeStyle.labelClass
+                  )}
                   style={{
                     backgroundColor: `${themeStyle.iconBg}15`,
-                    color: themeStyle.labelColor,
                     borderColor: `${themeStyle.iconBg}30`,
                   }}
                 >
@@ -431,4 +425,69 @@ export const IssueCardItem = ({
       </CardContent>
     </Card>
   );
-};
\ No newline at end of file
+};
+
+/**
+ * 접기/펼치기 가능한 대시보드 카드
+ * - 다크 헤더 + 흰색 바디 패턴의 공통 컴포넌트
+ * - 헤더 클릭 시 바디 토글
+ */
+interface CollapsibleDashboardCardProps {
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  rightElement?: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  bodyClassName?: string;
+}
+
+export function CollapsibleDashboardCard({
+  icon,
+  title,
+  subtitle,
+  rightElement,
+  children,
+  defaultOpen = true,
+  bodyClassName,
+}: CollapsibleDashboardCardProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl border border-border lg:overflow-hidden">
+      <div
+        className={cn(
+          'bg-slate-800 dark:bg-slate-700 px-6 py-4 sticky top-12 z-10 lg:static cursor-pointer select-none',
+          isOpen ? 'rounded-t-xl' : 'rounded-xl'
+        )}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex flex-col items-center gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-3">
+            <div className="bg-white/10 p-2 rounded-lg">
+              {icon}
+            </div>
+            <div className="text-center lg:text-left">
+              <h3 className="text-lg font-semibold text-white">{title}</h3>
+              {subtitle && <p className="text-sm text-slate-300">{subtitle}</p>}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {rightElement}
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 text-white/70 transition-transform duration-200',
+                !isOpen && '-rotate-90'
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      {isOpen && (
+        <div className={cn('bg-card text-card-foreground', bodyClassName ?? 'p-6')}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/business/CEODashboard/sections/CalendarSection.tsx b/src/components/business/CEODashboard/sections/CalendarSection.tsx
index 32e327f7..e7a823b9 100644
--- a/src/components/business/CEODashboard/sections/CalendarSection.tsx
+++ b/src/components/business/CEODashboard/sections/CalendarSection.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -12,11 +11,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Plus, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Plus, ExternalLink, ChevronLeft, ChevronRight, CalendarDays } from 'lucide-react';
 import { ScheduleCalendar } from '@/components/common/ScheduleCalendar';
 import type { ScheduleEvent } from '@/components/common/ScheduleCalendar/types';
 import { getCalendarEventsForYear, type CalendarEvent } from '@/constants/calendarEvents';
 import { useCalendarScheduleStore } from '@/stores/useCalendarScheduleStore';
+import { CollapsibleDashboardCard } from '../components';
 import type {
   CalendarScheduleItem,
   CalendarViewType,
@@ -46,16 +46,16 @@ const SCHEDULE_TYPE_COLORS: Record<string, string> = {
 
 // 이슈 뱃지별 색상
 const ISSUE_BADGE_COLORS: Record<TodayIssueListBadgeType, string> = {
-  '수주등록': 'bg-blue-100 text-blue-700',
-  '추심이슈': 'bg-purple-100 text-purple-700',
-  '안전재고': 'bg-orange-100 text-orange-700',
-  '지출 승인대기': 'bg-green-100 text-green-700',
-  '세금 신고': 'bg-red-100 text-red-700',
-  '결재 요청': 'bg-yellow-100 text-yellow-700',
-  '신규거래처': 'bg-emerald-100 text-emerald-700',
-  '입금': 'bg-teal-100 text-teal-700',
-  '출금': 'bg-pink-100 text-pink-700',
-  '기타': 'bg-gray-100 text-gray-700',
+  '수주등록': 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  '추심이슈': 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+  '안전재고': 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+  '지출 승인대기': 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  '세금 신고': 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  '결재 요청': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+  '신규거래처': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+  '입금': 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
+  '출금': 'bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-300',
+  '기타': 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
 };
 
 // 부서 필터 옵션
@@ -295,67 +295,15 @@ export function CalendarSection({
   };
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        {/* 모바일: 스티키 헤더 (타이틀+필터+월네비) */}
-        <div className="lg:hidden sticky top-12 z-10 bg-white -mx-6 px-6 pt-2 pb-3 border-b border-gray-100">
-          <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
-            <h3 className="text-lg font-semibold shrink-0">캘린더</h3>
-            <div className="flex items-center gap-2">
-              {/* 부서 필터 */}
-              <Select
-                value={deptFilter}
-                onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
-              >
-                <SelectTrigger className="min-w-[80px] w-auto h-8">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {DEPT_FILTER_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-
-              {/* 업무 필터 */}
-              <Select
-                value={taskFilter}
-                onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
-              >
-                <SelectTrigger className="min-w-[80px] w-auto h-8">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {TASK_FILTER_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          {/* 월 네비게이션 */}
-          <div className="flex items-center justify-center gap-4">
-            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobilePrevMonth}>
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <span className="text-sm font-semibold whitespace-nowrap">
-              {currentDate.getFullYear()}년 {currentDate.getMonth() + 1}월
-            </span>
-            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobileNextMonth}>
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-
-        {/* 데스크탑: 일반 헤더 */}
-        <div className="hidden lg:flex items-center justify-between mb-4 flex-wrap gap-2">
-          <h3 className="text-lg font-semibold shrink-0">캘린더</h3>
-          <div className="flex items-center gap-2">
+    <CollapsibleDashboardCard
+      icon={<CalendarDays style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="캘린더"
+      subtitle="일정 관리"
+    >
+        {/* 모바일: 필터+월네비 */}
+        <div className="lg:hidden mb-3">
+          <div className="flex items-center gap-2 mb-3">
+            {/* 부서 필터 */}
             <Select
               value={deptFilter}
               onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
@@ -372,6 +320,7 @@ export function CalendarSection({
               </SelectContent>
             </Select>
 
+            {/* 업무 필터 */}
             <Select
               value={taskFilter}
               onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
@@ -388,32 +337,80 @@ export function CalendarSection({
               </SelectContent>
             </Select>
           </div>
+
+          {/* 월 네비게이션 */}
+          <div className="flex items-center justify-center gap-4">
+            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobilePrevMonth}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-semibold text-foreground whitespace-nowrap">
+              {currentDate.getFullYear()}년 {currentDate.getMonth() + 1}월
+            </span>
+            <Button variant="outline" size="sm" className="h-8 px-2" onClick={handleMobileNextMonth}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* 데스크탑: 필터 */}
+        <div className="hidden lg:flex items-center justify-end mb-4 gap-2">
+          <Select
+            value={deptFilter}
+            onValueChange={(value) => setDeptFilter(value as CalendarDeptFilterType)}
+          >
+            <SelectTrigger className="min-w-[80px] w-auto h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {DEPT_FILTER_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={taskFilter}
+            onValueChange={(value) => setTaskFilter(value as CalendarTaskFilterType)}
+          >
+            <SelectTrigger className="min-w-[80px] w-auto h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {TASK_FILTER_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
 
         {/* 모바일: 리스트뷰 */}
         <div className="lg:hidden pt-3">
 
           {/* 일별 리스트 */}
-          <div className="space-y-1">
+          <div className="divide-y divide-border">
             {monthDaysWithEvents.map((day) => {
               const hasEvents = day.events.length > 0;
               const isSelected = selectedDate && day.date.getTime() === selectedDate.getTime();
               return (
                 <div
                   key={day.dateStr}
-                  className={`rounded-lg px-3 py-2.5 cursor-pointer transition-colors ${
-                    isSelected ? 'bg-blue-50 ring-1 ring-blue-200' :
-                    day.isToday ? 'bg-amber-50' : ''
+                  className={`px-3 py-2.5 cursor-pointer transition-colors ${
+                    isSelected ? 'bg-blue-50 dark:bg-blue-900/30' :
+                    day.isToday ? 'bg-amber-50 dark:bg-amber-900/30' : ''
                   } ${!hasEvents && !day.isToday && !isSelected ? 'opacity-50' : ''}`}
                   onClick={() => handleDateClick(day.date)}
                 >
                   {/* 날짜 + 일정등록 버튼 */}
                   <div className="flex items-center justify-between mb-1">
                     <div className={`text-sm font-medium ${
-                      day.isWeekend ? 'text-red-500' : 'text-gray-900'
+                      day.isWeekend ? 'text-red-500' : 'text-foreground'
                     } ${day.isToday ? 'font-bold' : ''}`}>
                       {day.label}
-                      {day.isToday && <span className="ml-1 text-amber-600 text-xs font-semibold">(오늘)</span>}
+                      {day.isToday && <span className="ml-1 text-amber-600 dark:text-amber-400 text-xs font-semibold">(오늘)</span>}
                     </div>
                     {isSelected && (
                       <Button
@@ -440,7 +437,7 @@ export function CalendarSection({
                   {/* 이벤트 목록 (날짜 아래) */}
                   {hasEvents ? (
                     <div className="space-y-1 pl-1">
-                      {day.events.slice(0, 3).map((ev) => {
+                      {(isSelected ? day.events : day.events.slice(0, 3)).map((ev) => {
                         const evData = ev.data as Record<string, unknown>;
                         const evType = evData?._type as string;
                         const colorMap: Record<string, string> = {
@@ -455,14 +452,14 @@ export function CalendarSection({
                         const title = evData?.name as string || evData?.title as string || ev.title;
                         const cleanTitle = title?.replace(/^[🔴🟠]\s*/, '') || '';
                         return (
-                          <div key={ev.id} className="flex items-center gap-1.5 text-xs text-gray-700">
+                          <div key={ev.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
                             <span className={`w-2 h-2 rounded-full shrink-0 ${dotColor}`} />
-                            <span className="truncate">{cleanTitle}</span>
+                            <span className={isSelected ? '' : 'truncate'}>{cleanTitle}</span>
                           </div>
                         );
                       })}
-                      {day.events.length > 3 && (
-                        <div className="text-xs text-gray-400 pl-3.5">+{day.events.length - 3}건</div>
+                      {!isSelected && day.events.length > 3 && (
+                        <div className="text-xs text-muted-foreground pl-3.5">+{day.events.length - 3}건</div>
                       )}
                     </div>
                   ) : null}
@@ -486,14 +483,14 @@ export function CalendarSection({
               onMonthChange={handleMonthChange}
               maxEventsPerDay={4}
               weekStartsOn={1}
-              className="[&_.weekend]:bg-yellow-50"
+              className="[&_.weekend]:bg-yellow-50 dark:[&_.weekend]:bg-yellow-900/20"
             />
           </div>
 
           {/* 선택된 날짜 일정 + 이슈 목록 */}
-          <div className="border rounded-lg p-4">
+          <div className="border border-border rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
-              <h4 className="text-lg font-semibold">
+              <h4 className="text-lg font-semibold text-foreground">
                 {selectedDate ? formatSelectedDate(selectedDate) : '날짜를 선택하세요'}
               </h4>
               <Button
@@ -537,13 +534,13 @@ export function CalendarSection({
                       key={event.id}
                       className={`p-3 rounded-lg ${
                         isHoliday
-                          ? 'bg-red-50 border border-red-200'
-                          : 'bg-orange-50 border border-orange-200'
+                          ? 'bg-red-50 border border-red-200 dark:bg-red-900/30 dark:border-red-800'
+                          : 'bg-orange-50 border border-orange-200 dark:bg-orange-900/30 dark:border-orange-800'
                       }`}
                     >
                       <div className="flex items-center gap-2">
                         <span className="text-lg">{isHoliday ? '🔴' : '🟠'}</span>
-                        <span className="font-medium">{eventData.name}</span>
+                        <span className="font-medium text-foreground">{eventData.name}</span>
                       </div>
                       <div className="text-xs text-muted-foreground mt-1">
                         {isHoliday ? '공휴일' : '세금 신고 마감일'}
@@ -555,10 +552,10 @@ export function CalendarSection({
                 {selectedDateItems.schedules.map((schedule) => (
                   <div
                     key={schedule.id}
-                    className="p-3 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
+                    className="p-3 border border-border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
                     onClick={() => onScheduleClick?.(schedule)}
                   >
-                    <div className="font-medium text-base mb-1">{schedule.title}</div>
+                    <div className="font-medium text-base text-foreground mb-1">{schedule.title}</div>
                     <div className="text-sm text-muted-foreground">{formatScheduleDetail(schedule)}</div>
                   </div>
                 ))}
@@ -566,7 +563,7 @@ export function CalendarSection({
                 {selectedDateItems.issues.map((issue) => (
                   <div
                     key={issue.id}
-                    className="p-3 border border-red-200 rounded-lg hover:bg-red-50 transition-colors cursor-pointer"
+                    className="p-3 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer"
                     onClick={() => {
                       if (issue.path) router.push(`/ko${issue.path}`);
                     }}
@@ -578,12 +575,12 @@ export function CalendarSection({
                       >
                         {issue.badge}
                       </Badge>
-                      <span className="font-medium text-sm flex-1">{issue.content}</span>
+                      <span className="font-medium text-sm text-foreground flex-1">{issue.content}</span>
                     </div>
                     <div className="flex items-center justify-between text-xs text-muted-foreground">
                       <span>{issue.time}</span>
                       {issue.path && (
-                        <span className="flex items-center gap-1 text-blue-600 hover:underline">
+                        <span className="flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline">
                           상세보기
                           <ExternalLink className="h-3 w-3" />
                         </span>
@@ -595,7 +592,6 @@ export function CalendarSection({
             )}
           </div>
         </div>
-      </CardContent>
-    </Card>
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/CardManagementSection.tsx b/src/components/business/CEODashboard/sections/CardManagementSection.tsx
index 83e5a9ba..d108fc04 100644
--- a/src/components/business/CEODashboard/sections/CardManagementSection.tsx
+++ b/src/components/business/CEODashboard/sections/CardManagementSection.tsx
@@ -2,8 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import { CreditCard, Wallet, Receipt, AlertTriangle } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { CardManagementData } from '../types';
 
 // 카드별 아이콘 매핑
@@ -27,45 +26,40 @@ export function CardManagementSection({ data, onCardClick }: CardManagementSecti
   };
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle
-          title="카드/가지급금 관리"
-          badge="warning"
-          icon={CreditCard}
-          colorTheme="blue"
-        />
+    <CollapsibleDashboardCard
+      icon={<CreditCard style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="카드/가지급금 관리"
+      subtitle="카드 및 가지급금 현황"
+    >
+      {data.warningBanner && (
+        <div className="bg-red-500 text-white text-sm font-medium px-4 py-2 rounded-lg mb-4 flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4" />
+          {data.warningBanner}
+        </div>
+      )}
 
-        {data.warningBanner && (
-          <div className="bg-red-500 text-white text-sm font-medium px-4 py-2 rounded-lg mb-4 flex items-center gap-2">
-            <AlertTriangle className="h-4 w-4" />
-            {data.warningBanner}
-          </div>
-        )}
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card, idx) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={() => handleClick(card.id)}
+            icon={CARD_ICONS[idx] || CreditCard}
+            colorTheme={CARD_THEMES[idx] || 'blue'}
+            showTrend={!!card.previousLabel}
+            trendValue={card.previousLabel}
+            trendDirection="up"
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card, idx) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={() => handleClick(card.id)}
-              icon={CARD_ICONS[idx] || CreditCard}
-              colorTheme={CARD_THEMES[idx] || 'blue'}
-              showTrend={!!card.previousLabel}
-              trendValue={card.previousLabel}
-              trendDirection="up"
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/ConstructionSection.tsx b/src/components/business/CEODashboard/sections/ConstructionSection.tsx
index e07e45b2..060edb42 100644
--- a/src/components/business/CEODashboard/sections/ConstructionSection.tsx
+++ b/src/components/business/CEODashboard/sections/ConstructionSection.tsx
@@ -6,6 +6,7 @@ import {
   Building2,
 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { CollapsibleDashboardCard } from '../components';
 import type { ConstructionData } from '../types';
 
 interface ConstructionSectionProps {
@@ -14,75 +15,64 @@ interface ConstructionSectionProps {
 
 export function ConstructionSection({ data }: ConstructionSectionProps) {
   return (
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <HardHat style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">시공 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">이달 시공 진행 현황</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#3b82f6', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            {data.thisMonth}건
-          </Badge>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<HardHat style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="시공 현황"
+      subtitle="이달 시공 진행 현황"
+      rightElement={
+        <Badge
+          className="bg-blue-500 text-white border-none hover:opacity-90"
+        >
+          {data.thisMonth}건
+        </Badge>
+      }
+    >
         {/* 시공 요약 카드 */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
-          <div className="rounded-lg border p-4" style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}>
+          <div className="rounded-lg border p-4 bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
             <div className="flex items-center gap-2 mb-2">
               <HardHat className="h-4 w-4 text-blue-500" />
-              <span className="text-sm font-medium text-blue-700">시공 진행 (7일 이내)</span>
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">시공 진행 (7일 이내)</span>
             </div>
-            <span className="text-2xl font-bold text-gray-900">{data.thisMonth}건</span>
+            <span className="text-2xl font-bold text-foreground">{data.thisMonth}건</span>
           </div>
-          <div className="rounded-lg border p-4" style={{ backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }}>
+          <div className="rounded-lg border p-4 bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
             <div className="flex items-center gap-2 mb-2">
               <Building2 className="h-4 w-4 text-green-500" />
-              <span className="text-sm font-medium text-green-700">시공 완료 (7일 이내)</span>
+              <span className="text-sm font-medium text-green-700 dark:text-green-300">시공 완료 (7일 이내)</span>
             </div>
-            <span className="text-2xl font-bold text-gray-900">{data.completed}건</span>
+            <span className="text-2xl font-bold text-foreground">{data.completed}건</span>
           </div>
         </div>
 
         {/* 시공 상세 카드 목록 */}
         <div className="space-y-3">
           {data.items.map((item) => (
-            <div key={item.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
+            <div key={item.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors">
               <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-semibold text-gray-900">{item.siteName}</span>
+                  <span className="text-sm font-semibold text-foreground">{item.siteName}</span>
                   <Badge
                     variant="outline"
                     className={
                       item.status === '진행중'
-                        ? 'text-blue-600 border-blue-200 bg-blue-50'
+                        ? 'text-blue-600 border-blue-200 bg-blue-50 dark:text-blue-400 dark:border-blue-800 dark:bg-blue-900/30'
                         : item.status === '예정'
-                        ? 'text-gray-600 border-gray-200 bg-gray-50'
-                        : 'text-green-600 border-green-200 bg-green-50'
+                        ? 'text-muted-foreground border-border bg-muted/50'
+                        : 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30'
                     }
                   >
                     {item.status}
                   </Badge>
                 </div>
-                <span className="text-sm text-gray-500">{item.client}</span>
+                <span className="text-sm text-muted-foreground">{item.client}</span>
               </div>
-              <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
                 <Calendar className="h-3 w-3" />
                 <span>{item.startDate} ~ {item.endDate}</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+                <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                   <div
                     className="h-full rounded-full"
                     style={{
@@ -91,12 +81,11 @@ export function ConstructionSection({ data }: ConstructionSectionProps) {
                     }}
                   />
                 </div>
-                <span className="text-xs font-medium text-gray-600 min-w-[36px] text-right">{item.progress}%</span>
+                <span className="text-xs font-medium text-muted-foreground min-w-[36px] text-right">{item.progress}%</span>
               </div>
             </div>
           ))}
         </div>
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx b/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
index 1dc86a96..e4a1171b 100644
--- a/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
+++ b/src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx
@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { CollapsibleDashboardCard } from '../components';
 import type { DailyAttendanceData } from '../types';
 
 interface DailyAttendanceSectionProps {
@@ -35,79 +36,69 @@ export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
 
   const statusBadgeClass = (status: string) => {
     switch (status) {
-      case '출근': return 'text-green-600 border-green-200 bg-green-50';
-      case '휴가': return 'text-blue-600 border-blue-200 bg-blue-50';
-      case '지각': return 'text-orange-600 border-orange-200 bg-orange-50';
-      case '결근': return 'text-red-600 border-red-200 bg-red-50';
-      default: return 'text-gray-600 border-gray-200 bg-gray-50';
+      case '출근': return 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30';
+      case '휴가': return 'text-blue-600 border-blue-200 bg-blue-50 dark:text-blue-400 dark:border-blue-800 dark:bg-blue-900/30';
+      case '지각': return 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30';
+      case '결근': return 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30';
+      default: return 'text-muted-foreground border-border bg-muted/50';
     }
   };
 
   return (
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <Users style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">당일 근태 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">오늘의 출근 현황</p>
-            </div>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => router.push('/ko/hr/attendance')}
-            className="text-white hover:bg-white/10 gap-1 text-xs"
-          >
-            근태관리
-            <ChevronRight className="h-3 w-3" />
-          </Button>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<Users style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="당일 근태 현황"
+      subtitle="오늘의 출근 현황"
+      rightElement={
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => { e.stopPropagation(); router.push('/ko/hr/attendance'); }}
+          className="text-white hover:bg-white/10 gap-1 text-xs"
+        >
+          근태관리
+          <ChevronRight className="h-3 w-3" />
+        </Button>
+      }
+    >
         {/* 요약 카드 4개 */}
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-          <div className="rounded-lg border p-3 text-center" style={{ backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }}>
+          <div className="rounded-lg border p-3 text-center bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
             <div className="flex items-center justify-center gap-1 mb-1">
               <UserCheck className="h-3.5 w-3.5 text-green-500" />
-              <span className="text-xs font-medium text-green-600">출근</span>
+              <span className="text-xs font-medium text-green-600 dark:text-green-400">출근</span>
             </div>
-            <span className="text-xl font-bold text-gray-900">{data.present}명</span>
+            <span className="text-xl font-bold text-foreground">{data.present}명</span>
           </div>
-          <div className="rounded-lg border p-3 text-center" style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}>
+          <div className="rounded-lg border p-3 text-center bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
             <div className="flex items-center justify-center gap-1 mb-1">
               <Palmtree className="h-3.5 w-3.5 text-blue-500" />
-              <span className="text-xs font-medium text-blue-600">휴가</span>
+              <span className="text-xs font-medium text-blue-600 dark:text-blue-400">휴가</span>
             </div>
-            <span className="text-xl font-bold text-gray-900">{data.onLeave}명</span>
+            <span className="text-xl font-bold text-foreground">{data.onLeave}명</span>
           </div>
-          <div className="rounded-lg border p-3 text-center" style={{ backgroundColor: '#fff7ed', borderColor: '#fed7aa' }}>
+          <div className="rounded-lg border p-3 text-center bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800">
             <div className="flex items-center justify-center gap-1 mb-1">
               <Clock className="h-3.5 w-3.5 text-orange-500" />
-              <span className="text-xs font-medium text-orange-600">지각</span>
+              <span className="text-xs font-medium text-orange-600 dark:text-orange-400">지각</span>
             </div>
-            <span className="text-xl font-bold text-gray-900">{data.late}명</span>
+            <span className="text-xl font-bold text-foreground">{data.late}명</span>
           </div>
-          <div className="rounded-lg border p-3 text-center" style={{ backgroundColor: '#fef2f2', borderColor: '#fecaca' }}>
+          <div className="rounded-lg border p-3 text-center bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800">
             <div className="flex items-center justify-center gap-1 mb-1">
               <UserX className="h-3.5 w-3.5 text-red-500" />
-              <span className="text-xs font-medium text-red-600">결근</span>
+              <span className="text-xs font-medium text-red-600 dark:text-red-400">결근</span>
             </div>
-            <span className="text-xl font-bold text-gray-900">{data.absent}명</span>
+            <span className="text-xl font-bold text-foreground">{data.absent}명</span>
           </div>
         </div>
 
         {/* 테이블 */}
-        <div className="border rounded-lg overflow-hidden">
-          <div className="flex items-center justify-between p-4 bg-gray-50 border-b">
-            <h4 className="text-sm font-semibold text-gray-700">직원 근태 목록</h4>
+        <div className="border border-border rounded-lg overflow-hidden">
+          <div className="p-3 bg-muted/50 border-b border-border space-y-2">
+            <h4 className="text-sm font-semibold text-foreground">직원 근태 목록</h4>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-[100px] h-8 text-xs">
+              <SelectTrigger className="w-full h-8 text-xs">
                 <SelectValue placeholder="상태" />
               </SelectTrigger>
               <SelectContent>
@@ -122,21 +113,21 @@ export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
           <div className="overflow-x-auto">
             <table className="w-full text-sm min-w-[400px]">
               <thead>
-                <tr className="bg-gray-50 border-b">
-                  <th className="px-4 py-2 text-center text-gray-600 font-medium w-12">No</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">부서</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">직급</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">이름</th>
-                  <th className="px-4 py-2 text-center text-gray-600 font-medium">상태</th>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="px-4 py-2 text-center text-muted-foreground font-medium w-12">No</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">부서</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">직급</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">이름</th>
+                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">상태</th>
                 </tr>
               </thead>
               <tbody>
                 {filteredEmployees.map((emp, idx) => (
-                  <tr key={emp.id} className="border-b last:border-b-0 hover:bg-gray-50">
-                    <td className="px-4 py-2 text-center text-gray-500">{idx + 1}</td>
-                    <td className="px-4 py-2 text-gray-700">{emp.department}</td>
-                    <td className="px-4 py-2 text-gray-700">{emp.position}</td>
-                    <td className="px-4 py-2 text-gray-900 font-medium">{emp.name}</td>
+                  <tr key={emp.id} className="border-b border-border last:border-b-0 hover:bg-muted/50">
+                    <td className="px-4 py-2 text-center text-muted-foreground">{idx + 1}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{emp.department}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{emp.position}</td>
+                    <td className="px-4 py-2 text-foreground font-medium">{emp.name}</td>
                     <td className="px-4 py-2 text-center">
                       <Badge variant="outline" className={statusBadgeClass(emp.status)}>
                         {emp.status}
@@ -148,7 +139,6 @@ export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
             </table>
           </div>
         </div>
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/DailyProductionSection.tsx b/src/components/business/CEODashboard/sections/DailyProductionSection.tsx
index b3caec2b..d4c75af8 100644
--- a/src/components/business/CEODashboard/sections/DailyProductionSection.tsx
+++ b/src/components/business/CEODashboard/sections/DailyProductionSection.tsx
@@ -17,6 +17,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { formatKoreanAmount } from '@/lib/utils/amount';
+import { CollapsibleDashboardCard } from '../components';
 import type { DailyProductionData } from '../types';
 
 // 출고 현황 독립 섹션
@@ -26,41 +27,30 @@ interface ShipmentSectionProps {
 
 export function ShipmentSection({ data }: ShipmentSectionProps) {
   return (
-    <div className="rounded-xl border overflow-hidden">
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <Truck style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">출고 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">예상 출고 정보</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<Truck style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="출고 현황"
+      subtitle="예상 출고 정보"
+    >
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div className="rounded-xl border p-4" style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}>
+          <div className="rounded-xl border p-4 bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
             <div className="flex items-center gap-2 mb-3">
               <Package className="h-4 w-4 text-blue-500" />
-              <span className="text-sm font-medium text-gray-700">예상 출고 (7일 이내)</span>
+              <span className="text-sm font-medium text-muted-foreground">예상 출고 (7일 이내)</span>
             </div>
-            <p className="text-xl font-bold text-gray-900 mb-1">{formatKoreanAmount(data.shipment.expectedAmount)}</p>
-            <p className="text-xs text-gray-500">{data.shipment.expectedCount}건</p>
+            <p className="text-xl font-bold text-foreground mb-1">{formatKoreanAmount(data.shipment.expectedAmount)}</p>
+            <p className="text-xs text-muted-foreground">{data.shipment.expectedCount}건</p>
           </div>
-          <div className="rounded-xl border p-4" style={{ backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }}>
+          <div className="rounded-xl border p-4 bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
             <div className="flex items-center gap-2 mb-3">
               <Truck className="h-4 w-4 text-green-500" />
-              <span className="text-sm font-medium text-gray-700">예상 출고 (30일 이내)</span>
+              <span className="text-sm font-medium text-muted-foreground">예상 출고 (30일 이내)</span>
             </div>
-            <p className="text-xl font-bold text-gray-900 mb-1">{formatKoreanAmount(data.shipment.actualAmount)}</p>
-            <p className="text-xs text-gray-500">{data.shipment.actualCount}건</p>
+            <p className="text-xl font-bold text-foreground mb-1">{formatKoreanAmount(data.shipment.actualAmount)}</p>
+            <p className="text-xs text-muted-foreground">{data.shipment.actualCount}건</p>
           </div>
         </div>
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
   );
 }
 
@@ -80,29 +70,18 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
 
   return (
     <div className="space-y-6">
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <Factory style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">당일 생산 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">{data.date}</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#8b5cf6', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            실시간
-          </Badge>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<Factory style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="당일 생산 현황"
+      subtitle={data.date}
+      rightElement={
+        <Badge
+          className="bg-violet-500 text-white border-none hover:opacity-90"
+        >
+          실시간
+        </Badge>
+      }
+    >
         {/* 공정 탭 */}
         <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList className="mb-4">
@@ -116,133 +95,133 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
           {data.processes.map((process) => (
             <TabsContent key={process.processName} value={process.processName}>
               {/* 요약 카드: 전체 작업 / 할일 / 작업중 / 완료 */}
-              <div className="grid grid-cols-4 gap-3 mb-4">
-                <div className="flex items-center gap-2 rounded-lg border p-3">
-                  <ClipboardList className="h-4 w-4 text-gray-500" />
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+                <div className="flex items-center gap-2 rounded-lg border border-border p-3">
+                  <ClipboardList className="h-4 w-4 text-muted-foreground shrink-0" />
                   <div>
-                    <p className="text-[11px] text-gray-500">전체 작업</p>
-                    <p className="text-sm font-bold text-gray-900">{process.totalWork}건</p>
+                    <p className="text-[11px] text-muted-foreground">전체 작업</p>
+                    <p className="text-sm font-bold text-foreground">{process.totalWork}건</p>
                   </div>
                 </div>
-                <div className="flex items-center gap-2 rounded-lg border p-3">
-                  <ListTodo className="h-4 w-4 text-orange-500" />
+                <div className="flex items-center gap-2 rounded-lg border border-border p-3">
+                  <ListTodo className="h-4 w-4 text-orange-500 shrink-0" />
                   <div>
-                    <p className="text-[11px] text-gray-500">할일</p>
-                    <p className="text-sm font-bold text-gray-900">{process.todo}건</p>
+                    <p className="text-[11px] text-muted-foreground">할일</p>
+                    <p className="text-sm font-bold text-foreground">{process.todo}건</p>
                   </div>
                 </div>
-                <div className="flex items-center gap-2 rounded-lg border p-3">
-                  <Play className="h-4 w-4 text-blue-500" />
+                <div className="flex items-center gap-2 rounded-lg border border-border p-3">
+                  <Play className="h-4 w-4 text-blue-500 shrink-0" />
                   <div>
-                    <p className="text-[11px] text-gray-500">작업중</p>
-                    <p className="text-sm font-bold text-gray-900">{process.inProgress}건</p>
+                    <p className="text-[11px] text-muted-foreground">작업중</p>
+                    <p className="text-sm font-bold text-foreground">{process.inProgress}건</p>
                   </div>
                 </div>
-                <div className="flex items-center gap-2 rounded-lg border p-3">
-                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                <div className="flex items-center gap-2 rounded-lg border border-border p-3">
+                  <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
                   <div>
-                    <p className="text-[11px] text-gray-500">완료</p>
-                    <p className="text-sm font-bold text-gray-900">{process.completed}건</p>
+                    <p className="text-[11px] text-muted-foreground">완료</p>
+                    <p className="text-sm font-bold text-foreground">{process.completed}건</p>
                   </div>
                 </div>
               </div>
 
-              {/* 4열 카드 레이아웃: 긴급 / 우선 / 일반 / 작업자 현황 */}
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* 4열 카드 레이아웃: 긴급 / 우선 / 일반 / 작업자 현황 - 모바일 가로스크롤 */}
+              <div className="-mx-6 px-6 flex gap-4 overflow-x-auto pb-2 lg:mx-0 lg:px-0 lg:grid lg:grid-cols-4 lg:overflow-visible lg:pb-0">
                 {/* 긴급 */}
-                <div className="border rounded-lg overflow-hidden">
-                  <div className="p-3 border-b" style={{ backgroundColor: '#fef2f2' }}>
+                <div className="min-w-[200px] shrink-0 lg:min-w-0 lg:shrink border border-border rounded-lg overflow-hidden">
+                  <div className="p-3 border-b border-border bg-red-50 dark:bg-red-900/30">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1.5">
                         <AlertTriangle className="h-3.5 w-3.5 text-red-500" />
-                        <span className="text-xs font-semibold text-red-600">긴급</span>
+                        <span className="text-xs font-semibold text-red-600 dark:text-red-400">긴급</span>
                       </div>
-                      <span className="text-sm font-bold text-gray-900">{process.urgent}건</span>
+                      <span className="text-sm font-bold text-foreground">{process.urgent}건</span>
                     </div>
                   </div>
-                  <div className="p-2 space-y-2">
+                  <div className="p-2 space-y-2 max-h-[240px] overflow-y-auto">
                     {process.workItems
                       .filter((item) => item.status === '진행중')
                       .slice(0, process.urgent)
                       .map((item) => (
-                        <div key={item.id} className="border rounded p-2 hover:bg-gray-50 cursor-pointer transition-colors">
-                          <p className="text-xs font-medium text-gray-900 truncate">{item.client}</p>
-                          <p className="text-[11px] text-gray-500">{item.product}</p>
-                          <p className="text-[11px] text-gray-400">{item.quantity}건</p>
+                        <div key={item.id} className="border border-border rounded p-2 hover:bg-muted/50 cursor-pointer transition-colors">
+                          <p className="text-xs font-medium text-foreground truncate">{item.client}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.product}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.quantity}건</p>
                         </div>
                       ))}
                   </div>
                 </div>
 
                 {/* 우선 */}
-                <div className="border rounded-lg overflow-hidden">
-                  <div className="p-3 border-b" style={{ backgroundColor: '#fff7ed' }}>
+                <div className="min-w-[200px] shrink-0 lg:min-w-0 lg:shrink border border-border rounded-lg overflow-hidden">
+                  <div className="p-3 border-b border-border bg-orange-50 dark:bg-orange-900/30">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1.5">
                         <Star className="h-3.5 w-3.5 text-orange-500" />
-                        <span className="text-xs font-semibold text-orange-600">우선</span>
+                        <span className="text-xs font-semibold text-orange-600 dark:text-orange-400">우선</span>
                       </div>
-                      <span className="text-sm font-bold text-gray-900">{process.subLine}건</span>
+                      <span className="text-sm font-bold text-foreground">{process.subLine}건</span>
                     </div>
                   </div>
-                  <div className="p-2 space-y-2">
+                  <div className="p-2 space-y-2 max-h-[240px] overflow-y-auto">
                     {process.workItems
                       .filter((item) => item.status === '대기')
                       .slice(0, process.subLine)
                       .map((item) => (
-                        <div key={item.id} className="border rounded p-2 hover:bg-gray-50 cursor-pointer transition-colors">
-                          <p className="text-xs font-medium text-gray-900 truncate">{item.client}</p>
-                          <p className="text-[11px] text-gray-500">{item.product}</p>
-                          <p className="text-[11px] text-gray-400">{item.quantity}건</p>
+                        <div key={item.id} className="border border-border rounded p-2 hover:bg-muted/50 cursor-pointer transition-colors">
+                          <p className="text-xs font-medium text-foreground truncate">{item.client}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.product}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.quantity}건</p>
                         </div>
                       ))}
                   </div>
                 </div>
 
                 {/* 일반 */}
-                <div className="border rounded-lg overflow-hidden">
-                  <div className="p-3 border-b" style={{ backgroundColor: '#eff6ff' }}>
+                <div className="min-w-[200px] shrink-0 lg:min-w-0 lg:shrink border border-border rounded-lg overflow-hidden">
+                  <div className="p-3 border-b border-border bg-blue-50 dark:bg-blue-900/30">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1.5">
                         <Layers className="h-3.5 w-3.5 text-blue-500" />
-                        <span className="text-xs font-semibold text-blue-600">일반</span>
+                        <span className="text-xs font-semibold text-blue-600 dark:text-blue-400">일반</span>
                       </div>
-                      <span className="text-sm font-bold text-gray-900">{process.regular}건</span>
+                      <span className="text-sm font-bold text-foreground">{process.regular}건</span>
                     </div>
                   </div>
-                  <div className="p-2 space-y-2">
+                  <div className="p-2 space-y-2 max-h-[240px] overflow-y-auto">
                     {process.workItems
                       .slice(0, process.regular)
                       .map((item) => (
-                        <div key={item.id} className="border rounded p-2 hover:bg-gray-50 cursor-pointer transition-colors">
-                          <p className="text-xs font-medium text-gray-900 truncate">{item.client}</p>
-                          <p className="text-[11px] text-gray-500">{item.product}</p>
-                          <p className="text-[11px] text-gray-400">{item.quantity}건</p>
+                        <div key={item.id} className="border border-border rounded p-2 hover:bg-muted/50 cursor-pointer transition-colors">
+                          <p className="text-xs font-medium text-foreground truncate">{item.client}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.product}</p>
+                          <p className="text-[11px] text-muted-foreground">{item.quantity}건</p>
                         </div>
                       ))}
                   </div>
                 </div>
 
                 {/* 작업자 현황 */}
-                <div className="border rounded-lg overflow-hidden">
-                  <div className="p-3 border-b" style={{ backgroundColor: '#f0fdf4' }}>
+                <div className="min-w-[200px] shrink-0 lg:min-w-0 lg:shrink border border-border rounded-lg overflow-hidden">
+                  <div className="p-3 border-b border-border bg-green-50 dark:bg-green-900/30">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1.5">
                         <Users className="h-3.5 w-3.5 text-green-500" />
-                        <span className="text-xs font-semibold text-green-600">작업자 현황</span>
+                        <span className="text-xs font-semibold text-green-600 dark:text-green-400">작업자 현황</span>
                       </div>
-                      <span className="text-sm font-bold text-gray-900">{process.workerCount}명</span>
+                      <span className="text-sm font-bold text-foreground">{process.workerCount}명</span>
                     </div>
                   </div>
-                  <div className="p-2 space-y-2">
+                  <div className="p-2 space-y-2 max-h-[240px] overflow-y-auto">
                     {process.workers.map((worker, idx) => (
-                      <div key={idx} className="border rounded p-2">
+                      <div key={idx} className="border border-border rounded p-2">
                         <div className="flex items-center justify-between mb-1">
-                          <span className="text-xs font-medium text-gray-900">{worker.name}</span>
-                          <span className="text-[11px] text-gray-500">{worker.completed}/{worker.assigned}건</span>
+                          <span className="text-xs font-medium text-foreground">{worker.name}</span>
+                          <span className="text-[11px] text-muted-foreground">{worker.completed}/{worker.assigned}건</span>
                         </div>
                         <div className="flex items-center gap-1.5">
-                          <div className="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                          <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                             <div
                               className="h-full rounded-full"
                               style={{
@@ -251,7 +230,7 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
                               }}
                             />
                           </div>
-                          <span className="text-[10px] text-gray-500 min-w-[28px] text-right">{worker.rate}%</span>
+                          <span className="text-[10px] text-muted-foreground min-w-[28px] text-right">{worker.rate}%</span>
                         </div>
                       </div>
                     ))}
@@ -262,46 +241,34 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
           ))}
         </Tabs>
 
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
 
     {/* 출고 현황 (별도 카드) */}
     {showShipment && (
-      <div className="rounded-xl border overflow-hidden">
-        <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-                <Truck style={{ color: '#ffffff' }} className="h-5 w-5" />
-              </div>
-              <div>
-                <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">출고 현황</h3>
-                <p style={{ color: '#cbd5e1' }} className="text-sm">예상 출고 정보</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+      <CollapsibleDashboardCard
+        icon={<Truck style={{ color: '#ffffff' }} className="h-5 w-5" />}
+        title="출고 현황"
+        subtitle="예상 출고 정보"
+      >
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <div className="rounded-xl border p-4" style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}>
+            <div className="rounded-xl border p-4 bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
               <div className="flex items-center gap-2 mb-3">
                 <Package className="h-4 w-4 text-blue-500" />
-                <span className="text-sm font-medium text-gray-700">예상 출고 (7일 이내)</span>
+                <span className="text-sm font-medium text-muted-foreground">예상 출고 (7일 이내)</span>
               </div>
-              <p className="text-xl font-bold text-gray-900 mb-1">{formatKoreanAmount(data.shipment.expectedAmount)}</p>
-              <p className="text-xs text-gray-500">{data.shipment.expectedCount}건</p>
+              <p className="text-xl font-bold text-foreground mb-1">{formatKoreanAmount(data.shipment.expectedAmount)}</p>
+              <p className="text-xs text-muted-foreground">{data.shipment.expectedCount}건</p>
             </div>
-            <div className="rounded-xl border p-4" style={{ backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }}>
+            <div className="rounded-xl border p-4 bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
               <div className="flex items-center gap-2 mb-3">
                 <Truck className="h-4 w-4 text-green-500" />
-                <span className="text-sm font-medium text-gray-700">예상 출고 (30일 이내)</span>
+                <span className="text-sm font-medium text-muted-foreground">예상 출고 (30일 이내)</span>
               </div>
-              <p className="text-xl font-bold text-gray-900 mb-1">{formatKoreanAmount(data.shipment.actualAmount)}</p>
-              <p className="text-xs text-gray-500">{data.shipment.actualCount}건</p>
+              <p className="text-xl font-bold text-foreground mb-1">{formatKoreanAmount(data.shipment.actualAmount)}</p>
+              <p className="text-xs text-muted-foreground">{data.shipment.actualCount}건</p>
             </div>
           </div>
-        </div>
-      </div>
+      </CollapsibleDashboardCard>
     )}
     </div>
   );
diff --git a/src/components/business/CEODashboard/sections/DailyReportSection.tsx b/src/components/business/CEODashboard/sections/DailyReportSection.tsx
index f4ae711b..559d1be0 100644
--- a/src/components/business/CEODashboard/sections/DailyReportSection.tsx
+++ b/src/components/business/CEODashboard/sections/DailyReportSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem } from '../components';
+import { FileText } from 'lucide-react';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard } from '../components';
 import type { DailyReportData } from '../types';
 
 interface DailyReportSectionProps {
@@ -11,27 +11,24 @@ interface DailyReportSectionProps {
 
 export function DailyReportSection({ data, onClick }: DailyReportSectionProps) {
   return (
-    <Card>
-      <CardContent className="p-6">
-        <div className="flex items-center justify-between mb-4">
-          <SectionTitle title="일일 일보" badge="info" />
-          <span className="text-sm text-muted-foreground">{data.date}</span>
-        </div>
+    <CollapsibleDashboardCard
+      icon={<FileText style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="일일 일보"
+      subtitle={data.date}
+    >
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card) => (
+          <AmountCardItem key={card.id} card={card} onClick={onClick} />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card) => (
-            <AmountCardItem key={card.id} card={card} onClick={onClick} />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx b/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
index 32952560..2d6564dc 100644
--- a/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
+++ b/src/components/business/CEODashboard/sections/DebtCollectionSection.tsx
@@ -2,8 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import { Gavel, FileWarning, AlertCircle, Scale } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { DebtCollectionData } from '../types';
 
 // 카드별 아이콘 매핑
@@ -24,39 +23,34 @@ export function DebtCollectionSection({ data }: DebtCollectionSectionProps) {
   };
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle
-          title="채권추심 현황"
-          badge="error"
-          icon={Gavel}
-          colorTheme="red"
-        />
+    <CollapsibleDashboardCard
+      icon={<Gavel style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="채권추심 현황"
+      subtitle="채권추심 관리 현황"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        {data.cards.map((card, idx) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={data.detailButtonPath ? handleClick : undefined}
+            icon={CARD_ICONS[idx] || Gavel}
+            colorTheme={CARD_THEMES[idx] || 'red'}
+            showTrend={!!card.previousLabel}
+            trendValue={card.previousLabel}
+            trendDirection="down"
+            subLabelAsBadge
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
-          {data.cards.map((card, idx) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={data.detailButtonPath ? handleClick : undefined}
-              icon={CARD_ICONS[idx] || Gavel}
-              colorTheme={CARD_THEMES[idx] || 'red'}
-              showTrend={!!card.previousLabel}
-              trendValue={card.previousLabel}
-              trendDirection="down"
-              subLabelAsBadge
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/EnhancedSections.tsx b/src/components/business/CEODashboard/sections/EnhancedSections.tsx
index 28882ae5..20eb6e3c 100644
--- a/src/components/business/CEODashboard/sections/EnhancedSections.tsx
+++ b/src/components/business/CEODashboard/sections/EnhancedSections.tsx
@@ -21,11 +21,12 @@ import {
   ArrowDownRight,
   Banknote,
   CircleDollarSign,
+  LayoutGrid,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { formatKoreanAmount } from '@/lib/utils/amount';
+import { CollapsibleDashboardCard } from '../components';
 import type { DailyReportData, MonthlyExpenseData, TodayIssueItem, TodayIssueSettings } from '../types';
 
 // ============================================================
@@ -46,10 +47,10 @@ interface EnhancedDailyReportSectionProps {
 }
 
 const CARD_STYLES = [
-  { bg: '#ecfdf5', border: '#a7f3d0', iconBg: '#10b981', labelColor: '#047857', Icon: FileText },
-  { bg: '#eff6ff', border: '#bfdbfe', iconBg: '#3b82f6', labelColor: '#1d4ed8', Icon: Receipt },
-  { bg: '#f5f3ff', border: '#ddd6fe', iconBg: '#8b5cf6', labelColor: '#6d28d9', Icon: Briefcase },
-  { bg: '#fff7ed', border: '#fed7aa', iconBg: '#f97316', labelColor: '#c2410c', Icon: Clock },
+  { bgClass: 'bg-emerald-50 dark:bg-emerald-900/30', borderClass: 'border-emerald-200 dark:border-emerald-800', iconBg: '#10b981', labelClass: 'text-emerald-700 dark:text-emerald-300', Icon: FileText },
+  { bgClass: 'bg-blue-50 dark:bg-blue-900/30', borderClass: 'border-blue-200 dark:border-blue-800', iconBg: '#3b82f6', labelClass: 'text-blue-700 dark:text-blue-300', Icon: Receipt },
+  { bgClass: 'bg-purple-50 dark:bg-purple-900/30', borderClass: 'border-purple-200 dark:border-purple-800', iconBg: '#8b5cf6', labelClass: 'text-purple-700 dark:text-purple-300', Icon: Briefcase },
+  { bgClass: 'bg-orange-50 dark:bg-orange-900/30', borderClass: 'border-orange-200 dark:border-orange-800', iconBg: '#f97316', labelClass: 'text-orange-700 dark:text-orange-300', Icon: Clock },
 ];
 
 export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyReportSectionProps) {
@@ -64,36 +65,19 @@ export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyRepor
   };
 
   return (
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div
-        style={{ backgroundColor: '#1e293b' }}
-        className="px-6 py-4"
-      >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div
-              style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
-              className="p-2 rounded-lg"
-            >
-              <Wallet style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">자금현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">{data.date}</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#10b981', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            실시간
-          </Badge>
-        </div>
-      </div>
-
-      {/* 카드 내용 */}
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<Wallet style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="자금현황"
+      subtitle={data.date}
+      rightElement={
+        <Badge
+          style={{ backgroundColor: '#10b981', color: '#ffffff', border: 'none' }}
+          className="hover:opacity-90"
+        >
+          실시간
+        </Badge>
+      }
+    >
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           {data.cards.map((card, idx) => {
             const style = CARD_STYLES[idx] || CARD_STYLES[0];
@@ -101,20 +85,19 @@ export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyRepor
             return (
               <div
                 key={card.id}
-                style={{ backgroundColor: style.bg, borderColor: style.border }}
-                className="rounded-xl p-4 cursor-pointer transition-all hover:shadow-lg border min-h-[110px] flex flex-col"
+                className={`rounded-xl p-4 cursor-pointer transition-all hover:shadow-lg border min-h-[110px] flex flex-col ${style.bgClass} ${style.borderClass}`}
                 onClick={() => handleCardClick(card)}
               >
                 <div className="flex items-center gap-2 mb-3">
                   <div style={{ backgroundColor: style.iconBg }} className="p-1.5 rounded-lg">
-                    <CardIcon style={{ color: '#ffffff' }} className="h-4 w-4" />
+                    <CardIcon className="h-4 w-4 text-white" />
                   </div>
-                  <span style={{ color: style.labelColor }} className="text-sm font-medium">
+                  <span className={`text-sm font-medium ${style.labelClass}`}>
                     {card.label}
                   </span>
                 </div>
                 <div className="flex items-end gap-2">
-                  <span style={{ color: '#0f172a' }} className="text-2xl font-bold">
+                  <span className="text-2xl font-bold text-foreground">
                     {card.displayValue
                       ? card.displayValue
                       : card.currency === 'USD'
@@ -123,8 +106,7 @@ export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyRepor
                   </span>
                   {card.changeRate && (
                     <span
-                      style={{ color: card.changeDirection === 'up' ? '#ef4444' : '#3b82f6' }}
-                      className="flex items-center text-xs font-medium mb-1"
+                      className={`flex items-center text-xs font-medium mb-1 ${card.changeDirection === 'up' ? 'text-red-500 dark:text-red-400' : 'text-blue-500 dark:text-blue-400'}`}
                     >
                       {card.changeDirection === 'up'
                         ? <ArrowUpRight className="h-3 w-3" />
@@ -141,33 +123,27 @@ export function EnhancedDailyReportSection({ data, onClick }: EnhancedDailyRepor
         {/* 체크포인트 */}
         {data.checkPoints.length > 0 && (
           <div className="space-y-2">
-            <p style={{ color: '#64748b' }} className="text-xs font-medium uppercase tracking-wider mb-3">주요 알림</p>
+            <p className="text-xs font-medium uppercase tracking-wider mb-3 text-muted-foreground">주요 알림</p>
             {data.checkPoints.map((cp, idx) => (
               <div
                 key={cp.id}
-                style={{
-                  backgroundColor: idx === 0 ? '#fffbeb' : '#f8fafc',
-                  borderColor: idx === 0 ? '#fde68a' : '#e2e8f0'
-                }}
-                className="flex items-start gap-3 p-3 rounded-lg border"
+                className={`flex items-start gap-3 p-3 rounded-lg border ${idx === 0 ? 'bg-amber-50 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800' : 'bg-slate-50 border-slate-200 dark:bg-slate-800 dark:border-slate-700'}`}
               >
                 <div
-                  style={{ backgroundColor: idx === 0 ? '#fef3c7' : '#f1f5f9' }}
-                  className="p-1 rounded-full shrink-0"
+                  className={`p-1 rounded-full shrink-0 ${idx === 0 ? 'bg-amber-100 dark:bg-amber-800' : 'bg-slate-100 dark:bg-slate-700'}`}
                 >
                   {idx === 0 ? (
-                    <AlertTriangle style={{ color: '#d97706' }} className="h-4 w-4" />
+                    <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
                   ) : (
-                    <CheckCircle2 style={{ color: '#16a34a' }} className="h-4 w-4" />
+                    <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
                   )}
                 </div>
-                <p style={{ color: '#475569' }} className="text-sm flex-1">{cp.message}</p>
+                <p className="text-sm flex-1 text-muted-foreground">{cp.message}</p>
               </div>
             ))}
           </div>
         )}
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
   );
 }
 
@@ -189,21 +165,21 @@ const LABEL_TO_SETTING_KEY: Record<string, keyof TodayIssueSettings> = {
   '결재 요청': 'approvalRequest',
 };
 
-// 라벨별 스타일 매핑 (인라인 스타일용)
-const ITEM_STYLES: Record<string, { bg: string; border: string; iconBg: string; labelColor: string; Icon: React.ComponentType<{ style?: React.CSSProperties; className?: string }> }> = {
-  '수주': { bg: '#eff6ff', border: '#bfdbfe', iconBg: '#3b82f6', labelColor: '#1d4ed8', Icon: ShoppingCart },
-  '채권 추심': { bg: '#fef2f2', border: '#fecaca', iconBg: '#ef4444', labelColor: '#dc2626', Icon: AlertCircle },
-  '안전 재고': { bg: '#fff7ed', border: '#fed7aa', iconBg: '#f97316', labelColor: '#ea580c', Icon: Receipt },
-  '세금 신고': { bg: '#faf5ff', border: '#e9d5ff', iconBg: '#a855f7', labelColor: '#9333ea', Icon: FileText },
-  '신규 업체 등록': { bg: '#ecfdf5', border: '#a7f3d0', iconBg: '#10b981', labelColor: '#059669', Icon: Building2 },
-  '연차': { bg: '#ecfeff', border: '#a5f3fc', iconBg: '#06b6d4', labelColor: '#0891b2', Icon: Calendar },
-  '지각': { bg: '#fffbeb', border: '#fde68a', iconBg: '#f59e0b', labelColor: '#d97706', Icon: Clock },
-  '결근': { bg: '#fff1f2', border: '#fecdd3', iconBg: '#f43f5e', labelColor: '#e11d48', Icon: Users },
-  '발주': { bg: '#eef2ff', border: '#c7d2fe', iconBg: '#6366f1', labelColor: '#4f46e5', Icon: Briefcase },
-  '결재 요청': { bg: '#fdf2f8', border: '#fbcfe8', iconBg: '#ec4899', labelColor: '#db2777', Icon: CheckCircle2 },
+// 라벨별 스타일 매핑 (Tailwind 클래스 기반 - 다크모드 지원)
+const ITEM_STYLES: Record<string, { bgClass: string; borderClass: string; iconBg: string; labelClass: string; Icon: React.ComponentType<{ style?: React.CSSProperties; className?: string }> }> = {
+  '수주': { bgClass: 'bg-blue-50 dark:bg-blue-900/30', borderClass: 'border-blue-200 dark:border-blue-800', iconBg: '#3b82f6', labelClass: 'text-blue-700 dark:text-blue-300', Icon: ShoppingCart },
+  '채권 추심': { bgClass: 'bg-red-50 dark:bg-red-900/30', borderClass: 'border-red-200 dark:border-red-800', iconBg: '#ef4444', labelClass: 'text-red-700 dark:text-red-300', Icon: AlertCircle },
+  '안전 재고': { bgClass: 'bg-orange-50 dark:bg-orange-900/30', borderClass: 'border-orange-200 dark:border-orange-800', iconBg: '#f97316', labelClass: 'text-orange-700 dark:text-orange-300', Icon: Receipt },
+  '세금 신고': { bgClass: 'bg-purple-50 dark:bg-purple-900/30', borderClass: 'border-purple-200 dark:border-purple-800', iconBg: '#a855f7', labelClass: 'text-purple-700 dark:text-purple-300', Icon: FileText },
+  '신규 업체 등록': { bgClass: 'bg-emerald-50 dark:bg-emerald-900/30', borderClass: 'border-emerald-200 dark:border-emerald-800', iconBg: '#10b981', labelClass: 'text-emerald-700 dark:text-emerald-300', Icon: Building2 },
+  '연차': { bgClass: 'bg-cyan-50 dark:bg-cyan-900/30', borderClass: 'border-cyan-200 dark:border-cyan-800', iconBg: '#06b6d4', labelClass: 'text-cyan-700 dark:text-cyan-300', Icon: Calendar },
+  '지각': { bgClass: 'bg-amber-50 dark:bg-amber-900/30', borderClass: 'border-amber-200 dark:border-amber-800', iconBg: '#f59e0b', labelClass: 'text-amber-700 dark:text-amber-300', Icon: Clock },
+  '결근': { bgClass: 'bg-rose-50 dark:bg-rose-900/30', borderClass: 'border-rose-200 dark:border-rose-800', iconBg: '#f43f5e', labelClass: 'text-rose-700 dark:text-rose-300', Icon: Users },
+  '발주': { bgClass: 'bg-indigo-50 dark:bg-indigo-900/30', borderClass: 'border-indigo-200 dark:border-indigo-800', iconBg: '#6366f1', labelClass: 'text-indigo-700 dark:text-indigo-300', Icon: Briefcase },
+  '결재 요청': { bgClass: 'bg-pink-50 dark:bg-pink-900/30', borderClass: 'border-pink-200 dark:border-pink-800', iconBg: '#ec4899', labelClass: 'text-pink-700 dark:text-pink-300', Icon: CheckCircle2 },
 };
 
-const DEFAULT_STYLE = { bg: '#f8fafc', border: '#e2e8f0', iconBg: '#64748b', labelColor: '#475569', Icon: FileText };
+const DEFAULT_STYLE = { bgClass: 'bg-slate-50 dark:bg-slate-800', borderClass: 'border-slate-200 dark:border-slate-700', iconBg: '#64748b', labelClass: 'text-slate-600 dark:text-slate-400', Icon: FileText };
 
 interface EnhancedStatusBoardSectionProps {
   items: TodayIssueItem[];
@@ -226,19 +202,18 @@ export function EnhancedStatusBoardSection({ items, itemSettings }: EnhancedStat
     : items;
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        {/* 헤더 */}
-        <div className="flex items-center gap-3 mb-6">
-          <div style={{ backgroundColor: '#f59e0b' }} className="w-1.5 h-6 rounded-full" />
-          <h3 style={{ color: '#0f172a' }} className="text-lg font-semibold">현황판</h3>
-          <Badge
-            style={{ backgroundColor: '#fef3c7', color: '#b45309', borderColor: '#fde68a' }}
-          >
-            {filteredItems.length}개 항목
-          </Badge>
-        </div>
-
+    <CollapsibleDashboardCard
+      icon={<LayoutGrid style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="현황판"
+      subtitle="주요 현황 요약"
+      rightElement={
+        <Badge
+          style={{ backgroundColor: '#f59e0b', color: '#ffffff', border: 'none' }}
+        >
+          {filteredItems.length}개 항목
+        </Badge>
+      }
+    >
         {/* 카드 그리드 */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
           {filteredItems.map((item) => {
@@ -246,44 +221,38 @@ export function EnhancedStatusBoardSection({ items, itemSettings }: EnhancedStat
             const style = ITEM_STYLES[item.label] || DEFAULT_STYLE;
             const Icon = style.Icon;
 
-            // 긴급 항목은 빨간 배경
-            const bgColor = isHighlighted ? '#ef4444' : style.bg;
-            const borderColor = isHighlighted ? '#ef4444' : style.border;
-            const iconBgColor = isHighlighted ? 'rgba(255,255,255,0.2)' : style.iconBg;
-            const labelColor = isHighlighted ? '#ffffff' : style.labelColor;
-            const countColor = isHighlighted ? '#ffffff' : '#0f172a';
-
             return (
               <div
                 key={item.id}
-                style={{ backgroundColor: bgColor, borderColor: borderColor }}
-                className="relative p-4 rounded-xl border cursor-pointer transition-all hover:scale-[1.02] hover:shadow-md min-h-[130px] flex flex-col"
+                className={`relative p-4 rounded-xl border cursor-pointer transition-all hover:scale-[1.02] hover:shadow-md min-h-[130px] flex flex-col ${isHighlighted ? 'bg-red-500 border-red-500 dark:bg-red-600 dark:border-red-600' : `${style.bgClass} ${style.borderClass}`}`}
                 onClick={() => handleItemClick(item.path)}
               >
                 {/* 아이콘 + 라벨 */}
                 <div className="flex items-center gap-2 mb-3 min-w-0">
-                  <div style={{ backgroundColor: iconBgColor }} className="p-1.5 rounded-lg shrink-0">
-                    <Icon style={{ color: '#ffffff' }} className="h-4 w-4" />
+                  <div
+                    className="p-1.5 rounded-lg shrink-0"
+                    style={{ backgroundColor: isHighlighted ? 'rgba(255,255,255,0.2)' : style.iconBg }}
+                  >
+                    <Icon className="h-4 w-4 text-white" />
                   </div>
-                  <span style={{ color: labelColor }} className="text-sm font-medium truncate flex-1 min-w-0">
+                  <span className={`text-sm font-medium truncate flex-1 min-w-0 ${isHighlighted ? 'text-white' : style.labelClass}`}>
                     {item.label}
                   </span>
                 </div>
 
                 {/* 숫자 */}
-                <div style={{ color: countColor }} className="text-2xl font-bold">
+                <div className={`text-2xl font-bold ${isHighlighted ? 'text-white' : 'text-foreground'}`}>
                   {typeof item.count === 'number' ? `${item.count}건` : item.count}
                 </div>
 
                 {/* 부가 정보 (최근 항목 외 N건) - pill 뱃지 스타일 */}
                 {item.subLabel && (
                   <span
-                    style={{
-                      backgroundColor: isHighlighted ? 'rgba(255,255,255,0.2)' : `${style.iconBg}15`,
-                      color: isHighlighted ? '#ffffff' : style.labelColor,
-                      borderColor: isHighlighted ? 'rgba(255,255,255,0.3)' : `${style.iconBg}30`,
-                    }}
-                    className="text-xs font-medium mt-auto px-2 py-0.5 rounded-full border truncate w-fit max-w-full"
+                    className={`text-xs font-medium mt-auto px-2 py-0.5 rounded-full border truncate w-fit max-w-full ${isHighlighted ? 'bg-white/20 text-white border-white/30' : style.labelClass}`}
+                    style={!isHighlighted ? {
+                      backgroundColor: `${style.iconBg}15`,
+                      borderColor: `${style.iconBg}30`,
+                    } : undefined}
                   >
                     {item.subLabel}
                   </span>
@@ -292,8 +261,7 @@ export function EnhancedStatusBoardSection({ items, itemSettings }: EnhancedStat
             );
           })}
         </div>
-      </CardContent>
-    </Card>
+    </CollapsibleDashboardCard>
   );
 }
 
@@ -311,40 +279,36 @@ export function EnhancedMonthlyExpenseSection({ data, onCardClick }: EnhancedMon
   const totalAmount = data.cards.reduce((sum, card) => sum + (Number(card?.amount) || 0), 0);
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        {/* 헤더 */}
-        <div className="flex items-center gap-3 mb-6">
-          <div style={{ backgroundColor: '#f97316' }} className="w-1.5 h-6 rounded-full" />
-          <h3 style={{ color: '#0f172a' }} className="text-lg font-semibold">당월 예상 지출 내역</h3>
-          <Badge
-            style={{ backgroundColor: '#ffedd5', color: '#c2410c', borderColor: '#fed7aa' }}
-          >
-            전월 대비 +15%
-          </Badge>
-        </div>
-
+    <CollapsibleDashboardCard
+      icon={<Receipt className="h-5 w-5 text-white" />}
+      title="당월 예상 지출 내역"
+      subtitle="이달 예상 지출 정보"
+      rightElement={
+        <Badge className="bg-orange-500 text-white border-none hover:opacity-90">
+          전월 대비 +15%
+        </Badge>
+      }
+    >
         {/* 카드 그리드 */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           {/* 카드 1: 매입 */}
           <div
-            style={{ backgroundColor: '#f5f3ff', borderColor: '#ddd6fe' }}
-            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col"
+            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col bg-purple-50 border-purple-200 dark:bg-purple-900/30 dark:border-purple-800"
             onClick={() => onCardClick?.(data.cards[0]?.id || 'me1')}
           >
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#8b5cf6' }} className="p-1.5 rounded-lg">
-                <Receipt style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <Receipt className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#6d28d9' }} className="text-sm font-medium">
+              <span className="text-sm font-medium text-purple-700 dark:text-purple-300">
                 {data.cards[0]?.label || '매입'}
               </span>
             </div>
-            <div style={{ color: '#0f172a' }} className="text-2xl font-bold">
+            <div className="text-2xl font-bold text-foreground">
               {formatKoreanAmount(data.cards[0]?.amount || 0)}
             </div>
             {data.cards[0]?.previousLabel && (
-              <div style={{ backgroundColor: '#dcfce7', color: '#16a34a' }} className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit">
+              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
                 <TrendingUp className="h-3 w-3" />
                 {data.cards[0].previousLabel}
               </div>
@@ -353,23 +317,22 @@ export function EnhancedMonthlyExpenseSection({ data, onCardClick }: EnhancedMon
 
           {/* 카드 2: 카드 */}
           <div
-            style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}
-            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col"
+            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col bg-blue-50 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800"
             onClick={() => onCardClick?.(data.cards[1]?.id || 'me2')}
           >
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#3b82f6' }} className="p-1.5 rounded-lg">
-                <CreditCard style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <CreditCard className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#1d4ed8' }} className="text-sm font-medium">
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
                 {data.cards[1]?.label || '카드'}
               </span>
             </div>
-            <div style={{ color: '#0f172a' }} className="text-2xl font-bold">
+            <div className="text-2xl font-bold text-foreground">
               {formatKoreanAmount(data.cards[1]?.amount || 0)}
             </div>
             {data.cards[1]?.previousLabel && (
-              <div style={{ backgroundColor: '#dcfce7', color: '#16a34a' }} className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit">
+              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
                 <TrendingUp className="h-3 w-3" />
                 {data.cards[1].previousLabel}
               </div>
@@ -378,47 +341,45 @@ export function EnhancedMonthlyExpenseSection({ data, onCardClick }: EnhancedMon
 
           {/* 카드 3: 발행어음 */}
           <div
-            style={{ backgroundColor: '#fffbeb', borderColor: '#fde68a' }}
-            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col"
+            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col bg-amber-50 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800"
             onClick={() => onCardClick?.(data.cards[2]?.id || 'me3')}
           >
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#f59e0b' }} className="p-1.5 rounded-lg">
-                <Banknote style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <Banknote className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#b45309' }} className="text-sm font-medium">
+              <span className="text-sm font-medium text-amber-700 dark:text-amber-300">
                 {data.cards[2]?.label || '발행어음'}
               </span>
             </div>
-            <div style={{ color: '#0f172a' }} className="text-2xl font-bold">
+            <div className="text-2xl font-bold text-foreground">
               {formatKoreanAmount(data.cards[2]?.amount || 0)}
             </div>
             {data.cards[2]?.previousLabel && (
-              <div style={{ backgroundColor: '#dcfce7', color: '#16a34a' }} className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit">
+              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
                 <TrendingUp className="h-3 w-3" />
                 {data.cards[2].previousLabel}
               </div>
             )}
           </div>
 
-          {/* 카드 4: 총 예상 지출 합계 (강조 - 인라인 스타일) */}
+          {/* 카드 4: 총 예상 지출 합계 (강조) */}
           <div
-            style={{ backgroundColor: '#f43f5e', borderColor: '#f43f5e' }}
-            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col"
+            className="rounded-xl p-4 cursor-pointer transition-all hover:scale-[1.02] hover:shadow-lg border min-h-[130px] flex flex-col bg-rose-500 border-rose-500 dark:bg-rose-600 dark:border-rose-600"
             onClick={() => onCardClick?.(data.cards[3]?.id || 'me4')}
           >
             <div className="flex items-center gap-2 mb-2">
-              <div style={{ backgroundColor: 'rgba(255,255,255,0.2)' }} className="p-1.5 rounded-lg">
-                <CircleDollarSign style={{ color: '#ffffff' }} className="h-4 w-4" />
+              <div className="p-1.5 rounded-lg bg-white/20">
+                <CircleDollarSign className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#ffe4e6' }} className="text-sm font-medium">
+              <span className="text-sm font-medium text-rose-100">
                 총 예상 지출 합계
               </span>
             </div>
-            <div style={{ color: '#ffffff' }} className="text-2xl font-bold">
+            <div className="text-2xl font-bold text-white">
               {formatKoreanAmount(totalAmount)}
             </div>
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.2)', color: '#ffffff' }} className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit">
+            <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-auto w-fit bg-white/20 text-white">
               <TrendingUp className="h-3 w-3" />
               전월 대비 +10.5%
             </div>
@@ -429,33 +390,31 @@ export function EnhancedMonthlyExpenseSection({ data, onCardClick }: EnhancedMon
         {data.checkPoints.length > 0 && (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
             {data.checkPoints.map((cp, idx) => {
-              const colors = [
-                { bg: '#fef2f2', border: '#fecaca', iconColor: '#ef4444' },
-                { bg: '#fffbeb', border: '#fde68a', iconColor: '#f59e0b' },
-                { bg: '#f0fdf4', border: '#bbf7d0', iconColor: '#22c55e' },
+              const colorClasses = [
+                { bg: 'bg-red-50 dark:bg-red-900/30', border: 'border-red-200 dark:border-red-800', icon: 'text-red-500 dark:text-red-400' },
+                { bg: 'bg-amber-50 dark:bg-amber-900/30', border: 'border-amber-200 dark:border-amber-800', icon: 'text-amber-500 dark:text-amber-400' },
+                { bg: 'bg-green-50 dark:bg-green-900/30', border: 'border-green-200 dark:border-green-800', icon: 'text-green-500 dark:text-green-400' },
               ];
-              const color = colors[idx] || colors[2];
+              const color = colorClasses[idx] || colorClasses[2];
 
               return (
                 <div
                   key={cp.id}
-                  style={{ backgroundColor: color.bg, borderColor: color.border }}
-                  className="p-3 rounded-lg border flex items-start gap-2"
+                  className={`p-3 rounded-lg border flex items-start gap-2 ${color.bg} ${color.border}`}
                 >
                   {idx === 0 ? (
-                    <AlertTriangle style={{ color: color.iconColor }} className="h-4 w-4 mt-0.5 shrink-0" />
+                    <AlertTriangle className={`h-4 w-4 mt-0.5 shrink-0 ${color.icon}`} />
                   ) : idx === 1 ? (
-                    <AlertCircle style={{ color: color.iconColor }} className="h-4 w-4 mt-0.5 shrink-0" />
+                    <AlertCircle className={`h-4 w-4 mt-0.5 shrink-0 ${color.icon}`} />
                   ) : (
-                    <CheckCircle2 style={{ color: color.iconColor }} className="h-4 w-4 mt-0.5 shrink-0" />
+                    <CheckCircle2 className={`h-4 w-4 mt-0.5 shrink-0 ${color.icon}`} />
                   )}
-                  <p style={{ color: '#475569' }} className="text-sm">{cp.message}</p>
+                  <p className="text-sm text-muted-foreground">{cp.message}</p>
                 </div>
               );
             })}
           </div>
         )}
-      </CardContent>
-    </Card>
+    </CollapsibleDashboardCard>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/EntertainmentSection.tsx b/src/components/business/CEODashboard/sections/EntertainmentSection.tsx
index b6d91de2..f7e29fba 100644
--- a/src/components/business/CEODashboard/sections/EntertainmentSection.tsx
+++ b/src/components/business/CEODashboard/sections/EntertainmentSection.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { Wine, Utensils, Users, CreditCard } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { EntertainmentData } from '../types';
 
 // 카드별 아이콘 매핑
@@ -16,38 +15,33 @@ interface EntertainmentSectionProps {
 
 export function EntertainmentSection({ data, onCardClick }: EntertainmentSectionProps) {
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle
-          title="접대비 현황"
-          badge="warning"
-          icon={Wine}
-          colorTheme="pink"
-        />
+    <CollapsibleDashboardCard
+      icon={<Wine style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="접대비 현황"
+      subtitle="접대비 사용 현황"
+    >
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card, idx) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={() => onCardClick?.(card.id)}
+            icon={CARD_ICONS[idx] || Wine}
+            colorTheme={CARD_THEMES[idx] || 'pink'}
+            showTrend={!!card.previousLabel}
+            trendValue={card.previousLabel}
+            trendDirection="up"
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card, idx) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={() => onCardClick?.(card.id)}
-              icon={CARD_ICONS[idx] || Wine}
-              colorTheme={CARD_THEMES[idx] || 'pink'}
-              showTrend={!!card.previousLabel}
-              trendValue={card.previousLabel}
-              trendDirection="up"
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/MonthlyExpenseSection.tsx b/src/components/business/CEODashboard/sections/MonthlyExpenseSection.tsx
index aecbb70f..95a69246 100644
--- a/src/components/business/CEODashboard/sections/MonthlyExpenseSection.tsx
+++ b/src/components/business/CEODashboard/sections/MonthlyExpenseSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem } from '../components';
+import { Receipt } from 'lucide-react';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard } from '../components';
 import type { MonthlyExpenseData } from '../types';
 
 interface MonthlyExpenseSectionProps {
@@ -11,28 +11,28 @@ interface MonthlyExpenseSectionProps {
 
 export function MonthlyExpenseSection({ data, onCardClick }: MonthlyExpenseSectionProps) {
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle title="당월 예상 지출 내역" badge="warning" />
+    <CollapsibleDashboardCard
+      icon={<Receipt style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="당월 예상 지출 내역"
+      subtitle="이달 예상 지출 정보"
+    >
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={onCardClick ? () => onCardClick(card.id) : undefined}
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={onCardClick ? () => onCardClick(card.id) : undefined}
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
index 49b812f8..e15fccf7 100644
--- a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
@@ -32,6 +32,7 @@ import {
   Legend,
 } from 'recharts';
 import { formatKoreanAmount } from '@/lib/utils/amount';
+import { CollapsibleDashboardCard } from '../components';
 import type { PurchaseStatusData } from '../types';
 
 interface PurchaseStatusSectionProps {
@@ -61,79 +62,56 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
 
   return (
     <div className="space-y-6">
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <ShoppingCart style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">매입 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">당월 매입 실적</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#f59e0b', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            당월
-          </Badge>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<ShoppingCart className="h-5 w-5 text-white" />}
+      title="매입 현황"
+      subtitle="당월 매입 실적"
+      rightElement={
+        <Badge className="bg-amber-500 text-white border-none hover:opacity-90">
+          당월
+        </Badge>
+      }
+    >
         {/* 통계카드 3개 - 가로 배치 */}
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
           {/* 누적 매입 */}
-          <div
-            style={{ backgroundColor: '#fff7ed', borderColor: '#fed7aa' }}
-            className="rounded-xl p-4 border"
-          >
+          <div className="rounded-xl p-4 border bg-orange-50 border-orange-200 dark:bg-orange-900/30 dark:border-orange-800">
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#f59e0b' }} className="p-1.5 rounded-lg">
-                <DollarSign style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <DollarSign className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#b45309' }} className="text-sm font-medium">누적 매입</span>
+              <span className="text-sm font-medium text-amber-700 dark:text-amber-300">누적 매입</span>
             </div>
-            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+            <span className="text-xl font-bold text-foreground">
               {formatKoreanAmount(data.cumulativePurchase)}
             </span>
           </div>
 
           {/* 미결제 금액 */}
-          <div
-            style={{ backgroundColor: '#fef2f2', borderColor: '#fecaca' }}
-            className="rounded-xl p-4 border"
-          >
+          <div className="rounded-xl p-4 border bg-red-50 border-red-200 dark:bg-red-900/30 dark:border-red-800">
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#ef4444' }} className="p-1.5 rounded-lg">
-                <AlertCircle style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <AlertCircle className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#dc2626' }} className="text-sm font-medium">미결제 금액</span>
+              <span className="text-sm font-medium text-red-700 dark:text-red-300">미결제 금액</span>
             </div>
-            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+            <span className="text-xl font-bold text-foreground">
               {formatKoreanAmount(data.unpaidAmount)}
             </span>
           </div>
 
           {/* 전년 동기 대비 */}
           <div
-            style={{
-              backgroundColor: data.yoyChange >= 0 ? '#fef2f2' : '#eff6ff',
-              borderColor: data.yoyChange >= 0 ? '#fecaca' : '#bfdbfe',
-            }}
-            className="rounded-xl p-4 border"
+            className={`rounded-xl p-4 border ${data.yoyChange >= 0 ? 'bg-red-50 border-red-200 dark:bg-red-900/30 dark:border-red-800' : 'bg-blue-50 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800'}`}
           >
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: data.yoyChange >= 0 ? '#ef4444' : '#3b82f6' }} className="p-1.5 rounded-lg">
-                <TrendingDown style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <TrendingDown className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: data.yoyChange >= 0 ? '#dc2626' : '#1d4ed8' }} className="text-sm font-medium">전년 동기 대비</span>
+              <span className={`text-sm font-medium ${data.yoyChange >= 0 ? 'text-red-700 dark:text-red-300' : 'text-blue-700 dark:text-blue-300'}`}>전년 동기 대비</span>
             </div>
             <div className="flex items-center gap-1">
-              <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+              <span className="text-xl font-bold text-foreground">
                 {data.yoyChange >= 0 ? '+' : ''}{data.yoyChange}%
               </span>
               {data.yoyChange >= 0
@@ -146,8 +124,8 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
         {/* 차트 2열 */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
           {/* 월별 매입 추이 */}
-          <div className="border rounded-lg p-4">
-            <h4 className="text-sm font-semibold text-gray-700 mb-3">월별 매입 추이</h4>
+          <div className="border border-border rounded-lg p-4">
+            <h4 className="text-sm font-semibold text-foreground mb-3">월별 매입 추이</h4>
             <ResponsiveContainer width="100%" height={200}>
               <BarChart data={data.monthlyTrend}>
                 <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
@@ -162,16 +140,16 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
           </div>
 
           {/* 자재 유형별 비율 (Donut) */}
-          <div className="border rounded-lg p-4">
-            <h4 className="text-sm font-semibold text-gray-700 mb-3">자재 유형별 비율</h4>
-            <ResponsiveContainer width="100%" height={200}>
+          <div className="border border-border rounded-lg p-4">
+            <h4 className="text-sm font-semibold text-foreground mb-3">자재 유형별 비율</h4>
+            <ResponsiveContainer width="100%" height={220}>
               <PieChart>
                 <Pie
                   data={data.materialRatio.map((r) => ({ name: r.name, value: r.value, percentage: r.percentage, color: r.color }) as Record<string, unknown>)}
                   cx="50%"
-                  cy="50%"
-                  innerRadius={50}
-                  outerRadius={80}
+                  cy="40%"
+                  innerRadius={40}
+                  outerRadius={65}
                   dataKey="value"
                   nameKey="name"
                 >
@@ -180,72 +158,67 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
                   ))}
                 </Pie>
                 <Tooltip formatter={(value: number | undefined) => [formatKoreanAmount(value ?? 0), '금액']} />
-                <Legend formatter={(value: string) => {
-                  const item = data.materialRatio.find((r) => r.name === value);
-                  return `${value} ${item?.percentage ?? 0}%`;
-                }} />
+                <Legend
+                  verticalAlign="bottom"
+                  wrapperStyle={{ fontSize: '12px', paddingTop: '8px' }}
+                  formatter={(value: string) => {
+                    const item = data.materialRatio.find((r) => r.name === value);
+                    return `${value} ${item?.percentage ?? 0}%`;
+                  }}
+                />
               </PieChart>
             </ResponsiveContainer>
           </div>
         </div>
 
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
 
     {/* 당월 매입 내역 (별도 카드) */}
-    <div className="rounded-xl border overflow-hidden">
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-            <ShoppingCart style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">당월 매입 내역</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">당월 매입 거래 상세</p>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center justify-between p-4 bg-gray-50 border-b">
-          <div className="text-sm text-gray-500">총 {filteredItems.length}건</div>
-          <div className="flex gap-2">
-            <MultiSelectCombobox
-              options={suppliers.map((s) => ({ value: s, label: s }))}
-              value={supplierFilter}
-              onChange={setSupplierFilter}
-              placeholder="전체 공급처"
-              className="w-[160px] h-8 text-xs"
-            />
-            <Select value={sortOrder} onValueChange={setSortOrder}>
-              <SelectTrigger className="w-[120px] h-8 text-xs">
-                <SelectValue placeholder="정렬" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="date-desc">최신순</SelectItem>
-                <SelectItem value="date-asc">오래된순</SelectItem>
-                <SelectItem value="amount-desc">금액 높은순</SelectItem>
-                <SelectItem value="amount-asc">금액 낮은순</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+    <CollapsibleDashboardCard
+      icon={<ShoppingCart className="h-5 w-5 text-white" />}
+      title="당월 매입 내역"
+      subtitle="당월 매입 거래 상세"
+      bodyClassName="p-0"
+    >
+        <div className="p-3 bg-muted/50 border-b border-border space-y-2">
+          <div className="text-sm text-muted-foreground">총 {filteredItems.length}건</div>
+          <MultiSelectCombobox
+            options={suppliers.map((s) => ({ value: s, label: s }))}
+            value={supplierFilter}
+            onChange={setSupplierFilter}
+            placeholder="전체 공급처"
+            className="w-full h-8 text-xs"
+          />
+          <Select value={sortOrder} onValueChange={setSortOrder}>
+            <SelectTrigger className="w-full h-8 text-xs">
+              <SelectValue placeholder="정렬" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date-desc">최신순</SelectItem>
+              <SelectItem value="date-asc">오래된순</SelectItem>
+              <SelectItem value="amount-desc">금액 높은순</SelectItem>
+              <SelectItem value="amount-asc">금액 낮은순</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div className="overflow-x-auto">
           <table className="w-full text-sm min-w-[500px]">
             <thead>
-              <tr className="bg-gray-50 border-b">
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">날짜</th>
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">공급처</th>
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">품목</th>
-                <th className="px-4 py-2 text-right text-gray-600 font-medium">금액</th>
-                <th className="px-4 py-2 text-center text-gray-600 font-medium">상태</th>
+              <tr className="bg-muted/50 border-b border-border">
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">날짜</th>
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">공급처</th>
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">품목</th>
+                <th className="px-4 py-2 text-right text-muted-foreground font-medium">금액</th>
+                <th className="px-4 py-2 text-center text-muted-foreground font-medium">상태</th>
               </tr>
             </thead>
             <tbody>
               {filteredItems.map((item, idx) => (
-                <tr key={idx} className="border-b last:border-b-0 hover:bg-gray-50">
-                  <td className="px-4 py-2 text-gray-700">{item.date}</td>
-                  <td className="px-4 py-2 text-gray-700">{item.supplier}</td>
-                  <td className="px-4 py-2 text-gray-700">{item.item}</td>
-                  <td className="px-4 py-2 text-right text-gray-900 font-medium">
+                <tr key={idx} className="border-b border-border last:border-b-0 hover:bg-muted/30">
+                  <td className="px-4 py-2 text-muted-foreground">{item.date}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{item.supplier}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{item.item}</td>
+                  <td className="px-4 py-2 text-right text-foreground font-medium">
                     {item.amount.toLocaleString()}원
                   </td>
                   <td className="px-4 py-2 text-center">
@@ -253,10 +226,10 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
                       variant="outline"
                       className={
                         item.status === '결제완료'
-                          ? 'text-green-600 border-green-200 bg-green-50'
+                          ? 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30'
                           : item.status === '미결제'
-                          ? 'text-red-600 border-red-200 bg-red-50'
-                          : 'text-orange-600 border-orange-200 bg-orange-50'
+                          ? 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30'
+                          : 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30'
                       }
                     >
                       {item.status}
@@ -266,9 +239,9 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
               ))}
             </tbody>
             <tfoot>
-              <tr className="bg-gray-100 font-semibold">
-                <td className="px-4 py-2 text-gray-700" colSpan={3}>합계</td>
-                <td className="px-4 py-2 text-right text-gray-900">
+              <tr className="bg-muted font-semibold">
+                <td className="px-4 py-2 text-muted-foreground" colSpan={3}>합계</td>
+                <td className="px-4 py-2 text-right text-foreground">
                   {filteredItems.reduce((sum, item) => sum + item.amount, 0).toLocaleString()}원
                 </td>
                 <td />
@@ -276,7 +249,7 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
             </tfoot>
           </table>
         </div>
-      </div>
+    </CollapsibleDashboardCard>
     </div>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/ReceivableSection.tsx b/src/components/business/CEODashboard/sections/ReceivableSection.tsx
index d7eb27a9..0bc73907 100644
--- a/src/components/business/CEODashboard/sections/ReceivableSection.tsx
+++ b/src/components/business/CEODashboard/sections/ReceivableSection.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { Banknote, Clock, AlertTriangle, CircleDollarSign } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
+import { Banknote, Clock, AlertTriangle, CircleDollarSign, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { ReceivableData } from '../types';
 
 // 카드별 아이콘 매핑 (미수금 합계, 30일 이내, 30~90일, 90일 초과)
@@ -24,46 +24,46 @@ export function ReceivableSection({ data }: ReceivableSectionProps) {
   };
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle
-          title="미수금 현황"
-          badge="warning"
-          icon={Banknote}
-          colorTheme="amber"
-          actionButton={
-            data.detailButtonLabel
-              ? {
-                  label: data.detailButtonLabel,
-                  onClick: handleDetailClick,
-                }
-              : undefined
-          }
-        />
+    <CollapsibleDashboardCard
+      icon={<Banknote style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="미수금 현황"
+      subtitle="미수금 관리 현황"
+      rightElement={
+        data.detailButtonLabel ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => { e.stopPropagation(); handleDetailClick(); }}
+            className="text-white hover:bg-white/10 gap-1 text-xs"
+          >
+            {data.detailButtonLabel}
+            <ChevronRight className="h-3 w-3" />
+          </Button>
+        ) : undefined
+      }
+    >
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card, idx) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={handleDetailClick}
+            icon={CARD_ICONS[idx] || Banknote}
+            colorTheme={CARD_THEMES[idx] || 'amber'}
+            showTrend={!!card.previousLabel}
+            trendValue={card.previousLabel}
+            trendDirection={idx === 3 ? 'down' : 'up'}
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card, idx) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={handleDetailClick}
-              icon={CARD_ICONS[idx] || Banknote}
-              colorTheme={CARD_THEMES[idx] || 'amber'}
-              showTrend={!!card.previousLabel}
-              trendValue={card.previousLabel}
-              trendDirection={idx === 3 ? 'down' : 'up'}
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
index b0af22a1..f55ab179 100644
--- a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
@@ -30,6 +30,7 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 import { formatKoreanAmount } from '@/lib/utils/amount';
+import { CollapsibleDashboardCard } from '../components';
 import type { SalesStatusData } from '../types';
 
 interface SalesStatusSectionProps {
@@ -59,81 +60,58 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
 
   return (
     <div className="space-y-6">
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <BarChart3 style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">매출 현황</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">당월 매출 실적</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#3b82f6', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            당월
-          </Badge>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<BarChart3 className="h-5 w-5 text-white" />}
+      title="매출 현황"
+      subtitle="당월 매출 실적"
+      rightElement={
+        <Badge className="bg-blue-500 text-white border-none hover:opacity-90">
+          당월
+        </Badge>
+      }
+    >
         {/* 통계카드 4개 */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           {/* 누적 매출 */}
-          <div
-            style={{ backgroundColor: '#eff6ff', borderColor: '#bfdbfe' }}
-            className="rounded-xl p-4 border"
-          >
+          <div className="rounded-xl p-4 border bg-blue-50 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800">
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#3b82f6' }} className="p-1.5 rounded-lg">
-                <DollarSign style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <DollarSign className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#1d4ed8' }} className="text-sm font-medium">누적 매출</span>
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">누적 매출</span>
             </div>
-            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+            <span className="text-xl font-bold text-foreground">
               {formatKoreanAmount(data.cumulativeSales)}
             </span>
           </div>
 
           {/* 달성률 */}
-          <div
-            style={{ backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }}
-            className="rounded-xl p-4 border"
-          >
+          <div className="rounded-xl p-4 border bg-green-50 border-green-200 dark:bg-green-900/30 dark:border-green-800">
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#22c55e' }} className="p-1.5 rounded-lg">
-                <Target style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <Target className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#15803d' }} className="text-sm font-medium">달성률</span>
+              <span className="text-sm font-medium text-green-700 dark:text-green-300">달성률</span>
             </div>
-            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+            <span className="text-xl font-bold text-foreground">
               {data.achievementRate}%
             </span>
           </div>
 
           {/* 전년 동기 대비 */}
           <div
-            style={{
-              backgroundColor: data.yoyChange >= 0 ? '#fef2f2' : '#eff6ff',
-              borderColor: data.yoyChange >= 0 ? '#fecaca' : '#bfdbfe',
-            }}
-            className="rounded-xl p-4 border"
+            className={`rounded-xl p-4 border ${data.yoyChange >= 0 ? 'bg-red-50 border-red-200 dark:bg-red-900/30 dark:border-red-800' : 'bg-blue-50 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800'}`}
           >
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: data.yoyChange >= 0 ? '#ef4444' : '#3b82f6' }} className="p-1.5 rounded-lg">
                 {data.yoyChange >= 0
-                  ? <TrendingUp style={{ color: '#ffffff' }} className="h-4 w-4" />
-                  : <TrendingDown style={{ color: '#ffffff' }} className="h-4 w-4" />}
+                  ? <TrendingUp className="h-4 w-4 text-white" />
+                  : <TrendingDown className="h-4 w-4 text-white" />}
               </div>
-              <span style={{ color: data.yoyChange >= 0 ? '#dc2626' : '#1d4ed8' }} className="text-sm font-medium">전년 동기 대비</span>
+              <span className={`text-sm font-medium ${data.yoyChange >= 0 ? 'text-red-700 dark:text-red-300' : 'text-blue-700 dark:text-blue-300'}`}>전년 동기 대비</span>
             </div>
             <div className="flex items-center gap-1">
-              <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+              <span className="text-xl font-bold text-foreground">
                 {data.yoyChange >= 0 ? '+' : ''}{data.yoyChange}%
               </span>
               {data.yoyChange >= 0
@@ -143,17 +121,14 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
           </div>
 
           {/* 당월 매출 */}
-          <div
-            style={{ backgroundColor: '#faf5ff', borderColor: '#e9d5ff' }}
-            className="rounded-xl p-4 border"
-          >
+          <div className="rounded-xl p-4 border bg-purple-50 border-purple-200 dark:bg-purple-900/30 dark:border-purple-800">
             <div className="flex items-center gap-2 mb-2">
               <div style={{ backgroundColor: '#a855f7' }} className="p-1.5 rounded-lg">
-                <Calendar style={{ color: '#ffffff' }} className="h-4 w-4" />
+                <Calendar className="h-4 w-4 text-white" />
               </div>
-              <span style={{ color: '#7e22ce' }} className="text-sm font-medium">당월 매출</span>
+              <span className="text-sm font-medium text-purple-700 dark:text-purple-300">당월 매출</span>
             </div>
-            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
+            <span className="text-xl font-bold text-foreground">
               {formatKoreanAmount(data.monthlySales)}
             </span>
           </div>
@@ -162,8 +137,8 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
         {/* 차트 2열 */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
           {/* 월별 매출 추이 */}
-          <div className="border rounded-lg p-4">
-            <h4 className="text-sm font-semibold text-gray-700 mb-3">월별 매출 추이</h4>
+          <div className="border border-border rounded-lg p-4">
+            <h4 className="text-sm font-semibold text-foreground mb-3">월별 매출 추이</h4>
             <ResponsiveContainer width="100%" height={200}>
               <BarChart data={data.monthlyTrend}>
                 <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
@@ -178,8 +153,8 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
           </div>
 
           {/* 거래처별 매출 (수평 Bar) */}
-          <div className="border rounded-lg p-4">
-            <h4 className="text-sm font-semibold text-gray-700 mb-3">거래처별 매출</h4>
+          <div className="border border-border rounded-lg p-4">
+            <h4 className="text-sm font-semibold text-foreground mb-3">거래처별 매출</h4>
             <ResponsiveContainer width="100%" height={200}>
               <BarChart data={data.clientSales} layout="vertical">
                 <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
@@ -194,63 +169,54 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
           </div>
         </div>
 
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
 
     {/* 당월 매출 내역 (별도 카드) */}
-    <div className="rounded-xl border overflow-hidden">
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-            <BarChart3 style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">당월 매출 내역</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">당월 매출 거래 상세</p>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center justify-between p-4 bg-gray-50 border-b">
-          <div className="text-sm text-gray-500">총 {filteredItems.length}건</div>
-          <div className="flex gap-2">
-            <MultiSelectCombobox
-              options={clients.map((c) => ({ value: c, label: c }))}
-              value={clientFilter}
-              onChange={setClientFilter}
-              placeholder="전체 거래처"
-              className="w-[160px] h-8 text-xs"
-            />
-            <Select value={sortOrder} onValueChange={setSortOrder}>
-              <SelectTrigger className="w-[120px] h-8 text-xs">
-                <SelectValue placeholder="정렬" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="date-desc">최신순</SelectItem>
-                <SelectItem value="date-asc">오래된순</SelectItem>
-                <SelectItem value="amount-desc">금액 높은순</SelectItem>
-                <SelectItem value="amount-asc">금액 낮은순</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+    <CollapsibleDashboardCard
+      icon={<BarChart3 className="h-5 w-5 text-white" />}
+      title="당월 매출 내역"
+      subtitle="당월 매출 거래 상세"
+      bodyClassName="p-0"
+    >
+        <div className="p-3 bg-muted/50 border-b border-border space-y-2">
+          <div className="text-sm text-muted-foreground">총 {filteredItems.length}건</div>
+          <MultiSelectCombobox
+            options={clients.map((c) => ({ value: c, label: c }))}
+            value={clientFilter}
+            onChange={setClientFilter}
+            placeholder="전체 거래처"
+            className="w-full h-8 text-xs"
+          />
+          <Select value={sortOrder} onValueChange={setSortOrder}>
+            <SelectTrigger className="w-full h-8 text-xs">
+              <SelectValue placeholder="정렬" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date-desc">최신순</SelectItem>
+              <SelectItem value="date-asc">오래된순</SelectItem>
+              <SelectItem value="amount-desc">금액 높은순</SelectItem>
+              <SelectItem value="amount-asc">금액 낮은순</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div className="overflow-x-auto">
           <table className="w-full text-sm min-w-[500px]">
             <thead>
-              <tr className="bg-gray-50 border-b">
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">날짜</th>
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">거래처</th>
-                <th className="px-4 py-2 text-left text-gray-600 font-medium">품목</th>
-                <th className="px-4 py-2 text-right text-gray-600 font-medium">금액</th>
-                <th className="px-4 py-2 text-center text-gray-600 font-medium">상태</th>
+              <tr className="bg-muted/50 border-b border-border">
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">날짜</th>
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">거래처</th>
+                <th className="px-4 py-2 text-left text-muted-foreground font-medium">품목</th>
+                <th className="px-4 py-2 text-right text-muted-foreground font-medium">금액</th>
+                <th className="px-4 py-2 text-center text-muted-foreground font-medium">상태</th>
               </tr>
             </thead>
             <tbody>
               {filteredItems.map((item, idx) => (
-                <tr key={idx} className="border-b last:border-b-0 hover:bg-gray-50">
-                  <td className="px-4 py-2 text-gray-700">{item.date}</td>
-                  <td className="px-4 py-2 text-gray-700">{item.client}</td>
-                  <td className="px-4 py-2 text-gray-700">{item.item}</td>
-                  <td className="px-4 py-2 text-right text-gray-900 font-medium">
+                <tr key={idx} className="border-b border-border last:border-b-0 hover:bg-muted/30">
+                  <td className="px-4 py-2 text-muted-foreground">{item.date}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{item.client}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{item.item}</td>
+                  <td className="px-4 py-2 text-right text-foreground font-medium">
                     {item.amount.toLocaleString()}원
                   </td>
                   <td className="px-4 py-2 text-center">
@@ -258,10 +224,10 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
                       variant="outline"
                       className={
                         item.status === '입금완료'
-                          ? 'text-green-600 border-green-200 bg-green-50'
+                          ? 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30'
                           : item.status === '미입금'
-                          ? 'text-red-600 border-red-200 bg-red-50'
-                          : 'text-orange-600 border-orange-200 bg-orange-50'
+                          ? 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30'
+                          : 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30'
                       }
                     >
                       {item.status}
@@ -271,9 +237,9 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
               ))}
             </tbody>
             <tfoot>
-              <tr className="bg-gray-100 font-semibold">
-                <td className="px-4 py-2 text-gray-700" colSpan={3}>합계</td>
-                <td className="px-4 py-2 text-right text-gray-900">
+              <tr className="bg-muted font-semibold">
+                <td className="px-4 py-2 text-muted-foreground" colSpan={3}>합계</td>
+                <td className="px-4 py-2 text-right text-foreground">
                   {filteredItems.reduce((sum, item) => sum + item.amount, 0).toLocaleString()}원
                 </td>
                 <td />
@@ -281,7 +247,7 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
             </tfoot>
           </table>
         </div>
-      </div>
+    </CollapsibleDashboardCard>
     </div>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/StatusBoardSection.tsx b/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
index 3f90e560..44acfb0e 100644
--- a/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
+++ b/src/components/business/CEODashboard/sections/StatusBoardSection.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, IssueCardItem } from '../components';
+import { LayoutGrid } from 'lucide-react';
+import { IssueCardItem, CollapsibleDashboardCard } from '../components';
 import type { TodayIssueItem, TodayIssueSettings } from '../types';
 
 // 라벨 → 설정키 매핑
@@ -40,10 +40,11 @@ export function StatusBoardSection({ items, itemSettings }: StatusBoardSectionPr
     : items;
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle title="현황판" badge="warning" />
-
+    <CollapsibleDashboardCard
+      icon={<LayoutGrid style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="현황판"
+      subtitle="주요 현황 요약"
+    >
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
           {filteredItems.map((item) => (
             <IssueCardItem
@@ -56,7 +57,6 @@ export function StatusBoardSection({ items, itemSettings }: StatusBoardSectionPr
             />
           ))}
         </div>
-      </CardContent>
-    </Card>
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/TodayIssueSection.tsx b/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
index 72e1591f..89490dd3 100644
--- a/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
+++ b/src/components/business/CEODashboard/sections/TodayIssueSection.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useMemo, useCallback, useRef, useLayoutEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -31,6 +30,7 @@ import {
   Loader2,
   type LucideIcon,
 } from 'lucide-react';
+import { CollapsibleDashboardCard } from '../components';
 import { usePastIssue } from '@/hooks/useCEODashboard';
 import type { TodayIssueListItem, TodayIssueNotificationType } from '../types';
 
@@ -44,16 +44,16 @@ interface BadgeStyle {
 
 // notification_type 코드 기반 스타일 매핑 (API 고정값 사용)
 const NOTIFICATION_STYLES: Record<TodayIssueNotificationType, BadgeStyle> = {
-  sales_order: { bg: 'bg-blue-50', text: 'text-blue-700', iconBg: 'bg-blue-500', Icon: ShoppingCart },
-  bad_debt: { bg: 'bg-purple-50', text: 'text-purple-700', iconBg: 'bg-purple-500', Icon: AlertCircle },
-  safety_stock: { bg: 'bg-orange-50', text: 'text-orange-700', iconBg: 'bg-orange-500', Icon: Package },
-  expected_expense: { bg: 'bg-green-50', text: 'text-green-700', iconBg: 'bg-green-500', Icon: Receipt },
-  vat_report: { bg: 'bg-red-50', text: 'text-red-700', iconBg: 'bg-red-500', Icon: FileText },
-  approval_request: { bg: 'bg-amber-50', text: 'text-amber-700', iconBg: 'bg-amber-500', Icon: CheckCircle2 },
-  new_vendor: { bg: 'bg-emerald-50', text: 'text-emerald-700', iconBg: 'bg-emerald-500', Icon: Building2 },
-  deposit: { bg: 'bg-cyan-50', text: 'text-cyan-700', iconBg: 'bg-cyan-500', Icon: TrendingUp },
-  withdrawal: { bg: 'bg-pink-50', text: 'text-pink-700', iconBg: 'bg-pink-500', Icon: TrendingDown },
-  other: { bg: 'bg-gray-50', text: 'text-gray-700', iconBg: 'bg-gray-500', Icon: Info },
+  sales_order: { bg: 'bg-blue-50 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300', iconBg: 'bg-blue-500', Icon: ShoppingCart },
+  bad_debt: { bg: 'bg-purple-50 dark:bg-purple-900/30', text: 'text-purple-700 dark:text-purple-300', iconBg: 'bg-purple-500', Icon: AlertCircle },
+  safety_stock: { bg: 'bg-orange-50 dark:bg-orange-900/30', text: 'text-orange-700 dark:text-orange-300', iconBg: 'bg-orange-500', Icon: Package },
+  expected_expense: { bg: 'bg-green-50 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-300', iconBg: 'bg-green-500', Icon: Receipt },
+  vat_report: { bg: 'bg-red-50 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-300', iconBg: 'bg-red-500', Icon: FileText },
+  approval_request: { bg: 'bg-amber-50 dark:bg-amber-900/30', text: 'text-amber-700 dark:text-amber-300', iconBg: 'bg-amber-500', Icon: CheckCircle2 },
+  new_vendor: { bg: 'bg-emerald-50 dark:bg-emerald-900/30', text: 'text-emerald-700 dark:text-emerald-300', iconBg: 'bg-emerald-500', Icon: Building2 },
+  deposit: { bg: 'bg-cyan-50 dark:bg-cyan-900/30', text: 'text-cyan-700 dark:text-cyan-300', iconBg: 'bg-cyan-500', Icon: TrendingUp },
+  withdrawal: { bg: 'bg-pink-50 dark:bg-pink-900/30', text: 'text-pink-700 dark:text-pink-300', iconBg: 'bg-pink-500', Icon: TrendingDown },
+  other: { bg: 'bg-muted/50', text: 'text-muted-foreground', iconBg: 'bg-gray-500', Icon: Info },
 };
 
 // 신용등급 색상 매핑 (A=녹색, B=노랑, C=주황, D=빨강)
@@ -277,11 +277,13 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
   };
 
   return (
-    <Card>
-      <CardContent className="p-6">
-        {/* 헤더 */}
+    <CollapsibleDashboardCard
+      icon={<AlertCircle style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="오늘의 이슈"
+      subtitle="주요 알림 및 이슈 현황"
+    >
+        {/* 필터/탭 영역 */}
         <div className="flex items-center gap-3 mb-4 flex-wrap">
-          <h2 className="text-lg font-semibold text-gray-900 shrink-0">오늘의 이슈</h2>
 
           {/* 탭 */}
           <Tabs value={activeTab} onValueChange={handleTabChange} className="shrink-0">
@@ -334,7 +336,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
                 <SelectItem key={option.value} value={option.value}>
                   <div className="flex items-center justify-between w-full gap-3">
                     <span>{option.label}</span>
-                    <span className="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded-full font-medium">
+                    <span className="bg-muted text-muted-foreground text-xs px-2 py-0.5 rounded-full font-medium">
                       {option.count}
                     </span>
                   </div>
@@ -348,11 +350,11 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
         <div ref={gridRef} className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 max-h-[400px] overflow-y-auto pr-1">
           {activeTab === 'past' && pastLoading ? (
             <div className="col-span-full flex items-center justify-center py-8">
-              <Loader2 className="h-5 w-5 animate-spin text-gray-400 mr-2" />
-              <span className="text-sm text-gray-500">데이터를 불러오는 중...</span>
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground mr-2" />
+              <span className="text-sm text-muted-foreground">데이터를 불러오는 중...</span>
             </div>
           ) : filteredItems.length === 0 ? (
-            <div className="col-span-full text-center py-8 text-gray-500">
+            <div className="col-span-full text-center py-8 text-muted-foreground">
               {activeTab === 'past'
                 ? `${formatDateDisplay(pastDate)}에 이슈가 없습니다.`
                 : '표시할 이슈가 없습니다.'}
@@ -368,7 +370,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
               return (
               <div
                 key={item.id}
-                className={`flex items-center gap-2 p-3 border rounded-lg hover:shadow-md transition-all cursor-pointer ${badgeStyle.bg} border-transparent hover:border-gray-200`}
+                className={`flex items-center gap-2 p-3 border rounded-lg hover:shadow-md transition-all cursor-pointer ${badgeStyle.bg} border-transparent hover:border-border`}
                 onClick={() => handleItemClick(item)}
               >
                 {/* 아이콘 + 뱃지 */}
@@ -382,7 +384,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
                 </div>
 
                 {/* 내용 */}
-                <span className="text-sm text-gray-800 truncate flex-1 min-w-0">
+                <span className="text-sm text-foreground truncate flex-1 min-w-0">
                   {item.content}
                 </span>
 
@@ -404,7 +406,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
                 )}
 
                 {/* 시간 */}
-                <span className="text-xs text-gray-500 whitespace-nowrap shrink-0">
+                <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
                   {item.time}
                 </span>
 
@@ -434,7 +436,7 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
                     <Button
                       size="sm"
                       variant="outline"
-                      className="h-6 px-2 text-xs text-gray-600 hover:text-green-600 hover:border-green-600 hover:bg-green-50"
+                      className="h-6 px-2 text-xs text-muted-foreground hover:text-green-600 hover:border-green-600 hover:bg-green-50"
                       onClick={() => handleDismiss(item)}
                     >
                       확인
@@ -447,7 +449,6 @@ export function TodayIssueSection({ items }: TodayIssueSectionProps) {
             })
           )}
         </div>
-      </CardContent>
-    </Card>
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/UnshippedSection.tsx b/src/components/business/CEODashboard/sections/UnshippedSection.tsx
index b135cda7..01591190 100644
--- a/src/components/business/CEODashboard/sections/UnshippedSection.tsx
+++ b/src/components/business/CEODashboard/sections/UnshippedSection.tsx
@@ -11,6 +11,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
+import { CollapsibleDashboardCard } from '../components';
 import type { UnshippedData } from '../types';
 
 interface UnshippedSectionProps {
@@ -31,81 +32,68 @@ export function UnshippedSection({ data }: UnshippedSectionProps) {
     });
 
   return (
-    <div className="rounded-xl border overflow-hidden">
-      {/* 다크 헤더 */}
-      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
-              <PackageX style={{ color: '#ffffff' }} className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">미출고 내역</h3>
-              <p style={{ color: '#cbd5e1' }} className="text-sm">납기일 기준 미출고 현황</p>
-            </div>
-          </div>
-          <Badge
-            style={{ backgroundColor: '#ef4444', color: '#ffffff', border: 'none' }}
-            className="hover:opacity-90"
-          >
-            {data.items.length}건
-          </Badge>
-        </div>
-      </div>
-
-      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
+    <CollapsibleDashboardCard
+      icon={<PackageX style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="미출고 내역"
+      subtitle="납기일 기준 미출고 현황"
+      rightElement={
+        <Badge
+          className="bg-red-500 text-white border-none hover:opacity-90"
+        >
+          {data.items.length}건
+        </Badge>
+      }
+    >
         {/* 미출고 테이블 */}
-        <div className="border rounded-lg overflow-hidden">
-          <div className="flex items-center justify-between p-4 bg-gray-50 border-b">
-            <h4 className="text-sm font-semibold text-gray-700">미출고 목록</h4>
-            <div className="flex gap-2">
-              <MultiSelectCombobox
-                options={clients.map((c) => ({ value: c, label: c }))}
-                value={clientFilter}
-                onChange={setClientFilter}
-                placeholder="전체 거래처"
-                className="w-[160px] h-8 text-xs"
-              />
-              <Select value={sortOrder} onValueChange={setSortOrder}>
-                <SelectTrigger className="w-[140px] h-8 text-xs">
-                  <SelectValue placeholder="정렬" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="due-asc">납기일 가까운순</SelectItem>
-                  <SelectItem value="due-desc">납기일 먼순</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+        <div className="border border-border rounded-lg overflow-hidden">
+          <div className="p-3 bg-muted/50 border-b border-border space-y-2">
+            <h4 className="text-sm font-semibold text-foreground">미출고 목록</h4>
+            <MultiSelectCombobox
+              options={clients.map((c) => ({ value: c, label: c }))}
+              value={clientFilter}
+              onChange={setClientFilter}
+              placeholder="전체 거래처"
+              className="w-full h-8 text-xs"
+            />
+            <Select value={sortOrder} onValueChange={setSortOrder}>
+              <SelectTrigger className="w-full h-8 text-xs">
+                <SelectValue placeholder="정렬" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due-asc">납기일 가까운순</SelectItem>
+                <SelectItem value="due-desc">납기일 먼순</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
           <div className="overflow-x-auto">
             <table className="w-full text-sm min-w-[550px]">
               <thead>
-                <tr className="bg-gray-50 border-b">
-                  <th className="px-4 py-2 text-center text-gray-600 font-medium w-12">No</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">포트번호</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">현장명</th>
-                  <th className="px-4 py-2 text-left text-gray-600 font-medium">수주처</th>
-                  <th className="px-4 py-2 text-center text-gray-600 font-medium">납기일</th>
-                  <th className="px-4 py-2 text-center text-gray-600 font-medium">남은일</th>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="px-4 py-2 text-center text-muted-foreground font-medium w-12">No</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">포트번호</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">현장명</th>
+                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">수주처</th>
+                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">납기일</th>
+                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">남은일</th>
                 </tr>
               </thead>
               <tbody>
                 {filteredItems.map((item, idx) => (
-                  <tr key={item.id} className="border-b last:border-b-0 hover:bg-gray-50">
-                    <td className="px-4 py-2 text-center text-gray-500">{idx + 1}</td>
-                    <td className="px-4 py-2 text-gray-700">{item.portNo}</td>
-                    <td className="px-4 py-2 text-gray-700">{item.siteName}</td>
-                    <td className="px-4 py-2 text-gray-700">{item.orderClient}</td>
-                    <td className="px-4 py-2 text-center text-gray-700">{item.dueDate}</td>
+                  <tr key={item.id} className="border-b border-border last:border-b-0 hover:bg-muted/50">
+                    <td className="px-4 py-2 text-center text-muted-foreground">{idx + 1}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{item.portNo}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{item.siteName}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{item.orderClient}</td>
+                    <td className="px-4 py-2 text-center text-muted-foreground">{item.dueDate}</td>
                     <td className="px-4 py-2 text-center">
                       <Badge
                         variant="outline"
                         className={
                           item.daysLeft <= 3
-                            ? 'text-red-600 border-red-200 bg-red-50'
+                            ? 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30'
                             : item.daysLeft <= 7
-                            ? 'text-orange-600 border-orange-200 bg-orange-50'
-                            : 'text-gray-600 border-gray-200 bg-gray-50'
+                            ? 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30'
+                            : 'text-muted-foreground border-border bg-muted/50'
                         }
                       >
                         D-{item.daysLeft}
@@ -117,7 +105,6 @@ export function UnshippedSection({ data }: UnshippedSectionProps) {
             </table>
           </div>
         </div>
-      </div>
-    </div>
+    </CollapsibleDashboardCard>
   );
 }
diff --git a/src/components/business/CEODashboard/sections/VatSection.tsx b/src/components/business/CEODashboard/sections/VatSection.tsx
index 2a230f58..eb5c45ab 100644
--- a/src/components/business/CEODashboard/sections/VatSection.tsx
+++ b/src/components/business/CEODashboard/sections/VatSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem } from '../components';
+import { Calculator } from 'lucide-react';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard } from '../components';
 import type { VatData } from '../types';
 
 interface VatSectionProps {
@@ -11,28 +11,28 @@ interface VatSectionProps {
 
 export function VatSection({ data, onClick }: VatSectionProps) {
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle title="부가세 현황" badge="warning" />
+    <CollapsibleDashboardCard
+      icon={<Calculator style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="부가세 현황"
+      subtitle="부가세 납부 정보"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        {data.cards.map((card) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={onClick}
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
-          {data.cards.map((card) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={onClick}
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/business/CEODashboard/sections/WelfareSection.tsx b/src/components/business/CEODashboard/sections/WelfareSection.tsx
index f94a6af4..d9e3f733 100644
--- a/src/components/business/CEODashboard/sections/WelfareSection.tsx
+++ b/src/components/business/CEODashboard/sections/WelfareSection.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { Heart, Gift, Coffee, Smile } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
+import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { WelfareData } from '../types';
 
 // 카드별 아이콘 매핑
@@ -16,38 +15,33 @@ interface WelfareSectionProps {
 
 export function WelfareSection({ data, onCardClick }: WelfareSectionProps) {
   return (
-    <Card>
-      <CardContent className="p-6">
-        <SectionTitle
-          title="복리후생비 현황"
-          badge="info"
-          icon={Heart}
-          colorTheme="emerald"
-        />
+    <CollapsibleDashboardCard
+      icon={<Heart style={{ color: '#ffffff' }} className="h-5 w-5" />}
+      title="복리후생비 현황"
+      subtitle="복리후생비 사용 현황"
+    >
+      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
+        {data.cards.map((card, idx) => (
+          <AmountCardItem
+            key={card.id}
+            card={card}
+            onClick={onCardClick ? () => onCardClick(card.id) : undefined}
+            icon={CARD_ICONS[idx] || Heart}
+            colorTheme={CARD_THEMES[idx] || 'emerald'}
+            showTrend={!!card.previousLabel}
+            trendValue={card.previousLabel}
+            trendDirection="up"
+          />
+        ))}
+      </div>
 
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
-          {data.cards.map((card, idx) => (
-            <AmountCardItem
-              key={card.id}
-              card={card}
-              onClick={onCardClick ? () => onCardClick(card.id) : undefined}
-              icon={CARD_ICONS[idx] || Heart}
-              colorTheme={CARD_THEMES[idx] || 'emerald'}
-              showTrend={!!card.previousLabel}
-              trendValue={card.previousLabel}
-              trendDirection="up"
-            />
+      {data.checkPoints.length > 0 && (
+        <div className="border-t pt-4 space-y-1">
+          {data.checkPoints.map((cp) => (
+            <CheckPointItem key={cp.id} checkpoint={cp} />
           ))}
         </div>
-
-        {data.checkPoints.length > 0 && (
-          <div className="border-t pt-4 space-y-1">
-            {data.checkPoints.map((cp) => (
-              <CheckPointItem key={cp.id} checkpoint={cp} />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      )}
+    </CollapsibleDashboardCard>
   );
-}
\ No newline at end of file
+}

From b3e7ef63f690cea49a6ce6a64511449e76a73e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 24 Feb 2026 22:16:01 +0900
Subject: [PATCH 11/24] =?UTF-8?q?fix:=20Checkout=20=EB=8B=A8=EA=B3=84=20sl?=
 =?UTF-8?q?ackSend=EC=97=90=20tokenCredentialId=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 7780d3f9..a0e2e182 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -9,7 +9,7 @@ pipeline {
     stages {
         stage('Checkout') {
             steps {
-                slackSend channel: '#product_infra', color: '#439FE0',
+                slackSend channel: '#product_infra', color: '#439FE0', tokenCredentialId: 'slack-token',
                     message: "🚀 *react* 빌드 시작 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
                 checkout scm
             }

From 63f22e253812eacd28ec045d523632fc14c28886 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 25 Feb 2026 10:18:53 +0900
Subject: [PATCH 12/24] =?UTF-8?q?fix:Jenkinsfile=20=ED=99=98=EA=B2=BD?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=9D=84=20.env.local=EC=97=90=EC=84=9C=20.e?=
 =?UTF-8?q?nv.production=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Next.js 우선순위 문제 해결 (.env.local이 .env.production을 덮어쓰는 문제)
- Prepare Env, Deploy Development/Stage/Production, Rebuild 5곳 수정
---
 Jenkinsfile | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index a0e2e182..3bc780df 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -20,10 +20,10 @@ pipeline {
                 script {
                     if (env.BRANCH_NAME == 'main') {
                         // main: Stage 빌드 먼저 (승인 후 Production 재빌드)
-                        sh "cp /var/lib/jenkins/env-files/react/.env.stage .env.local"
+                        sh "cp /var/lib/jenkins/env-files/react/.env.stage .env.production"
                     } else {
                         def envFile = "/var/lib/jenkins/env-files/react/.env.${env.BRANCH_NAME}"
-                        sh "cp ${envFile} .env.local"
+                        sh "cp ${envFile} .env.production"
                     }
                 }
             }
@@ -47,7 +47,7 @@ pipeline {
                             --exclude='.git' --exclude='.env*' --exclude='ecosystem.config.*' \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/
-                        scp .env.local ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/.env.local
+                        scp .env.production ${DEPLOY_USER}@114.203.209.83:/home/webservice/react/.env.production
                         ssh ${DEPLOY_USER}@114.203.209.83 'cd /home/webservice/react && pm2 restart sam-react'
                     """
                 }
@@ -64,7 +64,7 @@ pipeline {
                         rsync -az --delete \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/
-                        scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/.env.local
+                        scp .env.production ${DEPLOY_USER}@211.117.60.189:/home/webservice/react-stage/releases/${RELEASE_ID}/.env.production
                         ssh ${DEPLOY_USER}@211.117.60.189 '
                             ln -sfn /home/webservice/react-stage/releases/${RELEASE_ID} /home/webservice/react-stage/current &&
                             cd /home/webservice && pm2 reload sam-front-stage 2>/dev/null || pm2 start react-stage/current/node_modules/.bin/next --name sam-front-stage -- start -p 3100 &&
@@ -90,7 +90,7 @@ pipeline {
         stage('Rebuild for Production') {
             when { branch 'main' }
             steps {
-                sh "cp /var/lib/jenkins/env-files/react/.env.main .env.local"
+                sh "cp /var/lib/jenkins/env-files/react/.env.main .env.production"
                 sh 'npm run build'
             }
         }
@@ -105,7 +105,7 @@ pipeline {
                         rsync -az --delete \
                             .next package.json next.config.ts public node_modules \
                             ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/
-                        scp .env.local ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/.env.local
+                        scp .env.production ${DEPLOY_USER}@211.117.60.189:/home/webservice/react/releases/${RELEASE_ID}/.env.production
                         ssh ${DEPLOY_USER}@211.117.60.189 '
                             ln -sfn /home/webservice/react/releases/${RELEASE_ID} /home/webservice/react/current &&
                             cd /home/webservice && pm2 reload sam-front &&

From f8294509e535cd8e9850ec6be071c9b4ef9a7786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 25 Feb 2026 11:24:39 +0900
Subject: [PATCH 13/24] =?UTF-8?q?ci:Jenkinsfile=20=EB=8F=99=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EB=B0=A9=EC=A7=80=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Jenkinsfile b/Jenkinsfile
index 3bc780df..d3290822 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -1,6 +1,10 @@
 pipeline {
     agent any
 
+    options {
+        disableConcurrentBuilds()
+    }
+
     environment {
         DEPLOY_USER = 'hskwon'
         RELEASE_ID  = new Date().format('yyyyMMdd_HHmmss')

From 41b326eb3a89ebe5319fc0a17861e86f515ebec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 25 Feb 2026 11:30:47 +0900
Subject: [PATCH 14/24] =?UTF-8?q?ci:=EC=9A=B4=EC=98=81=20=EB=B0=B0?=
 =?UTF-8?q?=ED=8F=AC=20=EC=8A=B9=EC=9D=B8=20=EB=8C=80=EA=B8=B0=20Slack=20?=
 =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EC=B6=94=EA=B0=80=20(#product=5Fdeploy)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Jenkinsfile b/Jenkinsfile
index d3290822..336c790d 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -83,6 +83,8 @@ pipeline {
         stage('Production Approval') {
             when { branch 'main' }
             steps {
+                slackSend channel: '#product_deploy', color: '#FF9800', tokenCredentialId: 'slack-token',
+                    message: "🔔 *react* 운영 배포 승인 대기 중\nStage: https://stage.sam.it.kr\n<${env.BUILD_URL}input|승인하러 가기>"
                 timeout(time: 24, unit: 'HOURS') {
                     input message: 'Stage 확인 후 운영 배포를 진행하시겠습니까?\nStage: https://stage.sam.it.kr',
                           ok: '운영 배포 진행'

From 4dc0644f8ddadd83f22cb02ebe93c6dc1646183b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 25 Feb 2026 12:52:14 +0900
Subject: [PATCH 15/24] =?UTF-8?q?chore:=20Slack=20=EC=95=8C=EB=A6=BC?=
 =?UTF-8?q?=EC=97=90=20=EC=BB=A4=EB=B0=8B=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Checkout 단계에서 GIT_COMMIT_MSG 캡처 (git log -1 --pretty=format:'%s')
- 빌드 시작, 승인 대기, 성공, 실패 모든 Slack 메시지에 커밋 제목 포함
- 배포 내용을 Slack에서 바로 확인 가능
---
 Jenkinsfile | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 336c790d..4ccf1c0b 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -13,9 +13,12 @@ pipeline {
     stages {
         stage('Checkout') {
             steps {
-                slackSend channel: '#product_infra', color: '#439FE0', tokenCredentialId: 'slack-token',
-                    message: "🚀 *react* 빌드 시작 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
                 checkout scm
+                script {
+                    env.GIT_COMMIT_MSG = sh(script: "git log -1 --pretty=format:'%s'", returnStdout: true).trim()
+                }
+                slackSend channel: '#product_infra', color: '#439FE0', tokenCredentialId: 'slack-token',
+                    message: "🚀 *react* 빌드 시작 (`${env.BRANCH_NAME}`)\n${env.GIT_COMMIT_MSG}\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
             }
         }
 
@@ -84,7 +87,7 @@ pipeline {
             when { branch 'main' }
             steps {
                 slackSend channel: '#product_deploy', color: '#FF9800', tokenCredentialId: 'slack-token',
-                    message: "🔔 *react* 운영 배포 승인 대기 중\nStage: https://stage.sam.it.kr\n<${env.BUILD_URL}input|승인하러 가기>"
+                    message: "🔔 *react* 운영 배포 승인 대기 중\n${env.GIT_COMMIT_MSG}\nStage: https://stage.sam.it.kr\n<${env.BUILD_URL}input|승인하러 가기>"
                 timeout(time: 24, unit: 'HOURS') {
                     input message: 'Stage 확인 후 운영 배포를 진행하시겠습니까?\nStage: https://stage.sam.it.kr',
                           ok: '운영 배포 진행'
@@ -126,11 +129,11 @@ pipeline {
     post {
         success {
             slackSend channel: '#product_infra', color: 'good', tokenCredentialId: 'slack-token',
-                message: "✅ *react* 배포 성공 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
+                message: "✅ *react* 배포 성공 (`${env.BRANCH_NAME}`)\n${env.GIT_COMMIT_MSG}\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
         }
         failure {
             slackSend channel: '#product_infra', color: 'danger', tokenCredentialId: 'slack-token',
-                message: "❌ *react* 배포 실패 (`${env.BRANCH_NAME}`)\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
+                message: "❌ *react* 배포 실패 (`${env.BRANCH_NAME}`)\n${env.GIT_COMMIT_MSG}\n<${env.BUILD_URL}|빌드 #${env.BUILD_NUMBER}>"
         }
     }
 }
\ No newline at end of file

From 0b41b9f813144a54c384719eeb3dd395e5eadcc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Wed, 25 Feb 2026 14:28:49 +0900
Subject: [PATCH 16/24] =?UTF-8?q?feat:=20=EC=88=9C=EC=84=9C=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=E2=96=B2/=E2=96=BC=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(=ED=84=B0=EC=B9=98=20=EC=A7=80=EC=9B=90)?=
 =?UTF-8?q?=20+=20=EB=8B=A8=EA=B0=80=ED=91=9C=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ReorderButtons 공통 컴포넌트 신규 생성 (molecules)
- 패턴B(리스트): RankManagement, TitleManagement, CategoryManagement
- 패턴A(테이블): ProcessDetail, ProcessForm, ChecklistDetail
- 패턴C(컴포넌트): DraggableSection, DraggableField, HierarchyTab
- 모바일: GripVertical 숨김, ▲/▼ 버튼만 표시
- 데스크톱: GripVertical + ▲/▼ 버튼 모두 표시
- 단가표 단가정보 테이블 overflow-hidden → overflow-x-auto + min-w 적용
---
 CLAUDE.md                                     |  38 +--
 .../quality/qms/components/DayTabs.tsx        |  34 +--
 .../approval/DocumentCreate/index.tsx         |  64 +-----
 .../category-management/index.tsx             |  46 +++-
 .../estimates/EstimateDetailForm.tsx          |  48 ++--
 .../checklist-management/ChecklistDetail.tsx  |  33 ++-
 .../components/DraggableField.tsx             |  14 +-
 .../components/DraggableSection.tsx           |  12 +-
 .../tabs/HierarchyTab/index.tsx               |   5 +-
 src/components/molecules/ReorderButtons.tsx   |  61 +++++
 src/components/molecules/index.ts             |   4 +-
 .../PricingTableForm.tsx                      |  14 +-
 .../process-management/ProcessDetail.tsx      | 214 +++++++++--------
 .../process-management/ProcessForm.tsx        | 217 ++++++++++--------
 .../process-management/RuleModal.tsx          |  16 +-
 .../settings/PermissionManagement/index.tsx   |  12 +-
 .../settings/RankManagement/index.tsx         |  46 +++-
 .../settings/TitleManagement/index.tsx        |  46 +++-
 .../components/DetailActions.tsx              |  30 ++-
 .../IntegratedDetailTemplate/index.tsx        |   4 +-
 .../IntegratedDetailTemplate/types.ts         |  24 +-
 21 files changed, 619 insertions(+), 363 deletions(-)
 create mode 100644 src/components/molecules/ReorderButtons.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
index e7fed7c5..bfc3edcf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -35,32 +35,36 @@ sam_project:
 - `snapshot.txt`, `.DS_Store` 파일은 항상 제외
 - develop에서 자유롭게 커밋 (커밋 메시지 정리 불필요)
 
-### main에 올리기 (기능별 squash merge)
+### main에 올리기 (기능별 squash merge) — 필수 규칙
 사용자가 "main에 올려줘" 또는 특정 기능을 main에 올리라고 지시할 때만 실행.
 **절대 자동으로 main에 push하지 않음.**
 
+**🔴 반드시 기능별로 나눠서 올릴 것. 통째로 squash 금지.**
+
 ```bash
-# 기능별로 squash merge
+# 실행 순서
 git checkout main
-git merge --squash develop   # 또는 cherry-pick으로 특정 커밋만 선별
-git commit -m "feat: [기능명]"
+git pull origin main
+
+# 1. develop 커밋 이력 분석 → 기능별 그룹 분류
+git log --oneline main..develop
+
+# 2. 기능별로 cherry-pick + squash commit (기능 수만큼 반복)
+git cherry-pick --no-commit <기능A커밋1> <기능A커밋2> ...
+git commit -m "feat: [기능A 설명]"
+
+git cherry-pick --no-commit <기능B커밋1> <기능B커밋2> ...
+git commit -m "feat: [기능B 설명]"
+
+# 3. push 후 develop으로 복귀
 git push origin main
 git checkout develop
 ```
 
-기능별로 나눠서 올리는 경우:
-```bash
-# 예: "대시보드랑 거래처 main에 올려줘"
-git checkout main
-git cherry-pick --no-commit <대시보드커밋1> <대시보드커밋2>
-git commit -m "feat: CEO 대시보드 캘린더 기능 구현"
-
-git cherry-pick --no-commit <거래처커밋1> <거래처커밋2>
-git commit -m "feat: 거래처 관리 개선"
-
-git push origin main
-git checkout develop
-```
+**기능 분류 기준**:
+- 같은 도메인/모듈 수정은 하나로 묶기 (예: CEO 대시보드 관련 커밋들)
+- CI/CD, 문서 등 인프라 변경은 별도 커밋 (예: chore: Jenkinsfile 정비)
+- 커밋 메시지 타입: feat(기능), fix(버그), refactor(리팩토링), chore(설정/문서)
 
 **핵심: main에는 기능 단위 커밋만 → 문제 시 `git revert`로 해당 기능만 롤백 가능**
 
diff --git a/src/app/[locale]/(protected)/quality/qms/components/DayTabs.tsx b/src/app/[locale]/(protected)/quality/qms/components/DayTabs.tsx
index 0ac4521c..121e5f3e 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/DayTabs.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/DayTabs.tsx
@@ -26,50 +26,44 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
 
   return (
     <div className="mb-3 md:mb-4 space-y-2 md:space-y-3">
-      {/* 탭 버튼 */}
+      {/* 탭 버튼 - 모바일: 세로(아이콘→텍스트→숫자), 데스크탑: 가로 */}
       <div className="flex gap-2 md:gap-3">
-        {/* 1일차 탭 */}
+        {/* 기준/매뉴얼 심사 탭 */}
         <button
           type="button"
           onClick={() => onDayChange(1)}
           className={cn(
-            'flex-1 flex items-center justify-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
+            'flex-1 flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 py-2 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
             activeDay === 1
               ? 'bg-blue-600 border-blue-600 text-white shadow-lg'
               : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300 hover:bg-blue-50'
           )}
         >
           <Calendar className="h-4 w-4 shrink-0" />
-          <span className="font-medium text-xs sm:text-sm">
-            <span className="hidden sm:inline">기준/매뉴얼 심사</span>
-            <span className="sm:hidden">1일차</span>
-          </span>
+          <span className="font-medium text-xs sm:text-sm">기준/매뉴얼 심사</span>
           <span className={cn(
-            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full ml-1 sm:ml-2 shrink-0',
+            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full shrink-0',
             activeDay === 1 ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'
           )}>
             {day1Progress.completed}/{day1Progress.total}
           </span>
         </button>
 
-        {/* 2일차 탭 */}
+        {/* 로트 추적 심사 탭 */}
         <button
           type="button"
           onClick={() => onDayChange(2)}
           className={cn(
-            'flex-1 flex items-center justify-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
+            'flex-1 flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 py-2 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
             activeDay === 2
               ? 'bg-blue-600 border-blue-600 text-white shadow-lg'
               : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300 hover:bg-blue-50'
           )}
         >
           <Calendar className="h-4 w-4 shrink-0" />
-          <span className="font-medium text-xs sm:text-sm">
-            <span className="hidden sm:inline">로트 추적 심사</span>
-            <span className="sm:hidden">2일차</span>
-          </span>
+          <span className="font-medium text-xs sm:text-sm">로트 추적 심사</span>
           <span className={cn(
-            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full ml-1 sm:ml-2 shrink-0',
+            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full shrink-0',
             activeDay === 2 ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'
           )}>
             {day2Progress.completed}/{day2Progress.total}
@@ -104,10 +98,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
 
         {/* 1일차 진행률 */}
         <div className="flex items-center gap-2 sm:gap-3">
-          <span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
-            <span className="hidden sm:inline">기준/매뉴얼 심사</span>
-            <span className="sm:hidden">1일차</span>
-          </span>
+          <span className="text-xs sm:text-sm text-gray-600 w-20 sm:w-28 shrink-0">기준/매뉴얼 심사</span>
           <div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
             <div
               className={cn(
@@ -127,10 +118,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
 
         {/* 2일차 진행률 */}
         <div className="flex items-center gap-2 sm:gap-3">
-          <span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
-            <span className="hidden sm:inline">로트 추적 심사</span>
-            <span className="sm:hidden">2일차</span>
-          </span>
+          <span className="text-xs sm:text-sm text-gray-600 w-20 sm:w-28 shrink-0">로트 추적 심사</span>
           <div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
             <div
               className={cn(
diff --git a/src/components/approval/DocumentCreate/index.tsx b/src/components/approval/DocumentCreate/index.tsx
index 92a6847b..f7335658 100644
--- a/src/components/approval/DocumentCreate/index.tsx
+++ b/src/components/approval/DocumentCreate/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { useState, useCallback, useEffect, useTransition, useRef } from 'react';
+import { useState, useCallback, useEffect, useTransition, useRef, useMemo } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { usePermission } from '@/hooks/usePermission';
 import { format } from 'date-fns';
-import { Trash2, Send, Save, Eye, Loader2 } from 'lucide-react';
+import { Trash2, Send, Save, Eye } from 'lucide-react';
 import { toast } from 'sonner';
 import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
-import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
+import { IntegratedDetailTemplate, type ActionItem } from '@/components/templates/IntegratedDetailTemplate';
 import {
   documentCreateConfig,
   documentEditConfig,
@@ -24,7 +24,6 @@ import {
   getEmployees,
 } from './actions';
 import { useAuthStore } from '@/stores/authStore';
-import { Button } from '@/components/ui/button';
 import { BasicInfoSection } from './BasicInfoSection';
 import { ApprovalLineSection } from './ApprovalLineSection';
 import { ReferenceSection } from './ReferenceSection';
@@ -546,54 +545,13 @@ export function DocumentCreate() {
     ? documentCopyConfig
     : documentCreateConfig;
 
-  // 헤더 액션 버튼 렌더링
-  const renderHeaderActions = useCallback(() => {
-    return (
-      <div className="flex items-center gap-2">
-        <Button variant="outline" size="sm" onClick={handlePreview}>
-          <Eye className="w-4 h-4 mr-1" />
-          미리보기
-        </Button>
-        {canDelete && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleDelete}
-            disabled={isPending}
-          >
-            <Trash2 className="w-4 h-4 mr-1" />
-            삭제
-          </Button>
-        )}
-        <Button
-          variant="default"
-          size="sm"
-          onClick={handleSubmit}
-          disabled={isPending || !canCreate}
-        >
-          {isPending ? (
-            <Loader2 className="w-4 h-4 mr-1 animate-spin" />
-          ) : (
-            <Send className="w-4 h-4 mr-1" />
-          )}
-          상신
-        </Button>
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={handleSaveDraft}
-          disabled={isPending}
-        >
-          {isPending ? (
-            <Loader2 className="w-4 h-4 mr-1 animate-spin" />
-          ) : (
-            <Save className="w-4 h-4 mr-1" />
-          )}
-          {isEditMode ? '저장' : '임시저장'}
-        </Button>
-      </div>
-    );
-  }, [handlePreview, handleDelete, handleSubmit, handleSaveDraft, isPending, isEditMode, canCreate, canDelete]);
+  // 헤더 액션 버튼 (config 배열 → 모바일 아이콘 패턴 자동 적용)
+  const headerActionItems = useMemo<ActionItem[]>(() => [
+    { icon: Eye, label: '미리보기', onClick: handlePreview, variant: 'outline' },
+    { icon: Trash2, label: '삭제', onClick: handleDelete, variant: 'outline', hidden: !canDelete, disabled: isPending },
+    { icon: Send, label: '상신', onClick: handleSubmit, variant: 'outline', disabled: isPending || !canCreate, loading: isPending },
+    { icon: Save, label: isEditMode ? '저장' : '임시저장', onClick: handleSaveDraft, variant: 'outline', disabled: isPending, loading: isPending },
+  ], [handlePreview, handleDelete, handleSubmit, handleSaveDraft, isPending, isEditMode, canCreate, canDelete]);
 
   // 폼 컨텐츠 렌더링
   const renderFormContent = useCallback(() => {
@@ -622,7 +580,7 @@ export function DocumentCreate() {
         isLoading={isLoadingDocument}
         onBack={handleBack}
         renderForm={renderFormContent}
-        headerActions={renderHeaderActions()}
+        headerActionItems={headerActionItems}
       />
 
       {/* 미리보기 모달 */}
diff --git a/src/components/business/construction/category-management/index.tsx b/src/components/business/construction/category-management/index.tsx
index 7108655a..065cf608 100644
--- a/src/components/business/construction/category-management/index.tsx
+++ b/src/components/business/construction/category-management/index.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { FolderTree, Plus, GripVertical, Pencil, Trash2, Loader2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -206,6 +207,33 @@ export function CategoryManagement() {
     setDraggedItem(index);
   };
 
+  // 화살표 버튼으로 순서 변경
+  const handleMoveItem = async (fromIndex: number, toIndex: number) => {
+    const newCategories = [...categories];
+    const [moved] = newCategories.splice(fromIndex, 1);
+    newCategories.splice(toIndex, 0, moved);
+    const reordered = newCategories.map((category, idx) => ({ ...category, order: idx + 1 }));
+    setCategories(reordered);
+
+    try {
+      const items = reordered.map((category, idx) => ({
+        id: category.id,
+        sort_order: idx + 1,
+      }));
+      const result = await reorderCategories(items);
+      if (result.success) {
+        toast.success('순서가 변경되었습니다.');
+      } else {
+        toast.error(result.error || '순서 변경에 실패했습니다.');
+        loadCategories();
+      }
+    } catch (error) {
+      if (isNextRedirectError(error)) throw error;
+      toast.error('순서 변경에 실패했습니다.');
+      loadCategories();
+    }
+  };
+
   // 키보드로 추가 (한글 IME 조합 중에는 무시)
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
@@ -217,7 +245,7 @@ export function CategoryManagement() {
     <PageLayout>
       <PageHeader
         title="카테고리관리"
-        description="카테고리를 등록하고 관리합니다. 드래그하여 순서를 변경할 수 있습니다."
+        description="카테고리를 등록하고 관리합니다. 화살표 버튼 또는 드래그하여 순서를 변경할 수 있습니다."
         icon={FolderTree}
       />
 
@@ -267,8 +295,18 @@ export function CategoryManagement() {
                       draggedItem === index ? 'opacity-50 bg-muted' : ''
                     }`}
                   >
-                    {/* 드래그 핸들 */}
-                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    {/* 드래그 핸들 (PC만) */}
+                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0 hidden md:block" />
+
+                    {/* 순서 변경 버튼 */}
+                    <ReorderButtons
+                      onMoveUp={() => handleMoveItem(index, index - 1)}
+                      onMoveDown={() => handleMoveItem(index, index + 1)}
+                      isFirst={index === 0}
+                      isLast={index === categories.length - 1}
+                      disabled={isSubmitting}
+                      size="xs"
+                    />
 
                     {/* 순서 번호 */}
                     <span className="text-sm text-muted-foreground w-8">
@@ -316,7 +354,7 @@ export function CategoryManagement() {
 
         {/* 안내 문구 */}
         <p className="text-sm text-muted-foreground">
-          ※ 카테고리 순서는 드래그 앤 드롭으로 변경할 수 있습니다.
+          ※ 화살표 버튼으로 순서를 변경할 수 있습니다.
         </p>
       </div>
 
diff --git a/src/components/business/construction/estimates/EstimateDetailForm.tsx b/src/components/business/construction/estimates/EstimateDetailForm.tsx
index 9789e0c7..f8281280 100644
--- a/src/components/business/construction/estimates/EstimateDetailForm.tsx
+++ b/src/components/business/construction/estimates/EstimateDetailForm.tsx
@@ -3,13 +3,12 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import { Loader2 } from 'lucide-react';
+import { FileText, Stamp, Gavel, Trash2, Save } from 'lucide-react';
 import { getExpenseItemOptions, updateEstimate, type ExpenseItemOption } from './actions';
 import { createBiddingFromEstimate } from '../bidding/actions';
 import { useAuthStore } from '@/stores/authStore';
-import { Button } from '@/components/ui/button';
 import { ConfirmDialog, DeleteConfirmDialog, SaveConfirmDialog } from '@/components/ui/confirm-dialog';
-import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
+import { IntegratedDetailTemplate, type ActionItem } from '@/components/templates/IntegratedDetailTemplate';
 import { estimateConfig } from './estimateConfig';
 import { toast } from 'sonner';
 import type {
@@ -541,38 +540,19 @@ export default function EstimateDetailForm({
     }));
   }, []);
 
-  // ===== 헤더 버튼 =====
-  const renderHeaderActions = useCallback(() => {
+  // ===== 헤더 버튼 (config 배열 → 모바일 아이콘 패턴 자동 적용) =====
+  const headerActionItems = useMemo<ActionItem[]>(() => {
     if (isViewMode) {
-      return (
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => setShowDocumentModal(true)}>
-            견적서 보기
-          </Button>
-          <Button variant="outline" onClick={() => setShowApprovalModal(true)}>
-            전자결재
-          </Button>
-          <Button variant="outline" onClick={handleRegisterBidding} className="text-green-600 border-green-200 hover:bg-green-50">
-            입찰 등록
-          </Button>
-        </div>
-      );
+      return [
+        { icon: FileText, label: '견적서 보기', onClick: () => setShowDocumentModal(true), variant: 'outline' },
+        { icon: Stamp, label: '전자결재', onClick: () => setShowApprovalModal(true), variant: 'outline' },
+        { icon: Gavel, label: '입찰 등록', onClick: handleRegisterBidding, variant: 'outline', className: 'text-green-600 border-green-200 hover:bg-green-50' },
+      ];
     }
-    return (
-      <div className="flex gap-2">
-        <Button
-          variant="outline"
-          className="text-red-500 border-red-200 hover:bg-red-50"
-          onClick={handleDelete}
-        >
-          삭제
-        </Button>
-        <Button onClick={handleSave} className="bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
-          {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-          저장
-        </Button>
-      </div>
-    );
+    return [
+      { icon: Trash2, label: '삭제', onClick: handleDelete, variant: 'outline', className: 'text-red-500 border-red-200 hover:bg-red-50' },
+      { icon: Save, label: '저장', onClick: handleSave, variant: 'default', className: 'bg-blue-500 hover:bg-blue-600', disabled: isLoading, loading: isLoading },
+    ];
   }, [isViewMode, isLoading, handleDelete, handleSave, handleRegisterBidding]);
 
   // ===== 컨텐츠 렌더링 =====
@@ -694,7 +674,7 @@ export default function EstimateDetailForm({
         onEdit={handleEdit}
         renderView={renderContent}
         renderForm={renderContent}
-        headerActions={renderHeaderActions()}
+        headerActionItems={headerActionItems}
       />
 
       {/* 전자결재 모달 */}
diff --git a/src/components/checklist-management/ChecklistDetail.tsx b/src/components/checklist-management/ChecklistDetail.tsx
index f71ea8e3..90ed4aab 100644
--- a/src/components/checklist-management/ChecklistDetail.tsx
+++ b/src/components/checklist-management/ChecklistDetail.tsx
@@ -12,6 +12,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { ArrowLeft, Edit, GripVertical, Plus, Trash2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -144,6 +145,23 @@ export function ChecklistDetail({ checklist }: ChecklistDetailProps) {
     [dragIndex, handleDragEnd, checklist.id]
   );
 
+  // 화살표 버튼으로 순서 변경
+  const handleMoveItem = useCallback((fromIndex: number, toIndex: number) => {
+    setItems((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+      const reordered = updated.map((item, i) => ({ ...item, order: i + 1 }));
+
+      reorderChecklistItems(
+        checklist.id,
+        reordered.map((it) => ({ id: it.id, order: it.order }))
+      );
+
+      return reordered;
+    });
+  }, [checklist.id]);
+
   return (
     <PageLayout>
       <PageHeader title="점검표 상세" />
@@ -204,7 +222,7 @@ export function ChecklistDetail({ checklist }: ChecklistDetailProps) {
                 <table className="w-full">
                   <thead>
                     <tr className="border-b bg-muted/30">
-                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
                       <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                         No.
                       </th>
@@ -242,10 +260,19 @@ export function ChecklistDetail({ checklist }: ChecklistDetailProps) {
                         }`}
                       >
                         <td
-                          className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
+                          className="w-16 px-3 py-3 text-center"
                           onClick={(e) => e.stopPropagation()}
                         >
-                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                          <div className="flex items-center justify-center gap-0.5">
+                            <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab active:cursor-grabbing" />
+                            <ReorderButtons
+                              onMoveUp={() => handleMoveItem(index, index - 1)}
+                              onMoveDown={() => handleMoveItem(index, index + 1)}
+                              isFirst={index === 0}
+                              isLast={index === items.length - 1}
+                              size="xs"
+                            />
+                          </div>
                         </td>
                         <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
                           {index + 1}
diff --git a/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx b/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx
index c96e9fb1..879c2476 100644
--- a/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx
+++ b/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx
@@ -7,6 +7,7 @@ import {
   Edit,
   Unlink
 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 
 // 입력방식 옵션 (ItemMasterDataManagement에서 사용하는 상수)
 const INPUT_TYPE_OPTIONS = [
@@ -25,9 +26,11 @@ interface DraggableFieldProps {
   moveField: (dragFieldId: number, hoverFieldId: number) => void;
   onDelete: () => void;
   onEdit?: () => void;
+  prevFieldId?: number;
+  nextFieldId?: number;
 }
 
-export function DraggableField({ field, index, moveField, onDelete, onEdit }: DraggableFieldProps) {
+export function DraggableField({ field, index, moveField, onDelete, onEdit, prevFieldId, nextFieldId }: DraggableFieldProps) {
   const [isDragging, setIsDragging] = useState(false);
 
   const handleDragStart = (e: React.DragEvent) => {
@@ -79,7 +82,14 @@ export function DraggableField({ field, index, moveField, onDelete, onEdit }: Dr
     >
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <GripVertical className="h-4 w-4 text-gray-400" />
+          <GripVertical className="h-4 w-4 text-gray-400 hidden md:block" />
+          <ReorderButtons
+            onMoveUp={() => prevFieldId !== undefined && moveField(field.id, prevFieldId)}
+            onMoveDown={() => nextFieldId !== undefined && moveField(field.id, nextFieldId)}
+            isFirst={prevFieldId === undefined}
+            isLast={nextFieldId === undefined}
+            size="xs"
+          />
           <span className="text-sm">{field.field_name}</span>
           <Badge variant="outline" className="text-xs">
             {INPUT_TYPE_OPTIONS.find(t => t.value === field.field_type)?.label || field.field_type}
diff --git a/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx b/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx
index 0e2171f9..0db73067 100644
--- a/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx
+++ b/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx
@@ -10,10 +10,12 @@ import {
   X,
   Unlink
 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 
 interface DraggableSectionProps {
   section: ItemSection;
   index: number;
+  totalSections: number;
   moveSection: (dragIndex: number, hoverIndex: number) => void;
   onDelete: () => void;
   onEditTitle: (id: number, title: string) => void;
@@ -28,6 +30,7 @@ interface DraggableSectionProps {
 export function DraggableSection({
   section,
   index,
+  totalSections,
   moveSection,
   onDelete,
   onEditTitle,
@@ -87,7 +90,14 @@ export function DraggableSection({
       <div className="bg-blue-50 border-b p-3">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 flex-1 min-w-0">
-            <GripVertical className="h-4 w-4 text-gray-400" style={{ cursor: 'move' }} />
+            <GripVertical className="h-4 w-4 text-gray-400 hidden md:block" style={{ cursor: 'move' }} />
+            <ReorderButtons
+              onMoveUp={() => moveSection(index, index - 1)}
+              onMoveDown={() => moveSection(index, index + 1)}
+              isFirst={index === 0}
+              isLast={index === totalSections - 1}
+              size="xs"
+            />
             <FileText className="h-4 w-4 text-blue-600" />
             {editingSectionId === section.id ? (
               <div className="flex items-center gap-2 flex-1">
diff --git a/src/components/items/ItemMasterDataManagement/tabs/HierarchyTab/index.tsx b/src/components/items/ItemMasterDataManagement/tabs/HierarchyTab/index.tsx
index be2e2f3a..cb01efe5 100644
--- a/src/components/items/ItemMasterDataManagement/tabs/HierarchyTab/index.tsx
+++ b/src/components/items/ItemMasterDataManagement/tabs/HierarchyTab/index.tsx
@@ -380,6 +380,7 @@ export function HierarchyTab({
                         key={`section-${section.id}-${index}`}
                         section={section}
                         index={index}
+                        totalSections={selectedPage.sections.length}
                         moveSection={(dragIndex, hoverIndex) => {
                           moveSection(dragIndex, hoverIndex);
                         }}
@@ -469,7 +470,7 @@ export function HierarchyTab({
                             ) : (
                               section.fields
                                 .sort((a, b) => (a.order_no ?? 0) - (b.order_no ?? 0))
-                                .map((field, fieldIndex) => (
+                                .map((field, fieldIndex, sortedFields) => (
                                   <DraggableField
                                     key={`${section.id}-${field.id}-${fieldIndex}`}
                                     field={field}
@@ -479,6 +480,8 @@ export function HierarchyTab({
                                       setConfirmAction({ type: 'unlinkField', pageId: String(selectedPage.id), sectionId: String(section.id), fieldId: String(field.id) });
                                     }}
                                     onEdit={() => handleEditField(String(section.id), field)}
+                                    prevFieldId={fieldIndex > 0 ? sortedFields[fieldIndex - 1].id : undefined}
+                                    nextFieldId={fieldIndex < sortedFields.length - 1 ? sortedFields[fieldIndex + 1].id : undefined}
                                   />
                                 ))
                             )}
diff --git a/src/components/molecules/ReorderButtons.tsx b/src/components/molecules/ReorderButtons.tsx
new file mode 100644
index 00000000..26c1ed1a
--- /dev/null
+++ b/src/components/molecules/ReorderButtons.tsx
@@ -0,0 +1,61 @@
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ReorderButtonsProps {
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  isFirst: boolean;
+  isLast: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'xs';
+  className?: string;
+}
+
+export function ReorderButtons({
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  disabled = false,
+  size = 'sm',
+  className,
+}: ReorderButtonsProps) {
+  const iconSize = size === 'xs' ? 'h-3 w-3' : 'h-4 w-4';
+  const btnSize = size === 'xs' ? 'h-5 w-5' : 'h-6 w-6';
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(btnSize, 'p-0')}
+        disabled={disabled || isFirst}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onMoveUp();
+        }}
+      >
+        <ChevronUp className={iconSize} />
+        <span className="sr-only">위로 이동</span>
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(btnSize, 'p-0')}
+        disabled={disabled || isLast}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onMoveDown();
+        }}
+      >
+        <ChevronDown className={iconSize} />
+        <span className="sr-only">아래로 이동</span>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 0d81d69a..18d26d22 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -13,4 +13,6 @@ export { YearQuarterFilter } from "./YearQuarterFilter";
 export type { Quarter } from "./YearQuarterFilter";
 
 export { GenericCRUDDialog } from "./GenericCRUDDialog";
-export type { GenericCRUDDialogProps, CRUDFieldDefinition } from "./GenericCRUDDialog";
\ No newline at end of file
+export type { GenericCRUDDialogProps, CRUDFieldDefinition } from "./GenericCRUDDialog";
+
+export { ReorderButtons } from "./ReorderButtons";
\ No newline at end of file
diff --git a/src/components/pricing-table-management/PricingTableForm.tsx b/src/components/pricing-table-management/PricingTableForm.tsx
index 90a6a4e9..46b57e2c 100644
--- a/src/components/pricing-table-management/PricingTableForm.tsx
+++ b/src/components/pricing-table-management/PricingTableForm.tsx
@@ -346,23 +346,23 @@ export function PricingTableForm({ mode, initialData }: PricingTableFormProps) {
             </div>
 
             {/* 거래등급별 판매단가 */}
-            <div className="border rounded-lg overflow-hidden">
-              <table className="w-full">
+            <div className="border rounded-lg overflow-x-auto">
+              <table className="w-full min-w-[600px]">
                 <thead>
                   <tr className="border-b bg-muted/30">
-                    <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground w-[140px]">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground min-w-[140px]">
                       거래등급
                     </th>
-                    <th className="px-4 py-3 text-right text-xs font-medium text-muted-foreground w-[120px]">
+                    <th className="px-4 py-3 text-right text-xs font-medium text-muted-foreground min-w-[120px]">
                       마진율
                     </th>
-                    <th className="px-4 py-3 text-right text-xs font-medium text-muted-foreground w-[120px]">
+                    <th className="px-4 py-3 text-right text-xs font-medium text-muted-foreground min-w-[120px]">
                       판매단가
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground min-w-[140px]">
                       비고
                     </th>
-                    <th className="px-4 py-3 text-center text-xs font-medium text-muted-foreground w-[80px]">
+                    <th className="px-4 py-3 text-center text-xs font-medium text-muted-foreground min-w-[60px]">
                       <Button size="sm" variant="outline" onClick={handleAddRow} className="h-7 text-xs">
                         추가
                       </Button>
diff --git a/src/components/process-management/ProcessDetail.tsx b/src/components/process-management/ProcessDetail.tsx
index 06325e84..2c3bffaf 100644
--- a/src/components/process-management/ProcessDetail.tsx
+++ b/src/components/process-management/ProcessDetail.tsx
@@ -11,7 +11,8 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, Edit, GripVertical, Plus, Package, Trash2 } from 'lucide-react';
+import { ArrowLeft, Edit, GripVertical, Plus, Trash2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -49,7 +50,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
   // 드래그 상태
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
-  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
+  const dragNodeRef = useRef<HTMLElement | null>(null);
 
   // 개별 품목 목록 추출
   const individualItems = process.classificationRules
@@ -103,7 +104,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
   };
 
   // ===== 드래그&드롭 (HTML5 네이티브) =====
-  const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+  const handleDragStart = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
     setDragIndex(index);
     dragNodeRef.current = e.currentTarget;
     e.dataTransfer.effectAllowed = 'move';
@@ -115,7 +116,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
     });
   }, []);
 
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
     setDragOverIndex(index);
@@ -130,7 +131,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
     dragNodeRef.current = null;
   }, []);
 
-  const handleDrop = useCallback((e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
+  const handleDrop = useCallback((e: React.DragEvent<HTMLElement>, dropIndex: number) => {
     e.preventDefault();
     if (dragIndex === null || dragIndex === dropIndex) return;
 
@@ -152,6 +153,23 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
     handleDragEnd();
   }, [dragIndex, handleDragEnd, process.id]);
 
+  // 화살표 버튼으로 순서 변경
+  const handleMoveStep = useCallback((fromIndex: number, toIndex: number) => {
+    setSteps((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+      const reordered = updated.map((step, i) => ({ ...step, order: i + 1 }));
+
+      reorderProcessSteps(
+        process.id,
+        reordered.map((s) => ({ id: s.id, order: s.order }))
+      );
+
+      return reordered;
+    });
+  }, [process.id]);
+
   return (
     <PageLayout>
       {/* 헤더 */}
@@ -165,7 +183,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
           </CardHeader>
           <CardContent className="pt-6">
             {/* Row 1: 공정번호 | 공정명 | 담당부서 | 담당자 */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
               <div className="space-y-1">
                 <div className="text-sm text-muted-foreground">공정번호</div>
                 <div className="font-medium">{process.processCode}</div>
@@ -184,7 +202,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
               </div>
             </div>
             {/* Row 2: 구분 | 생산일자 | 상태 */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
               <div className="space-y-1">
                 <div className="text-sm text-muted-foreground">구분</div>
                 <div className="font-medium">{process.processCategory || '없음'}</div>
@@ -203,7 +221,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
               </div>
             </div>
             {/* Row 3: 중간검사여부 | 중간검사양식 | 작업일지여부 | 작업일지양식 */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
               <div className="space-y-1">
                 <div className="text-sm text-muted-foreground">중간검사 여부</div>
                 <Badge variant={process.needsInspection ? 'default' : 'secondary'}>
@@ -234,43 +252,37 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
 
         {/* 품목 설정 정보 */}
         <Card>
-          <CardHeader className="bg-muted/50">
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-base flex items-center gap-2">
-                  <Package className="h-4 w-4" />
-                  품목 설정 정보
-                </CardTitle>
-                <p className="text-sm text-muted-foreground mt-1">
-                  품목을 선택하면 이 공정으로 분류됩니다
-                </p>
-              </div>
-              <div className="flex items-center gap-3">
-                <Badge variant="outline" className="text-sm">
-                  {itemCount}개
-                </Badge>
-                <Button variant="outline" size="sm" onClick={handleEdit}>
-                  공정 품목 선택
-                </Button>
-              </div>
+          <CardHeader className="bg-muted/50 py-3">
+            <div className="flex items-center gap-2 flex-wrap">
+              <CardTitle className="text-base shrink-0">
+                품목 설정 정보
+              </CardTitle>
+              <Badge variant="outline" className="text-xs">
+                {itemCount}개
+              </Badge>
+              <Button variant="outline" size="sm" onClick={handleEdit} className="shrink-0">
+                공정 품목 선택
+              </Button>
             </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              품목을 선택하면 이 공정으로 분류됩니다
+            </p>
           </CardHeader>
           {individualItems.length > 0 && (
-            <CardContent className="pt-4">
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+            <CardContent className="pt-4 max-h-[240px] md:max-h-none overflow-y-auto">
+              <div className="flex flex-wrap gap-1.5">
                 {individualItems.map((item) => (
                   <div
                     key={item.id}
-                    className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5 text-sm"
+                    className="inline-flex items-center gap-1.5 rounded-full border bg-muted/30 pl-3 pr-1.5 py-1 text-xs"
                   >
-                    <span className="font-mono text-muted-foreground shrink-0">{item.code}</span>
-                    <span className="truncate flex-1">{item.name}</span>
+                    <span className="font-mono">{item.code}</span>
                     <button
                       type="button"
                       onClick={() => handleRemoveItem(item.id)}
-                      className="shrink-0 ml-auto rounded-sm text-muted-foreground/50 hover:text-destructive transition-colors"
+                      className="shrink-0 rounded-full p-0.5 text-muted-foreground/50 hover:text-destructive transition-colors"
                     >
-                      <Trash2 className="h-3.5 w-3.5" />
+                      <Trash2 className="h-3 w-3" />
                     </button>
                   </div>
                 ))}
@@ -307,34 +319,59 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
                 등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.
               </div>
             ) : (
-              <div className="overflow-x-auto">
+              <>
+              {/* 모바일: 카드 리스트 */}
+              <div className="md:hidden divide-y">
+                {steps.map((step, index) => (
+                  <div
+                    key={step.id}
+                    draggable
+                    onDragStart={(e) => handleDragStart(e, index)}
+                    onDragOver={(e) => handleDragOver(e, index)}
+                    onDragEnd={handleDragEnd}
+                    onDrop={(e) => handleDrop(e, index)}
+                    onClick={() => handleStepClick(step.id)}
+                    className={`flex items-center gap-2 px-3 py-2.5 cursor-pointer hover:bg-muted/50 ${
+                      dragOverIndex === index && dragIndex !== index
+                        ? 'border-t-2 border-t-primary'
+                        : ''
+                    }`}
+                  >
+                    <ReorderButtons
+                      onMoveUp={() => handleMoveStep(index, index - 1)}
+                      onMoveDown={() => handleMoveStep(index, index + 1)}
+                      isFirst={index === 0}
+                      isLast={index === steps.length - 1}
+                      size="xs"
+                    />
+                    <span className="text-xs text-muted-foreground w-5 shrink-0">{index + 1}</span>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-xs font-mono text-muted-foreground">{step.stepCode}</span>
+                        <span className="text-sm font-medium truncate">{step.stepName}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <Badge variant={step.isRequired ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">필수</Badge>
+                      <Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">승인</Badge>
+                      <Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">검사</Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {/* 데스크탑: 테이블 */}
+              <div className="hidden md:block overflow-x-auto">
                 <table className="w-full">
                   <thead>
                     <tr className="border-b bg-muted/30">
-                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        {/* 드래그 핸들 헤더 */}
-                      </th>
-                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        No.
-                      </th>
-                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
-                        단계코드
-                      </th>
-                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
-                        단계명
-                      </th>
-                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        필수여부
-                      </th>
-                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        승인여부
-                      </th>
-                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        검사여부
-                      </th>
-                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                        사용
-                      </th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">No.</th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계코드</th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계명</th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">필수여부</th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">승인여부</th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">검사여부</th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">사용</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -353,58 +390,39 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
                             : ''
                         }`}
                       >
-                        <td
-                          className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                        <td className="w-16 px-3 py-3 text-center" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex items-center justify-center gap-0.5">
+                            <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab active:cursor-grabbing" />
+                            <ReorderButtons
+                              onMoveUp={() => handleMoveStep(index, index - 1)}
+                              onMoveDown={() => handleMoveStep(index, index + 1)}
+                              isFirst={index === 0}
+                              isLast={index === steps.length - 1}
+                              size="xs"
+                            />
+                          </div>
                         </td>
-                        <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
-                          {index + 1}
-                        </td>
-                        <td className="px-3 py-3 text-sm font-mono">
-                          {step.stepCode}
-                        </td>
-                        <td className="px-3 py-3 text-sm font-medium">
-                          {step.stepName}
+                        <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">{index + 1}</td>
+                        <td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
+                        <td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
+                        <td className="w-20 px-3 py-3 text-center">
+                          <Badge variant={step.isRequired ? 'default' : 'outline'} className="text-xs">{step.isRequired ? 'Y' : 'N'}</Badge>
                         </td>
                         <td className="w-20 px-3 py-3 text-center">
-                          <Badge
-                            variant={step.isRequired ? 'default' : 'outline'}
-                            className="text-xs"
-                          >
-                            {step.isRequired ? 'Y' : 'N'}
-                          </Badge>
+                          <Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-xs">{step.needsApproval ? 'Y' : 'N'}</Badge>
                         </td>
                         <td className="w-20 px-3 py-3 text-center">
-                          <Badge
-                            variant={step.needsApproval ? 'default' : 'outline'}
-                            className="text-xs"
-                          >
-                            {step.needsApproval ? 'Y' : 'N'}
-                          </Badge>
-                        </td>
-                        <td className="w-20 px-3 py-3 text-center">
-                          <Badge
-                            variant={step.needsInspection ? 'default' : 'outline'}
-                            className="text-xs"
-                          >
-                            {step.needsInspection ? 'Y' : 'N'}
-                          </Badge>
+                          <Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-xs">{step.needsInspection ? 'Y' : 'N'}</Badge>
                         </td>
                         <td className="w-16 px-3 py-3 text-center">
-                          <Badge
-                            variant={step.isActive ? 'default' : 'secondary'}
-                            className="text-xs"
-                          >
-                            {step.isActive ? 'Y' : 'N'}
-                          </Badge>
+                          <Badge variant={step.isActive ? 'default' : 'secondary'} className="text-xs">{step.isActive ? 'Y' : 'N'}</Badge>
                         </td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
+              </>
             )}
           </CardContent>
         </Card>
diff --git a/src/components/process-management/ProcessForm.tsx b/src/components/process-management/ProcessForm.tsx
index df713219..b5125085 100644
--- a/src/components/process-management/ProcessForm.tsx
+++ b/src/components/process-management/ProcessForm.tsx
@@ -13,7 +13,8 @@
 
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, GripVertical, Trash2, Package } from 'lucide-react';
+import { Plus, GripVertical, Trash2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { processCreateConfig, processEditConfig } from './processConfig';
 import { Button } from '@/components/ui/button';
@@ -261,7 +262,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
   // 드래그&드롭
   const dragNodeRef = useRef<HTMLElement | null>(null);
 
-  const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+  const handleDragStart = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
     setDragIndex(index);
     dragNodeRef.current = e.currentTarget;
     e.dataTransfer.effectAllowed = 'move';
@@ -272,7 +273,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
     });
   }, []);
 
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
     setDragOverIndex(index);
@@ -287,8 +288,18 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
     setDragOverIndex(null);
   }, []);
 
+  // 화살표 버튼으로 순서 변경 (로컬 state만 업데이트)
+  const handleMoveStep = useCallback((fromIndex: number, toIndex: number) => {
+    setSteps((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+      return updated.map((step, i) => ({ ...step, order: i + 1 }));
+    });
+  }, []);
+
   const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
+    (e: React.DragEvent<HTMLElement>, dropIndex: number) => {
       e.preventDefault();
       if (dragIndex === null || dragIndex === dropIndex) {
         handleDragEnd();
@@ -388,7 +399,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
             </CardHeader>
             <CardContent className="pt-6">
               {/* Row 1: 공정번호(수정시) | 공정명 | 담당부서 | 담당자 */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                 {isEdit && initialData?.processCode && (
                   <div className="space-y-2">
                     <Label>공정번호</Label>
@@ -439,7 +450,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
                 </div>
               </div>
               {/* Row 2: 구분 | 생산일자 | 상태 */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
                 <div className="space-y-2">
                   <Label>구분</Label>
                   <Select
@@ -491,7 +502,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
                 </div>
               </div>
               {/* Row 3: 중간검사여부 | 중간검사양식 | 작업일지여부 | 작업일지양식 */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
                 <div className="space-y-2">
                   <Label>중간검사 여부</Label>
                   <Select
@@ -570,48 +581,43 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
 
           {/* 품목 설정 정보 */}
           <Card>
-            <CardHeader className="bg-muted/50">
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle className="text-base flex items-center gap-2">
-                    <Package className="h-4 w-4" />
-                    품목 설정 정보
-                  </CardTitle>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    품목을 선택하면 이 공정으로 분류됩니다
-                  </p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <Badge variant="outline" className="text-sm">
-                    {itemCount}개
-                  </Badge>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setRuleModalOpen(true)}
-                  >
-                    공정 품목 선택
-                  </Button>
-                </div>
+            <CardHeader className="bg-muted/50 py-3">
+              <div className="flex items-center gap-2 flex-wrap">
+                <CardTitle className="text-base shrink-0">
+                  품목 설정 정보
+                </CardTitle>
+                <Badge variant="outline" className="text-xs">
+                  {itemCount}개
+                </Badge>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setRuleModalOpen(true)}
+                  className="shrink-0"
+                >
+                  공정 품목 선택
+                </Button>
               </div>
+              <p className="text-sm text-muted-foreground mt-1">
+                품목을 선택하면 이 공정으로 분류됩니다
+              </p>
             </CardHeader>
             {individualItems.length > 0 && (
-              <CardContent className="pt-4">
-                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+              <CardContent className="pt-4 max-h-[240px] md:max-h-none overflow-y-auto">
+                <div className="flex flex-wrap gap-1.5">
                   {individualItems.map((item) => (
                     <div
                       key={item.id}
-                      className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5 text-sm"
+                      className="inline-flex items-center gap-1.5 rounded-full border bg-muted/30 pl-3 pr-1.5 py-1 text-xs"
                     >
-                      <span className="font-mono text-muted-foreground shrink-0">{item.code}</span>
-                      <span className="truncate flex-1">{item.name}</span>
+                      <span className="font-mono">{item.code}</span>
                       <button
                         type="button"
                         onClick={() => handleRemoveItem(item.id)}
-                        className="shrink-0 ml-auto rounded-sm text-muted-foreground/50 hover:text-destructive transition-colors"
+                        className="shrink-0 rounded-full p-0.5 text-muted-foreground/50 hover:text-destructive transition-colors"
                       >
-                        <Trash2 className="h-3.5 w-3.5" />
+                        <Trash2 className="h-3 w-3" />
                       </button>
                     </div>
                   ))}
@@ -648,32 +654,71 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
                     : '공정을 먼저 등록한 후 단계를 추가할 수 있습니다.'}
                 </div>
               ) : (
-                <div className="overflow-x-auto">
+                <>
+                {/* 모바일: 카드 리스트 */}
+                <div className="md:hidden divide-y">
+                  {steps.map((step, index) => (
+                    <div
+                      key={step.id}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, index)}
+                      onDragOver={(e) => handleDragOver(e, index)}
+                      onDragEnd={handleDragEnd}
+                      onDrop={(e) => handleDrop(e, index)}
+                      onClick={() => handleStepClick(step.id)}
+                      className={`flex items-center gap-2 px-3 py-2.5 cursor-pointer hover:bg-muted/50 ${
+                        dragOverIndex === index && dragIndex !== index
+                          ? 'border-t-2 border-t-primary'
+                          : ''
+                      }`}
+                    >
+                      <ReorderButtons
+                        onMoveUp={() => handleMoveStep(index, index - 1)}
+                        onMoveDown={() => handleMoveStep(index, index + 1)}
+                        isFirst={index === 0}
+                        isLast={index === steps.length - 1}
+                        size="xs"
+                      />
+                      <span className="text-xs text-muted-foreground w-5 shrink-0">{index + 1}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-xs font-mono text-muted-foreground">{step.stepCode}</span>
+                          <span className="text-sm font-medium truncate">{step.stepName}</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0">
+                        <Badge variant={step.isRequired ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">필수</Badge>
+                        <Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">승인</Badge>
+                        <Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">검사</Badge>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteStep(step.id);
+                        }}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+                {/* 데스크탑: 테이블 */}
+                <div className="hidden md:block overflow-x-auto">
                   <table className="w-full">
                     <thead>
                       <tr className="border-b bg-muted/30">
-                        <th className="w-10 px-3 py-3" />
-                        <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                          No.
-                        </th>
-                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
-                          단계코드
-                        </th>
-                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
-                          단계명
-                        </th>
-                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                          필수여부
-                        </th>
-                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                          승인여부
-                        </th>
-                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                          검사여부
-                        </th>
-                        <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
-                          사용
-                        </th>
+                        <th className="w-16 px-3 py-3" />
+                        <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">No.</th>
+                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계코드</th>
+                        <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계명</th>
+                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">필수여부</th>
+                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">승인여부</th>
+                        <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">검사여부</th>
+                        <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">사용</th>
                         <th className="w-12 px-3 py-3" />
                       </tr>
                     </thead>
@@ -693,48 +738,32 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
                               : ''
                           }`}
                         >
-                          <td
-                            className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
-                          </td>
-                          <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
-                            {index + 1}
+                          <td className="w-16 px-3 py-3 text-center" onClick={(e) => e.stopPropagation()}>
+                            <div className="flex items-center justify-center gap-0.5">
+                              <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab active:cursor-grabbing" />
+                              <ReorderButtons
+                                onMoveUp={() => handleMoveStep(index, index - 1)}
+                                onMoveDown={() => handleMoveStep(index, index + 1)}
+                                isFirst={index === 0}
+                                isLast={index === steps.length - 1}
+                                size="xs"
+                              />
+                            </div>
                           </td>
+                          <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">{index + 1}</td>
                           <td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
                           <td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
                           <td className="w-20 px-3 py-3 text-center">
-                            <Badge
-                              variant={step.isRequired ? 'default' : 'outline'}
-                              className="text-xs"
-                            >
-                              {step.isRequired ? 'Y' : 'N'}
-                            </Badge>
+                            <Badge variant={step.isRequired ? 'default' : 'outline'} className="text-xs">{step.isRequired ? 'Y' : 'N'}</Badge>
                           </td>
                           <td className="w-20 px-3 py-3 text-center">
-                            <Badge
-                              variant={step.needsApproval ? 'default' : 'outline'}
-                              className="text-xs"
-                            >
-                              {step.needsApproval ? 'Y' : 'N'}
-                            </Badge>
+                            <Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-xs">{step.needsApproval ? 'Y' : 'N'}</Badge>
                           </td>
                           <td className="w-20 px-3 py-3 text-center">
-                            <Badge
-                              variant={step.needsInspection ? 'default' : 'outline'}
-                              className="text-xs"
-                            >
-                              {step.needsInspection ? 'Y' : 'N'}
-                            </Badge>
+                            <Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-xs">{step.needsInspection ? 'Y' : 'N'}</Badge>
                           </td>
                           <td className="w-16 px-3 py-3 text-center">
-                            <Badge
-                              variant={step.isActive ? 'default' : 'secondary'}
-                              className="text-xs"
-                            >
-                              {step.isActive ? 'Y' : 'N'}
-                            </Badge>
+                            <Badge variant={step.isActive ? 'default' : 'secondary'} className="text-xs">{step.isActive ? 'Y' : 'N'}</Badge>
                           </td>
                           <td className="w-12 px-3 py-3 text-center">
                             <Button
@@ -755,6 +784,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
                     </tbody>
                   </table>
                 </div>
+                </>
               )}
             </CardContent>
           </Card>
@@ -808,6 +838,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
       handleDragOver,
       handleDragEnd,
       handleDrop,
+      handleMoveStep,
       isEdit,
       initialData?.id,
     ]
diff --git a/src/components/process-management/RuleModal.tsx b/src/components/process-management/RuleModal.tsx
index d6a82f67..95ff1972 100644
--- a/src/components/process-management/RuleModal.tsx
+++ b/src/components/process-management/RuleModal.tsx
@@ -254,6 +254,7 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
                   ))}
                 </SelectContent>
               </Select>
+              {/* TODO: 백엔드 API에서 process_name, process_category 필터/응답 지원 후 구분 필터 활성화
               <Select
                 key={`category-${processFilter}`}
                 value={categoryFilter}
@@ -271,6 +272,7 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
                   ))}
                 </SelectContent>
               </Select>
+              */}
             </div>
           </div>
 
@@ -283,21 +285,22 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
                   <TableHead className="w-[80px]">품목유형</TableHead>
                   <TableHead>품목코드</TableHead>
                   <TableHead>품목명</TableHead>
-                  {/* TODO: API에서 process_name, process_category 필드 지원 후 실제 데이터 표시 */}
+                  {/* TODO: 백엔드 API에서 process_name, process_category 응답 지원 후 공정/구분 컬럼 활성화
                   <TableHead className="w-[80px]">공정</TableHead>
                   <TableHead className="w-[80px]">구분</TableHead>
+                  */}
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {isItemsLoading ? (
                   <TableRow key="loading">
-                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                    <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                       품목 목록을 불러오는 중...
                     </TableCell>
                   </TableRow>
                 ) : itemList.length === 0 ? (
                   <TableRow key="empty">
-                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                    <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                       {searchKeyword.trim() === ''
                         ? '품목을 검색해주세요 (한글 1자 이상, 영문 2자 이상)'
                         : '검색 결과가 없습니다'}
@@ -320,9 +323,10 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
                       <TableCell>{item.type}</TableCell>
                       <TableCell className="font-medium">{item.code}</TableCell>
                       <TableCell>{item.fullName}</TableCell>
-                      {/* TODO: API 지원 후 item.processName / item.processCategory 표시 */}
-                      <TableCell className="text-muted-foreground">-</TableCell>
-                      <TableCell className="text-muted-foreground">-</TableCell>
+                      {/* TODO: 백엔드 API 지원 후 item.processName / item.processCategory 표시
+                      <TableCell className="text-muted-foreground">{item.processName || '-'}</TableCell>
+                      <TableCell className="text-muted-foreground">{item.processCategory || '-'}</TableCell>
+                      */}
                     </TableRow>
                   ))
                 )}
diff --git a/src/components/settings/PermissionManagement/index.tsx b/src/components/settings/PermissionManagement/index.tsx
index 0ebf5dda..7cf74ff5 100644
--- a/src/components/settings/PermissionManagement/index.tsx
+++ b/src/components/settings/PermissionManagement/index.tsx
@@ -387,14 +387,14 @@ export function PermissionManagement() {
   }) => (
     <div className="flex items-center gap-2 flex-wrap ml-auto">
       {selItems.size > 0 && (
-        <Button variant="destructive" onClick={handleBulkDelete}>
-          <Trash2 className="h-4 w-4 mr-2" />
-          선택 삭제 ({selItems.size})
+        <Button variant="destructive" size="sm" className="md:size-default" onClick={handleBulkDelete}>
+          <Trash2 className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">선택 삭제 ({selItems.size})</span>
         </Button>
       )}
-      <Button onClick={handleAdd}>
-        <Plus className="h-4 w-4 mr-2" />
-        역할 등록
+      <Button size="sm" className="md:size-default" onClick={handleAdd}>
+        <Plus className="h-4 w-4 md:mr-2" />
+        <span className="hidden md:inline">역할 등록</span>
       </Button>
     </div>
   ), [handleBulkDelete, handleAdd]);
diff --git a/src/components/settings/RankManagement/index.tsx b/src/components/settings/RankManagement/index.tsx
index 90365ba9..cc00b7ad 100644
--- a/src/components/settings/RankManagement/index.tsx
+++ b/src/components/settings/RankManagement/index.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Award, Plus, GripVertical, Pencil, Trash2, Loader2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -185,6 +186,33 @@ export function RankManagement() {
     setDraggedItem(index);
   };
 
+  // 화살표 버튼으로 순서 변경
+  const handleMoveItem = async (fromIndex: number, toIndex: number) => {
+    const newRanks = [...ranks];
+    const [moved] = newRanks.splice(fromIndex, 1);
+    newRanks.splice(toIndex, 0, moved);
+    const reordered = newRanks.map((rank, idx) => ({ ...rank, order: idx + 1 }));
+    setRanks(reordered);
+
+    try {
+      const items = reordered.map((rank, idx) => ({
+        id: rank.id,
+        sort_order: idx + 1,
+      }));
+      const result = await reorderRanks(items);
+      if (result.success) {
+        toast.success('순서가 변경되었습니다.');
+      } else {
+        toast.error(result.error || '순서 변경에 실패했습니다.');
+        loadRanks();
+      }
+    } catch (error) {
+      if (isNextRedirectError(error)) throw error;
+      toast.error('순서 변경에 실패했습니다.');
+      loadRanks();
+    }
+  };
+
   // 키보드로 추가 (한글 IME 조합 중에는 무시)
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
@@ -196,7 +224,7 @@ export function RankManagement() {
     <PageLayout>
       <PageHeader
         title="직급관리"
-        description="사원의 직급을 관리합니다. 드래그하여 순서를 변경할 수 있습니다."
+        description="사원의 직급을 관리합니다. 화살표 버튼 또는 드래그하여 순서를 변경할 수 있습니다."
         icon={Award}
       />
 
@@ -246,8 +274,18 @@ export function RankManagement() {
                       draggedItem === index ? 'opacity-50 bg-muted' : ''
                     }`}
                   >
-                    {/* 드래그 핸들 */}
-                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    {/* 드래그 핸들 (PC만) */}
+                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0 hidden md:block" />
+
+                    {/* 순서 변경 버튼 */}
+                    <ReorderButtons
+                      onMoveUp={() => handleMoveItem(index, index - 1)}
+                      onMoveDown={() => handleMoveItem(index, index + 1)}
+                      isFirst={index === 0}
+                      isLast={index === ranks.length - 1}
+                      disabled={isSubmitting}
+                      size="xs"
+                    />
 
                     {/* 순서 번호 */}
                     <span className="text-sm text-muted-foreground w-8">
@@ -295,7 +333,7 @@ export function RankManagement() {
 
         {/* 안내 문구 */}
         <p className="text-sm text-muted-foreground">
-          ※ 직급 순서는 드래그 앤 드롭으로 변경할 수 있습니다.
+          ※ 화살표 버튼으로 순서를 변경할 수 있습니다.
         </p>
       </div>
 
diff --git a/src/components/settings/TitleManagement/index.tsx b/src/components/settings/TitleManagement/index.tsx
index 973bdc26..c164adc3 100644
--- a/src/components/settings/TitleManagement/index.tsx
+++ b/src/components/settings/TitleManagement/index.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Briefcase, Plus, GripVertical, Pencil, Trash2, Loader2 } from 'lucide-react';
+import { ReorderButtons } from '@/components/molecules';
 import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -185,6 +186,33 @@ export function TitleManagement() {
     setDraggedItem(index);
   };
 
+  // 화살표 버튼으로 순서 변경
+  const handleMoveItem = async (fromIndex: number, toIndex: number) => {
+    const newTitles = [...titles];
+    const [moved] = newTitles.splice(fromIndex, 1);
+    newTitles.splice(toIndex, 0, moved);
+    const reordered = newTitles.map((title, idx) => ({ ...title, order: idx + 1 }));
+    setTitles(reordered);
+
+    try {
+      const items = reordered.map((title, idx) => ({
+        id: title.id,
+        sort_order: idx + 1,
+      }));
+      const result = await reorderTitles(items);
+      if (result.success) {
+        toast.success('순서가 변경되었습니다.');
+      } else {
+        toast.error(result.error || '순서 변경에 실패했습니다.');
+        loadTitles();
+      }
+    } catch (error) {
+      if (isNextRedirectError(error)) throw error;
+      toast.error('순서 변경에 실패했습니다.');
+      loadTitles();
+    }
+  };
+
   // 키보드로 추가 (한글 IME 조합 중에는 무시)
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
@@ -196,7 +224,7 @@ export function TitleManagement() {
     <PageLayout>
       <PageHeader
         title="직책관리"
-        description="사원의 직책을 관리합니다. 드래그하여 순서를 변경할 수 있습니다."
+        description="사원의 직책을 관리합니다. 화살표 버튼 또는 드래그하여 순서를 변경할 수 있습니다."
         icon={Briefcase}
       />
 
@@ -246,8 +274,18 @@ export function TitleManagement() {
                       draggedItem === index ? 'opacity-50 bg-muted' : ''
                     }`}
                   >
-                    {/* 드래그 핸들 */}
-                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    {/* 드래그 핸들 (PC만) */}
+                    <GripVertical className="h-5 w-5 text-muted-foreground flex-shrink-0 hidden md:block" />
+
+                    {/* 순서 변경 버튼 */}
+                    <ReorderButtons
+                      onMoveUp={() => handleMoveItem(index, index - 1)}
+                      onMoveDown={() => handleMoveItem(index, index + 1)}
+                      isFirst={index === 0}
+                      isLast={index === titles.length - 1}
+                      disabled={isSubmitting}
+                      size="xs"
+                    />
 
                     {/* 순서 번호 */}
                     <span className="text-sm text-muted-foreground w-8">
@@ -295,7 +333,7 @@ export function TitleManagement() {
 
         {/* 안내 문구 */}
         <p className="text-sm text-muted-foreground">
-          ※ 직책 순서는 드래그 앤 드롭으로 변경할 수 있습니다.
+          ※ 화살표 버튼으로 순서를 변경할 수 있습니다.
         </p>
       </div>
 
diff --git a/src/components/templates/IntegratedDetailTemplate/components/DetailActions.tsx b/src/components/templates/IntegratedDetailTemplate/components/DetailActions.tsx
index 31ce318e..b6617ba9 100644
--- a/src/components/templates/IntegratedDetailTemplate/components/DetailActions.tsx
+++ b/src/components/templates/IntegratedDetailTemplate/components/DetailActions.tsx
@@ -13,10 +13,11 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { ArrowLeft, Save, Trash2, X, Edit } from 'lucide-react';
+import { ArrowLeft, Save, Trash2, X, Edit, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useMenuStore } from '@/stores/menuStore';
+import type { ActionItem } from '../types';
 
 export interface DetailActionsProps {
   /** 현재 모드 */
@@ -49,8 +50,10 @@ export interface DetailActionsProps {
   onDelete?: () => void;
   onEdit?: () => void;
   onSubmit?: () => void;
-  /** 추가 액션 (삭제 버튼 앞에 표시) */
+  /** 추가 액션 (삭제 버튼 앞에 표시, 자유 JSX) */
   extraActions?: ReactNode;
+  /** 추가 액션 아이템 (config 배열, 모바일 아이콘 패턴 자동 적용) */
+  extraActionItems?: ActionItem[];
   /** 하단 고정 (sticky) 모드 */
   sticky?: boolean;
   /** 추가 클래스 */
@@ -69,6 +72,7 @@ export function DetailActions({
   onEdit,
   onSubmit,
   extraActions,
+  extraActionItems,
   sticky = false,
   className,
 }: DetailActionsProps) {
@@ -104,9 +108,9 @@ export function DetailActions({
 
   // Fixed 스타일: 화면 하단에 고정 (사이드바 상태에 따라 동적 계산)
   // 모바일: 좌우 여백 16px (left-4 right-4)
-  // 태블릿/데스크탑: 사이드바 펼침(w-64=256px), 접힘(w-24=96px) + 여백 고려
+  // 태블릿/데스크탑: 사이드바 펼침(w-64=256px), 접힘(w-24=96px) + 콘텐츠 패딩(24px) 맞춤
   const stickyStyles = sticky
-    ? `fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'}`
+    ? `fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[24px] ${sidebarCollapsed ? 'md:left-[120px]' : 'md:left-[280px]'}`
     : '';
 
   // 공통 레이아웃: 왼쪽(뒤로) | 오른쪽(액션들)
@@ -134,6 +138,24 @@ export function DetailActions({
       <div className="flex items-center gap-1 md:gap-2">
         {extraActions}
 
+        {/* config 배열 기반 추가 버튼 (모바일 아이콘 패턴 자동 적용) */}
+        {extraActionItems?.filter(item => !item.hidden).map((item, idx) => {
+          const Icon = item.loading ? Loader2 : item.icon;
+          return (
+            <Button
+              key={idx}
+              variant={item.variant || 'outline'}
+              size="sm"
+              className={cn('md:size-default', item.className)}
+              onClick={item.onClick}
+              disabled={item.disabled || item.loading}
+            >
+              <Icon className={cn('w-4 h-4 md:mr-2', item.loading && 'animate-spin')} />
+              <span className="hidden md:inline">{item.label}</span>
+            </Button>
+          );
+        })}
+
         {/* 삭제 버튼: view, edit 모드에서 표시 (create는 삭제할 대상 없음) */}
         {!isCreateMode && canDelete && showDelete && onDelete && (
           <Button
diff --git a/src/components/templates/IntegratedDetailTemplate/index.tsx b/src/components/templates/IntegratedDetailTemplate/index.tsx
index e147952e..590fce5e 100644
--- a/src/components/templates/IntegratedDetailTemplate/index.tsx
+++ b/src/components/templates/IntegratedDetailTemplate/index.tsx
@@ -44,6 +44,7 @@ function IntegratedDetailTemplateInner<T extends Record<string, unknown>>(
     renderForm,
     renderField,
     headerActions,
+    headerActionItems,
     beforeContent,
     afterContent,
     buttonPosition = 'bottom',
@@ -360,12 +361,13 @@ function IntegratedDetailTemplateInner<T extends Record<string, unknown>>(
         onEdit={handleEdit}
         onSubmit={handleSubmit}
         extraActions={headerActions}
+        extraActionItems={headerActionItems}
         sticky={shouldSticky}
         className={additionalClass}
       />
     );
   }, [
-    mode, isSubmitting, permissions, actions, headerActions, shouldSticky,
+    mode, isSubmitting, permissions, actions, headerActions, headerActionItems, shouldSticky,
     navigateToList, handleDelete, handleEdit, handleCancel, handleSubmit, onDelete
   ]);
 
diff --git a/src/components/templates/IntegratedDetailTemplate/types.ts b/src/components/templates/IntegratedDetailTemplate/types.ts
index 61bd6ef7..fa3cdeee 100644
--- a/src/components/templates/IntegratedDetailTemplate/types.ts
+++ b/src/components/templates/IntegratedDetailTemplate/types.ts
@@ -224,8 +224,10 @@ export interface IntegratedDetailTemplateProps<T = Record<string, unknown>> {
       error?: string;
     }
   ) => ReactNode | null;
-  /** 헤더 우측 추가 액션 */
+  /** 헤더 우측 추가 액션 (자유 JSX - Badge 등 비버튼 요소용) */
   headerActions?: ReactNode;
+  /** 헤더 우측 추가 버튼 (config 배열 - 모바일 아이콘 패턴 자동 적용) */
+  headerActionItems?: ActionItem[];
   /** 폼 앞에 추가 콘텐츠 */
   beforeContent?: ReactNode;
   /** 폼 뒤에 추가 콘텐츠 */
@@ -242,6 +244,26 @@ export interface IntegratedDetailTemplateProps<T = Record<string, unknown>> {
   isSubmitting?: boolean;
 }
 
+// ===== 액션 아이템 (headerActionItems용) =====
+export interface ActionItem {
+  /** 아이콘 (lucide-react) */
+  icon: LucideIcon;
+  /** 버튼 라벨 (데스크탑에서 표시, 모바일은 아이콘만) */
+  label: string;
+  /** 클릭 핸들러 */
+  onClick: () => void;
+  /** 버튼 variant */
+  variant?: 'default' | 'outline' | 'destructive' | 'secondary' | 'ghost';
+  /** 커스텀 클래스 (예: 'bg-green-600 hover:bg-green-700') */
+  className?: string;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+  /** 조건부 숨김 */
+  hidden?: boolean;
+  /** true면 Loader2 스피너로 아이콘 대체 */
+  loading?: boolean;
+}
+
 // ===== API 응답 타입 =====
 export interface ApiResponse<T = unknown> {
   success: boolean;

From c44f10d1e144d34c75f50dd6a5c450103e7ee0d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 16:54:04 +0900
Subject: [PATCH 17/24] =?UTF-8?q?chore:=20deploy.sh=20=EC=B6=94=EC=A0=81?=
 =?UTF-8?q?=20=EC=A4=91=EC=A7=80=20=EB=B0=8F=20.gitignore=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore |   3 +
 deploy.sh  | 158 -----------------------------------------------------
 2 files changed, 3 insertions(+), 158 deletions(-)
 delete mode 100755 deploy.sh

diff --git a/.gitignore b/.gitignore
index 27e96a6b..b3f3f04c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -123,3 +123,6 @@ src/app/**/dev/dashboard/
 
 # ---> Serena MCP memories
 .serena/
+
+# ---> Deploy script (로컬 전용)
+deploy.sh
diff --git a/deploy.sh b/deploy.sh
deleted file mode 100755
index 6ed4fef4..00000000
--- a/deploy.sh
+++ /dev/null
@@ -1,158 +0,0 @@
-#!/bin/bash
-#
-# SAM React 배포 스크립트
-# 사용법: ./deploy.sh [dev|prod]
-#
-
-set -e  # 에러 발생 시 중단
-
-# ===========================================
-# 설정
-# ===========================================
-ENV="${1:-dev}"
-TIMESTAMP=$(date +%Y%m%d_%H%M%S)
-BUILD_FILE="next-build.tar.gz"
-
-# 개발 서버 설정
-DEV_SSH="hskwon@114.203.209.83"
-DEV_PATH="/home/webservice/react"
-DEV_PM2="sam-react"
-
-# 운영 서버 설정 (추후 설정)
-# PROD_SSH="user@prod-server"
-# PROD_PATH="/var/www/react"
-# PROD_PM2="sam-react-prod"
-
-# 환경별 설정 선택
-case $ENV in
-    dev)
-        SSH_TARGET=$DEV_SSH
-        REMOTE_PATH=$DEV_PATH
-        PM2_APP=$DEV_PM2
-        ;;
-    prod)
-        echo "❌ 운영 환경은 아직 설정되지 않았습니다."
-        exit 1
-        ;;
-    *)
-        echo "❌ 알 수 없는 환경: $ENV"
-        echo "사용법: ./deploy.sh [dev|prod]"
-        exit 1
-        ;;
-esac
-
-# ===========================================
-# 함수 정의
-# ===========================================
-log() {
-    echo ""
-    echo "=========================================="
-    echo "🚀 $1"
-    echo "=========================================="
-}
-
-error() {
-    echo ""
-    echo "❌ 에러: $1"
-    exit 1
-}
-
-# ===========================================
-# 1. 빌드
-# ===========================================
-log "Step 1/5: 빌드 시작"
-
-# .env.local 백업
-if [ -f .env.local ]; then
-    echo "📦 .env.local 백업..."
-    mv .env.local .env.local.bak
-fi
-
-# 빌드 실행
-echo "🔨 npm run build..."
-npm run build || {
-    # 빌드 실패 시 .env.local 복원
-    if [ -f .env.local.bak ]; then
-        mv .env.local.bak .env.local
-    fi
-    error "빌드 실패"
-}
-
-# .env.local 복원
-if [ -f .env.local.bak ]; then
-    echo "📦 .env.local 복원..."
-    mv .env.local.bak .env.local
-fi
-
-echo "✅ 빌드 완료"
-
-# ===========================================
-# 2. 압축
-# ===========================================
-log "Step 2/5: 압축 시작"
-
-# 기존 압축 파일 삭제
-rm -f $BUILD_FILE
-
-# .next 폴더 압축 (캐시 제외)
-echo "📦 .next 폴더 압축 중..."
-COPYFILE_DISABLE=1 tar --exclude='.next/cache' -czf $BUILD_FILE .next
-
-# 파일 크기 확인
-FILE_SIZE=$(ls -lh $BUILD_FILE | awk '{print $5}')
-echo "✅ 압축 완료: $BUILD_FILE ($FILE_SIZE)"
-
-# ===========================================
-# 3. 업로드
-# ===========================================
-log "Step 3/5: 서버 업로드"
-
-echo "📤 $SSH_TARGET:$REMOTE_PATH 로 업로드 중..."
-scp $BUILD_FILE $SSH_TARGET:$REMOTE_PATH/
-
-echo "✅ 업로드 완료"
-
-# ===========================================
-# 4. 원격 배포 실행
-# ===========================================
-log "Step 4/5: 원격 배포 실행"
-
-echo "🔧 서버에서 배포 스크립트 실행 중..."
-ssh $SSH_TARGET << EOF
-    cd $REMOTE_PATH
-
-    echo "🗑️  기존 .next 폴더 삭제..."
-    rm -rf .next
-
-    echo "📦 압축 해제 중..."
-    tar xzf $BUILD_FILE
-
-    echo "🔄 PM2 재시작..."
-    pm2 restart $PM2_APP
-
-    echo "🧹 압축 파일 정리..."
-    rm -f $BUILD_FILE
-
-    echo "✅ 서버 배포 완료"
-EOF
-
-# ===========================================
-# 5. 정리
-# ===========================================
-log "Step 5/5: 로컬 정리"
-
-echo "🧹 로컬 압축 파일 삭제..."
-rm -f $BUILD_FILE
-
-# ===========================================
-# 완료
-# ===========================================
-echo ""
-echo "=========================================="
-echo "🎉 배포 완료!"
-echo "=========================================="
-echo "환경: $ENV"
-echo "서버: $SSH_TARGET"
-echo "경로: $REMOTE_PATH"
-echo "시간: $(date '+%Y-%m-%d %H:%M:%S')"
-echo "=========================================="
\ No newline at end of file

From 0f97d533444c93a43198c2b4bf02460c6b1e3188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 16:57:04 +0900
Subject: [PATCH 18/24] =?UTF-8?q?fix:=20[dashboard]=20PurchaseStatusSectio?=
 =?UTF-8?q?n=20Tooltip=20formatter=20=ED=83=80=EC=9E=85=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/CEODashboard/sections/PurchaseStatusSection.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
index e15fccf7..c8268a33 100644
--- a/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/PurchaseStatusSection.tsx
@@ -132,7 +132,7 @@ export function PurchaseStatusSection({ data }: PurchaseStatusSectionProps) {
                 <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                 <YAxis tickFormatter={formatAmount} tick={{ fontSize: 11 }} />
                 <Tooltip
-                  formatter={(value: number | undefined) => [formatKoreanAmount(value ?? 0), '매입']}
+                  formatter={(value) => [formatKoreanAmount(Number(value) || 0), '매입']}
                 />
                 <Bar dataKey="amount" fill="#f59e0b" radius={[4, 4, 0, 0]} />
               </BarChart>

From 58f1b2fa780b6b829a93d8d391afd02400be2b01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 16:58:41 +0900
Subject: [PATCH 19/24] =?UTF-8?q?fix:=20[dashboard]=20SalesStatusSection?=
 =?UTF-8?q?=20Tooltip=20formatter=20=ED=83=80=EC=9E=85=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/CEODashboard/sections/SalesStatusSection.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
index f55ab179..699eae5b 100644
--- a/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
+++ b/src/components/business/CEODashboard/sections/SalesStatusSection.tsx
@@ -145,7 +145,7 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
                 <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                 <YAxis tickFormatter={formatAmount} tick={{ fontSize: 11 }} />
                 <Tooltip
-                  formatter={(value: number | undefined) => [formatKoreanAmount(value ?? 0), '매출']}
+                  formatter={(value) => [formatKoreanAmount(Number(value) || 0), '매출']}
                 />
                 <Bar dataKey="amount" fill="#3b82f6" radius={[4, 4, 0, 0]} />
               </BarChart>
@@ -161,7 +161,7 @@ export function SalesStatusSection({ data }: SalesStatusSectionProps) {
                 <XAxis type="number" tickFormatter={formatAmount} tick={{ fontSize: 11 }} />
                 <YAxis type="category" dataKey="name" tick={{ fontSize: 12 }} width={80} />
                 <Tooltip
-                  formatter={(value: number | undefined) => [formatKoreanAmount(value ?? 0), '매출']}
+                  formatter={(value) => [formatKoreanAmount(Number(value) || 0), '매출']}
                 />
                 <Bar dataKey="amount" fill="#10b981" radius={[0, 4, 4, 0]} />
               </BarChart>

From 8538256edfc310956bc24281c19db656eb19bec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:01:24 +0900
Subject: [PATCH 20/24] =?UTF-8?q?fix:=20[card]=20CardForm=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=EA=B0=92=EC=97=90=20=EB=88=84=EB=9D=BD=EB=90=9C=20Car?=
 =?UTF-8?q?dFormData=20=ED=95=84=EC=88=98=20=ED=95=84=EB=93=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hr/CardManagement/CardForm.tsx | 254 ++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100755 src/components/hr/CardManagement/CardForm.tsx

diff --git a/src/components/hr/CardManagement/CardForm.tsx b/src/components/hr/CardManagement/CardForm.tsx
new file mode 100755
index 00000000..c65f8860
--- /dev/null
+++ b/src/components/hr/CardManagement/CardForm.tsx
@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { CreditCard, ArrowLeft, Save } from 'lucide-react';
+import type { Card as CardType, CardFormData, CardCompany, CardStatus } from './types';
+import { CARD_COMPANIES, CARD_STATUS_LABELS } from './types';
+import { getActiveEmployees } from './actions';
+
+interface CardFormProps {
+  mode: 'create' | 'edit';
+  card?: CardType;
+  onSubmit: (data: CardFormData) => void;
+}
+
+export function CardForm({ mode, card, onSubmit }: CardFormProps) {
+  const router = useRouter();
+  const [formData, setFormData] = useState<CardFormData>({
+    cardCompany: '',
+    cardType: '',
+    cardNumber: '',
+    cardName: '',
+    alias: '',
+    expiryDate: '',
+    csv: '',
+    paymentDay: '',
+    pinPrefix: '',
+    totalLimit: 0,
+    usedAmount: 0,
+    remainingLimit: 0,
+    status: 'active',
+    userId: '',
+    memo: '',
+  });
+
+  // 직원 목록 상태
+  const [employees, setEmployees] = useState<Array<{ id: string; label: string }>>([]);
+  const [isLoadingEmployees, setIsLoadingEmployees] = useState(true);
+
+  // 직원 목록 로드
+  useEffect(() => {
+    const loadEmployees = async () => {
+      setIsLoadingEmployees(true);
+      const result = await getActiveEmployees();
+      if (result.success && result.data) {
+        setEmployees(result.data);
+      }
+      setIsLoadingEmployees(false);
+    };
+    loadEmployees();
+  }, []);
+
+  // 수정 모드일 때 기존 데이터 로드
+  useEffect(() => {
+    if (mode === 'edit' && card) {
+      setFormData({
+        cardCompany: card.cardCompany,
+        cardNumber: card.cardNumber,
+        cardName: card.cardName,
+        expiryDate: card.expiryDate,
+        pinPrefix: card.pinPrefix,
+        status: card.status,
+        userId: card.user?.id || '',
+      });
+    }
+  }, [mode, card]);
+
+  const handleBack = () => {
+    if (mode === 'edit' && card) {
+      router.push(`/ko/hr/card-management/${card.id}`);
+    } else {
+      router.push('/ko/hr/card-management');
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  // 카드번호 포맷팅 (1234-1234-1234-1234)
+  const handleCardNumberChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 16);
+    const parts = digits.match(/.{1,4}/g) || [];
+    const formatted = parts.join('-');
+    setFormData(prev => ({ ...prev, cardNumber: formatted }));
+  };
+
+  // 유효기간 포맷팅 (MMYY)
+  const handleExpiryDateChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 4);
+    setFormData(prev => ({ ...prev, expiryDate: digits }));
+  };
+
+  // 비밀번호 앞 2자리
+  const handlePinPrefixChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 2);
+    setFormData(prev => ({ ...prev, pinPrefix: digits }));
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title={mode === 'create' ? '카드 등록' : '카드 수정'}
+        description={mode === 'create' ? '새로운 카드를 등록합니다' : '카드 정보를 수정합니다'}
+        icon={CreditCard}
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="cardCompany">카드사</Label>
+                <Select
+                  value={formData.cardCompany}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, cardCompany: value as CardCompany }))}
+                >
+                  <SelectTrigger id="cardCompany">
+                    <SelectValue placeholder="카드사를 선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CARD_COMPANIES.map((company) => (
+                      <SelectItem key={company.value} value={company.value}>
+                        {company.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardNumber">카드번호</Label>
+                <Input
+                  id="cardNumber"
+                  value={formData.cardNumber}
+                  onChange={(e) => handleCardNumberChange(e.target.value)}
+                  placeholder="1234-1234-1234-1234"
+                  maxLength={19}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiryDate">유효기간</Label>
+                <Input
+                  id="expiryDate"
+                  value={formData.expiryDate}
+                  onChange={(e) => handleExpiryDateChange(e.target.value)}
+                  placeholder="MMYY"
+                  maxLength={4}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="pinPrefix">카드 비밀번호 앞 2자리</Label>
+                <Input
+                  id="pinPrefix"
+                  type="password"
+                  value={formData.pinPrefix}
+                  onChange={(e) => handlePinPrefixChange(e.target.value)}
+                  placeholder="**"
+                  maxLength={2}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardName">카드명</Label>
+                <Input
+                  id="cardName"
+                  value={formData.cardName}
+                  onChange={(e) => setFormData(prev => ({ ...prev, cardName: e.target.value }))}
+                  placeholder="카드명을 입력해주세요"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="status">상태</Label>
+                <Select
+                  value={formData.status}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, status: value as CardStatus }))}
+                >
+                  <SelectTrigger id="status">
+                    <SelectValue placeholder="상태 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">{CARD_STATUS_LABELS.active}</SelectItem>
+                    <SelectItem value="suspended">{CARD_STATUS_LABELS.suspended}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">사용자 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <Label htmlFor="userId">부서 / 이름 / 직책</Label>
+              <Select
+                value={formData.userId}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, userId: value }))}
+                disabled={isLoadingEmployees}
+              >
+                <SelectTrigger id="userId">
+                  <SelectValue placeholder={isLoadingEmployees ? '직원 목록 로딩 중...' : '선택해서 해당 카드의 사용자로 설정'} />
+                </SelectTrigger>
+                <SelectContent>
+                  {employees.map((employee) => (
+                    <SelectItem key={employee.id} value={employee.id}>
+                      {employee.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button type="button" variant="outline" onClick={handleBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            취소
+          </Button>
+          <Button type="submit">
+            <Save className="w-4 h-4 mr-2" />
+            {mode === 'create' ? '등록' : '저장'}
+          </Button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}
\ No newline at end of file

From 6c1f07da2c7b2259636c79a6c70c76d83d0fe015 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:03:09 +0900
Subject: [PATCH 21/24] =?UTF-8?q?fix:=20[card]=20CardForm=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=AA=A8=EB=93=9C=20setFormData=EC=97=90=20?=
 =?UTF-8?q?=EB=88=84=EB=9D=BD=EB=90=9C=20=ED=95=84=EC=88=98=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hr/CardManagement/CardForm.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/hr/CardManagement/CardForm.tsx b/src/components/hr/CardManagement/CardForm.tsx
index c65f8860..713e5bfc 100755
--- a/src/components/hr/CardManagement/CardForm.tsx
+++ b/src/components/hr/CardManagement/CardForm.tsx
@@ -68,12 +68,20 @@ export function CardForm({ mode, card, onSubmit }: CardFormProps) {
     if (mode === 'edit' && card) {
       setFormData({
         cardCompany: card.cardCompany,
+        cardType: card.cardType || '',
         cardNumber: card.cardNumber,
         cardName: card.cardName,
+        alias: card.alias || '',
         expiryDate: card.expiryDate,
+        csv: card.csv || '',
+        paymentDay: card.paymentDay || '',
         pinPrefix: card.pinPrefix,
+        totalLimit: card.totalLimit || 0,
+        usedAmount: card.usedAmount || 0,
+        remainingLimit: card.remainingLimit || 0,
         status: card.status,
         userId: card.user?.id || '',
+        memo: card.memo || '',
       });
     }
   }, [mode, card]);

From bc2b852f980f2ab679d141cb8e8dcb50565fa944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:09:20 +0900
Subject: [PATCH 22/24] =?UTF-8?q?fix:=20[quotes]=20QuoteFormData=20?=
 =?UTF-8?q?=E2=86=92=20QuoteFormDataV2=20=ED=83=80=EC=9E=85=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quotes/QuoteCalculationReport.tsx         | 539 ++++++++++++++++++
 1 file changed, 539 insertions(+)
 create mode 100755 src/components/quotes/QuoteCalculationReport.tsx

diff --git a/src/components/quotes/QuoteCalculationReport.tsx b/src/components/quotes/QuoteCalculationReport.tsx
new file mode 100755
index 00000000..ba3f7096
--- /dev/null
+++ b/src/components/quotes/QuoteCalculationReport.tsx
@@ -0,0 +1,539 @@
+/**
+ * 견적 산출내역서 / 견적서 컴포넌트
+ * - documentType="견적서": 간단한 견적서
+ * - documentType="견적산출내역서": 상세 산출내역서 + 소요자재 내역
+ */
+
+import { QuoteFormDataV2 } from "./QuoteRegistration";
+import type { BomMaterial } from "./types";
+import type { CompanyFormData } from "@/components/settings/CompanyInfoManagement/types";
+
+interface QuoteCalculationReportProps {
+  quote: QuoteFormDataV2;
+  companyInfo?: CompanyFormData | null;
+  documentType?: "견적산출내역서" | "견적서";
+  showDetailedBreakdown?: boolean;
+  showMaterialList?: boolean;
+}
+
+export function QuoteCalculationReport({
+  quote,
+  companyInfo,
+  documentType = "견적산출내역서",
+  showDetailedBreakdown = true,
+  showMaterialList = true
+}: QuoteCalculationReportProps) {
+  const formatAmount = (amount: number | null | undefined) => {
+    if (amount == null) return '0';
+    return Number(amount).toLocaleString('ko-KR');
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    return `${date.getFullYear()}년 ${String(date.getMonth() + 1).padStart(2, '0')}월 ${String(date.getDate()).padStart(2, '0')}일`;
+  };
+
+  // 총 금액 계산 (totalAmount > unitPrice * quantity > inspectionFee 우선순위)
+  const totalAmount = quote.items?.reduce((sum, item) => {
+    const itemTotal = item.totalAmount ||
+      (item.unitPrice || 0) * (item.quantity || 1) ||
+      (item.inspectionFee || 0) * (item.quantity || 1);
+    return sum + itemTotal;
+  }, 0) || 0;
+
+  // 소요자재 내역 - BOM 자재 목록 (quote.bomMaterials)에서 가져옴
+  // bomMaterials가 없으면 빈 배열 (BOM 계산 데이터 없음)
+  const materialItems = (quote.bomMaterials || []).map((material, index) => ({
+    no: index + 1,
+    itemCode: material.itemCode || '-',
+    name: material.itemName || '-',
+    spec: material.specification || '-',
+    quantity: Math.floor(material.quantity || 1),
+    unit: material.unit || 'EA',
+    unitPrice: material.unitPrice || 0,
+    totalPrice: material.totalPrice || 0,
+  }));
+
+  return (
+    <>
+      <style>{`
+        @media print {
+          @page {
+            size: A4 portrait;
+            margin: 15mm;
+          }
+
+          body {
+            background: white !important;
+          }
+
+          .print\\:hidden {
+            display: none !important;
+          }
+
+          #quote-report-content {
+            background: white !important;
+            padding: 0 !important;
+          }
+
+          table {
+            page-break-inside: avoid;
+          }
+
+          .page-break-after {
+            page-break-after: always;
+          }
+        }
+
+        /* 공문서 스타일 */
+        .official-doc {
+          font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
+          background: white;
+          color: #000;
+          line-height: 1.5;
+        }
+
+        .doc-header {
+          text-align: center;
+          border-bottom: 3px double #000;
+          padding-bottom: 20px;
+          margin-bottom: 30px;
+        }
+
+        .doc-title {
+          font-size: 26px;
+          font-weight: 700;
+          letter-spacing: 2px;
+          margin-bottom: 12px;
+        }
+
+        .doc-number {
+          font-size: 14px;
+          color: #333;
+        }
+
+        .info-box {
+          border: 2px solid #000;
+          margin-bottom: 20px;
+        }
+
+        .info-box-header {
+          background: #f0f0f0;
+          border-bottom: 2px solid #000;
+          padding: 8px 12px;
+          font-weight: 700;
+          text-align: center;
+          font-size: 14px;
+        }
+
+        .info-box-content {
+          padding: 0;
+        }
+
+        .info-table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+
+        .info-table th {
+          background: #f8f8f8;
+          border: 1px solid #999;
+          padding: 8px 10px;
+          text-align: center;
+          font-weight: 600;
+          font-size: 13px;
+          width: 100px;
+        }
+
+        .info-table td {
+          border: 1px solid #999;
+          padding: 8px 10px;
+          font-size: 13px;
+        }
+
+        .amount-box {
+          border: 3px double #000;
+          padding: 20px;
+          text-align: center;
+          margin: 30px 0;
+          background: #fafafa;
+        }
+
+        .amount-label {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 10px;
+        }
+
+        .amount-value {
+          font-size: 32px;
+          font-weight: 700;
+          color: #000;
+          letter-spacing: 1px;
+        }
+
+        .amount-note {
+          font-size: 13px;
+          color: #666;
+          margin-top: 8px;
+        }
+
+        .section-title {
+          background: #000;
+          color: white;
+          padding: 10px 15px;
+          font-weight: 700;
+          font-size: 15px;
+          margin: 30px 0 15px 0;
+          text-align: center;
+          letter-spacing: 1px;
+        }
+
+        .detail-table {
+          width: 100%;
+          border-collapse: collapse;
+          border: 2px solid #000;
+        }
+
+        .detail-table thead th {
+          background: #e8e8e8;
+          border: 1px solid #666;
+          padding: 10px 6px;
+          text-align: center;
+          font-weight: 700;
+          font-size: 12px;
+        }
+
+        .detail-table tbody td {
+          border: 1px solid #999;
+          padding: 8px 6px;
+          font-size: 12px;
+        }
+
+        .detail-table tbody tr:hover {
+          background: #f9f9f9;
+        }
+
+        .detail-table tfoot td {
+          background: #f0f0f0;
+          border: 1px solid #666;
+          padding: 10px;
+          font-weight: 700;
+          font-size: 13px;
+        }
+
+        .material-table {
+          width: 100%;
+          border-collapse: collapse;
+          border: 2px solid #000;
+          margin-top: 15px;
+        }
+
+        .material-table th {
+          background: #e8e8e8;
+          border: 1px solid #666;
+          padding: 8px;
+          text-align: center;
+          font-weight: 600;
+          font-size: 12px;
+        }
+
+        .material-table td {
+          border: 1px solid #999;
+          padding: 8px;
+          font-size: 12px;
+        }
+
+        .stamp-area {
+          border: 2px solid #000;
+          width: 80px;
+          height: 80px;
+          display: inline-block;
+          position: relative;
+          margin-left: 20px;
+        }
+
+        .stamp-text {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 10px;
+          color: #999;
+          text-align: center;
+          line-height: 1.3;
+        }
+
+        .footer-note {
+          margin-top: 40px;
+          padding-top: 20px;
+          border-top: 1px solid #ccc;
+          font-size: 11px;
+          color: #666;
+          line-height: 1.6;
+        }
+
+        .signature-section {
+          margin-top: 30px;
+          text-align: right;
+        }
+      `}</style>
+
+      {/* 문서 컴포넌트 */}
+      <div className="official-doc">
+        {/* 문서 헤더 */}
+        <div className="doc-header">
+          <div className="doc-title">
+            {documentType === "견적서" ? "견 적 서" : "견 적 산 출 내 역 서"}
+          </div>
+          <div className="doc-number">
+            문서번호: {quote.id || '-'} | 작성일자: {formatDate(quote.registrationDate || '')}
+          </div>
+        </div>
+
+        {/* 수요자 정보 */}
+        <div className="info-box">
+          <div className="info-box-header">수 요 자</div>
+          <div className="info-box-content">
+            <table className="info-table">
+              <tbody>
+                <tr>
+                  <th>업체명</th>
+                  <td colSpan={3}>{quote.clientName || '-'}</td>
+                </tr>
+                <tr>
+                  <th>현장명</th>
+                  <td>{quote.siteName || '-'}</td>
+                  <th>담당자</th>
+                  <td>{quote.manager || '-'}</td>
+                </tr>
+                <tr>
+                  <th>제품명</th>
+                  <td>{quote.items?.[0]?.productName || '-'}</td>
+                  <th>연락처</th>
+                  <td>{quote.contact || '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* 공급자 정보 */}
+        <div className="info-box">
+          <div className="info-box-header">공 급 자</div>
+          <div className="info-box-content">
+            <table className="info-table">
+              <tbody>
+                <tr>
+                  <th>상호</th>
+                  <td>{companyInfo?.companyName || '-'}</td>
+                  <th>사업자등록번호</th>
+                  <td>{companyInfo?.businessNumber || '-'}</td>
+                </tr>
+                <tr>
+                  <th>대표자</th>
+                  <td>{companyInfo?.representativeName || '-'}</td>
+                  <th>업태</th>
+                  <td>{companyInfo?.businessType || '-'}</td>
+                </tr>
+                <tr>
+                  <th>종목</th>
+                  <td colSpan={3}>{companyInfo?.businessCategory || '-'}</td>
+                </tr>
+                <tr>
+                  <th>사업장주소</th>
+                  <td colSpan={3}>{companyInfo?.address || '-'}</td>
+                </tr>
+                <tr>
+                  <th>전화</th>
+                  <td>{companyInfo?.managerPhone || '-'}</td>
+                  <th>이메일</th>
+                  <td>{companyInfo?.email || '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* 총 견적금액 */}
+        <div className="amount-box">
+          <div className="amount-label">총 견적금액</div>
+          <div className="amount-value">₩ {formatAmount(totalAmount)}</div>
+          <div className="amount-note">※ 부가가치세 별도</div>
+        </div>
+
+        {/* 세부 산출내역서 */}
+        {showDetailedBreakdown && quote.items && quote.items.length > 0 && (
+          <div className="page-break-after">
+            <div className="section-title">세 부 산 출 내 역</div>
+
+            <table className="detail-table">
+              <thead>
+                <tr>
+                  <th style={{ width: '40px' }}>No.</th>
+                  <th style={{ width: '200px' }}>품목명</th>
+                  <th style={{ width: '150px' }}>규격</th>
+                  <th style={{ width: '70px' }}>수량</th>
+                  <th style={{ width: '50px' }}>단위</th>
+                  <th style={{ width: '110px' }}>단가</th>
+                  <th style={{ width: '130px' }}>금액</th>
+                </tr>
+              </thead>
+              <tbody>
+                {quote.items.map((item, index) => {
+                  // 단가: unitPrice > inspectionFee 우선순위
+                  const unitPrice = item.unitPrice || item.inspectionFee || 0;
+                  // 금액: totalAmount > unitPrice * quantity 우선순위
+                  const itemTotal = item.totalAmount || unitPrice * (item.quantity || 1);
+                  return (
+                    <tr key={item.id || `item-${index}`}>
+                      <td style={{ textAlign: 'center' }}>{index + 1}</td>
+                      <td>{item.productName}</td>
+                      <td style={{ fontSize: '11px' }}>{`${item.openWidth}×${item.openHeight}mm`}</td>
+                      <td style={{ textAlign: 'right' }}>{Math.floor(item.quantity || 0)}</td>
+                      <td style={{ textAlign: 'center' }}>{item.unit || 'SET'}</td>
+                      <td style={{ textAlign: 'right' }}>{formatAmount(unitPrice)}</td>
+                      <td style={{ textAlign: 'right', fontWeight: '600' }}>{formatAmount(itemTotal)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={6} style={{ textAlign: 'right', padding: '12px', background: '#e0e0e0', fontWeight: '700' }}>공급가액 합계</td>
+                  <td style={{ textAlign: 'right', padding: '12px', background: '#e0e0e0', fontSize: '15px', fontWeight: '700' }}>{formatAmount(totalAmount)}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        )}
+
+        {/* 소요자재 내역 */}
+        {showMaterialList && documentType !== "견적서" && (
+          <div>
+            <div className="section-title">소 요 자 재 내 역</div>
+
+            {/* 제품 정보 */}
+            <div className="info-box" style={{ marginTop: '15px' }}>
+              <div className="info-box-content">
+                <table className="info-table">
+                  <tbody>
+                    <tr>
+                      <th>제품구분</th>
+                      <td>{quote.items?.[0]?.productCategory === 'steel' ? '철재' : '스크린'}</td>
+                      <th>부호</th>
+                      <td>{quote.items?.[0]?.code || '-'}</td>
+                    </tr>
+                    <tr>
+                      <th>오픈사이즈</th>
+                      <td>W {quote.items?.[0]?.openWidth || '-'} × H {quote.items?.[0]?.openHeight || '-'} (mm)</td>
+                      <th>제작사이즈</th>
+                      <td>W {Number(quote.items?.[0]?.openWidth || 0) + 100} × H {Number(quote.items?.[0]?.openHeight || 0) + 100} (mm)</td>
+                    </tr>
+                    <tr>
+                      <th>수량</th>
+                      <td>{Math.floor(quote.items?.[0]?.quantity || 1)} {quote.items?.[0]?.unit || 'SET'}</td>
+                      <th>케이스</th>
+                      <td>2438 × 550 (mm)</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* 자재 목록 테이블 */}
+            {materialItems.length > 0 ? (
+              <table className="material-table">
+                <thead>
+                  <tr>
+                    <th style={{ width: '40px' }}>No.</th>
+                    <th style={{ width: '100px' }}>품목코드</th>
+                    <th>자재명</th>
+                    <th style={{ width: '200px' }}>규격</th>
+                    <th style={{ width: '80px' }}>수량</th>
+                    <th style={{ width: '60px' }}>단위</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {materialItems.map((item, index) => (
+                    <tr key={index}>
+                      <td style={{ textAlign: 'center' }}>{index + 1}</td>
+                      <td style={{ textAlign: 'center', fontSize: '11px' }}>{item.itemCode}</td>
+                      <td>{item.name}</td>
+                      <td style={{ fontSize: '11px' }}>{item.spec}</td>
+                      <td style={{ textAlign: 'center', fontWeight: '600' }}>{item.quantity}</td>
+                      <td style={{ textAlign: 'center' }}>{item.unit}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div style={{
+                border: '2px solid #000',
+                padding: '30px',
+                textAlign: 'center',
+                marginTop: '15px',
+                color: '#666'
+              }}>
+                소요자재 정보가 없습니다. (BOM 계산 데이터가 필요합니다)
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 비고사항 */}
+        {quote.remarks && (
+          <div style={{ marginTop: '30px' }}>
+            <div className="section-title">비 고 사 항</div>
+            <div style={{
+              border: '2px solid #000',
+              padding: '15px',
+              minHeight: '100px',
+              whiteSpace: 'pre-wrap',
+              fontSize: '13px',
+              lineHeight: '1.8',
+              marginTop: '15px'
+            }}>
+              {quote.remarks}
+            </div>
+          </div>
+        )}
+
+        {/* 서명란 */}
+        <div className="signature-section">
+          <div style={{ display: 'inline-block', textAlign: 'left' }}>
+            <div style={{ marginBottom: '15px', fontSize: '14px' }}>
+              상기와 같이 견적합니다.
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+              <div>
+                <div style={{ fontSize: '13px', marginBottom: '5px' }}>{formatDate(quote.registrationDate || '')}</div>
+                <div style={{ fontSize: '15px', fontWeight: '600' }}>
+                  공급자: {companyInfo?.companyName || '-'} (인)
+                </div>
+              </div>
+              <div className="stamp-area">
+                <div className="stamp-text">
+                  (인감<br/>날인)
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 하단 안내사항 */}
+        <div className="footer-note">
+          <p style={{ fontWeight: '600', marginBottom: '8px' }}>【 유의사항 】</p>
+          <p>1. 본 견적서는 {formatDate(quote.registrationDate || '')} 기준으로 작성되었으며, 자재 가격 변동 시 조정될 수 있습니다.</p>
+          <p>2. 견적 유효기간은 발행일로부터 30일이며, 기간 경과 시 재견적이 필요합니다.</p>
+          <p>3. 제작 사양 및 수량 변경 시 견적 금액이 변동될 수 있습니다.</p>
+          <p>4. 현장 여건에 따라 추가 비용이 발생할 수 있습니다.</p>
+          <p style={{ marginTop: '12px', textAlign: 'center', fontWeight: '600' }}>
+            문의: {companyInfo?.managerName || quote.manager || '담당자'} | {companyInfo?.managerPhone || '-'}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file

From bf857b282002b44fb912f5070be9fad307abdeb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:13:14 +0900
Subject: [PATCH 23/24] =?UTF-8?q?fix:=20[quotes]=20QuoteCalculationReport?=
 =?UTF-8?q?=20items=20=E2=86=92=20locations=20=ED=94=84=EB=A1=9C=ED=8D=BC?=
 =?UTF-8?q?=ED=8B=B0=20=EB=A7=A4=ED=95=91=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QuoteFormDataV2에 맞춰 quote.items를 quote.locations로 전환
- bomMaterials를 locations[].bomResult.materials에서 추출하도록 변경
- 미사용 BomMaterial import 제거
---
 .../quotes/QuoteCalculationReport.tsx         | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/quotes/QuoteCalculationReport.tsx b/src/components/quotes/QuoteCalculationReport.tsx
index ba3f7096..2d08d017 100755
--- a/src/components/quotes/QuoteCalculationReport.tsx
+++ b/src/components/quotes/QuoteCalculationReport.tsx
@@ -5,7 +5,6 @@
  */
 
 import { QuoteFormDataV2 } from "./QuoteRegistration";
-import type { BomMaterial } from "./types";
 import type { CompanyFormData } from "@/components/settings/CompanyInfoManagement/types";
 
 interface QuoteCalculationReportProps {
@@ -34,17 +33,18 @@ export function QuoteCalculationReport({
     return `${date.getFullYear()}년 ${String(date.getMonth() + 1).padStart(2, '0')}월 ${String(date.getDate()).padStart(2, '0')}일`;
   };
 
-  // 총 금액 계산 (totalAmount > unitPrice * quantity > inspectionFee 우선순위)
-  const totalAmount = quote.items?.reduce((sum, item) => {
-    const itemTotal = item.totalAmount ||
-      (item.unitPrice || 0) * (item.quantity || 1) ||
-      (item.inspectionFee || 0) * (item.quantity || 1);
-    return sum + itemTotal;
+  // 총 금액 계산 (totalPrice > unitPrice * quantity > inspectionFee 우선순위)
+  const totalAmount = quote.locations?.reduce((sum, loc) => {
+    const locTotal = loc.totalPrice ||
+      (loc.unitPrice || 0) * (loc.quantity || 1) ||
+      (loc.inspectionFee || 0) * (loc.quantity || 1);
+    return sum + locTotal;
   }, 0) || 0;
 
-  // 소요자재 내역 - BOM 자재 목록 (quote.bomMaterials)에서 가져옴
-  // bomMaterials가 없으면 빈 배열 (BOM 계산 데이터 없음)
-  const materialItems = (quote.bomMaterials || []).map((material, index) => ({
+  // 소요자재 내역 - BOM 자재 목록 (locations[].bomResult.materials)에서 가져옴
+  const materialItems = (quote.locations || []).flatMap(loc =>
+    (loc.bomResult?.materials || [])
+  ).map((material, index) => ({
     no: index + 1,
     itemCode: material.itemCode || '-',
     name: material.itemName || '-',
@@ -310,7 +310,7 @@ export function QuoteCalculationReport({
                 </tr>
                 <tr>
                   <th>제품명</th>
-                  <td>{quote.items?.[0]?.productName || '-'}</td>
+                  <td>{quote.locations?.[0]?.productName || '-'}</td>
                   <th>연락처</th>
                   <td>{quote.contact || '-'}</td>
                 </tr>
@@ -364,7 +364,7 @@ export function QuoteCalculationReport({
         </div>
 
         {/* 세부 산출내역서 */}
-        {showDetailedBreakdown && quote.items && quote.items.length > 0 && (
+        {showDetailedBreakdown && quote.locations && quote.locations.length > 0 && (
           <div className="page-break-after">
             <div className="section-title">세 부 산 출 내 역</div>
 
@@ -381,20 +381,18 @@ export function QuoteCalculationReport({
                 </tr>
               </thead>
               <tbody>
-                {quote.items.map((item, index) => {
-                  // 단가: unitPrice > inspectionFee 우선순위
-                  const unitPrice = item.unitPrice || item.inspectionFee || 0;
-                  // 금액: totalAmount > unitPrice * quantity 우선순위
-                  const itemTotal = item.totalAmount || unitPrice * (item.quantity || 1);
+                {quote.locations.map((loc, index) => {
+                  const unitPrice = loc.unitPrice || loc.inspectionFee || 0;
+                  const locTotal = loc.totalPrice || unitPrice * (loc.quantity || 1);
                   return (
-                    <tr key={item.id || `item-${index}`}>
+                    <tr key={loc.id || `loc-${index}`}>
                       <td style={{ textAlign: 'center' }}>{index + 1}</td>
-                      <td>{item.productName}</td>
-                      <td style={{ fontSize: '11px' }}>{`${item.openWidth}×${item.openHeight}mm`}</td>
-                      <td style={{ textAlign: 'right' }}>{Math.floor(item.quantity || 0)}</td>
-                      <td style={{ textAlign: 'center' }}>{item.unit || 'SET'}</td>
+                      <td>{loc.productName}</td>
+                      <td style={{ fontSize: '11px' }}>{`${loc.openWidth}×${loc.openHeight}mm`}</td>
+                      <td style={{ textAlign: 'right' }}>{Math.floor(loc.quantity || 0)}</td>
+                      <td style={{ textAlign: 'center' }}>SET</td>
                       <td style={{ textAlign: 'right' }}>{formatAmount(unitPrice)}</td>
-                      <td style={{ textAlign: 'right', fontWeight: '600' }}>{formatAmount(itemTotal)}</td>
+                      <td style={{ textAlign: 'right', fontWeight: '600' }}>{formatAmount(locTotal)}</td>
                     </tr>
                   );
                 })}
@@ -421,19 +419,19 @@ export function QuoteCalculationReport({
                   <tbody>
                     <tr>
                       <th>제품구분</th>
-                      <td>{quote.items?.[0]?.productCategory === 'steel' ? '철재' : '스크린'}</td>
+                      <td>{quote.locations?.[0]?.itemCategory === 'steel' ? '철재' : '스크린'}</td>
                       <th>부호</th>
-                      <td>{quote.items?.[0]?.code || '-'}</td>
+                      <td>{quote.locations?.[0]?.code || '-'}</td>
                     </tr>
                     <tr>
                       <th>오픈사이즈</th>
-                      <td>W {quote.items?.[0]?.openWidth || '-'} × H {quote.items?.[0]?.openHeight || '-'} (mm)</td>
+                      <td>W {quote.locations?.[0]?.openWidth || '-'} × H {quote.locations?.[0]?.openHeight || '-'} (mm)</td>
                       <th>제작사이즈</th>
-                      <td>W {Number(quote.items?.[0]?.openWidth || 0) + 100} × H {Number(quote.items?.[0]?.openHeight || 0) + 100} (mm)</td>
+                      <td>W {Number(quote.locations?.[0]?.openWidth || 0) + 100} × H {Number(quote.locations?.[0]?.openHeight || 0) + 100} (mm)</td>
                     </tr>
                     <tr>
                       <th>수량</th>
-                      <td>{Math.floor(quote.items?.[0]?.quantity || 1)} {quote.items?.[0]?.unit || 'SET'}</td>
+                      <td>{Math.floor(quote.locations?.[0]?.quantity || 1)} SET</td>
                       <th>케이스</th>
                       <td>2438 × 550 (mm)</td>
                     </tr>

From 1675bcbedfbfdabd5e8cba4f7f10e0bfe5bc1aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:14:45 +0900
Subject: [PATCH 24/24] =?UTF-8?q?fix:=20[quotes]=20BomCalculationResult=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=8D=BC=ED=8B=B0=EB=AA=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(materials=20=E2=86=92=20items,=20snake=5Fcase)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quotes/QuoteCalculationReport.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/quotes/QuoteCalculationReport.tsx b/src/components/quotes/QuoteCalculationReport.tsx
index 2d08d017..56f2934d 100755
--- a/src/components/quotes/QuoteCalculationReport.tsx
+++ b/src/components/quotes/QuoteCalculationReport.tsx
@@ -41,18 +41,18 @@ export function QuoteCalculationReport({
     return sum + locTotal;
   }, 0) || 0;
 
-  // 소요자재 내역 - BOM 자재 목록 (locations[].bomResult.materials)에서 가져옴
+  // 소요자재 내역 - BOM 자재 목록 (locations[].bomResult.items)에서 가져옴
   const materialItems = (quote.locations || []).flatMap(loc =>
-    (loc.bomResult?.materials || [])
+    (loc.bomResult?.items || [])
   ).map((material, index) => ({
     no: index + 1,
-    itemCode: material.itemCode || '-',
-    name: material.itemName || '-',
+    itemCode: material.item_code || '-',
+    name: material.item_name || '-',
     spec: material.specification || '-',
     quantity: Math.floor(material.quantity || 1),
     unit: material.unit || 'EA',
-    unitPrice: material.unitPrice || 0,
-    totalPrice: material.totalPrice || 0,
+    unitPrice: material.unit_price || 0,
+    totalPrice: material.total_price || 0,
   }));
 
   return (