Files
sam-react-prod/docs/[REF] architecture-integration-risks.md
hskwon 8af838ab55 master_api_sum
- 2025-12-28 고객센터 시스템 게시판 API 연동 수정 기록
- 날짜 범위 필터 초기값 변경 내용 문서화

fix: 고객센터 목록 날짜 범위 초기값 변경

- EventList, InquiryList, NoticeList 날짜 범위 초기값 빈 문자열로 변경
- 페이지 진입 시 전체 데이터 조회 가능하도록 수정

feat: 1:1 문의 댓글 기능 API 연동

- 댓글 CRUD API 함수 구현 (shared/actions.ts)
  - getComments, createComment, updateComment, deleteComment
- CommentApiData 타입 및 transformApiToComment 변환 함수 추가
- InquiryDetail 컴포넌트 callback props 방식으로 변경
- user.id localStorage 저장으로 본인 글 수정/삭제 버튼 표시
- page.tsx에서 댓글 API 호출 및 상태 관리

feat(WEB): 게시판 시스템 Mock → API 연동 (Phase J)

- BoardList: getPosts, getMyPosts API 연동
- BoardDetail: getPost API 연동, 새 라우트 구조 적용
- BoardForm: getBoards, createPost, updatePost API 연동
- 라우트 변경: /board/[id] → /board/[boardCode]/[postId]
- Toast 라이브러리 sonner로 통일
- MOCK_BOARDS 완전 제거, types.ts 정리

chore: 작업 현황 업데이트

refactor: BoardForm 부서 Mock 데이터 분리

- types.ts에서 MOCK_DEPARTMENTS 제거
- BoardForm 내부에 임시 Mock 데이터 정의
- TODO: API에서 부서 목록 연동 필요

feat: 종합현황 반려 사유 입력 Dialog 추가

- 반려 시 사유 입력 Dialog 표시
- 사유 미입력 시 toast 에러 메시지
- rejectIssue 함수에 reason 파라미터 추가

feat: 고객센터 Mock → API 연동 완료

- shared/actions.ts: 공통 게시글 API 액션 추가
- shared/types.ts: 공통 타입 정의
- InquiryList: Mock → API 연동, transform 함수 추가
- FAQList: Mock → API 연동, transform 함수 추가
- 상세 페이지: API 연동 (notices, events, inquiries)
- 각 types.ts: transformPost 함수 추가

fix: 고객센터 board_code 불일치 수정

- 공지사항: notice → notices
- 이벤트: event → events
- DB 시스템 게시판 코드와 일치하도록 수정

feat: 결재 문서 작성 파일 첨부 기능 구현

- UploadedFile 타입 추가 및 ProposalData/ExpenseReportData에 uploadedFiles 필드 추가
- uploadFiles() 함수 구현 (/api/v1/files/upload API 연동)
- createApproval/updateApproval에서 파일 업로드 후 저장 처리
- ProposalForm/ExpenseReportForm에 첨부파일 UI 개선
  - 기존 업로드 파일 표시 (파일 보기/삭제 기능)
  - 새 첨부 파일 목록 표시 및 삭제 기능
- DraftBox에서 결재자 부서/직책 정보 표시
- 문서 상세 모달에서 실제 API 데이터 표시 (목업 데이터 제거)
- 수정 모드 상신 시 PATCH 메서드 사용 (405 에러 수정)

feat: [mock-migration] Phase J-4 게시판 관리 Mock → API 연동 완료

- types.ts: BoardApiData, BoardExtraSettings API 타입 추가
- actions.ts: Server Actions 생성 (CRUD, 변환 함수)
- index.tsx: Mock 데이터 → API 호출로 전환
- [id]/page.tsx: 상세 페이지 API 연동
- [id]/edit/page.tsx: 수정 페이지 API 연동
- new/page.tsx: 등록 페이지 API 연동

주요 정책:
- /boards/tenant 엔드포인트로 테넌트 게시판만 조회
- 수정 시 board_code 전송 안함 (코드 변경 불가)
- extra_settings 내 target/target_name 저장

feat: 매입유형(purchase_type) 필드 저장 기능 추가

- actions.ts: API 응답/요청에 purchase_type 매핑 추가
- PurchaseDetail.tsx: 저장 시 purchaseType 포함하도록 수정

fix(salary): 직책/직급 매핑 수정 (사원관리 기준 통일)

- transformApiToFrontend: position → job_title_label (직책), rank → rank (직급)
- transformApiToDetail: 동일하게 수정
- 기존 잘못된 매핑: position_label(직위) → 직책, job_title_label(직책) → 직급

feat: [mock-migration] Phase M 잔여 Mock/TODO 제거 완료

- M-1: 매입 상세 모달 MOCK_ACCOUNTS, MOCK_VENDORS → API 연동
- M-2: 직원 관리 파일 업로드 API 연동 (uploadProfileImage)
- M-4: 결재 문서 생성 MOCK_EMPLOYEES 제거 → getEmployees API
- M-5: 결재함/기안함 console.log 제거 → 승인/반려 API 연동
- M-6: 구독 관리 TODO 제거 → requestDataExport, cancelSubscription
- M-7: 계정 정보 TODO 제거 → withdrawAccount, suspendTenant

docs: 휴가관리 사용현황 동기화 수정 작업 기록

- 2025-12-26 휴가 사용현황 동기화 수정 내용 추가
- fetchUsageData 호출 추가, 부여일수 계산 수정 문서화

feat: Phase G 생산관리/품질검사 Mock → API 연동 완료

G-1 작업지시관리:
- WorkOrderList: getWorkOrders, getWorkOrderStats API
- WorkOrderDetail: getWorkOrderById API
- WorkOrderCreate: createWorkOrder API
- SalesOrderSelectModal: getSalesOrdersForWorkOrder API

G-2 작업실적관리:
- WorkResultList: getWorkResults, getWorkResultStats API

G-3 생산대시보드:
- actions.ts 생성, getDashboardData API

G-4 작업자화면:
- actions.ts 생성
- getMyWorkOrders, completeWorkOrder API
- MaterialInputModal: getMaterialsForWorkOrder, registerMaterialInput API
- ProcessDetailSection: getProcessSteps, requestInspection API

G-5 품질검사:
- actions.ts 생성
- InspectionList: getInspections, getInspectionStats API
- InspectionDetail: getInspectionById, updateInspection API
- InspectionCreate: createInspection API

fix: [vacation] 휴가 사용현황 동기화 및 부여일수 계산 수정

- 승인 후 fetchUsageData() 호출 추가로 사용현황 즉시 반영
- baseVacation: 동적 totalDays → 고정 '15일' (기본 연차)
- grantedVacation: 하드코딩 '0일' → Math.max(0, totalDays-15) 계산
- useCallback dependencies에 fetchUsageData 추가

feat: Phase I Excel/PDF 다운로드 API 연동

- ReceivablesStatus: 채권현황 엑셀 다운로드 API 연동
- VendorLedger: 거래처원장 목록 엑셀, 상세 PDF 다운로드 API 연동
- DailyReport: 일일일보 엑셀 다운로드 API 연동
- Blob 다운로드 패턴 및 toast 알림 적용

feat: L-2 견적 관리 Mock → API 연동

## 변경사항
- SAMPLE_QUOTES Mock 데이터 제거
- Server Actions 생성 (CRUD + 특수 기능 14개)
- QuoteManagementClient 분리 (SSR/CSR 패턴)
- Quote 타입 및 변환 함수 정의

## 추가된 API 연동
- 목록/상세/등록/수정/삭제/일괄삭제
- 최종확정/확정취소/수주전환
- PDF 생성/이메일/카카오 발송
- 견적번호 미리보기/요약 통계

feat: 공정관리 페이지 및 컴포넌트 추가

- 공정관리 목록/상세/등록/수정 페이지 구현
- ProcessListClient, ProcessDetail, ProcessForm 컴포넌트 추가
- ProcessWorkLogPreviewModal, RuleModal 추가
- MobileCard 공통 컴포넌트 추가
- WorkLogModal.tsx 개선
- .gitignore 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit f0c0de2ecd)

chore: React 공통 컴포넌트 업데이트

- VacationManagement: API 연동 개선
- WorkOrders: 작업자 선택 모달 개선
- TypeScript 빌드 설정 업데이트

feat: I-8 휴가 정책 관리 API 연동

- actions.ts: 휴가 정책 CRUD Server Actions
- LeavePolicyManagement 컴포넌트 API 연동

feat: I-7 종합분석 API 연동

- actions.ts: 종합분석 조회 Server Actions
- ComprehensiveAnalysis 컴포넌트 API 연동

feat: I-6 일일 생산현황 API 연동

- actions.ts: 일일 리포트 조회 Server Actions
- DailyReport 컴포넌트 API 연동

feat: I-5 미수금 현황 API 연동

- actions.ts: 미수금 조회 Server Actions
- ReceivablesStatus 컴포넌트 API 연동

feat: I-4 거래통장 조회 API 연동

- actions.ts: 은행 거래내역 조회 Server Actions
- BankTransactionInquiry 컴포넌트 API 연동

feat: I-3 법인카드 사용내역 API 연동

- actions.ts: 카드 거래내역 조회 Server Actions
- CardTransactionInquiry 컴포넌트 API 연동

feat: I-2 거래처 원장 API 연동

- actions.ts: 거래처 원장 조회 Server Actions
- VendorLedger 컴포넌트 API 연동
- VendorLedgerDetail 상세 조회 연동

feat: H-3 출하 관리 API 연동

- actions.ts: Server Actions (CRUD, 상태 변경)
- ShipmentList: 출하 목록 API 연동
- ShipmentCreate: 출하 등록 API 연동
- ShipmentEdit: 출하 수정 API 연동
- ShipmentDetail: 출하 상세 API 연동

feat: G-2 작업실적 관리 API 연동

- types.ts API 타입 추가 (WorkResultApi, WorkResultStatsApi 등)
- transformApiToFrontend/transformFrontendToApi 변환 함수 추가
- actions.ts 서버 액션 생성 (8개 함수)
- index.ts 액션 exports 추가

Server Actions:
- getWorkResults: 목록 조회 (페이징, 필터링)
- getWorkResultStats: 통계 조회
- getWorkResultById: 상세 조회
- createWorkResult: 등록
- updateWorkResult: 수정
- deleteWorkResult: 삭제
- toggleInspection: 검사 상태 토글
- togglePackaging: 포장 상태 토글

fix: StockStatusList Hook 순서 오류 수정

- 조건부 return 전에 모든 Hooks(useCallback, useMemo) 선언
- React Rules of Hooks 준수

feat: H-2 재고현황 Mock → API 연동 완료

- StockStatusDetail.tsx: 상세 조회 API 연동
- StockStatusList.tsx: 목록 조회 API 연동 (이전 세션)
- actions.ts: 재고 현황 Server Actions 구현

feat: H-1 입고 관리 Mock → API 연동 완료

- ReceivingDetail.tsx: 상세 조회 및 입고처리 API 연동
- ReceivingProcessDialog.tsx: 폼 데이터 API 전달 구조로 변경
- InspectionCreate.tsx: 검사 대상 목록 API 조회 적용
- ReceivingList.tsx: 미사용 타입 import 정리

feat: G-1 작업지시 관리 API 연동

- actions.ts 서버 액션 11개 함수 구현
- types.ts API 타입 및 변환 함수 추가
- index.ts 액션 함수 export 추가

Server Actions:
- getWorkOrders (목록)
- getWorkOrderStats (통계)
- getWorkOrderById (상세)
- createWorkOrder (등록)
- updateWorkOrder (수정)
- deleteWorkOrder (삭제)
- updateWorkOrderStatus (상태변경)
- assignWorkOrder (담당자배정)
- toggleBendingField (벤딩토글)
- addWorkOrderIssue (이슈등록)
- resolveWorkOrderIssue (이슈해결)

feat: I-1 미지급비용 관리 React 연동

- Server Actions 패턴으로 API 연동 구현 (actions.ts)
- Mock 데이터 제거, props 기반 데이터 주입
- Server Component로 초기 데이터 로딩
- 삭제/지급일 변경 등 CRUD 액션 연동

feat: HR 모듈 API 연동 완료 및 휴가관리 버그 수정

## 휴가관리 (VacationManagement)
- 휴가 부여 API 연동: createLeaveGrant 호출 추가
- 휴가 신청 시 선택된 사원 userId 전달 (잔여휴가 오류 수정)
- LeaveType 타입 분리 (VacationType과 구분)
- VacationGrantDialog에 부여일(grantDate) 필드 추가

## 근태관리 (AttendanceManagement)
- actions.ts 추가: API 호출 함수 분리
- 타입 정의 확장 및 개선

## 기타 개선
- CardManagement, SalaryManagement: actions 개선
- DocumentCreate: 전자결재 actions 및 index 개선
- GoogleMap: 지도 컴포넌트 개선

feat: Phase E 인사관리 Mock → API 마이그레이션

- E-1 법인카드 관리 API 연동
  - actions.ts 생성 (getCards, createCard, updateCard, deleteCard, toggleCardStatus)
  - CardForm, 페이지 컴포넌트 API 연동
- E-2 급여 관리 API 연동
  - actions.ts 생성 (getSalaries, getSalary, updateSalaryStatus, bulkUpdateSalaryStatus)
  - 급여 목록 컴포넌트 API 연동
- 결재 시스템 actions.ts 추가 (ApprovalBox, DraftBox, ReferenceBox, DocumentCreate)
- DepositManagement actions.ts 페이지네이션 응답 구조 수정
- 부서 관리, 휴가 관리 actions.ts 개선
- API URL에 /api prefix 추가

회계 및 설정 모듈 리팩토링: actions 분리, 타입 정의 개선

feat: 휴가 부여현황 Mock 데이터 제거 및 API 연동

- getLeaveGrants, createLeaveGrant, deleteLeaveGrant API 함수 추가
- LeaveGrantType, LeaveGrantRecord, CreateLeaveGrantRequest 타입 추가
- generateGrantData Mock 함수 제거
- fetchGrantData로 실제 API 호출
- grantData 상태를 API 데이터로 갱신

feat: 휴가 사용현황 Mock 데이터 제거 및 API 연동

- getLeaveBalances() API 함수 추가
- LeaveBalanceRecord, GetLeaveBalancesParams 타입 정의
- generateUsageData() Mock 함수 제거
- fetchUsageData()로 실제 API 호출
- hireDate 날짜 포맷팅 예외 처리 추가

feat: C-4 부서 관리 Mock → API 연동

- actions.ts 생성 (getDepartmentTree, createDepartment, updateDepartment, deleteDepartment, deleteDepartmentsMany)
- index.tsx Mock 데이터 제거 및 API 연동
- 트리 구조 CRUD 완전 연동

⚠️ .env.local에 API_URL=https://api.sam.kr/api 설정 필요 (Server Actions용)

feat: C-3 휴가 관리 Mock → API 연동

- actions.ts 생성: getLeaves, createLeave, approveLeave, rejectLeave, cancelLeave 등
- index.tsx 수정: 신청현황 탭 Mock 데이터 → API 호출 전환
- 일괄 승인/반려 API 연동 (approveLeavesMany, rejectLeavesMany)
- 휴가 신청 다이얼로그 createLeave API 연동

feat: C-2 근태 관리 Mock → API 연동

- actions.ts 생성 (checkIn/checkOut/getTodayAttendance)
- GoogleMap.tsx userLocation 콜백 추가
- page.tsx Mock console.log 제거 + API 연동
- 처리중 상태 및 버튼 텍스트 추가

feat: C-1 직원 관리 Mock → API 연동

- actions.ts 생성 (CRUD + 통계 + 일괄삭제 Server Actions)
- utils.ts 생성 (API ↔ Frontend 데이터 변환)
- index.tsx Mock 데이터 제거, API 연동
- [id]/page.tsx 상세 페이지 API 연동
- [id]/edit/page.tsx 수정 페이지 API 연동
- new/page.tsx 등록 페이지 API 연동

API Endpoints:
- GET/POST /api/v1/employees
- GET/PATCH/DELETE /api/v1/employees/{id}
- POST /api/v1/employees/bulk-delete
- GET /api/v1/employees/stats

feat: Daum 우편번호 서비스 연동 및 악성채권 UI 개선

- useDaumPostcode 공통 훅 생성 (Daum Postcode API 연동)
- 우편번호 찾기 기능 적용: 악성채권, 거래처, 직원, 회사정보, 주문등록
- 악성채권 페이지 토글 순서 변경 (라벨 → 토글)
- 악성채권 토글 기능 수정 (매출/매입 → 등록/해제)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit 41ef0bdd86)

feat: A-2 팝업 관리 Mock → API 연동

- 상세 조회 페이지: MOCK_POPUPS → getPopupById() API
- 수정 페이지: MOCK_POPUPS → getPopupById() API + 로딩 상태
- PopupForm: console.log → createPopup/updatePopup Server Actions
- 삭제 기능: deletePopup() API 연동 + 로딩 상태
- 데이터 변환 유틸리티 추가 (API ↔ Frontend)

feat: A-1 악성채권 관리 Mock → API 연동 완료

- 상세 페이지 서버 컴포넌트 전환 ([id]/page.tsx, [id]/edit/page.tsx)
- BadDebtDetail.tsx: CRUD API 연동 (createBadDebt, updateBadDebt, deleteBadDebt)
- actions.ts: 메모 API 추가 (addBadDebtMemo, deleteBadDebtMemo)

feat: 매입 관리 Mock → API 전환 및 세금계산서 토글 연동

- index.tsx: Mock 데이터 제거, API 데이터 로딩으로 전환
- actions.ts: getPurchases(), togglePurchaseTaxInvoice() 서버 액션 추가
- vendorOptions 빈 문자열 필터링 (Select.Item 에러 수정)

feat: 매출 상세 페이지 API 연동

- 목데이터(MOCK_VENDORS, fetchSalesDetail) 제거
- getSaleById, createSale, updateSale, deleteSale API 연동
- getClients로 거래처 목록 로드
- 상태 관리 개선 (clients, isLoading, isSaving)

fix: Mock 데이터를 실제 API 연동으로 복원

- 팝업 관리, 결제 내역, 구독 관리, 알림 설정 API 연동
- 입금/출금/거래처 관리 API 연동
- page.tsx를 서버 컴포넌트로 변환
- actions.ts 서버 액션 추가
2025-12-29 16:46:55 +09:00

845 lines
22 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 아키텍처 통합 위험 요소 분석
## 📋 문서 개요
이 문서는 현재 구성된 기반 설정에 추가 설계 가이드를 병합할 때 예상되는 위험 요소와 해결 방안을 제시합니다.
**작성일**: 2025-11-06
**업데이트**: 2025-11-06 (Next.js 15.5.6으로 다운그레이드, React Hook Form + Zod 추가)
**프로젝트**: Multi-tenant ERP System
**기술 스택**:
- Frontend: Next.js 15.5.6, React 19, next-intl, React Hook Form, Zod, TypeScript 5
- Backend: PHP Laravel + Sanctum (API)
- Deployment: Vercel (Frontend)
---
## 🏗️ 현재 아키텍처 구성
### 1. 기술 스택
```yaml
Frontend (Next.js):
- Next.js: 15.5.6 (stable, production-ready)
- React: 19.2.0 (latest)
- TypeScript: 5.x
- Deployment: Vercel
Internationalization:
- next-intl: 4.4.0
- Locales: ko (default), en, ja
Form Management & Validation:
- React Hook Form: 7.54.2
- Zod: 3.24.1
- @hookform/resolvers: 3.9.1
Styling:
- Tailwind CSS: 4.x (latest)
- PostCSS: 4.x
Backend (Laravel):
- PHP Laravel: 10.x+
- Database: MySQL/PostgreSQL
- Authentication: Laravel Sanctum (SPA Token Authentication)
- API: RESTful JSON API
- Deployment: 별도 서버 (Git 관리)
Architecture:
- Frontend: Next.js (Vercel) - UI/UX, i18n
- Backend: Laravel - Business Logic, DB, API
- Communication: HTTP/HTTPS API calls
- Auth Flow: Laravel Sanctum → Token → Next.js Storage
```
### 2. 디렉토리 구조
```
src/
├── app/[locale]/ # 다국어 라우팅
├── components/ # 공용 컴포넌트
├── i18n/ # i18n 설정
├── messages/ # 번역 파일 (ko, en, ja)
└── middleware.ts # 통합 미들웨어
```
### 3. 구현된 기능
- ✅ 다국어 지원 (ko, en, ja)
- ✅ SEO 최적화 (noindex, robots.txt)
- ✅ 봇 차단 미들웨어
- ✅ 보안 헤더 설정
- ✅ TypeScript 엄격 모드
- ✅ 폼 관리 및 유효성 검증 (React Hook Form + Zod)
---
## ⚠️ 주요 위험 요소
### 🔴 HIGH PRIORITY
#### 1. 멀티 테넌시 + i18n 복잡도
**문제**: 테넌트 격리와 다국어 라우팅의 충돌 가능성
**예상 시나리오**:
```
❌ 잠재적 충돌:
/[locale]/[tenant]/dashboard
vs
/[tenant]/[locale]/dashboard
어떤 구조를 선택할 것인가?
```
**위험도**: 🔴 높음
**영향 범위**:
- URL 구조 전체
- 라우팅 로직
- 미들웨어 복잡도
- SEO 구조
**해결 방안**:
**옵션 A: Locale 우선 (현재 구조 유지)**
```typescript
// URL 구조: /[locale]/[tenant]/dashboard
// 장점: i18n 우선, 언어 전환 간편
// 단점: 테넌트별 커스텀 도메인 어려움
/ko/acme-corp/dashboard → ACME 한국어 대시보드
/en/acme-corp/dashboard → ACME 영어 대시보드
/ko/beta-inc/dashboard → Beta Inc. 한국어 대시보드
```
**옵션 B: Tenant 우선**
```typescript
// URL 구조: /[tenant]/[locale]/dashboard
// 장점: 테넌트 격리 명확, 커스텀 도메인 용이
// 단점: 언어 전환 시 URL 복잡도 증가
/acme-corp/ko/dashboard
/acme-corp/en/dashboard
```
**옵션 C: 서브도메인 분리 (권장)**
```typescript
// URL 구조: {tenant}.domain.com/[locale]/dashboard
// 장점: 완벽한 테넌트 격리, 깔끔한 URL
// 단점: DNS 설정 필요, 미들웨어 복잡도 증가
acme-corp.erp.com/ko/dashboard
acme-corp.erp.com/en/dashboard
beta-inc.erp.com/ko/dashboard
```
**권장 전략**:
```typescript
// 1단계: 개발 환경 (Locale 우선)
/[locale]/[tenant]/dashboard
// 2단계: 프로덕션 (서브도메인)
{tenant}.domain.com/[locale]/dashboard
// 미들웨어에서 처리
export function middleware(request: NextRequest) {
const hostname = request.headers.get('host');
// 서브도메인에서 테넌트 추출
const tenant = extractTenantFromHostname(hostname);
// 로케일은 기존 로직 사용
const locale = detectLocale(request);
// 컨텍스트에 테넌트 정보 주입
request.headers.set('x-tenant-id', tenant);
}
```
---
#### 3. 미들웨어 성능 및 복잡도
**현재 미들웨어 책임**:
```typescript
1. 로케일 감지 리다이렉션
2. 차단 (User-Agent 검사)
3. 보안 헤더 추가
4. 로깅
향후 추가 예상:
5. 인증 검증 (JWT/Session)
6. 권한 확인 (RBAC)
7. 테넌트 식별 격리
8. Rate Limiting
9. API 검증
10. CORS 처리
```
**위험도**: 🔴 높음 (복잡도 증가)
**성능 영향**:
```typescript
// 미들웨어는 모든 요청마다 실행됨
// 현재: ~5-10ms
// 인증 추가: ~20-50ms
// DB 조회 추가: ~100-200ms ⚠️ 위험!
```
**해결 방안**:
**1. 미들웨어 분리 전략**
```typescript
// src/middleware/index.ts
import { chainMiddleware } from '@/lib/middleware-chain';
import { i18nMiddleware } from './i18n';
import { botBlockingMiddleware } from './bot-blocking';
import { authMiddleware } from './auth';
import { tenantMiddleware } from './tenant';
export default chainMiddleware([
i18nMiddleware, // 1순위: 로케일 감지
botBlockingMiddleware, // 2순위: 봇 차단 (빠른 종료)
tenantMiddleware, // 3순위: 테넌트 식별
authMiddleware, // 4순위: 인증 (DB 조회 최소화)
]);
```
**2. 성능 최적화**
```typescript
// ✅ 캐싱 활용
const tenantCache = new Map<string, Tenant>();
// ✅ DB 조회 최소화
// 미들웨어: 토큰 검증만
// API Route: DB 조회
// ✅ Edge Runtime 활용 (Vercel/Cloudflare)
export const config = {
runtime: 'edge', // 빠른 실행
};
```
**3. 조건부 실행**
```typescript
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
// 정적 파일은 스킵
if (pathname.startsWith('/_next/static')) {
return NextResponse.next();
}
// 공개 경로는 인증 스킵
if (PUBLIC_PATHS.includes(pathname)) {
return i18nOnly(request);
}
// 보호된 경로만 전체 검증
return fullMiddleware(request);
}
```
---
### 🟡 MEDIUM PRIORITY
#### 4. 데이터베이스 스키마와 다국어 (Laravel 백엔드)
**✅ 확정**: 데이터베이스 및 API는 Laravel에서 관리
**Laravel 다국어 처리 전략**:
**옵션 A: JSON 컬럼 (Laravel에서 간편)**
```php
// Laravel Migration
Schema::create('products', function (Blueprint $table) {
$table->uuid('id')->primary();
$table->string('sku', 50)->unique();
$table->json('name'); // {"ko": "제품명", "en": "Product Name", "ja": "製品名"}
$table->json('description')->nullable();
$table->timestamps();
});
// Laravel Model
class Product extends Model {
protected $casts = [
'name' => 'array',
'description' => 'array',
];
public function getTranslatedName($locale = 'ko') {
return $this->name[$locale] ?? $this->name['ko'];
}
}
```
**옵션 B: 번역 테이블 (권장 - 성능 최적화)**
```php
// Laravel Migration - products table
Schema::create('products', function (Blueprint $table) {
$table->uuid('id')->primary();
$table->string('sku', 50)->unique();
$table->timestamps();
});
// Laravel Migration - product_translations table
Schema::create('product_translations', function (Blueprint $table) {
$table->uuid('product_id');
$table->string('locale', 5);
$table->string('name');
$table->text('description')->nullable();
$table->primary(['product_id', 'locale']);
$table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
$table->index('locale');
});
// Laravel Model
class Product extends Model {
public function translations() {
return $this->hasMany(ProductTranslation::class);
}
public function translation($locale = 'ko') {
return $this->translations()->where('locale', $locale)->first();
}
}
class ProductTranslation extends Model {
public $timestamps = false;
protected $fillable = ['locale', 'name', 'description'];
}
```
**Laravel API 응답 예시**:
```php
// API Controller
public function show(Product $product, Request $request) {
$locale = $request->header('X-Locale', 'ko');
return response()->json([
'id' => $product->id,
'sku' => $product->sku,
'name' => $product->translation($locale)->name,
'description' => $product->translation($locale)->description,
]);
}
```
**Next.js에서 사용**:
```typescript
// API 호출 with 로케일
const fetchProduct = async (id: string, locale: string) => {
const res = await fetch(`${LARAVEL_API_URL}/api/products/${id}`, {
headers: {
'X-Locale': locale,
'Authorization': `Bearer ${token}`,
},
});
return res.json();
};
```
**권장**: 옵션 B (번역 테이블) - Laravel Eloquent ORM과 잘 동작
---
#### 5. 인증 시스템 통합 (Laravel Sanctum)
**✅ 확정**: 인증은 Laravel Sanctum에서 처리, Next.js는 토큰 관리만
**Laravel Sanctum 인증 플로우**:
```
1. 로그인 요청 (Next.js)
2. Laravel API 인증 (/api/login)
3. Sanctum Token 발급
4. Next.js에 토큰 저장 (Cookie/LocalStorage)
5. 이후 모든 API 요청에 토큰 포함
```
**Laravel API 설정**:
```php
// routes/api.php
Route::post('/login', [AuthController::class, 'login']);
Route::post('/logout', [AuthController::class, 'logout'])->middleware('auth:sanctum');
Route::get('/user', function (Request $request) {
return $request->user();
})->middleware('auth:sanctum');
// app/Http/Controllers/AuthController.php
public function login(Request $request) {
$credentials = $request->validate([
'email' => 'required|email',
'password' => 'required',
]);
if (!Auth::attempt($credentials)) {
return response()->json(['message' => 'Invalid credentials'], 401);
}
$user = Auth::user();
$token = $user->createToken('auth-token')->plainTextToken;
return response()->json([
'user' => $user,
'token' => $token,
]);
}
```
**Next.js 미들웨어 (토큰 검증만)**:
```typescript
// src/middleware.ts
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
// 1단계: i18n 먼저 처리 (로케일 정규화)
const intlResponse = intlMiddleware(request);
// 2단계: 정규화된 경로로 인증 체크
const locale = getLocaleFromPath(intlResponse.url);
const pathWithoutLocale = removeLocale(pathname, locale);
// 3단계: 보호된 경로인지 확인
if (requiresAuth(pathWithoutLocale)) {
// 쿠키에서 토큰 확인
const token = request.cookies.get('auth_token')?.value;
if (!token) {
// 로케일 포함하여 로그인 페이지로 리다이렉트
const loginUrl = new URL(`/${locale}/login`, request.url);
loginUrl.searchParams.set('callbackUrl', request.url);
return NextResponse.redirect(loginUrl);
}
// ⚠️ 주의: 미들웨어에서는 토큰 유효성 검증 안 함
// → Laravel API 호출 시 자동으로 검증됨
// → 성능 최적화 (매 요청마다 DB 조회 방지)
}
return intlResponse;
}
```
**Next.js API 호출 유틸리티**:
```typescript
// src/lib/api.ts
const LARAVEL_API_URL = process.env.NEXT_PUBLIC_LARAVEL_API_URL;
export async function apiCall(endpoint: string, options: RequestInit = {}) {
const token = getCookie('auth_token');
const res = await fetch(`${LARAVEL_API_URL}${endpoint}`, {
...options,
headers: {
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
'Content-Type': 'application/json',
...options.headers,
},
});
if (res.status === 401) {
// 토큰 만료 → 로그아웃 처리
deleteCookie('auth_token');
window.location.href = '/login';
}
return res.json();
}
// 로그인
export async function login(email: string, password: string) {
const data = await apiCall('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
// 토큰 저장
setCookie('auth_token', data.token, { maxAge: 60 * 60 * 24 * 7 }); // 7일
return data.user;
}
// 로그아웃
export async function logout() {
await apiCall('/api/logout', { method: 'POST' });
deleteCookie('auth_token');
}
```
**주요 특징**:
-**Next.js 미들웨어**: 토큰 존재 여부만 확인 (빠름)
-**Laravel API**: 실제 토큰 검증 및 사용자 인증
-**토큰 저장**: HTTP-only Cookie (XSS 방지)
-**토큰 갱신**: Laravel Sanctum 자동 처리
---
#### 6. 빌드 및 배포 설정
**정적 생성 vs 동적 렌더링**:
**현재 문제**:
```typescript
// 모든 로케일 × 모든 페이지 조합 생성
// 3개 언어 × 100개 페이지 = 300개 정적 페이지
// → 빌드 시간 증가
export function generateStaticParams() {
return locales.map((locale) => ({ locale }));
}
```
**해결 방안**:
```typescript
// 옵션 1: ISR (Incremental Static Regeneration)
export const revalidate = 3600; // 1시간마다 재생성
// 옵션 2: 동적 렌더링 (인증 필요 페이지)
export const dynamic = 'force-dynamic';
// 옵션 3: 하이브리드 (공개 페이지는 정적, 대시보드는 동적)
// src/app/[locale]/(public)/page.tsx → 정적
// src/app/[locale]/(protected)/dashboard/page.tsx → 동적
```
**권장 전략**:
```typescript
// 1. 공개 페이지
export const dynamic = 'force-static';
export const revalidate = 3600;
// 2. 대시보드/ERP 기능
export const dynamic = 'force-dynamic';
// 3. 리포트 페이지
export const dynamic = 'force-dynamic';
export const revalidate = 300; // 5분 캐시
```
---
### 🟢 LOW PRIORITY
#### 7. UI 컴포넌트 라이브러리 선택
**예상 추가 의존성**:
```json
{
"dependencies": {
// 옵션 1: shadcn/ui (권장)
"@radix-ui/react-*": "^latest",
// 옵션 2: Material-UI
"@mui/material": "^latest",
// 옵션 3: Ant Design
"antd": "^latest"
}
}
```
**i18n 통합 고려사항**:
```typescript
// shadcn/ui: next-intl과 잘 작동
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/button';
const t = useTranslations('common');
<Button>{t('save')}</Button>
// Material-UI: 별도 LocalizationProvider 필요
import { LocalizationProvider } from '@mui/x-date-pickers';
// → next-intl과 중복 가능성
```
**권장**: shadcn/ui (Tailwind 기반, next-intl 호환)
---
#### 8. 상태 관리 라이브러리
**예상 추가 의존성**:
```json
{
"dependencies": {
// 옵션 1: Zustand (권장)
"zustand": "^latest",
// 옵션 2: Redux Toolkit
"@reduxjs/toolkit": "^latest",
"react-redux": "^latest",
// 옵션 3: Jotai
"jotai": "^latest"
}
}
```
**다국어 통합**:
```typescript
// Zustand + next-intl
import { create } from 'zustand';
import { useLocale } from 'next-intl';
const useStore = create((set) => ({
locale: 'ko',
setLocale: (locale) => set({ locale }),
}));
// 컴포넌트
const locale = useLocale(); // next-intl
const { setLocale } = useStore(); // 전역 상태
```
**충돌 가능성**: 낮음 (독립적 동작)
---
## 🛡️ 통합 체크리스트
### 설계 가이드 병합 전 확인사항
#### Phase 1: 라우팅 구조 확정
- [ ] 멀티 테넌시 전략 결정 (서브도메인 vs URL 기반)
- [ ] URL 구조 최종 확정 (`/[locale]/[tenant]` vs `{tenant}.domain/[locale]`)
- [ ] 미들웨어 실행 순서 정의
- [ ] 404/에러 페이지 다국어 처리
#### Phase 2: 데이터베이스 설계
- [ ] 다국어 데이터 저장 방식 결정 (JSON vs 번역 테이블)
- [ ] Prisma 스키마 작성
- [ ] 마이그레이션 전략 수립
- [ ] 시드 데이터 다국어 준비
#### Phase 3: 인증 시스템
- [ ] 인증 라이브러리 선택 (NextAuth.js, Clerk, Supabase Auth 등)
- [ ] 세션 관리 전략 (JWT vs Database Session)
- [ ] 미들웨어 통합 (i18n + auth 순서)
- [ ] 로그인/로그아웃 플로우 다국어 처리
#### Phase 4: UI/UX
- [ ] 컴포넌트 라이브러리 선택
- [ ] 디자인 시스템 정의
- [ ] 반응형 레이아웃 전략
- [ ] 다크모드 지원 여부
#### Phase 5: 성능 최적화
- [ ] ISR vs SSR vs SSG 전략
- [ ] 이미지 최적화 (next/image)
- [ ] 폰트 최적화
- [ ] 번들 크기 모니터링
#### Phase 6: 배포 준비
- [ ] 환경 변수 관리 (.env.local, .env.production)
- [ ] CI/CD 파이프라인
- [ ] 도메인 및 DNS 설정
- [ ] 모니터링 도구 (Sentry, LogRocket 등)
---
## 🔧 권장 마이그레이션 전략
### 단계별 통합 플랜
#### Week 1-2: 기반 구조 검증
```bash
✓ 현재 구조 분석
✓ 설계 가이드 리뷰
✓ 충돌 포인트 식별
✓ 통합 전략 수립
```
#### Week 3-4: 라우팅 및 미들웨어
```bash
- 멀티 테넌시 구조 구현
- 미들웨어 리팩토링 (체이닝)
- 테넌트 격리 테스트
- 성능 벤치마크
```
#### Week 5-6: 데이터베이스 및 인증
```bash
- Prisma 스키마 완성
- 인증 시스템 통합
- 테넌트별 데이터 격리
- 권한 시스템 구현
```
#### Week 7-8: UI 컴포넌트 및 기능
```bash
- 컴포넌트 라이브러리 설치
- 공통 컴포넌트 개발
- ERP 모듈 구현 시작
- E2E 테스트 작성
```
---
## 📊 위험도 매트릭스
| 위험 요소 | 발생 확률 | 영향도 | 우선순위 | 대응 전략 |
|---------|---------|--------|---------|---------|
| 멀티테넌시 + i18n 충돌 | 중간 | 높음 | 🔴 P1 | 서브도메인 전략 채택 |
| 미들웨어 성능 저하 | 중간 | 중간 | 🟡 P2 | 체이닝, 캐싱 최적화 |
| DB 스키마 복잡도 | 낮음 | 중간 | 🟡 P2 | 번역 테이블 패턴 |
| 인증 통합 충돌 | 중간 | 중간 | 🟡 P2 | 순서 정의, 테스트 |
| 빌드 시간 증가 | 중간 | 낮음 | 🟢 P3 | ISR, 하이브리드 렌더링 |
| UI 라이브러리 충돌 | 낮음 | 낮음 | 🟢 P3 | shadcn/ui 선택 |
| 상태 관리 복잡도 | 낮음 | 낮음 | 🟢 P3 | Zustand 권장 |
---
## 🚀 즉시 적용 가능한 개선 사항
### 1. 미들웨어 체이닝 유틸리티 추가
```typescript
// src/lib/middleware-chain.ts
import { NextRequest, NextResponse } from 'next/server';
type Middleware = (request: NextRequest) => NextResponse | Promise<NextResponse>;
export function chainMiddleware(middlewares: Middleware[]) {
return async (request: NextRequest) => {
let response = NextResponse.next();
for (const middleware of middlewares) {
response = await middleware(request);
// 리다이렉트나 에러 응답 시 체인 중단
if (response.status !== 200) {
return response;
}
}
return response;
};
}
```
### 2. 환경 변수 검증
```typescript
// src/lib/env.ts
import { z } from 'zod';
const envSchema = z.object({
NODE_ENV: z.enum(['development', 'production', 'test']),
DATABASE_URL: z.string().url(),
NEXTAUTH_SECRET: z.string().min(32),
NEXTAUTH_URL: z.string().url(),
});
export const env = envSchema.parse(process.env);
```
### 3. 타입 안전성 강화
```typescript
// src/types/tenant.ts
export type TenantId = string & { readonly __brand: 'TenantId' };
export function createTenantId(id: string): TenantId {
return id as TenantId;
}
// 사용 예
const tenantId = createTenantId('acme-corp');
// 일반 string과 혼용 불가 → 타입 안전성
```
---
## 📞 의사결정이 필요한 사항
### 즉시 결정 필요 (개발 시작 전)
1. **멀티 테넌시 전략**
- [ ] 서브도메인 방식 (`{tenant}.domain.com`)
- [ ] URL 기반 방식 (`/[tenant]`)
- [ ] 하이브리드 (개발: URL, 프로덕션: 서브도메인)
2. **데이터베이스**
- [ ] PostgreSQL
- [ ] MySQL
- [ ] Supabase (PostgreSQL + Auth)
3. **인증 시스템**
- [ ] NextAuth.js (오픈소스)
- [ ] Clerk (상용)
- [ ] Supabase Auth
- [ ] 자체 구현
4. **배포 플랫폼**
- [ ] Vercel
- [ ] AWS
- [ ] Google Cloud
- [ ] Azure
### 개발 중 결정 가능
5. **UI 컴포넌트 라이브러리**
6. **상태 관리 라이브러리**
7. **차트 라이브러리** (Recharts, Chart.js 등)
### ✅ 이미 결정됨
- **폼 라이브러리**: React Hook Form + Zod (타입 안전성, 성능, 다국어 지원)
---
## 🎯 결론 및 권장사항
### ✅ 현재 기반 설정은 프로덕션 준비 완료
현재 구성된 **Next.js 15.5.6 + Laravel Sanctum + next-intl + React Hook Form + Zod + TypeScript** 기반은 **멀티 테넌트 ERP 시스템 개발에 최적화**되었습니다.
**주요 강점**:
- ✅ Next.js 15.5.6: 안정적이고 검증된 버전 (middleware 경고 없음)
- ✅ Laravel Sanctum: 토큰 기반 인증으로 프론트엔드/백엔드 완전 분리
- ✅ next-intl 4.4.0: 다국어 지원 완벽 통합
- ✅ React Hook Form + Zod: 타입 안전한 폼 관리 및 유효성 검증
- ✅ React 19.2.0: 최신 기능 활용 가능
- ✅ Tailwind CSS 4.x: 최신 스타일링 시스템
### ⚠️ 주의가 필요한 영역
1. **멀티테넌시 URL 구조** → 서브도메인 방식 권장
2. **미들웨어 복잡도 관리** → 체이닝 패턴 도입 필요
3. **Laravel API 엔드포인트 설정** → 환경 변수 구성 필수
### 🚦 진행 가능 여부
**판정**: ✅ **즉시 진행 가능**
**충족 조건**:
- ✅ 안정적인 기술 스택 (Next.js 15.5.6)
- ✅ 명확한 아키텍처 분리 (Frontend/Backend)
- ✅ 다국어 지원 구조 완성
- ✅ 인증 플로우 설계 완료
**진행 전 결정 필요**:
- 멀티 테넌시 전략 (서브도메인 vs URL 기반)
- Laravel API URL 환경 변수 설정
### 📋 Next Steps
1. **즉시**: 멀티 테넌시 전략 결정 + Laravel API URL 설정
2. **1주차**: 미들웨어 체이닝 구현 + 환경 변수 구성
3. **2주차**: Laravel API 통합 테스트 + 인증 플로우 검증
4. **3주차**: 첫 ERP 모듈 구현 시작
5. **4주차**: UI 컴포넌트 라이브러리 통합 (shadcn/ui 권장)
---
**문서 유효기간**: 2025-11-06 ~ 2025-12-06 (1개월)
**다음 리뷰**: 설계 가이드 통합 후 또는 주요 아키텍처 변경 시
**작성자**: Claude Code
**승인 필요**: 프로젝트 매니저, 시니어 개발자