845 lines
22 KiB
Markdown
845 lines
22 KiB
Markdown
|
|
# 아키텍처 통합 위험 요소 분석
|
|||
|
|
|
|||
|
|
## 📋 문서 개요
|
|||
|
|
|
|||
|
|
이 문서는 현재 구성된 기반 설정에 추가 설계 가이드를 병합할 때 예상되는 위험 요소와 해결 방안을 제시합니다.
|
|||
|
|
|
|||
|
|
**작성일**: 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
|
|||
|
|
**승인 필요**: 프로젝트 매니저, 시니어 개발자
|