feat: 생산/품질/자재/출고/주문 관리 페이지 구현

- 생산관리: 대시보드, 작업지시, 작업실적, 작업자화면 - 품질관리: 검사관리 (리스트/등록/상세) - 자재관리: 입고관리, 재고현황 - 출고관리: 출하관리 (리스트/등록/상세/수정) - 주문관리: 수주관리, 생산의뢰 - 기존 컴포넌트 개선: CardTransactionInquiry, VendorDetail, QuoteRegistration - IntegratedListTemplateV2 개선 - 공통 컴포넌트 분석 문서 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-23 21:13:07 +09:00
parent 2ebcea0255
commit f0e8e51d06
108 changed files with 21156 additions and 84 deletions
--- a/src/components/accounting/CardTransactionInquiry/index.tsx
+++ b/src/components/accounting/CardTransactionInquiry/index.tsx
@@ -5,9 +5,28 @@ import { format, subDays, subMonths, startOfMonth, endOfMonth } from 'date-fns';
 import {
  CreditCard,
  RefreshCw,
+  Save,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import {
  Select,
  SelectContent,
@@ -28,6 +47,7 @@ import type {
 } from './types';
 import {
  SORT_OPTIONS,
+  ACCOUNT_SUBJECT_OPTIONS,
 } from './types';

 // ===== Mock 데이터 생성 (결정론적: seed 기반으로 일관된 값 생성) =====
@@ -65,9 +85,19 @@ export function CardTransactionInquiry() {
  const [searchQuery, setSearchQuery] = useState('');
  const [sortOption, setSortOption] = useState<SortOption>('latest');
  const [cardFilter, setCardFilter] = useState<string>('all'); // 카드명 필터
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

+  // 상단 계정과목명 선택 (저장용)
+  const [selectedAccountSubject, setSelectedAccountSubject] = useState<string>('unset');
+
+  // 계정과목명 저장 다이얼로그
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+
+  // 선택 필요 알림 다이얼로그
+  const [showSelectWarningDialog, setShowSelectWarningDialog] = useState(false);
+
  // 날짜 범위 상태
  const [startDate, setStartDate] = useState('2025-09-01');
  const [endDate, setEndDate] = useState('2025-09-03');
@@ -75,6 +105,16 @@ export function CardTransactionInquiry() {
  // Mock 데이터 (SSR-safe: 결정론적 데이터)
  const [data] = useState<CardTransaction[]>(() => generateMockData());

+  // ===== 체크박스 핸들러 =====
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) newSet.delete(id);
+      else newSet.add(id);
+      return newSet;
+    });
+  }, []);
+
  // ===== 카드명 옵션 =====
  const cardOptions = useMemo(() => {
    const uniqueCards = [...new Set(data.map(d => d.cardName))];
@@ -130,6 +170,32 @@ export function CardTransactionInquiry() {
    // TODO: API 호출로 최신 데이터 조회
  }, []);

+  // ===== 전체 선택 핸들러 =====
+  const toggleSelectAll = useCallback(() => {
+    if (selectedItems.size === filteredData.length && filteredData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      setSelectedItems(new Set(filteredData.map(item => item.id)));
+    }
+  }, [selectedItems.size, filteredData]);
+
+  // ===== 계정과목명 저장 핸들러 =====
+  const handleSaveAccountSubject = useCallback(() => {
+    if (selectedItems.size === 0) {
+      setShowSelectWarningDialog(true);
+      return;
+    }
+    setShowSaveDialog(true);
+  }, [selectedItems.size]);
+
+  // 계정과목명 저장 확정
+  const handleConfirmSaveAccountSubject = useCallback(() => {
+    console.log('계정과목명 저장:', selectedAccountSubject, '선택된 항목:', Array.from(selectedItems));
+    // TODO: API 호출로 저장
+    setShowSaveDialog(false);
+    setSelectedItems(new Set());
+  }, [selectedAccountSubject, selectedItems]);
+
  // ===== 통계 카드 (전월/당월 사용액) =====
  // Mock 데이터 기준일(2025-12-01)에 맞춰 고정된 날짜 사용 (Hydration 오류 방지)
  const statCards: StatCard[] = useMemo(() => {
@@ -172,13 +238,19 @@ export function CardTransactionInquiry() {
    { key: 'amount', label: '사용금액', className: 'text-right' },
  ], []);

-  // ===== 테이블 행 렌더링 (체크박스/번호 없음) =====
+  // ===== 테이블 행 렌더링 =====
  const renderTableRow = useCallback((item: CardTransaction) => {
+    const isSelected = selectedItems.has(item.id);
+
    return (
      <TableRow
        key={item.id}
        className="hover:bg-muted/50"
      >
+        {/* 체크박스 */}
+        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+          <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
+        </TableCell>
        {/* 카드 */}
        <TableCell>{item.card}</TableCell>
        {/* 카드명 */}
@@ -195,7 +267,7 @@ export function CardTransactionInquiry() {
        </TableCell>
      </TableRow>
    );
-  }, []);
+  }, [selectedItems, toggleSelection]);

  // ===== 모바일 카드 렌더링 =====
  const renderMobileCard = useCallback((
@@ -209,9 +281,9 @@ export function CardTransactionInquiry() {
      <ListMobileCard
        id={item.id}
        title={`${item.card} - ${item.cardName}`}
-        isSelected={false}
-        onToggleSelection={() => {}}
-        showCheckbox={false}
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        showCheckbox={true}
        infoGrid={
          <div className="grid grid-cols-2 gap-3">
            <InfoField label="사용자" value={item.user} />
@@ -234,9 +306,28 @@ export function CardTransactionInquiry() {
    />
  );

-  // ===== 테이블 상단 새로고침 버튼 (출금관리 스타일) =====
+  // ===== 상단 계정과목명 + 저장 버튼 + 새로고침 =====
  const beforeTableContent = (
-    <div className="flex items-center justify-end w-full">
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-gray-700">계정과목명</span>
+        <Select value={selectedAccountSubject} onValueChange={setSelectedAccountSubject}>
+          <SelectTrigger className="w-[150px]">
+            <SelectValue placeholder="계정과목명 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            {ACCOUNT_SUBJECT_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button onClick={handleSaveAccountSubject} className="bg-orange-500 hover:bg-orange-600">
+          <Save className="h-4 w-4 mr-2" />
+          저장
+        </Button>
+      </div>
      <Button
        variant="outline"
        onClick={handleRefresh}
@@ -288,6 +379,7 @@ export function CardTransactionInquiry() {
  // ===== 테이블 하단 합계 행 =====
  const tableFooter = (
    <TableRow className="bg-muted/50 font-medium">
+      <TableCell className="text-center"></TableCell>
      <TableCell colSpan={5} className="text-right font-bold">합계</TableCell>
      <TableCell className="text-right font-bold">
        {totalAmount.toLocaleString()}
@@ -296,37 +388,83 @@ export function CardTransactionInquiry() {
  );

  return (
-    <IntegratedListTemplateV2
-      title="카드 내역 조회"
-      description="법인카드 사용 내역을 조회합니다"
-      icon={CreditCard}
-      headerActions={headerActions}
-      stats={statCards}
-      searchValue={searchQuery}
-      onSearchChange={setSearchQuery}
-      searchPlaceholder="카드, 카드명, 사용자, 가맹점명 검색..."
-      beforeTableContent={beforeTableContent}
-      tableHeaderActions={tableHeaderActions}
-      tableColumns={tableColumns}
-      tableFooter={tableFooter}
-      data={paginatedData}
-      totalCount={filteredData.length}
-      allData={filteredData}
-      selectedItems={new Set()}
-      onToggleSelection={() => {}}
-      onToggleSelectAll={() => {}}
-      getItemId={(item: CardTransaction) => item.id}
-      renderTableRow={renderTableRow}
-      renderMobileCard={renderMobileCard}
-      showCheckbox={false}
-      showRowNumber={false}
-      pagination={{
-        currentPage,
-        totalPages,
-        totalItems: filteredData.length,
-        itemsPerPage,
-        onPageChange: setCurrentPage,
-      }}
-    />
+    <>
+      <IntegratedListTemplateV2
+        title="카드 내역 조회"
+        description="법인카드 사용 내역을 조회합니다"
+        icon={CreditCard}
+        headerActions={headerActions}
+        stats={statCards}
+        searchValue={searchQuery}
+        onSearchChange={setSearchQuery}
+        searchPlaceholder="카드, 카드명, 사용자, 가맹점명 검색..."
+        beforeTableContent={beforeTableContent}
+        tableHeaderActions={tableHeaderActions}
+        tableColumns={tableColumns}
+        tableFooter={tableFooter}
+        data={paginatedData}
+        totalCount={filteredData.length}
+        allData={filteredData}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        getItemId={(item: CardTransaction) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        showCheckbox={true}
+        showRowNumber={false}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: filteredData.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 계정과목명 저장 확인 다이얼로그 */}
+      <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>계정과목명 변경</DialogTitle>
+            <DialogDescription>
+              {selectedItems.size}개의 카드 사용 내역을{' '}
+              <span className="font-semibold text-orange-500">
+                {ACCOUNT_SUBJECT_OPTIONS.find(o => o.value === selectedAccountSubject)?.label}
+              </span>
+              (으)로 모두 변경하시겠습니까?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setShowSaveDialog(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleConfirmSaveAccountSubject}
+              className="bg-orange-500 hover:bg-orange-600"
+            >
+              확인
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 선택 필요 알림 다이얼로그 */}
+      <AlertDialog open={showSelectWarningDialog} onOpenChange={setShowSelectWarningDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>항목 선택 필요</AlertDialogTitle>
+            <AlertDialogDescription>
+              변경할 카드 사용 내역을 먼저 선택해주세요.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setShowSelectWarningDialog(false)}>
+              확인
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
  );
 }
--- a/src/components/accounting/CardTransactionInquiry/types.ts
+++ b/src/components/accounting/CardTransactionInquiry/types.ts
@@ -23,4 +23,24 @@ export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
  { value: 'oldest', label: '등록순' },
  { value: 'amountHigh', label: '금액높은순' },
  { value: 'amountLow', label: '금액낮은순' },
+];
+
+// ===== 계정과목명 옵션 (상단 셀렉트) =====
+export const ACCOUNT_SUBJECT_OPTIONS = [
+  { value: 'unset', label: '미설정' },
+  { value: 'purchasePayment', label: '매입대금' },
+  { value: 'advance', label: '선급금' },
+  { value: 'suspense', label: '가지급금' },
+  { value: 'rent', label: '임대료' },
+  { value: 'interestExpense', label: '이자비용' },
+  { value: 'depositPayment', label: '보증금 지급' },
+  { value: 'loanRepayment', label: '차입금 상환' },
+  { value: 'dividendPayment', label: '배당금 지급' },
+  { value: 'vatPayment', label: '부가세 납부' },
+  { value: 'salary', label: '급여' },
+  { value: 'insurance', label: '4대보험' },
+  { value: 'tax', label: '세금' },
+  { value: 'utilities', label: '공과금' },
+  { value: 'expenses', label: '경비' },
+  { value: 'other', label: '기타' },
 ];