(김준회) 공통모듈 - Knox 결재 모듈 구현, 유저 선택기 구현, 상신 결재 저장을 위한 DB 스키마 및 서비스 추가, spreadjs 라이센스 환경변수 통일, 유저 테이블에 epId 컬럼 추가

7 files changed, 925 insertions, 593 deletions

diff --git a/components/knox/approval/ApprovalCancel.tsx b/components/knox/approval/ApprovalCancel.tsx
index d077bfc6..b40b43df 100644
--- a/components/knox/approval/ApprovalCancel.tsx
+++ b/components/knox/approval/ApprovalCancel.tsx
@@ -15,19 +15,29 @@ import { Loader2, XCircle, AlertTriangle, CheckCircle } from 'lucide-react';
 import { cancelApproval, getApprovalDetail } from '@/lib/knox-api/approval/approval';
 import type { ApprovalDetailResponse } from '@/lib/knox-api/approval/approval';
 
-// Mock 데이터
-import { mockApprovalAPI, getStatusText } from './mocks/approval-mock';
+// 상태 코드 텍스트 매핑 (mock util 대체)
+const getStatusText = (status: string) => {
+  const map: Record<string, string> = {
+    '-3': '암호화실패',
+    '-2': '암호화중',
+    '-1': '예약상신',
+    '0': '보류',
+    '1': '진행중',
+    '2': '완결',
+    '3': '반려',
+    '4': '상신취소',
+    '5': '전결',
+    '6': '후완결',
+  };
+  return map[status] || '알 수 없음';
+};
 
 interface ApprovalCancelProps {
-  useFakeData?: boolean;
-  systemId?: string;
   initialApInfId?: string;
   onCancelSuccess?: (apInfId: string) => void;
 }
 
 export default function ApprovalCancel({ 
-  useFakeData = false, 
-  systemId = 'EVCP_SYSTEM',
   initialApInfId = '',
   onCancelSuccess 
 }: ApprovalCancelProps) {
@@ -50,9 +60,7 @@ export default function ApprovalCancel({
     setCancelResult(null);
 
     try {
-      const response = useFakeData 
-        ? await mockApprovalAPI.getApprovalDetail(apInfId)
-        : await getApprovalDetail(apInfId, systemId);
+      const response = await getApprovalDetail(apInfId);
 
       if (response.result === 'SUCCESS') {
         setApprovalDetail(response.data);
@@ -75,9 +83,7 @@ export default function ApprovalCancel({
     setIsCancelling(true);
 
     try {
-      const response = useFakeData 
-        ? await mockApprovalAPI.cancelApproval(approvalDetail.apInfId)
-        : await cancelApproval(approvalDetail.apInfId, systemId);
+      const response = await cancelApproval(approvalDetail.apInfId);
 
       if (response.result === 'SUCCESS') {
         setCancelResult({ apInfId: response.data.apInfId });
@@ -154,14 +160,14 @@ export default function ApprovalCancel({
   };
 
   return (
-    <Card className="w-full max-w-4xl">
+    <Card className="w-full max-w-5xl">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <XCircle className="w-5 h-5" />
           결재 취소
         </CardTitle>
         <CardDescription>
-          결재 ID를 입력하여 상신을 취소합니다. {useFakeData && '(테스트 모드)'}
+          상신한 결재를 취소합니다.
         </CardDescription>
       </CardHeader>
 
diff --git a/components/knox/approval/ApprovalDetail.tsx b/components/knox/approval/ApprovalDetail.tsx
index 6db43cbe..d6c883cb 100644
--- a/components/knox/approval/ApprovalDetail.tsx
+++ b/components/knox/approval/ApprovalDetail.tsx
@@ -14,12 +14,37 @@ import { Loader2, Search, FileText, Clock, User, AlertCircle } from 'lucide-reac
 import { getApprovalDetail, getApprovalContent } from '@/lib/knox-api/approval/approval';
 import type { ApprovalDetailResponse, ApprovalContentResponse, ApprovalLine } from '@/lib/knox-api/approval/approval';
 
-// Mock 데이터
-import { mockApprovalAPI, getStatusText, getRoleText, getApprovalStatusText } from './mocks/approval-mock';
+// 상태/역할 텍스트 매핑 (mock util 대체)
+const getStatusText = (status: string) => {
+  const map: Record<string, string> = {
+    '-3': '암호화실패',
+    '-2': '암호화중',
+    '-1': '예약상신',
+    '0': '보류',
+    '1': '진행중',
+    '2': '완결',
+    '3': '반려',
+    '4': '상신취소',
+    '5': '전결',
+    '6': '후완결',
+  };
+  return map[status] || status;
+};
+
+const getRoleText = (role: string) => {
+  const map: Record<string, string> = {
+    '0': '기안',
+    '1': '결재',
+    '2': '합의',
+    '3': '후결',
+    '4': '병렬합의',
+    '7': '병렬결재',
+    '9': '통보',
+  };
+  return map[role] || role;
+};
 
 interface ApprovalDetailProps {
-  useFakeData?: boolean;
-  systemId?: string;
   initialApInfId?: string;
 }
 
@@ -38,8 +63,6 @@ interface ApprovalAttachment {
 }
 
 export default function ApprovalDetail({ 
-  useFakeData = false, 
-  systemId = 'EVCP_SYSTEM',
   initialApInfId = ''
 }: ApprovalDetailProps) {
   const [apInfId, setApInfId] = useState(initialApInfId);
@@ -59,12 +82,8 @@ export default function ApprovalDetail({
 
     try {
       const [detailResponse, contentResponse] = await Promise.all([
-        useFakeData 
-          ? mockApprovalAPI.getApprovalDetail(id)
-          : getApprovalDetail(id, systemId),
-        useFakeData 
-          ? mockApprovalAPI.getApprovalContent(id)
-          : getApprovalContent(id, systemId)
+        getApprovalDetail(id),
+        getApprovalContent(id)
       ]);
 
       if (detailResponse.result === 'SUCCESS' && contentResponse.result === 'SUCCESS') {
@@ -146,11 +165,11 @@ export default function ApprovalDetail({
 
       // 2) fileId + 별도 엔드포인트 조합 (가이드에 명시되지 않았으므로 best-effort 처리)
       if (attachment.fileId) {
-        const url = `${process.env.KNOX_API_BASE_URL}/approval/api/v2.0/attachments/${attachment.fileId}`;
+        const url = `${process.env.NEXT_PUBLIC_KNOX_API_BASE_URL || ''}/approval/api/v2.0/attachments/${attachment.fileId}`;
         const resp = await fetch(url, {
           method: 'GET',
           headers: {
-            'System-ID': systemId,
+            'System-ID': process.env.NEXT_PUBLIC_KNOX_SYSTEM_ID || '',
           },
         });
         if (!resp.ok) throw new Error('다운로드 실패');
@@ -177,17 +196,17 @@ export default function ApprovalDetail({
     if (initialApInfId) {
       fetchApprovalDetail(initialApInfId);
     }
-  }, [initialApInfId, useFakeData, systemId]);
+  }, [initialApInfId]);
 
   return (
-    <Card className="w-full max-w-6xl">
+    <Card className="w-full max-w-5xl">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <FileText className="w-5 h-5" />
           결재 상세 조회
         </CardTitle>
         <CardDescription>
-          결재 ID를 입력하여 상세 정보를 조회합니다. {useFakeData && '(테스트 모드)'}
+          결재 ID를 입력하여 상세 정보를 조회합니다.
         </CardDescription>
       </CardHeader>
 
@@ -354,7 +373,7 @@ export default function ApprovalDetail({
                         <div className="mt-1">
                           <Badge variant={apln.aplnStatsCode === '1' ? 'default' : 
                                         apln.aplnStatsCode === '2' ? 'destructive' : 'outline'}>
-                            {getApprovalStatusText(apln.aplnStatsCode)}
+                            {getStatusText(apln.aplnStatsCode)}
                           </Badge>
                         </div>
                       </div>
@@ -384,7 +403,8 @@ export default function ApprovalDetail({
                   <h3 className="text-lg font-semibold">첨부파일</h3>
                   
                   <div className="space-y-2">
-                    {approvalData.detail.attachments.map((attachment: ApprovalAttachment, index: number) => (
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    {approvalData.detail.attachments.map((attachment: any, index: number) => (
                       <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                         <FileText className="w-4 h-4 text-gray-500" />
                         <div className="flex-1">
diff --git a/components/knox/approval/ApprovalList.tsx b/components/knox/approval/ApprovalList.tsx
index 7f80e74a..3a766901 100644
--- a/components/knox/approval/ApprovalList.tsx
+++ b/components/knox/approval/ApprovalList.tsx
@@ -12,12 +12,24 @@ import { Loader2, List, Eye, RefreshCw, AlertCircle } from 'lucide-react';
 import { getSubmissionList, getApprovalHistory } from '@/lib/knox-api/approval/approval';
 import type { SubmissionListResponse, ApprovalHistoryResponse } from '@/lib/knox-api/approval/approval';
 
-// Mock 데이터
-import { mockApprovalAPI, getStatusText } from './mocks/approval-mock';
+// 상태 텍스트 매핑 (mock util 대체)
+const getStatusText = (status: string) => {
+  const map: Record<string, string> = {
+    '-3': '암호화실패',
+    '-2': '암호화중',
+    '-1': '예약상신',
+    '0': '보류',
+    '1': '진행중',
+    '2': '완결',
+    '3': '반려',
+    '4': '상신취소',
+    '5': '전결',
+    '6': '후완결',
+  };
+  return map[status] || '알 수 없음';
+};
 
 interface ApprovalListProps {
-  useFakeData?: boolean;
-  systemId?: string;
   type?: 'submission' | 'history';
   onItemClick?: (apInfId: string) => void;
 }
@@ -35,8 +47,6 @@ type ListItem = {
 };
 
 export default function ApprovalList({ 
-  useFakeData = false, 
-  systemId = 'EVCP_SYSTEM',
   type = 'submission',
   onItemClick
 }: ApprovalListProps) {
@@ -52,17 +62,13 @@ export default function ApprovalList({
       let response: SubmissionListResponse | ApprovalHistoryResponse;
       
       if (type === 'submission') {
-        response = useFakeData 
-          ? await mockApprovalAPI.getSubmissionList()
-          : await getSubmissionList(systemId);
+        response = await getSubmissionList();
       } else {
-        response = useFakeData 
-          ? await mockApprovalAPI.getApprovalHistory()
-          : await getApprovalHistory(systemId);
+        response = await getApprovalHistory();
       }
 
       if (response.result === 'SUCCESS') {
-        setListData(response.data);
+        setListData(response.data as unknown as ListItem[]);
       } else {
         setError('목록을 가져오는데 실패했습니다.');
         toast.error('목록을 가져오는데 실패했습니다.');
@@ -142,10 +148,10 @@ export default function ApprovalList({
   // 컴포넌트 마운트 시 데이터 로드
   useEffect(() => {
     fetchData();
-  }, [type, useFakeData, systemId]);
+  }, [type]);
 
   return (
-    <Card className="w-full max-w-6xl">
+    <Card className="w-full max-w-5xl">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <List className="w-5 h-5" />
@@ -155,7 +161,7 @@ export default function ApprovalList({
           {type === 'submission' 
             ? '상신한 결재 목록을 확인합니다.' 
             : '결재 처리 이력을 확인합니다.'
-          } {useFakeData && '(테스트 모드)'}
+          }
         </CardDescription>
       </CardHeader>
 
diff --git a/components/knox/approval/ApprovalManager.tsx b/components/knox/approval/ApprovalManager.tsx
index cac534c4..89450445 100644
--- a/components/knox/approval/ApprovalManager.tsx
+++ b/components/knox/approval/ApprovalManager.tsx
@@ -4,8 +4,6 @@ import { useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import { Switch } from '@/components/ui/switch';
-import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { FileText, Eye, XCircle, List, History, Settings } from 'lucide-react';
 
@@ -16,18 +14,13 @@ import ApprovalCancel from './ApprovalCancel';
 import ApprovalList from './ApprovalList';
 
 interface ApprovalManagerProps {
-  useFakeData?: boolean;
-  systemId?: string;
   defaultTab?: string;
 }
 
 export default function ApprovalManager({ 
-  useFakeData = false, 
-  systemId = 'EVCP_SYSTEM',
   defaultTab = 'submit'
 }: ApprovalManagerProps) {
   const [currentTab, setCurrentTab] = useState(defaultTab);
-  const [isTestMode, setIsTestMode] = useState(useFakeData);
   const [selectedApInfId, setSelectedApInfId] = useState<string>('');
 
   const handleSubmitSuccess = (apInfId: string) => {
@@ -45,12 +38,8 @@ export default function ApprovalManager({
     setCurrentTab('detail');
   };
 
-  const handleTestModeChange = (checked: boolean) => {
-    setIsTestMode(checked);
-  };
-
   return (
-    <div className="w-full max-w-7xl mx-auto space-y-6">
+    <div className="w-full max-w-5xl mx-auto space-y-6">
       {/* 헤더 */}
       <Card>
         <CardHeader>
@@ -65,26 +54,15 @@ export default function ApprovalManager({
         
         <CardContent>
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <Label htmlFor="test-mode">테스트 모드</Label>
-                <Switch
-                  id="test-mode"
-                  checked={isTestMode}
-                  onCheckedChange={handleTestModeChange}
-                />
-              </div>
-              {isTestMode && (
-                <Badge variant="outline" className="text-yellow-600 border-yellow-600">
-                  테스트 모드 활성화
-                </Badge>
-              )}
-            </div>
+            {/* 좌측 영역 - 현재는 테스트 모드 UI 제거로 여백 유지 */}
+            <div />
             
-            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <span>시스템 ID:</span>
-              <Badge variant="outline">{systemId}</Badge>
-            </div>
+            {process.env.NEXT_PUBLIC_KNOX_SYSTEM_ID && (
+              <div className="flex items-center gap-2 text-sm text-gray-500">
+                <span>시스템 ID:</span>
+                <Badge variant="outline">{process.env.NEXT_PUBLIC_KNOX_SYSTEM_ID}</Badge>
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>
@@ -116,50 +94,46 @@ export default function ApprovalManager({
 
         {/* 결재 상신 탭 */}
         <TabsContent value="submit" className="space-y-6">
-          <ApprovalSubmit
-            useFakeData={isTestMode}
-            systemId={systemId}
-            onSubmitSuccess={handleSubmitSuccess}
-          />
+          <div className="w-full">
+            <ApprovalSubmit onSubmitSuccess={handleSubmitSuccess} />
+          </div>
         </TabsContent>
 
         {/* 결재 상세 조회 탭 */}
         <TabsContent value="detail" className="space-y-6">
-          <ApprovalDetail
-            useFakeData={isTestMode}
-            systemId={systemId}
-            initialApInfId={selectedApInfId}
-          />
+          <div className="w-full">
+            <ApprovalDetail initialApInfId={selectedApInfId} />
+          </div>
         </TabsContent>
 
         {/* 결재 취소 탭 */}
         <TabsContent value="cancel" className="space-y-6">
-          <ApprovalCancel
-            useFakeData={isTestMode}
-            systemId={systemId}
-            initialApInfId={selectedApInfId}
-            onCancelSuccess={handleCancelSuccess}
-          />
+          <div className="w-full">
+            <ApprovalCancel
+              initialApInfId={selectedApInfId}
+              onCancelSuccess={handleCancelSuccess}
+            />
+          </div>
         </TabsContent>
 
         {/* 상신함 탭 */}
         <TabsContent value="list" className="space-y-6">
-          <ApprovalList
-            useFakeData={isTestMode}
-            systemId={systemId}
-            type="submission"
-            onItemClick={handleListItemClick}
-          />
+          <div className="w-full">
+            <ApprovalList
+              type="submission"
+              onItemClick={handleListItemClick}
+            />
+          </div>
         </TabsContent>
 
         {/* 결재 이력 탭 */}
         <TabsContent value="history" className="space-y-6">
-          <ApprovalList
-            useFakeData={isTestMode}
-            systemId={systemId}
-            type="history"
-            onItemClick={handleListItemClick}
-          />
+          <div className="w-full">
+            <ApprovalList
+              type="history"
+              onItemClick={handleListItemClick}
+            />
+          </div>
         </TabsContent>
       </Tabs>
 
diff --git a/components/knox/approval/ApprovalSubmit.tsx b/components/knox/approval/ApprovalSubmit.tsx
index 526a87f3..f3c1fa3d 100644
--- a/components/knox/approval/ApprovalSubmit.tsx
+++ b/components/knox/approval/ApprovalSubmit.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -8,25 +8,93 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
+
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { toast } from 'sonner';
-import { Loader2, Plus, Trash2, FileText, AlertCircle } from 'lucide-react';
+import { Loader2, Trash2, FileText, AlertCircle, GripVertical } from 'lucide-react';
+
+// dnd-kit imports for drag and drop
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+
+// 드래그 이동을 수직 축으로 제한하고, 리스트 영역 밖으로 벗어나지 않도록 하는 modifier
+import {
+  restrictToVerticalAxis,
+  restrictToParentElement,
+} from '@dnd-kit/modifiers';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  CSS,
+} from '@dnd-kit/utilities';
 
 // API 함수 및 타입
 import { submitApproval, submitSecurityApproval, createSubmitApprovalRequest, createApprovalLine } from '@/lib/knox-api/approval/approval';
 import type { ApprovalLine, SubmitApprovalRequest } from '@/lib/knox-api/approval/approval';
 
-// Mock 데이터
-import { mockApprovalAPI, createMockApprovalLine, getRoleText } from './mocks/approval-mock';
+// 역할 텍스트 매핑 (기존 mock util 대체)
+const getRoleText = (role: string) => {
+  const map: Record<string, string> = {
+    '0': '기안',
+    '1': '결재',
+    '2': '합의',
+    '3': '후결',
+    '4': '병렬합의',
+    '7': '병렬결재',
+    '9': '통보',
+  };
+  return map[role] || role;
+};
+
+// TiptapEditor 컴포넌트
+import RichTextEditor from '@/components/rich-text-editor/RichTextEditor';
+
+// UserSelector 컴포넌트
+import { UserSelector, type UserSelectItem } from '@/components/common/user/user-selector';
+import { useSession } from 'next-auth/react';
+
+// UserSelector에서 반환되는 사용자에 epId가 포함될 수 있으므로 확장 타입 정의
+interface ExtendedUserSelectItem extends UserSelectItem {
+  epId?: string;
+}
+
+// 역할 코드 타입 정의
+type ApprovalRole = '0' | '1' | '2' | '3' | '4' | '7' | '9';
+
+// 결재 라인 아이템 타입 정의 (고유 ID 포함)
+interface ApprovalLineItem {
+  id: string; // 내부 고유 식별자
+  epId?: string; // Knox 고유 ID (전사 고유)
+  userId?: string; // DB User PK
+  emailAddress?: string;
+  name?: string; // 사용자 이름
+  deptName?: string; // 부서명
+  role: ApprovalRole;
+  seq: string;
+  opinion?: string;
+}
 
 const formSchema = z.object({
   subject: z.string().min(1, '제목은 필수입니다'),
   contents: z.string().min(1, '내용은 필수입니다'),
-  contentsType: z.enum(['TEXT', 'HTML', 'MIME']),
+  contentsType: z.literal('HTML'),
   docSecuType: z.enum(['PERSONAL', 'CONFIDENTIAL', 'CONFIDENTIAL_STRICT']),
   urgYn: z.boolean(),
   importantYn: z.boolean(),
@@ -35,8 +103,12 @@ const formSchema = z.object({
   sbmLang: z.enum(['ko', 'ja', 'zh', 'en']),
   timeZone: z.string().default('GMT+9'),
   aplns: z.array(z.object({
-    userId: z.string().min(1, '사용자 ID는 필수입니다'),
+    id: z.string(), // 고유 식별자
+    epId: z.string().optional(),
+    userId: z.string().optional(),
     emailAddress: z.string().email('유효한 이메일 주소를 입력해주세요').optional(),
+    name: z.string().optional(),
+    deptName: z.string().optional(),
     role: z.enum(['0', '1', '2', '3', '4', '7', '9']),
     seq: z.string(),
     opinion: z.string().optional()
@@ -48,25 +120,344 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 interface ApprovalSubmitProps {
-  useFakeData?: boolean;
-  systemId?: string;
   onSubmitSuccess?: (apInfId: string) => void;
 }
 
-export default function ApprovalSubmit({ 
-  useFakeData = false, 
-  systemId = 'EVCP_SYSTEM',
-  onSubmitSuccess 
-}: ApprovalSubmitProps) {
+// Sortable한 결재 라인 컴포넌트
+interface SortableApprovalLineProps {
+  apln: ApprovalLineItem;
+  index: number;
+  form: ReturnType<typeof useForm<FormData>>;
+  onRemove: () => void;
+  canRemove: boolean;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SortableApprovalLine({ apln, index, form, onRemove, canRemove, selected, onSelect }: SortableApprovalLineProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: apln.id }); // 고유 ID 사용
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1, // 드래그 중일 때 투명도 조절
+  };
+
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center gap-3 p-3 border rounded-lg bg-white shadow-sm ${selected ? 'ring-2 ring-primary' : ''}`}
+    >
+      {/* 드래그 핸들 */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="cursor-grab hover:cursor-grabbing text-gray-400 hover:text-gray-600"
+      >
+        <GripVertical className="w-5 h-5" />
+      </div>
+
+      {/* 선택 체크박스 (상신자는 제외하지만 공간은 확보) */}
+      {index !== 0 ? (
+        <Checkbox
+          checked={selected}
+          onCheckedChange={() => onSelect()}
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        <div className="w-4 h-4" /> // 기안자용 빈 공간 (체크박스가 없으므로)
+      )}
+
+      {/* 실제 seq 기준 표시 */}
+      <Badge variant="outline">{parseInt(apln.seq) + 1}</Badge>
+
+      <div className="flex-1 grid grid-cols-4 gap-3">
+        {/* 사용자 정보 표시 */}
+        <div className="flex items-center space-x-2">
+          <div>
+            <div className="font-medium text-sm">
+              {(apln.name || 'Knox 이름 없음')}{apln.deptName ? ` / ${apln.deptName}` : ''}
+            </div>
+          </div>
+          <FormField
+            control={form.control}
+            name={`aplns.${index}.id`}
+            render={() => (
+              <FormItem className="hidden">
+                <FormControl>
+                  <Input type="hidden" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`aplns.${index}.epId`}
+            render={() => (
+              <FormItem className="hidden">
+                <FormControl>
+                  <Input type="hidden" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`aplns.${index}.userId`}
+            render={() => (
+              <FormItem className="hidden">
+                <FormControl>
+                  <Input type="hidden" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`aplns.${index}.emailAddress`}
+            render={() => (
+              <FormItem className="hidden">
+                <FormControl>
+                  <Input type="hidden" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        {/* 역할 선택 */}
+        {index === 0 ? (
+          // 상신자는 역할 선택 대신 고정 표시
+          <div className="flex items-center">
+            <Badge variant="secondary">기안</Badge>
+          </div>
+        ) : (
+          <FormField
+            control={form.control}
+            name={`aplns.${index}.role`}
+            render={({ field }) => {
+              // 병렬 여부 판단
+              const isParallel = field.value === '4' || field.value === '7';
+
+              // 병렬, 후결 값을 제외한 기본 역할
+              const baseRole: ApprovalRole = field.value === '7' ? '1' : field.value === '4' ? '2' : field.value === '3' ? '1' : field.value as ApprovalRole;
+
+              // 기본 역할 변경 핸들러
+              const handleBaseRoleChange = (val: string) => {
+                if (!val) return;
+                let newRole = val;
+                if (isParallel) {
+                  if (val === '1') newRole = '7';
+                  else if (val === '2') newRole = '4';
+                }
+                field.onChange(newRole);
+              };
+
+              // 병렬인 경우 한 개 버튼으로 표시
+              if (isParallel) {
+                return (
+                  <FormItem className="w-full">
+                    <Badge className="w-full justify-center" variant="secondary">
+                      {getRoleText(field.value)}
+                    </Badge>
+                  </FormItem>
+                );
+              }
+
+              return (
+                <FormItem>
+                  <div className="flex flex-col gap-2">
+                    <ToggleGroup
+                      type="single"
+                      value={baseRole}
+                      onValueChange={handleBaseRoleChange}
+                    >
+                      <ToggleGroupItem value="1">결재</ToggleGroupItem>
+                      <ToggleGroupItem value="2">합의</ToggleGroupItem>
+                      <ToggleGroupItem value="9">통보</ToggleGroupItem>
+                    </ToggleGroup>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+        )}
+        
+        {/* 의견 입력란 제거됨 */}
+
+        {/* 역할 표시 */}
+        <div className="flex items-center justify-between">
+          <Badge variant="secondary">
+            {getRoleText(apln.role)}
+          </Badge>
+          
+          {canRemove && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onRemove}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Sortable Approval Group (seq 단위 카드)
+interface SortableApprovalGroupProps {
+  group: ApprovalLineItem[]; // 동일 seq 항목들
+  index: number;
+  form: ReturnType<typeof useForm<FormData>>;
+  onRemoveGroup: () => void;
+  canRemove: boolean;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+function SortableApprovalGroup({ group, index, form, onRemoveGroup, canRemove, selected, onSelect }: SortableApprovalGroupProps) {
+  const seq = group[0].seq;
+  const role = group[0].role;
+  // 그룹을 식별할 안정적인 고유 키(첫 구성원의 id 활용)
+  const groupKey = group[0].id;
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: groupKey });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center gap-3 p-3 border rounded-lg bg-white shadow-sm ${selected ? 'ring-2 ring-primary' : ''}`}
+    >
+      {/* 드래그 핸들 */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="cursor-grab hover:cursor-grabbing text-gray-400 hover:text-gray-600"
+      >
+        <GripVertical className="w-5 h-5" />
+      </div>
+
+      {/* 그룹 선택 체크박스 (상신자 제외하지만 공간은 확보) */}
+      {index !== 0 ? (
+        <Checkbox
+          checked={selected}
+          onCheckedChange={onSelect}
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        <div className="w-4 h-4" /> // 기안자용 빈 공간
+      )}
+
+      {/* seq 표시 */}
+      <Badge variant="outline">{parseInt(seq) + 1}</Badge>
+
+      {/* 그룹 상세 정보 */}
+      <div className="flex-1 grid grid-cols-3 gap-3">
+        {/* 사용자 목록 */}
+        <div className="flex flex-col justify-center gap-1">
+          {group.map((u) => (
+            <div key={u.id} className="text-sm">
+              {(u.name || 'Knox 이름 없음')}{u.deptName ? ` / ${u.deptName}` : ''}
+            </div>
+          ))}
+        </div>
+
+        {/* 역할 */}
+        <div className="flex items-center">
+          {seq === '0' ? (
+            <Badge variant="secondary" className="w-full justify-center">
+              기안
+            </Badge>
+          ) : role === '7' || role === '4' ? (
+            <Badge variant="secondary" className="w-full justify-center">
+              {getRoleText(role)}
+            </Badge>
+          ) : (
+            // 단일일 때는 기존 토글 재사용 (첫 항목 기준)
+            <FormField
+              control={form.control}
+              name={`aplns.${form.getValues('aplns').findIndex((a) => a.id === group[0].id)}.role`}
+              render={({ field }) => (
+                <ToggleGroup
+                  type="single"
+                  value={field.value}
+                  onValueChange={field.onChange}
+                >
+                  <ToggleGroupItem value="1">결재</ToggleGroupItem>
+                  <ToggleGroupItem value="2">합의</ToggleGroupItem>
+                  <ToggleGroupItem value="9">통보</ToggleGroupItem>
+                </ToggleGroup>
+              )}
+            />
+          )}
+        </div>
+
+        {/* 삭제 버튼 */}
+        <div className="flex items-center justify-end">
+          {canRemove && (
+            <Button type="button" variant="ghost" size="sm" onClick={onRemoveGroup}>
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ApprovalSubmit({ onSubmitSuccess }: ApprovalSubmitProps) {
+  const { data: session } = useSession();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitResult, setSubmitResult] = useState<{ apInfId: string } | null>(null);
 
+  const [selectedSeqs, setSelectedSeqs] = useState<string[]>([]);
+
+  // 그룹 단위 선택/해제
+  const toggleSelectGroup = (seq: string) => {
+    setSelectedSeqs((prev) =>
+      prev.includes(seq) ? prev.filter((s) => s !== seq) : [...prev, seq]
+    );
+  };
+  const clearSelection = () => setSelectedSeqs([]);
+
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       subject: '',
       contents: '',
-      contentsType: 'TEXT',
+      contentsType: 'HTML',
       docSecuType: 'PERSONAL',
       urgYn: false,
       importantYn: false,
@@ -74,109 +465,342 @@ export default function ApprovalSubmit({
       docMngSaveCode: '0',
       sbmLang: 'ko',
       timeZone: 'GMT+9',
-      aplns: [
-        {
-          userId: '',
-          emailAddress: '',
-          role: '0',
-          seq: '1',
-          opinion: ''
-        }
-      ],
+      aplns: [],
       attachments: undefined
     }
   });
 
   const aplns = form.watch('aplns');
 
-  const addApprovalLine = () => {
-    const newSeq = (aplns.length + 1).toString();
-    form.setValue('aplns', [...aplns, {
-      userId: '',
-      emailAddress: '',
-      role: '1',
-      seq: newSeq,
-      opinion: ''
-    }]);
+  // 병렬 전환 핸들러
+  const applyParallel = () => {
+    if (selectedSeqs.length < 2) {
+      toast.error('두 명 이상 선택해야 병렬 지정이 가능합니다.');
+      return;
+    }
+
+    const current = form.getValues('aplns');
+    const selectedAplns = current.filter((a) => selectedSeqs.includes(a.seq));
+
+    const roles = Array.from(new Set(selectedAplns.map((a) => a.role)));
+    if (roles.length !== 1) {
+      toast.error('선택된 항목의 역할이 동일해야 합니다.');
+      return;
+    }
+
+    const role = roles[0];
+    let newRole: ApprovalRole;
+    if (role === '1') {
+      newRole = '7'; // 병렬 결재
+    } else if (role === '2') {
+      newRole = '4'; // 병렬 합의
+    } else if (role === '9') {
+      newRole = '9'; // 병렬 통보(역할 코드 유지)
+    } else {
+      toast.error('결재, 합의 또는 통보만 병렬 지정 가능합니다.');
+      return;
+    }
+
+    const minSeq = Math.min(...selectedAplns.map((a) => parseInt(a.seq)));
+
+    const updated = current.map((a) => {
+      if (selectedSeqs.includes(a.seq)) {
+        return { ...a, role: newRole as ApprovalRole, seq: minSeq.toString() };
+      }
+      return a;
+    });
+
+    form.setValue('aplns', reorderBySeq(updated), { shouldDirty: true });
+    clearSelection();
+  };
+
+  // 후결 전환 핸들러
+  const applyAfter = () => {
+    if (selectedSeqs.length !== 1) {
+      toast.error('후결은 한 명만 지정할 수 있습니다.');
+      return;
+    }
+
+    const targetSeq = selectedSeqs[0];
+
+    // 병렬 그룹(결재:7, 합의:4)은 후결 전환 불가
+    const targetRole = form.getValues('aplns').find((a) => a.seq === targetSeq)?.role;
+    if (targetRole === '7' || targetRole === '4') {
+      toast.error('병렬 그룹은 후결로 전환할 수 없습니다.');
+      return;
+    }
+
+    const updated = form.getValues('aplns').map((a) => {
+      if (a.seq === targetSeq) {
+        return { ...a, role: (a.role === '3' ? '1' : '3') as ApprovalRole };
+      }
+      return a;
+    });
+
+    form.setValue('aplns', reorderBySeq(updated), { shouldDirty: true });
+    clearSelection();
+  };
+
+  // 병렬 해제 핸들러
+  const ungroupParallel = () => {
+    if (selectedSeqs.length === 0) {
+      toast.error('해제할 결재선을 선택하세요.');
+      return;
+    }
+
+    let newSeqCounter = 1; // 0은 상신자 유지
+    const updated = form.getValues('aplns').map((a) => {
+      if (selectedSeqs.includes(a.seq)) {
+        let newRole: ApprovalRole = a.role;
+        if (a.role === '7') newRole = '1';
+        if (a.role === '4') newRole = '2';
+
+        return { ...a, role: newRole, seq: '' }; // seq 임시 비움
+      }
+      return { ...a };
+    });
+
+    // seq 재할당 (상신자 제외하고 순차)
+    const reassigned = updated
+      .sort((x, y) => parseInt(x.seq || '0') - parseInt(y.seq || '0'))
+      .map((a) => {
+        if (a.seq === '0') return a; // 상신자
+        const newItem = { ...a, seq: newSeqCounter.toString() };
+        newSeqCounter += 1;
+        return newItem;
+      });
+
+    form.setValue('aplns', reassigned as FormData['aplns'], { shouldDirty: true });
+    clearSelection();
+  };
+
+  // seq 기준 정렬 및 재번호 부여 (병렬 그룹은 동일 seq 유지)
+  const reorderBySeq = (list: FormData['aplns']): FormData['aplns'] => {
+    const sorted = [...list].sort((a, b) => parseInt(a.seq) - parseInt(b.seq));
+
+    // 기존 seq -> 새 seq 매핑. 병렬 그룹(동일 seq)은 동일한 새 seq 를 갖도록 처리
+    const seqMap = new Map<string, string>();
+    let nextSeq = 0;
+
+    return sorted.map((apln) => {
+      if (!seqMap.has(apln.seq)) {
+        seqMap.set(apln.seq, nextSeq.toString());
+        nextSeq += 1;
+      }
+      return { ...apln, seq: seqMap.get(apln.seq)! };
+    });
+  };
+
+  // 로그인 사용자를 첫 번째 결재자로 보장하는 effect
+  useEffect(() => {
+    if (!session?.user) return;
+
+    const currentEmail = session.user.email ?? '';
+    const currentEpId = (session.user as { epId?: string }).epId;
+    const currentUserId = session.user.id ?? undefined;
+
+    let currentAplns = form.getValues('aplns');
+
+    // 이미 포함되어 있는지 확인 (epId 또는 email 기준)
+    const selfIndex = currentAplns.findIndex(
+      (a) => (currentEpId && a.epId === currentEpId) || a.emailAddress === currentEmail
+    );
+
+    if (selfIndex === -1) {
+      // 맨 앞에 상신자 추가
+      const newSelf: FormData['aplns'][number] = {
+        id: generateUniqueId(),
+        epId: currentEpId,
+        userId: currentUserId ? currentUserId.toString() : undefined,
+        emailAddress: currentEmail,
+        name: session.user.name ?? undefined,
+        role: '0', // 기안
+        seq: '0',
+        opinion: ''
+      };
+
+      currentAplns = [newSelf, ...currentAplns];
+    }
+
+    // seq 재정렬 보장
+    currentAplns = currentAplns.map((apln, idx) => ({ ...apln, seq: idx.toString() }));
+
+    form.setValue('aplns', currentAplns, { shouldValidate: false, shouldDirty: true });
+  }, [session, form]);
+
+  // dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // 고유 ID 생성 함수
+  const generateUniqueId = () => {
+    return `apln-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  };
+
+  // 결재자 추가 (UserSelector를 통해)
+  const addApprovalUsers = (users: UserSelectItem[]) => {
+    const newAplns = [...aplns];
+    
+    users.forEach((user) => {
+      // 이미 추가된 사용자인지 확인
+      const existingIndex = newAplns.findIndex(apln => apln.userId === user.id.toString());
+      if (existingIndex === -1) {
+        // 새 사용자 추가
+        const newSeq = (newAplns.length).toString(); // 0은 상신자
+        const newApln: FormData['aplns'][number] = {
+          id: generateUniqueId(), // 고유 ID 생성
+          epId: (user as ExtendedUserSelectItem).epId, // epId가 전달되면 사용
+          userId: user.id.toString(),
+          emailAddress: user.email,
+          name: user.name,
+          deptName: (user as ExtendedUserSelectItem).deptName ?? undefined,
+          role: '1', // 기본값: 결재
+          seq: newSeq,
+          opinion: ''
+        };
+        newAplns.push(newApln);
+      }
+    });
+    
+    form.setValue('aplns', newAplns);
+  };
+
+  // 그룹 삭제 (seq 기반)
+  const removeApprovalGroup = (seq: string) => {
+    if (seq === '0') return; // 상신자 삭제 불가
+
+    const remaining = aplns.filter((a) => a.seq !== seq);
+
+    // seq 재정렬 (병렬 그룹 유지)
+    const reordered = reorderBySeq(remaining);
+    form.setValue('aplns', reordered);
   };
 
+  // 기존 단일 삭제 로직은 더 이상 사용하지 않음 (호환 위해 남겨둠)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const removeApprovalLine = (index: number) => {
+    // 첫 번째(상신자)는 삭제 불가
+    if (index === 0) return;
+
     if (aplns.length > 1) {
-      const newAplns = aplns.filter((_, i) => i !== index);
-      // 순서 재정렬
-      const reorderedAplns = newAplns.map((apln, i) => ({
+      const newAplns = aplns.filter((_: FormData['aplns'][number], i: number) => i !== index);
+      // 순서 재정렬 (ID는 유지)
+      const reorderedAplns = newAplns.map((apln: FormData['aplns'][number], i: number) => ({
         ...apln,
-        seq: (i + 1).toString()
+        seq: (i).toString()
       }));
       form.setValue('aplns', reorderedAplns);
     }
   };
 
+  // 드래그앤드롭 핸들러 (그룹 이동 지원)
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) return;
+
+    // 현재 id는 그룹의 고유 key(첫 라인 id)
+    const activeKey = active.id as string;
+    const overKey = over.id as string;
+
+    // key → seq 매핑 생성
+    const idToSeq = new Map<string, string>();
+    aplns.forEach((a) => {
+      // 같은 seq 내 첫 번째 id만 매핑하면 충분하지만, 안전하게 모두 매핑
+      idToSeq.set(a.id, a.seq);
+    });
+
+    const activeSeq = idToSeq.get(activeKey);
+    const overSeq = idToSeq.get(overKey);
+
+    if (!activeSeq || !overSeq) return;
+
+    if (activeSeq === '0' || overSeq === '0') return; // 상신자는 이동 불가
+
+    // 현재 그룹 순서를 key 기반으로 계산
+    const seqOrder = Array.from(new Set(aplns.map((a) => a.seq)));
+    const keyOrder = seqOrder.map((seq) => {
+      return aplns.find((a) => a.seq === seq)!.id;
+    });
+
+    const oldIndex = keyOrder.indexOf(activeKey);
+    const newIndex = keyOrder.indexOf(overKey);
+
+    const newKeyOrder = arrayMove(keyOrder, oldIndex, newIndex);
+
+    // key → 새 seq 매핑
+    const keyToNewSeq = new Map<string, string>();
+    newKeyOrder.forEach((k, idx) => {
+      keyToNewSeq.set(k, idx.toString());
+    });
+
+    // aplns 재구성 + seq 재할당
+    const updatedAplns: FormData['aplns'] = [];
+    newKeyOrder.forEach((k) => {
+      const oldSeq = idToSeq.get(k)!;
+      const groupItems = aplns.filter((a) => a.seq === oldSeq);
+      groupItems.forEach((item) => {
+        updatedAplns.push({ ...item, seq: keyToNewSeq.get(k)! });
+      });
+    });
+
+    form.setValue('aplns', updatedAplns, { shouldValidate: false, shouldDirty: true });
+  };
+
   const onSubmit = async (data: FormData) => {
     setIsSubmitting(true);
     setSubmitResult(null);
 
     try {
-      // 결재 경로 생성
+      // 결재 경로 생성 (ID 제거하고 API 호출)
       const approvalLines: ApprovalLine[] = await Promise.all(
-        data.aplns.map(async (apln) => {
-          if (useFakeData) {
-            return createMockApprovalLine({
-              userId: apln.userId,
-              emailAddress: apln.emailAddress,
-              role: apln.role,
-              seq: apln.seq,
-              opinion: apln.opinion
-            });
-          } else {
-            return createApprovalLine(
-              { userId: apln.userId, emailAddress: apln.emailAddress },
-              apln.role,
-              apln.seq,
-              { opinion: apln.opinion }
-            );
-          }
-        })
+        data.aplns.map((apln) =>
+          createApprovalLine(
+            // userId: apln.userId 는 불필요하므로 제거
+            { epId: apln.epId, emailAddress: apln.emailAddress },
+            apln.role,
+            apln.seq,
+            { opinion: apln.opinion }
+          )
+        )
       );
 
       // 상신 요청 생성
       const attachmentsArray = data.attachments ? Array.from(data.attachments as FileList) : undefined;
 
-      const submitRequest: SubmitApprovalRequest = useFakeData
-        ? {
-            ...data,
-            urgYn: data.urgYn ? 'Y' : 'N',
-            importantYn: data.importantYn ? 'Y' : 'N',
-            sbmDt: new Date().toISOString().replace(/-|:|T/g, '').slice(0, 14),
-            apInfId: 'test-ap-inf-id-' + Date.now(),
-            aplns: approvalLines,
-            attachments: attachmentsArray
-          }
-        : await createSubmitApprovalRequest(
-            data.contents,
-            data.subject,
-            approvalLines,
-            {
-              contentsType: data.contentsType,
-              docSecuType: data.docSecuType,
-              urgYn: data.urgYn ? 'Y' : 'N',
-              importantYn: data.importantYn ? 'Y' : 'N',
-              notifyOption: data.notifyOption,
-              docMngSaveCode: data.docMngSaveCode,
-              sbmLang: data.sbmLang,
-              timeZone: data.timeZone,
-              attachments: attachmentsArray
-            }
-          );
+      const submitRequest: SubmitApprovalRequest = await createSubmitApprovalRequest(
+        data.contents,
+        data.subject,
+        approvalLines,
+        {
+          contentsType: 'HTML',
+          docSecuType: data.docSecuType,
+          urgYn: data.urgYn ? 'Y' : 'N',
+          importantYn: data.importantYn ? 'Y' : 'N',
+          notifyOption: data.notifyOption,
+          docMngSaveCode: data.docMngSaveCode,
+          sbmLang: data.sbmLang,
+          timeZone: data.timeZone,
+          attachments: attachmentsArray
+        }
+      );
 
       // API 호출 (보안 등급에 따라 분기)
       const isSecure = data.docSecuType === 'CONFIDENTIAL' || data.docSecuType === 'CONFIDENTIAL_STRICT';
 
-      const response = useFakeData
-        ? await mockApprovalAPI.submitApproval(submitRequest)
-        : isSecure
-          ? await submitSecurityApproval(submitRequest, systemId)
-          : await submitApproval(submitRequest, systemId);
+      console.log(submitRequest);
+
+      const response = isSecure
+        ? await submitSecurityApproval(submitRequest)
+        : await submitApproval(submitRequest);
 
       if (response.result === 'SUCCESS') {
         setSubmitResult({ apInfId: response.data.apInfId });
@@ -195,14 +819,14 @@ export default function ApprovalSubmit({
   };
 
   return (
-    <Card className="w-full max-w-4xl">
+    <Card className="w-full max-w-5xl">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <FileText className="w-5 h-5" />
           결재 상신
         </CardTitle>
         <CardDescription>
-          새로운 결재를 상신합니다. {useFakeData && '(테스트 모드)'}
+          새로운 결재를 상신합니다.
         </CardDescription>
       </CardHeader>
 
@@ -223,7 +847,80 @@ export default function ApprovalSubmit({
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             {/* 기본 정보 */}
             <div className="space-y-4">
-              <h3 className="text-lg font-semibold">기본 정보</h3>
+
+              <Separator />
+
+              {/* 결재 경로 */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">결재 경로</h3>
+
+                {/* 상단 제어 버튼 */}
+                <div className="flex justify-end gap-2 mb-2">
+                  <Button variant="outline" size="sm" onClick={applyParallel}>병렬</Button>
+                  <Button variant="outline" size="sm" onClick={applyAfter}>후결</Button>
+                  <Button variant="outline" size="sm" onClick={ungroupParallel}>해제</Button>
+                </div>
+
+                {/* 결재자 추가 섹션 */}
+                <div className="p-4 border border-dashed border-gray-300 rounded-lg">
+                  <div className="mb-2">
+                    <label className="text-sm font-medium text-gray-700">결재자 추가</label>
+                    <p className="text-xs text-gray-500">사용자를 검색하여 결재 라인에 추가하세요</p>
+                  </div>
+                  <UserSelector
+                    selectedUsers={[]}
+                    onUsersChange={addApprovalUsers}
+                    placeholder="결재자를 검색하세요..."
+                    domainFilter={{ type: "exclude", domains: ["partners"] }}
+                    maxSelections={10} // 최대 10명까지 추가 가능
+                  />
+                </div>
+
+                {/* 그룹 기반 렌더링 */}
+                {aplns.length > 0 && (
+                  (() => {
+                    const groups = Object.values(
+                      aplns.reduce<Record<string, ApprovalLineItem[]>>((acc, apln) => {
+                        acc[apln.seq] = acc[apln.seq] ? [...acc[apln.seq], apln] : [apln];
+                        return acc;
+                      }, {})
+                    ).sort((a, b) => parseInt(a[0].seq) - parseInt(b[0].seq));
+
+                    return (
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+                        onDragEnd={handleDragEnd}
+                      >
+                        <SortableContext items={groups.map(g => g[0].id)} strategy={verticalListSortingStrategy}>
+                          <div className="space-y-3">
+                            {groups.map((group, idx) => (
+                              <SortableApprovalGroup
+                                key={group[0].id}
+                                group={group}
+                                index={idx}
+                                form={form}
+                                onRemoveGroup={() => removeApprovalGroup(group[0].seq)}
+                                canRemove={idx !== 0 && aplns.length > 1}
+                                selected={selectedSeqs.includes(group[0].seq)}
+                                onSelect={() => toggleSelectGroup(group[0].seq)}
+                              />
+                            ))}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                    );
+                  })()
+                )}
+
+                {aplns.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                    <p>결재자를 추가해주세요</p>
+                  </div>
+                )}
+              </div>
               
               <FormField
                 control={form.control}
@@ -246,10 +943,10 @@ export default function ApprovalSubmit({
                   <FormItem>
                     <FormLabel>내용 *</FormLabel>
                     <FormControl>
-                      <Textarea
-                        placeholder="결재 내용을 입력하세요"
-                        rows={8}
-                        {...field}
+                      <RichTextEditor
+                        value={field.value}
+                        onChange={field.onChange}
+                        height="400px"
                       />
                     </FormControl>
                     <FormMessage />
@@ -257,64 +954,38 @@ export default function ApprovalSubmit({
                 )}
               />
 
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={form.control}
-                  name="contentsType"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>내용 형식</FormLabel>
-                      <Select onValueChange={field.onChange} defaultValue={field.value}>
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="내용 형식 선택" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="TEXT">TEXT</SelectItem>
-                          <SelectItem value="HTML">HTML</SelectItem>
-                          <SelectItem value="MIME">MIME</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
+              {/*  1 x 3 옵션 그리드 (보안 / 긴급 / 중요) */}
+              <div className="grid grid-cols-3 gap-4">
+                {/* 보안 등급 */}
                 <FormField
                   control={form.control}
                   name="docSecuType"
                   render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>보안 등급</FormLabel>
-                      <Select onValueChange={field.onChange} defaultValue={field.value}>
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="보안 등급 선택" />
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                      <FormLabel>보안</FormLabel>
+                      <FormControl>
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <SelectTrigger className="w-24">
+                            <SelectValue placeholder="등급" />
                           </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="PERSONAL">개인</SelectItem>
-                          <SelectItem value="CONFIDENTIAL">기밀</SelectItem>
-                          <SelectItem value="CONFIDENTIAL_STRICT">극기밀</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
+                          <SelectContent>
+                            <SelectItem value="PERSONAL">개인</SelectItem>
+                            <SelectItem value="CONFIDENTIAL">기밀</SelectItem>
+                            <SelectItem value="CONFIDENTIAL_STRICT">극기밀</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
                     </FormItem>
                   )}
                 />
-              </div>
 
-              <div className="grid grid-cols-2 gap-4">
+                {/* 긴급 여부 */}
                 <FormField
                   control={form.control}
                   name="urgYn"
                   render={({ field }) => (
                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
-                      <div className="space-y-0.5">
-                        <FormLabel>긴급 여부</FormLabel>
-                        <FormDescription>긴급 결재로 처리</FormDescription>
-                      </div>
+                      <FormLabel>긴급</FormLabel>
                       <FormControl>
                         <Switch
                           checked={field.value}
@@ -325,15 +996,13 @@ export default function ApprovalSubmit({
                   )}
                 />
 
+                {/* 중요 여부 */}
                 <FormField
                   control={form.control}
                   name="importantYn"
                   render={({ field }) => (
                     <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
-                      <div className="space-y-0.5">
-                        <FormLabel>중요 여부</FormLabel>
-                        <FormDescription>중요 결재로 분류</FormDescription>
-                      </div>
+                      <FormLabel>중요</FormLabel>
                       <FormControl>
                         <Switch
                           checked={field.value}
@@ -369,116 +1038,6 @@ export default function ApprovalSubmit({
 
             <Separator />
 
-            {/* 결재 경로 */}
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold">결재 경로</h3>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={addApprovalLine}
-                >
-                  <Plus className="w-4 h-4 mr-2" />
-                  결재자 추가
-                </Button>
-              </div>
-
-              <div className="space-y-3">
-                {aplns.map((apln, index) => (
-                  <div key={index} className="flex items-center gap-3 p-3 border rounded-lg">
-                    <Badge variant="outline">{index + 1}</Badge>
-                    
-                    <div className="flex-1 grid grid-cols-4 gap-3">
-                      <FormField
-                        control={form.control}
-                        name={`aplns.${index}.userId`}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Input placeholder="사용자 ID" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name={`aplns.${index}.emailAddress`}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Input placeholder="이메일 (선택)" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name={`aplns.${index}.role`}
-                        render={({ field }) => (
-                          <FormItem>
-                            <Select onValueChange={field.onChange} defaultValue={field.value}>
-                              <FormControl>
-                                <SelectTrigger>
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="0">기안</SelectItem>
-                                <SelectItem value="1">결재</SelectItem>
-                                <SelectItem value="2">합의</SelectItem>
-                                <SelectItem value="3">후결</SelectItem>
-                                <SelectItem value="4">병렬합의</SelectItem>
-                                <SelectItem value="7">병렬결재</SelectItem>
-                                <SelectItem value="9">통보</SelectItem>
-                              </SelectContent>
-                            </Select>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name={`aplns.${index}.opinion`}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Input placeholder="의견 (선택)" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <Badge variant="secondary">
-                        {getRoleText(apln.role)}
-                      </Badge>
-                      
-                      {aplns.length > 1 && (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => removeApprovalLine(index)}
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <Separator />
-
             {/* 제출 버튼 */}
             <div className="flex justify-end space-x-3">
               <Button
diff --git a/components/knox/approval/index.ts b/components/knox/approval/index.ts
index 0bae08f1..e3aabf8d 100644
--- a/components/knox/approval/index.ts
+++ b/components/knox/approval/index.ts
@@ -5,9 +5,6 @@ export { default as ApprovalCancel } from './ApprovalCancel';
 export { default as ApprovalList } from './ApprovalList';
 export { default as ApprovalManager } from './ApprovalManager';
 
-// Mock 데이터 및 유틸리티 함수들
-export * from './mocks/approval-mock';
-
 // 타입 정의들 (re-export)
 export type {
   ApprovalLine,
diff --git a/components/knox/approval/mocks/approval-mock.ts b/components/knox/approval/mocks/approval-mock.ts
deleted file mode 100644
index 021eb925..00000000
--- a/components/knox/approval/mocks/approval-mock.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import { 
-  ApprovalLine, 
-  SubmitApprovalRequest, 
-  SubmitApprovalResponse,
-  ApprovalDetailResponse,
-  ApprovalContentResponse,
-  ApprovalStatusResponse,
-  CancelApprovalResponse,
-  SubmissionListResponse,
-  ApprovalHistoryResponse
-} from '@/lib/knox-api/approval/approval';
-
-// Mock 데이터 생성 함수들
-export const createMockApprovalLine = (overrides?: Partial<ApprovalLine>): ApprovalLine => ({
-  epId: '12345',
-  userId: 'user123',
-  emailAddress: 'user@example.com',
-  seq: '1',
-  role: '0', // 기안
-  aplnStatsCode: '0', // 미결
-  arbPmtYn: 'N',
-  contentsMdfyPmtYn: 'N',
-  aplnMdfyPmtYn: 'N',
-  opinion: '결재 요청드립니다.',
-  ...overrides
-});
-
-export const createMockSubmitApprovalRequest = (overrides?: Partial<SubmitApprovalRequest>): SubmitApprovalRequest => ({
-  contents: '결재 요청 내용입니다.',
-  contentsType: 'TEXT',
-  docSecuType: 'PERSONAL',
-  notifyOption: '0',
-  urgYn: 'N',
-  sbmDt: '20241215120000',
-  timeZone: 'GMT+9',
-  docMngSaveCode: '0',
-  subject: '결재 요청 - 테스트',
-  sbmLang: 'ko',
-  apInfId: 'test-ap-inf-id-' + Date.now(),
-  importantYn: 'N',
-  aplns: [
-    createMockApprovalLine({ seq: '1', role: '0' }), // 기안
-    createMockApprovalLine({ seq: '2', role: '1', userId: 'approver1' }), // 결재
-    createMockApprovalLine({ seq: '3', role: '1', userId: 'approver2' }), // 결재
-  ],
-  ...overrides
-});
-
-export const mockSubmitApprovalResponse: SubmitApprovalResponse = {
-  result: 'SUCCESS',
-  data: {
-    apInfId: 'test-ap-inf-id-' + Date.now()
-  }
-};
-
-export const mockApprovalDetailResponse: ApprovalDetailResponse = {
-  result: 'SUCCESS',
-  data: {
-    contentsType: 'TEXT',
-    sbmDt: '20241215120000',
-    sbmLang: 'ko',
-    apInfId: 'test-ap-inf-id-123',
-    systemId: 'EVCP_SYSTEM',
-    notifyOption: '0',
-    urgYn: 'N',
-    docSecuType: 'PERSONAL',
-    status: '1', // 진행중
-    timeZone: 'GMT+9',
-    subject: '결재 요청 - 테스트',
-    aplns: [
-      createMockApprovalLine({ seq: '1', role: '0', aplnStatsCode: '1' }), // 기안 완료
-      createMockApprovalLine({ seq: '2', role: '1', aplnStatsCode: '0', userId: 'approver1' }), // 결재 대기
-      createMockApprovalLine({ seq: '3', role: '1', aplnStatsCode: '0', userId: 'approver2' }), // 결재 대기
-    ],
-    attachments: []
-  }
-};
-
-export const mockApprovalContentResponse: ApprovalContentResponse = {
-  result: 'SUCCESS',
-  data: {
-    contents: '결재 요청 내용입니다.\n\n상세한 내용은 다음과 같습니다:\n- 항목 1\n- 항목 2\n- 항목 3',
-    contentsType: 'TEXT',
-    apInfId: 'test-ap-inf-id-123'
-  }
-};
-
-export const mockApprovalStatusResponse: ApprovalStatusResponse = {
-  result: 'SUCCESS',
-  data: [
-    {
-      apInfId: 'test-ap-inf-id-123',
-      docChgNum: '1',
-      status: '1' // 진행중
-    }
-  ]
-};
-
-export const mockCancelApprovalResponse: CancelApprovalResponse = {
-  result: 'SUCCESS',
-  data: {
-    apInfId: 'test-ap-inf-id-123'
-  }
-};
-
-export const mockSubmissionListResponse: SubmissionListResponse = {
-  result: 'SUCCESS',
-  data: [
-    {
-      apInfId: 'test-ap-inf-id-123',
-      subject: '결재 요청 - 테스트',
-      sbmDt: '20241215120000',
-      status: '1',
-      urgYn: 'N',
-      docSecuType: 'PERSONAL'
-    },
-    {
-      apInfId: 'test-ap-inf-id-124',
-      subject: '결재 요청 - 테스트 2',
-      sbmDt: '20241214100000',
-      status: '2',
-      urgYn: 'Y',
-      docSecuType: 'CONFIDENTIAL'
-    }
-  ]
-};
-
-export const mockApprovalHistoryResponse: ApprovalHistoryResponse = {
-  result: 'SUCCESS',
-  data: [
-    {
-      apInfId: 'test-ap-inf-id-123',
-      subject: '결재 요청 - 테스트',
-      sbmDt: '20241215120000',
-      status: '1',
-      actionType: 'SUBMIT',
-      actionDt: '20241215120000',
-      userId: 'submitter123'
-    },
-    {
-      apInfId: 'test-ap-inf-id-124',
-      subject: '결재 요청 - 테스트 2',
-      sbmDt: '20241214100000',
-      status: '2',
-      actionType: 'APPROVE',
-      actionDt: '20241214150000',
-      userId: 'approver1'
-    }
-  ]
-};
-
-// Mock 함수들
-export const mockApprovalAPI = {
-  submitApproval: async (request: SubmitApprovalRequest): Promise<SubmitApprovalResponse> => {
-    // 실제 API 호출 시뮬레이션
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    return mockSubmitApprovalResponse;
-  },
-
-  getApprovalDetail: async (apInfId: string): Promise<ApprovalDetailResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 500));
-    return mockApprovalDetailResponse;
-  },
-
-  getApprovalContent: async (apInfId: string): Promise<ApprovalContentResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 300));
-    return mockApprovalContentResponse;
-  },
-
-  getApprovalStatus: async (apInfIds: string[]): Promise<ApprovalStatusResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 400));
-    return mockApprovalStatusResponse;
-  },
-
-  cancelApproval: async (apInfId: string): Promise<CancelApprovalResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 800));
-    return mockCancelApprovalResponse;
-  },
-
-  getSubmissionList: async (): Promise<SubmissionListResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 600));
-    return mockSubmissionListResponse;
-  },
-
-  getApprovalHistory: async (): Promise<ApprovalHistoryResponse> => {
-    await new Promise(resolve => setTimeout(resolve, 700));
-    return mockApprovalHistoryResponse;
-  }
-};
-
-// 상태 및 역할 텍스트 변환 함수들
-export const getStatusText = (status: string): string => {
-  const statusMap: Record<string, string> = {
-    '-3': '암호화실패',
-    '-2': '암호화중',
-    '-1': '예약상신',
-    '0': '보류',
-    '1': '진행중',
-    '2': '완결',
-    '3': '반려',
-    '4': '상신취소',
-    '5': '전결',
-    '6': '후완결'
-  };
-  return statusMap[status] || '알 수 없음';
-};
-
-export const getRoleText = (role: string): string => {
-  const roleMap: Record<string, string> = {
-    '0': '기안',
-    '1': '결재',
-    '2': '합의',
-    '3': '후결',
-    '4': '병렬합의',
-    '7': '병렬결재',
-    '9': '통보'
-  };
-  return roleMap[role] || '알 수 없음';
-};
-
-export const getApprovalStatusText = (status: string): string => {
-  const statusMap: Record<string, string> = {
-    '0': '미결',
-    '1': '결재',
-    '2': '반려',
-    '3': '전결',
-    '5': '자동결재'
-  };
-  return statusMap[status] || '알 수 없음';
-}; 
\ No newline at end of file