feat: 순서변경 ▲/▼ 버튼 추가 (터치 지원) + 단가표 테이블 스크롤 수정

- ReorderButtons 공통 컴포넌트 신규 생성 (molecules)
- 패턴B(리스트): RankManagement, TitleManagement, CategoryManagement
- 패턴A(테이블): ProcessDetail, ProcessForm, ChecklistDetail
- 패턴C(컴포넌트): DraggableSection, DraggableField, HierarchyTab
- 모바일: GripVertical 숨김, ▲/▼ 버튼만 표시
- 데스크톱: GripVertical + ▲/▼ 버튼 모두 표시
- 단가표 단가정보 테이블 overflow-hidden → overflow-x-auto + min-w 적용

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,
     ]