+```
+- 모바일: 세로 1열
+- SM 이상: 가로 한 줄로 모든 카드 표시 (`flex-1`)
+
+### After (grid 기반)
+```tsx
+
+```
+- 모바일: 2열 그리드
+- SM 이상: 3열 그리드
+
+## 변경 사유
+
+### 문제점
+- 급여관리 등 카드가 6개인 페이지에서 한 줄에 모든 카드가 들어가면 각 카드가 너무 좁아짐
+- PC 화면에서도 카드 내용이 빽빽하게 보여 가독성 저하
+
+### 해결
+- grid 기반 레이아웃으로 변경하여 PC에서 3개씩 2줄로 표시
+- 각 카드가 충분한 너비를 확보하여 가독성 향상
+- 카드 개수에 따라 자연스럽게 줄바꿈
+
+## 영향 범위
+`StatCards` 컴포넌트는 공통 컴포넌트로, 다음 템플릿에서 사용:
+- `IntegratedListTemplateV2`
+- `ListPageTemplate`
+
+해당 템플릿을 사용하는 모든 페이지에 적용됨.
+
+## 레이아웃 예시
+
+### 카드 6개 (급여관리)
+```
+| 카드1 | 카드2 | 카드3 |
+| 카드4 | 카드5 | 카드6 |
+```
+
+### 카드 4개
+```
+| 카드1 | 카드2 | 카드3 |
+| 카드4 | | |
+```
+
+### 카드 3개
+```
+| 카드1 | 카드2 | 카드3 |
+```
\ No newline at end of file
diff --git a/claudedocs/juil/[PLAN-2026-01-05] order-detail-form-separation.md b/claudedocs/juil/[PLAN-2026-01-05] order-detail-form-separation.md
new file mode 100644
index 00000000..8c636d20
--- /dev/null
+++ b/claudedocs/juil/[PLAN-2026-01-05] order-detail-form-separation.md
@@ -0,0 +1,292 @@
+# OrderDetailForm.tsx 분리 계획서
+
+**생성일**: 2026-01-05
+**현재 파일 크기**: 1,273줄
+**목표**: 유지보수성 향상을 위한 컴포넌트 분리
+
+---
+
+## 현재 파일 구조 분석
+
+| 영역 | 라인 | 비율 | 내용 |
+|------|------|------|------|
+| Import & Types | 1-69 | 5% | 의존성 및 타입 import |
+| Props Interface | 70-74 | 0.5% | 컴포넌트 props |
+| State & Hooks | 76-113 | 3% | 상태 관리 (12개 useState) |
+| Handlers | 114-433 | 25% | 핸들러 함수들 (20+개) |
+| JSX Render | 435-1271 | 66% | UI 렌더링 |
+
+### 주요 핸들러 분류 (114-433줄)
+- **Navigation**: handleBack, handleEdit, handleCancel (114-125)
+- **Form Field**: handleFieldChange (127-133)
+- **CRUD Operations**: handleSave, handleDelete, handleDuplicate (135-199)
+- **Category Operations**: handleAddCategory, handleDeleteCategory, handleCategoryChange (206-247)
+- **Item Operations**: handleAddItems, handleDeleteSelectedItems, handleDeleteAllItems, handleItemChange (249-327)
+- **Selection**: handleToggleSelection, handleToggleSelectAll (330-357)
+- **Calendar**: handleCalendarDateClick, handleCalendarMonthChange (359-385)
+
+### 주요 JSX 영역 (435-1271줄)
+- **발주 정보 Card**: 447-559 (112줄)
+- **계약 정보 Card**: 561-694 (133줄)
+- **발주 스케줄 Calendar**: 696-715 (19줄)
+- **발주 상세 테이블**: 717-1172 (455줄) ⚠️ **가장 큰 부분**
+- **카테고리 추가 버튼**: 1174-1182 (8줄)
+- **비고 Card**: 1184-1198 (14줄)
+- **Dialogs**: 1201-1261 (60줄)
+- **Document Modal**: 1263-1270 (7줄)
+
+---
+
+## 분리 계획
+
+### Phase 1: 커스텀 훅 분리
+
+**파일**: `hooks/useOrderDetailForm.ts`
+**예상 크기**: ~250줄
+
+```typescript
+// 추출할 내용
+- formData 상태 관리
+- selectedItems, addCounts, categoryFilters 상태
+- calendarDate, selectedCalendarDate 상태
+- 모든 핸들러 함수들
+- calendarEvents useMemo
+```
+
+**장점**:
+- 비즈니스 로직과 UI 분리
+- 테스트 용이성 향상
+- 재사용 가능
+
+---
+
+### Phase 2: 카드 컴포넌트 분리
+
+#### 2-1. `cards/OrderInfoCard.tsx`
+**예상 크기**: ~120줄
+
+```typescript
+interface OrderInfoCardProps {
+ formData: OrderDetailFormData;
+ isViewMode: boolean;
+ onFieldChange: (field: keyof OrderDetailFormData, value: any) => void;
+}
+```
+
+**포함 내용**: 발주번호, 발주일, 구분, 상태, 발주담당자, 화물도착지
+
+---
+
+#### 2-2. `cards/ContractInfoCard.tsx`
+**예상 크기**: ~150줄
+
+```typescript
+interface ContractInfoCardProps {
+ formData: OrderDetailFormData;
+ isViewMode: boolean;
+ isEditMode: boolean;
+ onFieldChange: (field: keyof OrderDetailFormData, value: any) => void;
+}
+```
+
+**포함 내용**: 거래처명, 현장명, 계약번호, 공사PM, 공사담당자
+
+---
+
+#### 2-3. `cards/OrderScheduleCard.tsx`
+**예상 크기**: ~50줄
+
+```typescript
+interface OrderScheduleCardProps {
+ events: ScheduleEvent[];
+ currentDate: Date;
+ selectedDate: Date | null;
+ onDateClick: (date: Date) => void;
+ onMonthChange: (date: Date) => void;
+}
+```
+
+**포함 내용**: ScheduleCalendar 래핑
+
+---
+
+#### 2-4. `cards/OrderMemoCard.tsx`
+**예상 크기**: ~40줄
+
+```typescript
+interface OrderMemoCardProps {
+ memo: string;
+ isViewMode: boolean;
+ onMemoChange: (value: string) => void;
+}
+```
+
+**포함 내용**: 비고 Textarea
+
+---
+
+### Phase 3: 테이블 컴포넌트 분리 (가장 중요)
+
+#### 3-1. `tables/OrderDetailItemTable.tsx`
+**예상 크기**: ~350줄
+
+```typescript
+interface OrderDetailItemTableProps {
+ category: OrderDetailCategory;
+ isEditMode: boolean;
+ isViewMode: boolean;
+ selectedItems: Set;
+ addCount: number;
+ onAddCountChange: (count: number) => void;
+ onAddItems: (count: number) => void;
+ onDeleteSelectedItems: () => void;
+ onDeleteAllItems: () => void;
+ onCategoryChange: (field: keyof OrderDetailCategory, value: string) => void;
+ onItemChange: (itemId: string, field: keyof OrderDetailItem, value: any) => void;
+ onToggleSelection: (itemId: string) => void;
+ onToggleSelectAll: () => void;
+}
+```
+
+**포함 내용**:
+- 카드 헤더 (왼쪽: 발주 상세/N건 선택/삭제, 오른쪽: 숫자/추가/카테고리/🗑️)
+- 테이블 전체 (TableHeader + TableBody)
+- 합계 행
+
+---
+
+#### 3-2. `tables/OrderDetailItemRow.tsx` (선택적)
+**예상 크기**: ~150줄
+
+```typescript
+interface OrderDetailItemRowProps {
+ item: OrderDetailItem;
+ index: number;
+ isEditMode: boolean;
+ isSelected: boolean;
+ onItemChange: (field: keyof OrderDetailItem, value: any) => void;
+ onToggleSelection: () => void;
+}
+```
+
+**포함 내용**: 단일 테이블 행 렌더링
+
+---
+
+### Phase 4: 다이얼로그 분리
+
+#### 4-1. `dialogs/OrderDialogs.tsx`
+**예상 크기**: ~80줄
+
+```typescript
+interface OrderDialogsProps {
+ // 저장 다이얼로그
+ showSaveDialog: boolean;
+ onSaveDialogChange: (open: boolean) => void;
+ onConfirmSave: () => void;
+ // 삭제 다이얼로그
+ showDeleteDialog: boolean;
+ onDeleteDialogChange: (open: boolean) => void;
+ onConfirmDelete: () => void;
+ // 카테고리 삭제 다이얼로그
+ showCategoryDeleteDialog: string | null;
+ onCategoryDeleteDialogChange: (categoryId: string | null) => void;
+ onConfirmDeleteCategory: () => void;
+ // 공통
+ isLoading: boolean;
+}
+```
+
+---
+
+## 분리 후 예상 구조
+
+```
+src/components/business/juil/order-management/
+├── OrderDetailForm.tsx (~200줄, 메인 컴포넌트)
+├── hooks/
+│ └── useOrderDetailForm.ts (~250줄, 비즈니스 로직)
+├── cards/
+│ ├── OrderInfoCard.tsx (~120줄)
+│ ├── ContractInfoCard.tsx (~150줄)
+│ ├── OrderScheduleCard.tsx (~50줄)
+│ └── OrderMemoCard.tsx (~40줄)
+├── tables/
+│ ├── OrderDetailItemTable.tsx (~350줄)
+│ └── OrderDetailItemRow.tsx (~150줄, 선택적)
+├── dialogs/
+│ └── OrderDialogs.tsx (~80줄)
+├── modals/
+│ └── OrderDocumentModal.tsx (기존)
+├── actions.ts (기존)
+└── types.ts (기존)
+```
+
+---
+
+## 분리 전후 비교
+
+| 지표 | Before | After |
+|------|--------|-------|
+| 메인 파일 크기 | 1,273줄 | ~200줄 |
+| 가장 큰 파일 | 1,273줄 | ~350줄 |
+| 파일 개수 | 1 | 8-9 |
+| 테스트 용이성 | 낮음 | 높음 |
+| 재사용성 | 낮음 | 중간 |
+
+---
+
+## 실행 체크리스트
+
+### Phase 1: 커스텀 훅 분리
+- [ ] `hooks/useOrderDetailForm.ts` 생성
+- [ ] 상태 변수들 이동
+- [ ] 핸들러 함수들 이동
+- [ ] useMemo 이동
+- [ ] OrderDetailForm.tsx에서 훅 사용
+
+### Phase 2: 카드 컴포넌트 분리
+- [ ] `cards/OrderInfoCard.tsx` 생성
+- [ ] `cards/ContractInfoCard.tsx` 생성
+- [ ] `cards/OrderScheduleCard.tsx` 생성
+- [ ] `cards/OrderMemoCard.tsx` 생성
+- [ ] OrderDetailForm.tsx에서 import 및 사용
+
+### Phase 3: 테이블 컴포넌트 분리
+- [ ] `tables/OrderDetailItemTable.tsx` 생성
+- [ ] `tables/OrderDetailItemRow.tsx` 생성 (선택적)
+- [ ] OrderDetailForm.tsx에서 import 및 사용
+
+### Phase 4: 다이얼로그 분리
+- [ ] `dialogs/OrderDialogs.tsx` 생성
+- [ ] OrderDetailForm.tsx에서 import 및 사용
+
+### Phase 5: 최종 검증
+- [ ] TypeScript 타입 오류 없음
+- [ ] ESLint 경고 없음
+- [ ] 빌드 성공
+- [ ] 기능 테스트 (view/edit 모드)
+- [ ] 불필요한 import 제거
+
+---
+
+## 우선순위 권장
+
+1. **Phase 1 (Hook)** + **Phase 3 (Table)** 먼저 진행
+ - 가장 큰 효과 (전체 코드의 ~60% 분리)
+ - 테이블이 455줄로 가장 큼
+
+2. Phase 2 (Cards) 진행
+ - 추가 ~360줄 분리
+
+3. Phase 4 (Dialogs) 진행
+ - 마무리 정리
+
+---
+
+## 주의사항
+
+- **타입 export**: 새 컴포넌트에서 사용할 타입들 types.ts에서 export 확인
+- **props drilling**: 너무 깊어지면 Context 고려
+- **테스트**: 분리 후 view/edit 모드 모두 테스트 필수
+- **점진적 진행**: 한 번에 모든 분리보다 단계별 진행 권장
diff --git a/src/app/[locale]/(protected)/hr/attendance/page.tsx b/src/app/[locale]/(protected)/hr/attendance/page.tsx
index d2039dce..0c54b435 100644
--- a/src/app/[locale]/(protected)/hr/attendance/page.tsx
+++ b/src/app/[locale]/(protected)/hr/attendance/page.tsx
@@ -66,7 +66,7 @@ export default function MobileAttendancePage() {
const fetchTodayAttendance = async () => {
try {
- const result = await getTodayAttendance(userId);
+ const result = await getTodayAttendance();
if (result.success && result.data) {
// 이미 출근한 경우
if (result.data.checkIn) {
diff --git a/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx b/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx
index 949a1456..997f7a4f 100644
--- a/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx
@@ -21,13 +21,18 @@ export default function EmployeeEditPage() {
setIsLoading(true);
try {
const data = await getEmployeeById(id);
+ // __authError 처리
+ if (data && '__authError' in data) {
+ router.push('/ko/login');
+ return;
+ }
setEmployee(data);
} catch (error) {
console.error('[EmployeeEditPage] fetchEmployee error:', error);
} finally {
setIsLoading(false);
}
- }, [params.id]);
+ }, [params.id, router]);
useEffect(() => {
fetchEmployee();
diff --git a/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx b/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx
index 962c5496..fd0646d5 100644
--- a/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx
@@ -33,13 +33,18 @@ export default function EmployeeDetailPage() {
setIsLoading(true);
try {
const data = await getEmployeeById(id);
+ // __authError 처리
+ if (data && '__authError' in data) {
+ router.push('/ko/login');
+ return;
+ }
setEmployee(data);
} catch (error) {
console.error('[EmployeeDetailPage] fetchEmployee error:', error);
} finally {
setIsLoading(false);
}
- }, [params.id]);
+ }, [params.id, router]);
useEffect(() => {
fetchEmployee();
diff --git a/src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx b/src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx
index f5964262..2f23ea43 100644
--- a/src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx
@@ -7,102 +7,122 @@ import type { Account } from '@/components/settings/AccountManagement/types';
// Mock 데이터 (API 연동 전 임시)
const mockAccounts: Account[] = [
{
- id: 'account-1',
+ id: 1,
bankCode: 'shinhan',
+ bankName: '신한은행',
accountNumber: '1234-1234-1234-1234',
accountName: '운영계좌 1',
accountHolder: '예금주1',
status: 'active',
+ isPrimary: true,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-2',
+ id: 2,
bankCode: 'kb',
+ bankName: 'KB국민은행',
accountNumber: '1234-1234-1234-1235',
accountName: '운영계좌 2',
accountHolder: '예금주2',
status: 'inactive',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-3',
+ id: 3,
bankCode: 'woori',
+ bankName: '우리은행',
accountNumber: '1234-1234-1234-1236',
accountName: '운영계좌 3',
accountHolder: '예금주3',
status: 'active',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-4',
+ id: 4,
bankCode: 'hana',
+ bankName: '하나은행',
accountNumber: '1234-1234-1234-1237',
accountName: '운영계좌 4',
accountHolder: '예금주4',
status: 'inactive',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-5',
+ id: 5,
bankCode: 'nh',
+ bankName: 'NH농협은행',
accountNumber: '1234-1234-1234-1238',
accountName: '운영계좌 5',
accountHolder: '예금주5',
status: 'active',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-6',
+ id: 6,
bankCode: 'ibk',
+ bankName: 'IBK기업은행',
accountNumber: '1234-1234-1234-1239',
accountName: '운영계좌 6',
accountHolder: '예금주6',
status: 'inactive',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-7',
+ id: 7,
bankCode: 'shinhan',
+ bankName: '신한은행',
accountNumber: '1234-1234-1234-1240',
accountName: '운영계좌 7',
accountHolder: '예금주7',
status: 'active',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-8',
+ id: 8,
bankCode: 'kb',
+ bankName: 'KB국민은행',
accountNumber: '1234-1234-1234-1241',
accountName: '운영계좌 8',
accountHolder: '예금주8',
status: 'inactive',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-9',
+ id: 9,
bankCode: 'woori',
+ bankName: '우리은행',
accountNumber: '1234-1234-1234-1242',
accountName: '운영계좌 9',
accountHolder: '예금주9',
status: 'active',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
{
- id: 'account-10',
+ id: 10,
bankCode: 'hana',
+ bankName: '하나은행',
accountNumber: '1234-1234-1234-1243',
accountName: '운영계좌 10',
accountHolder: '예금주10',
status: 'inactive',
+ isPrimary: false,
createdAt: '2025-12-19T00:00:00.000Z',
updatedAt: '2025-12-19T00:00:00.000Z',
},
@@ -110,7 +130,7 @@ const mockAccounts: Account[] = [
export default function AccountDetailPage() {
const params = useParams();
- const accountId = params.id as string;
+ const accountId = Number(params.id);
// Mock: 계좌 조회
const account = mockAccounts.find(a => a.id === accountId);
diff --git a/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx b/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
index 625ad803..bcd2104e 100644
--- a/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
+++ b/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
@@ -334,7 +334,7 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
-
@@ -345,7 +345,7 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
-