feat(WEB): 상세 페이지 권한 체계 통합 및 레이아웃/문서 기능 개선

권한 시스템 통합:
- BadDebtDetail, LaborDetail, PricingDetail 권한 로직 정리
- BoardDetail, ClientDetail, ItemDetail 권한 적용 개선
- ProcessDetail, StepDetail, PermissionDetail 권한 리팩토링
- ContractDetail, HandoverReport, ProgressBilling 권한 연동
- ReceivingDetail, ShipmentDetail, WorkOrderDetail 권한 적용
- InspectionDetail, OrderSalesDetail, QuoteFooterBar 권한 개선

기능 개선:
- AuthenticatedLayout 구조 리팩토링
- JointbarInspectionDocument 문서 레이아웃 개선
- PricingTableForm 폼 기능 보강
- DynamicItemForm, SectionsTab 개선
- 주문관리 상세/생산지시 페이지 개선
- VendorLedgerDetail 수정

설정:
- Claude hooks 추가 (빌드 차단, 파일 크기 체크, 미사용 import 체크)
- 품질감사 문서관리 계획 문서 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/accounting/BadDebtCollection/BadDebtDetail.tsx

@@ -27,7 +27,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { DeleteConfirmDialog, SaveConfirmDialog } from '@/components/ui/confirm-dialog';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { badDebtConfig } from './badDebtConfig';
 import { toast } from 'sonner';
@@ -43,7 +42,6 @@ import {
 } from './types';
 import { createBadDebt, updateBadDebt, deleteBadDebt, addBadDebtMemo, deleteBadDebtMemo } from './actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
-import { usePermission } from '@/hooks/usePermission';
 
 interface BadDebtDetailProps {
   mode: 'view' | 'edit' | 'new';
@@ -96,7 +94,6 @@ const getEmptyRecord = (): Omit<BadDebtRecord, 'id' | 'createdAt' | 'updatedAt'>
 
 export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProps) {
   const router = useRouter();
-  const { canUpdate, canDelete } = usePermission();
   const isViewMode = mode === 'view';
   const isNewMode = mode === 'new';
 
@@ -114,9 +111,7 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
     },
   });
 
-  // 다이얼로그 상태
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  // 상태
   const [isLoading, setIsLoading] = useState(false);
 
   // 새 메모 입력
@@ -132,82 +127,43 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
     setFormData(prev => ({ ...prev, [field]: value }));
   }, []);
 
-  // 네비게이션 핸들러
-  const handleEdit = useCallback(() => {
-    router.push(`/ko/accounting/bad-debt-collection/${recordId}?mode=edit`);
-  }, [router, recordId]);
-
-  const handleCancel = useCallback(() => {
-    if (isNewMode) {
-      router.push('/ko/accounting/bad-debt-collection');
-    } else {
-      router.push(`/ko/accounting/bad-debt-collection/${recordId}?mode=view`);
-    }
-  }, [router, recordId, isNewMode]);
-
-  // 저장 핸들러
-  const handleSave = useCallback(() => {
-    setShowSaveDialog(true);
-  }, []);
-
-  const handleConfirmSave = useCallback(async () => {
-    setIsLoading(true);
-    setShowSaveDialog(false);
-
+  // 저장/등록 핸들러 (IntegratedDetailTemplate onSubmit용)
+  const handleTemplateSubmit = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
     try {
       if (isNewMode) {
         const result = await createBadDebt(formData);
         if (result.success) {
-          toast.success('악성채권이 등록되었습니다.');
-          router.push('/ko/accounting/bad-debt-collection');
-        } else {
-          toast.error(result.error || '등록에 실패했습니다.');
+          return { success: true };
         }
+        return { success: false, error: result.error || '등록에 실패했습니다.' };
       } else {
         const result = await updateBadDebt(recordId!, formData);
         if (result.success) {
-          toast.success('악성채권이 수정되었습니다.');
-          router.push(`/ko/accounting/bad-debt-collection/${recordId}?mode=view`);
-        } else {
-          toast.error(result.error || '수정에 실패했습니다.');
+          return { success: true };
         }
+        return { success: false, error: result.error || '수정에 실패했습니다.' };
       }
     } catch (error) {
       if (isNextRedirectError(error)) throw error;
       console.error('저장 오류:', error);
-      toast.error('서버 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
+      return { success: false, error: '서버 오류가 발생했습니다.' };
     }
-  }, [formData, router, recordId, isNewMode]);
-
-  // 삭제 핸들러
-  const handleDelete = useCallback(() => {
-    setShowDeleteDialog(true);
-  }, []);
-
-  const handleConfirmDelete = useCallback(async () => {
-    if (!recordId) return;
-
-    setIsLoading(true);
-    setShowDeleteDialog(false);
+  }, [formData, recordId, isNewMode]);
 
+  // 삭제 핸들러 (IntegratedDetailTemplate onDelete용)
+  const handleTemplateDelete = useCallback(async (id: string | number): Promise<{ success: boolean; error?: string }> => {
     try {
-      const result = await deleteBadDebt(recordId);
+      const result = await deleteBadDebt(String(id));
       if (result.success) {
-        toast.success('악성채권이 삭제되었습니다.');
-        router.push('/ko/accounting/bad-debt-collection');
-      } else {
-        toast.error(result.error || '삭제에 실패했습니다.');
+        return { success: true };
       }
+      return { success: false, error: result.error || '삭제에 실패했습니다.' };
     } catch (error) {
       if (isNextRedirectError(error)) throw error;
       console.error('삭제 오류:', error);
-      toast.error('서버 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
+      return { success: false, error: '서버 오류가 발생했습니다.' };
     }
-  }, [router, recordId]);
+  }, []);
 
   // 메모 추가 핸들러
   const handleAddMemo = useCallback(async () => {
@@ -340,39 +296,16 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
     return {
       ...badDebtConfig,
       title: titleMap[mode] || badDebtConfig.title,
+      actions: {
+        ...badDebtConfig.actions,
+        deleteConfirmMessage: {
+          title: '악성채권 삭제',
+          description: '이 악성채권 기록을 삭제하시겠습니까? 확인 클릭 시 목록으로 이동합니다.',
+        },
+      },
     };
   }, [mode]);
 
-  // 커스텀 헤더 액션 (저장 확인 다이얼로그 패턴 유지)
-  const customHeaderActions = useMemo(() => {
-    if (isViewMode) {
-      return (
-        <>
-          {canDelete && (
-            <Button variant="outline" className="text-red-500 border-red-200 hover:bg-red-50" onClick={handleDelete} disabled={isLoading}>
-              {isLoading ? '처리중...' : '삭제'}
-            </Button>
-          )}
-          {canUpdate && (
-            <Button onClick={handleEdit} className="bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
-              수정
-            </Button>
-          )}
-        </>
-      );
-    }
-    return (
-      <>
-        <Button variant="outline" onClick={handleCancel} disabled={isLoading}>
-          취소
-        </Button>
-        <Button onClick={handleSave} className="bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
-          {isLoading ? '처리중...' : (isNewMode ? '등록' : '저장')}
-        </Button>
-      </>
-    );
-  }, [isViewMode, isNewMode, isLoading, handleDelete, handleEdit, handleCancel, handleSave, mode, canUpdate, canDelete]);
-
   // 입력 필드 렌더링 헬퍼
   const renderField = (
     label: string,
@@ -1019,40 +952,16 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
   ]);
 
   return (
-    <>
-      <IntegratedDetailTemplate
-        config={dynamicConfig}
-        mode={isNewMode ? 'create' : (isViewMode ? 'view' : 'edit')}
-        initialData={formData as unknown as Record<string, unknown>}
-        itemId={recordId}
-        isLoading={isLoading}
-        headerActions={customHeaderActions}
-        renderView={() => renderFormContent()}
-        renderForm={() => renderFormContent()}
-      />
-
-      {/* 삭제 확인 다이얼로그 */}
-      <DeleteConfirmDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleConfirmDelete}
-        title="악성채권 삭제"
-        description={
-          <>
-            &apos;{formData.vendorName}&apos;의 악성채권 기록을 삭제하시겠습니까?
-            <br />
-            확인 클릭 시 목록으로 이동합니다.
-          </>
-        }
-      />
-
-      {/* 저장 확인 다이얼로그 */}
-      <SaveConfirmDialog
-        open={showSaveDialog}
-        onOpenChange={setShowSaveDialog}
-        onConfirm={handleConfirmSave}
-        description="입력한 내용을 저장하시겠습니까?"
-      />
-    </>
+    <IntegratedDetailTemplate
+      config={dynamicConfig}
+      mode={isNewMode ? 'create' : (isViewMode ? 'view' : 'edit')}
+      initialData={formData as unknown as Record<string, unknown>}
+      itemId={recordId}
+      isLoading={isLoading}
+      onSubmit={handleTemplateSubmit}
+      onDelete={handleTemplateDelete}
+      renderView={() => renderFormContent()}
+      renderForm={() => renderFormContent()}
+    />
   );
 }

src/components/accounting/VendorLedger/VendorLedgerDetail.tsx

@@ -145,8 +145,8 @@ export function VendorLedgerDetail({
         size="sm"
         onClick={handlePdfDownload}
       >
-        <Download className="mr-2 h-4 w-4" />
-        PDF 다운로드
+        <Download className="h-4 w-4 md:mr-2" />
+        <span className="hidden md:inline">PDF 다운로드</span>
       </Button>
     );
   }, [handlePdfDownload]);

src/components/board/BoardDetail/index.tsx

@@ -201,24 +201,25 @@ export function BoardDetail({ post, comments: initialComments, currentUserId }:
       </div>
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
-        <Button variant="outline" onClick={handleBack}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+      <div className={`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]'} flex items-center justify-between`}>
+        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
         {isMyPost && (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 md:gap-2">
             <Button
               variant="outline"
               onClick={() => setShowDeleteDialog(true)}
-              className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+              size="sm"
+              className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
             >
-              <Trash2 className="h-4 w-4 mr-2" />
-              삭제
+              <Trash2 className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">삭제</span>
             </Button>
-            <Button onClick={handleEdit}>
-              <Edit className="h-4 w-4 mr-2" />
-              수정
+            <Button onClick={handleEdit} size="sm" className="md:size-default">
+              <Edit className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수정</span>
             </Button>
           </div>
         )}

src/components/business/construction/contract/ContractDetailForm.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Eye, Download, FileText, X } from 'lucide-react';
+import { Eye, Download, FileText, X, FilePlus2, Stamp } from 'lucide-react';
 import { FileInput } from '@/components/ui/file-input';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
@@ -232,15 +232,17 @@ export default function ContractDetailForm({
     if (!isViewMode) return null;
     return (
       <>
-        <Button variant="outline" onClick={handleCreateChangeContract}>
-          변경 계약서 생성
+        <Button variant="outline" onClick={handleCreateChangeContract} size="sm">
+          <FilePlus2 className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">변경 계약서 생성</span>
         </Button>
-        <Button variant="outline" onClick={handleViewDocument}>
-          <Eye className="h-4 w-4 mr-2" />
-          계약서 보기
+        <Button variant="outline" onClick={handleViewDocument} size="sm">
+          <Eye className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">계약서 보기</span>
         </Button>
-        <Button variant="outline" onClick={handleApproval}>
-          전자결재
+        <Button variant="outline" onClick={handleApproval} size="sm">
+          <Stamp className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">전자결재</span>
         </Button>
       </>
     );

src/components/business/construction/handover-report/HandoverReportDetailForm.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X, Eye } from 'lucide-react';
+import { Plus, X, Eye, Stamp } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -149,12 +149,13 @@ export default function HandoverReportDetailForm({
     if (!isViewMode) return null;
     return (
       <>
-        <Button variant="outline" onClick={handleViewDocument}>
-          <Eye className="h-4 w-4 mr-2" />
-          인수인계보고서 보기
+        <Button variant="outline" onClick={handleViewDocument} size="sm">
+          <Eye className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">인수인계보고서 보기</span>
         </Button>
-        <Button variant="outline" onClick={handleApproval}>
-          전자결재
+        <Button variant="outline" onClick={handleApproval} size="sm">
+          <Stamp className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">전자결재</span>
         </Button>
       </>
     );

src/components/business/construction/labor-management/LaborDetailClient.tsx

@@ -404,53 +404,54 @@ export default function LaborDetailClient({
         </div>
 
         {/* 하단 액션 버튼 (sticky) */}
-        <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
-          <Button variant="outline" onClick={handleBack}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            목록으로
+        <div className={`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]'} flex items-center justify-between`}>
+          <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+            <ArrowLeft className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">목록으로</span>
           </Button>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 md:gap-2">
             {mode === 'view' && (
               <>
                 {canDelete && (
                   <Button
                     variant="outline"
                     onClick={() => setDeleteDialogOpen(true)}
-                    className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                    size="sm"
+                    className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
                   >
-                    <Trash2 className="h-4 w-4 mr-2" />
-                    삭제
+                    <Trash2 className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">삭제</span>
                   </Button>
                 )}
                 {canUpdate && (
-                  <Button onClick={handleEditMode}>
-                    <Edit className="h-4 w-4 mr-2" />
-                    수정
+                  <Button onClick={handleEditMode} size="sm" className="md:size-default">
+                    <Edit className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">수정</span>
                   </Button>
                 )}
               </>
             )}
             {mode === 'edit' && (
               <>
-                <Button variant="outline" onClick={handleCancel}>
-                  <X className="h-4 w-4 mr-2" />
-                  취소
+                <Button variant="outline" onClick={handleCancel} size="sm" className="md:size-default">
+                  <X className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">취소</span>
                 </Button>
-                <Button onClick={handleSave} disabled={isSaving}>
-                  <Save className="h-4 w-4 mr-2" />
-                  {isSaving ? '저장 중...' : '저장'}
+                <Button onClick={handleSave} disabled={isSaving} size="sm" className="md:size-default">
+                  <Save className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">{isSaving ? '저장 중...' : '저장'}</span>
                 </Button>
               </>
             )}
             {mode === 'new' && (
               <>
-                <Button variant="outline" onClick={handleCancel}>
-                  <X className="h-4 w-4 mr-2" />
-                  취소
+                <Button variant="outline" onClick={handleCancel} size="sm" className="md:size-default">
+                  <X className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">취소</span>
                 </Button>
-                <Button onClick={handleSave} disabled={isSaving}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  {isSaving ? '등록 중...' : '등록'}
+                <Button onClick={handleSave} disabled={isSaving} size="sm" className="md:size-default">
+                  <Plus className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">{isSaving ? '등록 중...' : '등록'}</span>
                 </Button>
               </>
             )}

src/components/business/construction/pricing-management/PricingDetailClient.tsx

@@ -397,53 +397,54 @@ export default function PricingDetailClient({ id, mode }: PricingDetailClientPro
       </div>
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
-        <Button variant="outline" onClick={handleBack}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+      <div className={`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]'} flex items-center justify-between`}>
+        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 md:gap-2">
           {isViewMode && (
             <>
               {canDelete && (
                 <Button
                   variant="outline"
                   onClick={() => setDeleteDialogOpen(true)}
-                  className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                  size="sm"
+                  className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
                 >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  삭제
+                  <Trash2 className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">삭제</span>
                 </Button>
               )}
               {canUpdate && (
-                <Button onClick={handleEdit}>
-                  <Edit className="h-4 w-4 mr-2" />
-                  수정
+                <Button onClick={handleEdit} size="sm" className="md:size-default">
+                  <Edit className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">수정</span>
                 </Button>
               )}
             </>
           )}
           {isEditMode && (
             <>
-              <Button variant="outline" onClick={handleCancel}>
-                <X className="h-4 w-4 mr-2" />
-                취소
+              <Button variant="outline" onClick={handleCancel} size="sm" className="md:size-default">
+                <X className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">취소</span>
               </Button>
-              <Button onClick={handleSave} disabled={isLoading}>
-                <Save className="h-4 w-4 mr-2" />
-                {isLoading ? '저장 중...' : '저장'}
+              <Button onClick={handleSave} disabled={isLoading} size="sm" className="md:size-default">
+                <Save className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">{isLoading ? '저장 중...' : '저장'}</span>
               </Button>
             </>
           )}
           {isCreateMode && (
             <>
-              <Button variant="outline" onClick={handleCancel}>
-                <X className="h-4 w-4 mr-2" />
-                취소
+              <Button variant="outline" onClick={handleCancel} size="sm" className="md:size-default">
+                <X className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">취소</span>
               </Button>
-              <Button onClick={handleSave} disabled={isLoading}>
-                <Plus className="h-4 w-4 mr-2" />
-                {isLoading ? '등록 중...' : '등록'}
+              <Button onClick={handleSave} disabled={isLoading} size="sm" className="md:size-default">
+                <Plus className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">{isLoading ? '등록 중...' : '등록'}</span>
               </Button>
             </>
           )}

src/components/business/construction/progress-billing/ProgressBillingDetailForm.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Eye } from 'lucide-react';
+import { Hammer, Wrench, Image } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { progressBillingConfig } from './progressBillingConfig';
@@ -91,17 +91,17 @@ export default function ProgressBillingDetailForm({
     if (!isViewMode) return null;
     return (
       <>
-        <Button variant="outline" onClick={handleViewDirectConstruction}>
-          <Eye className="h-4 w-4 mr-2" />
-          직접 공사 내역 보기
+        <Button variant="outline" onClick={handleViewDirectConstruction} size="sm">
+          <Hammer className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">직접 공사 내역 보기</span>
         </Button>
-        <Button variant="outline" onClick={handleViewIndirectConstruction}>
-          <Eye className="h-4 w-4 mr-2" />
-          간접 공사 내역 보기
+        <Button variant="outline" onClick={handleViewIndirectConstruction} size="sm">
+          <Wrench className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">간접 공사 내역 보기</span>
         </Button>
-        <Button variant="outline" onClick={handleViewPhotoDocument}>
-          <Eye className="h-4 w-4 mr-2" />
-          사진대지 보기
+        <Button variant="outline" onClick={handleViewPhotoDocument} size="sm">
+          <Image className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">사진대지 보기</span>
         </Button>
       </>
     );

src/components/clients/ClientDetail.tsx

@@ -233,19 +233,19 @@ export function ClientDetail({
       </div>
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
-        <Button variant="outline" onClick={onBack}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+      <div className={`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]'} flex items-center justify-between`}>
+        <Button variant="outline" onClick={onBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
-            <Trash2 className="h-4 w-4 mr-2" />
-            삭제
+        <div className="flex items-center gap-1 md:gap-2">
+          <Button variant="outline" onClick={onDelete} size="sm" className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default">
+            <Trash2 className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">삭제</span>
           </Button>
-          <Button onClick={onEdit}>
-            <Pencil className="h-4 w-4 mr-2" />
-            수정
+          <Button onClick={onEdit} size="sm" className="md:size-default">
+            <Pencil className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">수정</span>
           </Button>
         </div>
       </div>

src/components/items/DynamicItemForm/index.tsx

@@ -1046,22 +1046,26 @@ export default function DynamicItemForm({
       />
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
+      <div className={`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]'} flex items-center justify-between`}>
         <Button
           type="button"
           variant="outline"
           onClick={() => router.back()}
           disabled={isSubmitting}
+          size="sm"
+          className="md:size-default"
         >
-          <X className="h-4 w-4 mr-2" />
-          취소
+          <X className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">취소</span>
         </Button>
         <Button
           type="submit"
           disabled={!selectedItemType || isSubmitting}
+          size="sm"
+          className="md:size-default"
         >
-          <Save className="h-4 w-4 mr-2" />
-          {isSubmitting ? '저장 중...' : '저장'}
+          <Save className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">{isSubmitting ? '저장 중...' : '저장'}</span>
         </Button>
       </div>
     </form>

src/components/items/ItemDetailClient.tsx

@@ -618,22 +618,26 @@ export default function ItemDetailClient({ item }: ItemDetailClientProps) {
       )}
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
+      <div className={`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]'} flex items-center justify-between`}>
         <Button
           type="button"
           variant="outline"
           onClick={() => router.back()}
+          size="sm"
+          className="md:size-default"
         >
-          <ArrowLeft className="w-4 h-4 mr-2" />
-          목록으로
+          <ArrowLeft className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
         {canUpdate && (
           <Button
             type="button"
             onClick={() => router.push(`/production/screen-production/${encodeURIComponent(item.itemCode)}?mode=edit&type=${item.itemType}&id=${item.id}`)}
+            size="sm"
+            className="md:size-default"
           >
-            <Edit className="w-4 h-4 mr-2" />
-            수정
+            <Edit className="w-4 h-4 md:mr-2" />
+            <span className="hidden md:inline">수정</span>
           </Button>
         )}
       </div>

src/components/items/ItemMasterDataManagement/tabs/SectionsTab.tsx

@@ -84,11 +84,11 @@ export function SectionsTab({
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div>
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="min-w-0">
               <CardTitle>섹션 템플릿 관리</CardTitle>
-              <CardDescription>재사용 가능한 섹션 템플릿을 관리합니다</CardDescription>
+              <CardDescription className="truncate">재사용 가능한 섹션 템플릿을 관리합니다</CardDescription>
             </div>
             {/* 변경사항 배지 - 나중에 사용 예정으로 임시 숨김 */}
             {false && hasUnsavedChanges && pendingChanges.sectionTemplates.length > 0 && (
@@ -97,8 +97,8 @@ export function SectionsTab({
               </Badge>
             )}
           </div>
-          <Button onClick={() => setIsSectionTemplateDialogOpen(true)}>
-            <Plus className="h-4 w-4 mr-2" />섹션추가
+          <Button size="sm" className="shrink-0" onClick={() => setIsSectionTemplateDialogOpen(true)}>
+            <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">섹션추가</span>
           </Button>
         </div>
       </CardHeader>
@@ -143,19 +143,19 @@ export function SectionsTab({
                 {sectionTemplates.filter(t => t.section_type !== 'BOM').map((template) => (
                   <Card key={template.id}>
                     <CardHeader className="pb-3">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3 flex-1">
-                          <Folder className="h-5 w-5 text-blue-500" />
-                          <div className="flex-1">
-                            <CardTitle className="text-base">{template.template_name}</CardTitle>
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex items-center gap-3 min-w-0 flex-1">
+                          <Folder className="h-5 w-5 text-blue-500 shrink-0" />
+                          <div className="min-w-0 flex-1">
+                            <CardTitle className="text-base truncate">{template.template_name}</CardTitle>
                             {template.description && (
-                              <CardDescription className="text-sm mt-0.5">{template.description}</CardDescription>
+                              <CardDescription className="text-sm mt-0.5 truncate">{template.description}</CardDescription>
                             )}
                           </div>
                         </div>
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1 shrink-0">
                           {template.category && template.category.length > 0 && (
-                            <div className="flex flex-wrap gap-1 mr-2">
+                            <div className="hidden md:flex flex-wrap gap-1 mr-2">
                               {template.category.map((cat, idx) => (
                                 <Badge key={idx} variant="secondary" className="text-xs">
                                   {ITEM_TYPE_OPTIONS.find(t => t.value === cat)?.label || cat}
@@ -193,11 +193,11 @@ export function SectionsTab({
                       </div>
                     </CardHeader>
                     <CardContent>
-                      <div className="mb-4 flex items-center justify-between">
+                      <div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                         <p className="text-sm text-muted-foreground">
                           이 템플릿과 관련되는 항목 목록을 조회합니다
                         </p>
-                        <div className="flex gap-2">
+                        <div className="flex gap-2 shrink-0">
                           {setIsImportFieldDialogOpen && setImportFieldTargetSectionId && (
                             <Button
                               size="sm"
@@ -243,27 +243,27 @@ export function SectionsTab({
                           {template.fields.map((field, index) => (
                             <div
                               key={`${template.id}-${field.id}-${index}`}
-                              className="flex items-center justify-between p-3 border rounded hover:bg-gray-50 transition-colors"
+                              className="flex items-center justify-between gap-2 p-3 border rounded hover:bg-gray-50 transition-colors"
                             >
-                              <div className="flex-1">
-                                <div className="flex items-center gap-2">
-                                  <GripVertical className="h-4 w-4 text-gray-400" />
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-1.5 flex-wrap">
+                                  <GripVertical className="h-4 w-4 text-gray-400 shrink-0" />
                                   <span className="text-sm font-medium">{field.name}</span>
-                                  <Badge variant="outline" className="text-xs">
+                                  <Badge variant="outline" className="text-xs shrink-0">
                                     {INPUT_TYPE_OPTIONS.find(t => t.value === field.property.inputType)?.label}
                                   </Badge>
                                   {field.property.required && (
-                                    <Badge variant="destructive" className="text-xs">필수</Badge>
+                                    <Badge variant="destructive" className="text-xs shrink-0">필수</Badge>
                                   )}
                                 </div>
-                                <div className="ml-6 text-xs text-gray-500 mt-1">
+                                <div className="ml-6 text-xs text-gray-500 mt-1 truncate">
                                   필드키: {field.fieldKey}
                                   {field.description && (
                                     <span className="ml-2">• {field.description}</span>
                                   )}
                                 </div>
                               </div>
-                              <div className="flex gap-2">
+                              <div className="flex gap-1 shrink-0">
                                 <Button
                                   size="sm"
                                   variant="ghost"
@@ -307,19 +307,19 @@ export function SectionsTab({
                 {sectionTemplates.filter(t => t.section_type === 'BOM').map((template) => (
                   <Card key={template.id}>
                     <CardHeader className="pb-3">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3 flex-1">
-                          <Package className="h-5 w-5 text-green-500" />
-                          <div className="flex-1">
-                            <CardTitle className="text-base">{template.template_name}</CardTitle>
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex items-center gap-3 min-w-0 flex-1">
+                          <Package className="h-5 w-5 text-green-500 shrink-0" />
+                          <div className="min-w-0 flex-1">
+                            <CardTitle className="text-base truncate">{template.template_name}</CardTitle>
                             {template.description && (
-                              <CardDescription className="text-sm mt-0.5">{template.description}</CardDescription>
+                              <CardDescription className="text-sm mt-0.5 truncate">{template.description}</CardDescription>
                             )}
                           </div>
                         </div>
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1 shrink-0">
                           {template.category && template.category.length > 0 && (
-                            <div className="flex flex-wrap gap-1 mr-2">
+                            <div className="hidden md:flex flex-wrap gap-1 mr-2">
                               {template.category.map((cat, idx) => (
                                 <Badge key={idx} variant="secondary" className="text-xs">
                                   {ITEM_TYPE_OPTIONS.find(t => t.value === cat)?.label || cat}

src/components/material/ReceivingManagement/ReceivingDetail.tsx

@@ -16,7 +16,7 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Upload, FileText, Search, X, Plus } from 'lucide-react';
+import { Upload, FileText, Search, X, Plus, ClipboardCheck } from 'lucide-react';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { ItemSearchModal } from '@/components/quotes/ItemSearchModal';
 import { InspectionModalV2 } from '@/app/[locale]/(protected)/quality/qms/components/InspectionModalV2';
@@ -687,21 +687,12 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
   }, [formData, adjustments]);
 
   // ===== 커스텀 헤더 액션 (view/edit 모드) =====
+  // 수정 버튼은 IntegratedDetailTemplate의 DetailActions에서 아이콘으로 제공하므로 중복 제거
   const customHeaderActions = (isViewMode || isEditMode) && detail ? (
-    <div className="flex items-center gap-2">
-      <Button variant="outline" onClick={handleInspection}>
-        수입검사하기
-      </Button>
-      {isViewMode && (
-        <Button
-          variant="default"
-          className="bg-gray-900 text-white hover:bg-gray-800"
-          onClick={() => router.push(`/ko/material/receiving-management/${id}?mode=edit`)}
-        >
-          수정
-        </Button>
-      )}
-    </div>
+    <Button variant="outline" size="sm" onClick={handleInspection}>
+      <ClipboardCheck className="w-4 h-4 md:mr-2" />
+      <span className="hidden md:inline">수입검사하기</span>
+    </Button>
   ) : undefined;
 
   // 에러 상태 표시 (view/edit 모드에서만)

src/components/orders/OrderSalesDetailView.tsx

@@ -254,21 +254,21 @@ export function OrderSalesDetailView({ orderId }: OrderSalesDetailViewProps) {
     return (
       <>
         {showConfirmButton && (
-          <Button onClick={handleConfirmOrder} className="bg-green-600 hover:bg-green-700">
-            <CheckCircle2 className="h-4 w-4 mr-2" />
-            수주 확정
+          <Button onClick={handleConfirmOrder} className="bg-green-600 hover:bg-green-700" size="sm">
+            <CheckCircle2 className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">수주 확정</span>
           </Button>
         )}
         {showProductionCreateButton && (
-          <Button onClick={handleProductionOrder}>
-            <Factory className="h-4 w-4 mr-2" />
-            생산지시 생성
+          <Button onClick={handleProductionOrder} size="sm">
+            <Factory className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">생산지시 생성</span>
           </Button>
         )}
         {showCancelButton && (
-          <Button variant="outline" onClick={handleCancel} className="border-orange-200 text-orange-600 hover:border-orange-300">
-            <XCircle className="h-4 w-4 mr-2" />
-            취소
+          <Button variant="outline" onClick={handleCancel} className="border-orange-200 text-orange-600 hover:border-orange-300" size="sm">
+            <XCircle className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">취소</span>
           </Button>
         )}
       </>

src/components/outbound/ShipmentManagement/ShipmentDetail.tsx

@@ -272,56 +272,45 @@ export function ShipmentDetail({ id }: ShipmentDetailProps) {
     if (!detail) return null;
 
     return (
-      <div className="flex items-center gap-2">
+      <>
         <Button
           variant="outline"
           size="sm"
           onClick={() => setPreviewDocument('shipping')}
         >
-          <FileText className="w-4 h-4 mr-1" />
-          출고증 보기
+          <FileText className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">출고증 보기</span>
         </Button>
         <Button
           variant="outline"
           size="sm"
           onClick={() => setPreviewDocument('delivery')}
         >
-          <ClipboardList className="w-4 h-4 mr-1" />
-          납품확인서 보기
+          <ClipboardList className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">납품확인서 보기</span>
         </Button>
-        {/* 거래명세서 - 추후 활성화 */}
-        {/* <Button variant="outline" size="sm">
-          <Receipt className="w-4 h-4 mr-1" />
-          거래명세서 보기
-        </Button> */}
         {canDelete && (
-          <>
-            <div className="w-px h-6 bg-border mx-2" />
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={() => setShowDeleteDialog(true)}
-            >
-              <Trash2 className="w-4 h-4 mr-1" />
-              삭제
-            </Button>
-          </>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            <Trash2 className="w-4 h-4 md:mr-2" />
+            <span className="hidden md:inline">삭제</span>
+          </Button>
         )}
         {STATUS_TRANSITIONS[detail.status] && (
-          <>
-            <div className="w-px h-6 bg-border mx-2" />
-            <Button
-              variant="default"
-              size="sm"
-              className="bg-blue-600 hover:bg-blue-700"
-              onClick={() => handleOpenStatusDialog(STATUS_TRANSITIONS[detail.status]!)}
-            >
-              <ArrowRight className="w-4 h-4 mr-1" />
-              {SHIPMENT_STATUS_LABELS[STATUS_TRANSITIONS[detail.status]!]}으로 변경
-            </Button>
-          </>
+          <Button
+            variant="default"
+            size="sm"
+            className="bg-blue-600 hover:bg-blue-700"
+            onClick={() => handleOpenStatusDialog(STATUS_TRANSITIONS[detail.status]!)}
+          >
+            <ArrowRight className="w-4 h-4 md:mr-2" />
+            <span className="hidden md:inline">{SHIPMENT_STATUS_LABELS[STATUS_TRANSITIONS[detail.status]!]}으로 변경</span>
+          </Button>
         )}
-      </div>
+      </>
     );
   }, [detail, canDelete, handleOpenStatusDialog]);
 

src/components/pricing-table-management/PricingTableForm.tsx

@@ -437,33 +437,33 @@ export function PricingTableForm({ mode, initialData }: PricingTableFormProps) {
 
       {/* 하단 액션 버튼 (sticky) */}
       <div
-        className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
+        className={`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]'} flex items-center justify-between`}
       >
-        <Button variant="outline" onClick={handleList}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+        <Button variant="outline" onClick={handleList} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 md:gap-2">
           {isEdit ? (
             <>
               {canDelete && (
-                <Button variant="outline" onClick={() => setDeleteDialogOpen(true)}>
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  삭제
+                <Button variant="outline" onClick={() => setDeleteDialogOpen(true)} size="sm" className="md:size-default">
+                  <Trash2 className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">삭제</span>
                 </Button>
               )}
               {canUpdate && (
-                <Button onClick={handleSave} disabled={isSaving}>
-                  <Save className="h-4 w-4 mr-2" />
-                  {isSaving ? '저장 중...' : '수정'}
+                <Button onClick={handleSave} disabled={isSaving} size="sm" className="md:size-default">
+                  <Save className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">{isSaving ? '저장 중...' : '수정'}</span>
                 </Button>
               )}
             </>
           ) : (
             canCreate && (
-              <Button onClick={handleSave} disabled={isSaving}>
-                <Save className="h-4 w-4 mr-2" />
-                {isSaving ? '저장 중...' : '등록'}
+              <Button onClick={handleSave} disabled={isSaving} size="sm" className="md:size-default">
+                <Save className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">{isSaving ? '저장 중...' : '등록'}</span>
               </Button>
             )
           )}

src/components/process-management/ProcessDetail.tsx

@@ -321,16 +321,16 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
 
       {/* 하단 액션 버튼 (sticky) */}
       <div
-        className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
+        className={`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]'} flex items-center justify-between`}
       >
-        <Button variant="outline" onClick={handleList}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+        <Button variant="outline" onClick={handleList} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
         {canUpdate && (
-          <Button onClick={handleEdit}>
-            <Edit className="h-4 w-4 mr-2" />
-            수정
+          <Button onClick={handleEdit} size="sm" className="md:size-default">
+            <Edit className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">수정</span>
           </Button>
         )}
       </div>

src/components/process-management/StepDetail.tsx

@@ -125,16 +125,16 @@ export function StepDetail({ step, processId }: StepDetailProps) {
 
       {/* 하단 액션 버튼 (sticky) */}
       <div
-        className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
+        className={`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]'} flex items-center justify-between`}
       >
-        <Button variant="outline" onClick={handleBack}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          공정으로 돌아가기
+        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">공정으로 돌아가기</span>
         </Button>
         {canUpdate && (
-          <Button onClick={handleEdit}>
-            <Edit className="h-4 w-4 mr-2" />
-            수정
+          <Button onClick={handleEdit} size="sm" className="md:size-default">
+            <Edit className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">수정</span>
           </Button>
         )}
       </div>

src/components/production/WorkOrders/WorkOrderDetail.tsx

@@ -256,13 +256,14 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
             onClick={() => handleStatusChange('in_progress')}
             disabled={isStatusUpdating}
             className="bg-green-600 hover:bg-green-700"
+            size="sm"
           >
             {isStatusUpdating ? (
-              <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+              <Loader2 className="w-4 h-4 animate-spin" />
             ) : (
-              <Play className="w-4 h-4 mr-1.5" />
+              <Play className="w-4 h-4 md:mr-2" />
             )}
-            작업 시작
+            <span className="hidden md:inline">작업 시작</span>
           </Button>
         )}
         {order.status === 'in_progress' && (
@@ -272,25 +273,27 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
               onClick={() => handleStatusChange('waiting')}
               disabled={isStatusUpdating}
               className="text-muted-foreground hover:text-foreground"
+              size="sm"
             >
               {isStatusUpdating ? (
-                <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <Undo2 className="w-4 h-4 mr-1.5" />
+                <Undo2 className="w-4 h-4 md:mr-2" />
               )}
-              작업 취소
+              <span className="hidden md:inline">작업 취소</span>
             </Button>
             <Button
               onClick={() => handleStatusChange('completed')}
               disabled={isStatusUpdating}
               className="bg-purple-600 hover:bg-purple-700"
+              size="sm"
             >
               {isStatusUpdating ? (
-                <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <CheckCircle2 className="w-4 h-4 mr-1.5" />
+                <CheckCircle2 className="w-4 h-4 md:mr-2" />
               )}
-              작업 완료
+              <span className="hidden md:inline">작업 완료</span>
             </Button>
           </>
         )}
@@ -300,25 +303,27 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
             onClick={() => handleStatusChange('in_progress')}
             disabled={isStatusUpdating}
             className="text-orange-600 hover:text-orange-700 border-orange-300 hover:bg-orange-50"
+            size="sm"
           >
             {isStatusUpdating ? (
-              <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+              <Loader2 className="w-4 h-4 animate-spin" />
             ) : (
-              <Undo2 className="w-4 h-4 mr-1.5" />
+              <Undo2 className="w-4 h-4 md:mr-2" />
             )}
-            되돌리기
+            <span className="hidden md:inline">되돌리기</span>
           </Button>
         )}
-        <Button variant="outline" onClick={() => setIsWorkLogOpen(true)}>
-          <FileText className="w-4 h-4 mr-1.5" />
-          작업일지 보기
+        <Button variant="outline" onClick={() => setIsWorkLogOpen(true)} size="sm">
+          <FileText className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">작업일지 보기</span>
         </Button>
         <Button
           variant="outline"
           onClick={() => setIsInspectionOpen(true)}
+          size="sm"
         >
-          <ClipboardCheck className="w-4 h-4 mr-1.5" />
-          중간검사성적서 보기
+          <ClipboardCheck className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">중간검사성적서 보기</span>
         </Button>
       </>
     );
@@ -331,25 +336,25 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
     return (
       <div className="space-y-6">
         {/* 기본 정보 (기획서 4열 구성) */}
-        <div className="bg-amber-50 border border-amber-200 rounded-lg p-6">
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
           <h3 className="font-semibold mb-4">기본 정보</h3>
-          <div className="grid grid-cols-4 gap-x-6 gap-y-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-4">
             {/* 1행: 작업번호 | 수주일 | 공정구분 | 로트번호 */}
-            <div>
+            <div className="min-w-0">
               <p className="text-sm text-muted-foreground mb-1">작업번호</p>
-              <p className="font-medium">{order.workOrderNo}</p>
+              <p className="font-medium truncate">{order.workOrderNo}</p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="text-sm text-muted-foreground mb-1">수주일</p>
               <p className="font-medium">{order.salesOrderDate || '-'}</p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="text-sm text-muted-foreground mb-1">공정구분</p>
               <p className="font-medium">{order.processName}</p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="text-sm text-muted-foreground mb-1">로트번호</p>
-              <p className="font-medium">{order.lotNo}</p>
+              <p className="font-medium truncate">{order.lotNo}</p>
             </div>
 
             {/* 2행: 수주처 | 현장명 | 수주 담당자 | 담당자 연락처 */}

src/components/quality/InspectionManagement/InspectionDetail.tsx

@@ -390,14 +390,14 @@ export function InspectionDetail({ id }: InspectionDetailProps) {
     if (isEditMode || !inspection) return null;
 
     return (
-      <div className="flex items-center gap-2">
+      <>
         <Button variant="outline" size="sm" onClick={() => setRequestDocOpen(true)}>
-          <FileText className="w-4 h-4 mr-1" />
-          검사제품요청서 보기
+          <FileText className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">검사제품요청서 보기</span>
         </Button>
         <Button variant="outline" size="sm" onClick={() => setReportDocOpen(true)}>
-          <PlayCircle className="w-4 h-4 mr-1" />
-          제품검사하기
+          <PlayCircle className="w-4 h-4 md:mr-2" />
+          <span className="hidden md:inline">제품검사하기</span>
         </Button>
         {inspection.status !== '완료' && (
           <Button
@@ -405,11 +405,11 @@ export function InspectionDetail({ id }: InspectionDetailProps) {
             className="bg-green-600 hover:bg-green-700"
             onClick={() => setShowCompleteDialog(true)}
           >
-            <CheckCircle2 className="w-4 h-4 mr-1" />
-            검사 완료
+            <CheckCircle2 className="w-4 h-4 md:mr-2" />
+            <span className="hidden md:inline">검사 완료</span>
           </Button>
         )}
-      </div>
+      </>
     );
   }, [isEditMode, inspection]);
 

src/components/quotes/QuoteFooterBar.tsx

@@ -70,38 +70,40 @@ export function QuoteFooterBar({
 }: QuoteFooterBarProps) {
   return (
     <div className="sticky bottom-0 bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 shadow-lg">
-      <div className="px-6 py-4 flex items-center justify-between">
+      <div className="px-3 py-3 md:px-6 md:py-4 flex items-center justify-between">
         {/* 왼쪽: 뒤로가기 + 금액 표시 */}
-        <div className="flex items-center gap-6">
+        <div className="flex items-center gap-3 md:gap-6">
           <Button
             variant="outline"
             onClick={onBack}
-            className="gap-2"
+            size="sm"
+            className="md:size-default"
           >
-            <ArrowLeft className="h-4 w-4" />
-            목록으로
+            <ArrowLeft className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">목록으로</span>
           </Button>
 
           <div>
-            <p className="text-sm text-gray-600">예상 전체 견적금액</p>
-            <p className="text-3xl font-bold text-blue-600">
+            <p className="text-xs md:text-sm text-gray-600">예상 전체 견적금액</p>
+            <p className="text-lg md:text-3xl font-bold text-blue-600">
               {totalAmount.toLocaleString()}
-              <span className="text-lg font-normal text-gray-500 ml-1">원</span>
+              <span className="text-sm md:text-lg font-normal text-gray-500 ml-1">원</span>
             </p>
           </div>
         </div>
 
         {/* 오른쪽: 버튼들 */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1 md:gap-3">
           {/* 견적서 보기 */}
           <Button
             onClick={onQuoteView}
             disabled={totalLocations === 0}
             variant="outline"
-            className="gap-2 px-6"
+            size="sm"
+            className="md:size-default md:px-6"
           >
-            <FileText className="h-4 w-4" />
-            견적서 보기
+            <FileText className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">견적서 보기</span>
           </Button>
 
           {/* 거래명세서 보기 */}
@@ -109,10 +111,11 @@ export function QuoteFooterBar({
             onClick={onTransactionView}
             disabled={totalLocations === 0}
             variant="outline"
-            className="gap-2 px-6"
+            size="sm"
+            className="md:size-default md:px-6"
           >
-            <ClipboardList className="h-4 w-4" />
-            거래명세서 보기
+            <ClipboardList className="h-4 w-4 md:mr-2" />
+            <span className="hidden md:inline">거래명세서 보기</span>
           </Button>
 
           {/* 수식보기 - 개발환경(local/development)에서만 표시 */}
@@ -121,10 +124,11 @@ export function QuoteFooterBar({
               onClick={onFormulaView}
               disabled={!hasBomResult}
               variant="outline"
-              className="gap-2 px-6 border-purple-300 text-purple-600 hover:bg-purple-50"
+              size="sm"
+              className="border-purple-300 text-purple-600 hover:bg-purple-50 md:size-default md:px-6"
             >
-              <Calculator className="h-4 w-4" />
-              수식보기
+              <Calculator className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수식보기</span>
             </Button>
           )}
 
@@ -133,10 +137,11 @@ export function QuoteFooterBar({
             <Button
               onClick={onEdit}
               variant="outline"
-              className="gap-2 px-6"
+              size="sm"
+              className="md:size-default md:px-6"
             >
-              <Pencil className="h-4 w-4" />
-              수정
+              <Pencil className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수정</span>
             </Button>
           )}
 
@@ -146,10 +151,11 @@ export function QuoteFooterBar({
               onClick={onDiscount}
               disabled={isViewMode}
               variant="outline"
-              className="gap-2 px-6 border-orange-300 text-orange-600 hover:bg-orange-50"
+              size="sm"
+              className="border-orange-300 text-orange-600 hover:bg-orange-50 md:size-default md:px-6"
             >
-              <Percent className="h-4 w-4" />
-              할인하기
+              <Percent className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">할인하기</span>
             </Button>
           )}
 
@@ -158,14 +164,15 @@ export function QuoteFooterBar({
             <Button
               onClick={onSave}
               disabled={isSaving}
-              className="bg-slate-500 hover:bg-slate-600 text-white gap-2 px-6"
+              size="sm"
+              className="bg-slate-500 hover:bg-slate-600 text-white md:size-default md:px-6"
             >
               {isSaving ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                <Save className="h-4 w-4" />
+                <Save className="h-4 w-4 md:mr-2" />
               )}
-              저장
+              <span className="hidden md:inline">저장</span>
             </Button>
           )}
 
@@ -174,14 +181,15 @@ export function QuoteFooterBar({
             <Button
               onClick={onFinalize}
               disabled={isSaving || totalAmount === 0}
-              className="bg-blue-600 hover:bg-blue-700 text-white gap-2 px-6"
+              size="sm"
+              className="bg-blue-600 hover:bg-blue-700 text-white md:size-default md:px-6"
             >
               {isSaving ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                <Check className="h-4 w-4" />
+                <Check className="h-4 w-4 md:mr-2" />
               )}
-              최종확정
+              <span className="hidden md:inline">최종확정</span>
             </Button>
           )}
 
@@ -189,10 +197,11 @@ export function QuoteFooterBar({
           {status === "final" && onOrderRegister && (
             <Button
               onClick={onOrderRegister}
-              className="bg-green-600 hover:bg-green-700 text-white gap-2 px-6"
+              size="sm"
+              className="bg-green-600 hover:bg-green-700 text-white md:size-default md:px-6"
             >
-              <ClipboardList className="h-4 w-4" />
-              수주등록
+              <ClipboardList className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수주등록</span>
             </Button>
           )}
         </div>

src/components/settings/PermissionManagement/PermissionDetailClient.tsx

@@ -625,35 +625,32 @@ export function PermissionDetailClient({ permissionId, isNew = false, mode = 'vi
       </div>
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
-        <Button variant="outline" onClick={handleBack}>
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          목록으로
+      <div className={`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]'} flex items-center justify-between`}>
+        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
         </Button>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 md:gap-2">
           {isNew ? (
-            <Button onClick={handleSaveNew} disabled={isSaving}>
+            <Button onClick={handleSaveNew} disabled={isSaving} size="sm" className="md:size-default">
               {isSaving ? (
-                <>
-                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  저장 중...
-                </>
+                <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
                 <>
-                  <Plus className="h-4 w-4 mr-2" />
-                  등록
+                  <Plus className="h-4 w-4 md:mr-2" />
+                  <span className="hidden md:inline">등록</span>
                 </>
               )}
             </Button>
           ) : (
             <>
-              <Button variant="outline" onClick={handleUpdateRole} disabled={isSaving}>
+              <Button variant="outline" onClick={handleUpdateRole} disabled={isSaving} size="sm" className="md:size-default">
                 {isSaving ? (
                   <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (
                   <>
-                    <Save className="h-4 w-4 mr-2" />
-                    정보 저장
+                    <Save className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">정보 저장</span>
                   </>
                 )}
               </Button>
@@ -662,17 +659,20 @@ export function PermissionDetailClient({ permissionId, isNew = false, mode = 'vi
                   reloadPermissions();
                   toast.success('권한 정보가 저장되었습니다.');
                 }}
+                size="sm"
+                className="md:size-default"
               >
-                <Shield className="h-4 w-4 mr-2" />
-                권한 정보 저장
+                <Shield className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">권한 정보 저장</span>
               </Button>
               <Button
                 variant="outline"
                 onClick={handleDelete}
-                className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                size="sm"
+                className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
               >
-                <Trash2 className="h-4 w-4 mr-2" />
-                삭제
+                <Trash2 className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline">삭제</span>
               </Button>
             </>
           )}