# Week 3-4: Frontend 구현 완료

## 📋 구현 완료 목록

### 1. API 서비스
- ✅ **strategyDSLApi.ts** (600+ 라인)
  - LogicNode, ConditionDSL, StrategyDSLDto 타입 정의
  - CRUD API 함수 (생성, 조회, 수정, 삭제)
  - 유틸리티 함수 (유효성 검증, 자연어 변환 등)
  - 12개 API 엔드포인트 연동

### 2. 드래그 앤 드롭 컴포넌트 (strategy-tree/)
- ✅ **NodePalette.tsx** (300+ 라인)
  - 드래그 가능한 지표/조건 팔레트
  - 논리 연산자 (AND, OR, NOT)
  - 보조 지표 (CCI, MACD, RSI 등 8개)
  - 사용 가이드 및 예시 표시

- ✅ **TreeNode.tsx** (280+ 라인)
  - 재귀적 트리 노드 렌더링
  - 드래그 앤 드롭 지원 (@dnd-kit)
  - 노드 타입별 색상 및 아이콘
  - 편집/삭제/자식 추가 액션

- ✅ **ConditionEditor.tsx** (350+ 라인)
  - 조건 설정 다이얼로그
  - 지표 타입 선택
  - 조건 타입 선택 (13종류)
  - 기준값, 기간 입력
  - 실시간 미리보기

- ✅ **NaturalLanguagePreview.tsx** (250+ 라인)
  - DSL → 자연어 변환
  - 전략 통계 (노드 수, 조건 수, 깊이, 복잡도)
  - 유효성 검증 알림
  - 복잡도 경고

- ✅ **StrategyTreeBuilder.tsx** (280+ 라인)
  - DndContext 통합
  - 노드 조작 로직 (찾기, 업데이트, 삭제, 추가)
  - 드래그 앤 드롭 이벤트 처리
  - 조건 편집 다이얼로그 통합

### 3. 메인 페이지
- ✅ **StrategyTreeBuilderPage.tsx** (450+ 라인)
  - 3-컬럼 레이아웃
    - 왼쪽: 전략 목록 + 팔레트
    - 중앙: 전략 편집기
    - 오른쪽: 자연어 미리보기
  - 전략 CRUD 기능
  - 저장/삭제 다이얼로그
  - 스낵바 알림

### 4. 기존 파일 수정
- ✅ **App.tsx** (수정)
  - StrategyTreeBuilderPage import 추가
  - 메뉴 항목 추가
    - "전략(기존)" → StrategyRulePage
    - "전략(드래그)" → StrategyTreeBuilderPage
  - renderPage에 'strategy-tree' 케이스 추가

---

## 📊 구현 통계

| 항목 | 개수 | 라인 수 |
|------|------|---------|
| API 서비스 | 1개 | 600+ |
| 컴포넌트 | 5개 | 1,460+ |
| 페이지 | 1개 | 450+ |
| App.tsx 수정 | - | +20 |
| **총계** | **7개 파일** | **2,530+ 라인** |

---

## 🎯 핵심 달성 사항

### ✅ 기존 기능 100% 보존
- `StrategyRulePage.tsx` 수정 없음
- 기존 메뉴 항목 그대로 유지
- 기존 API (`strategyRuleApi.ts`) 영향 없음
- 기존 백테스트 화면 정상 동작

### ✅ 드래그 앤 드롭 UI 완성
- @dnd-kit 라이브러리 활용
- 직관적인 트리 구조 편집
- 실시간 미리보기
- 자연어 설명 자동 생성

### ✅ Material-UI 디자인 일관성
- 기존 테마 시스템 활용
- 다크 모드 완벽 지원
- 반응형 레이아웃 (Grid 시스템)

### ✅ 사용자 경험 최적화
- 드래그 가이드 제공
- 실시간 유효성 검증
- 복잡도 경고
- 스낵바 알림

---

## 🔍 코드 검증 완료

- ✅ **Lint 오류 없음**
- ✅ **TypeScript 타입 안정성 보장**
- ✅ **재사용 가능한 컴포넌트 구조**
- ✅ **명확한 props 인터페이스**

---

## 🎨 UI 구조

```
┌─────────────────────────────────────────────────────────────────┐
│ 🎨 전략 설정 (드래그 방식)           [새로고침] [새 전략] [저장] │
├───────────────┬──────────────────────────┬───────────────────────┤
│               │                          │                       │
│ 📋 전략 목록  │  ✏️ 전략 편집기          │  📝 전략 미리보기      │
│               │                          │                       │
│ □ CCI 전략    │  ┌─────────────────┐   │  📊 통계              │
│ □ MACD 전략   │  │    AND 노드     │   │  - 노드: 3개          │
│ □ RSI 전략    │  └──┬──────────┬───┘   │  - 조건: 2개          │
│               │     │          │        │  - 깊이: 2            │
│ [+ 새 전략]   │  ┌─────┐   ┌─────┐     │  - 복잡도: 간단함     │
│               │  │ CCI │   │ RSI │     │                       │
│ ─────────────  │  └─────┘   └─────┘     │  📝 설명              │
│               │                          │  "다음 조건을 모두    │
│ 🔗 논리 연산자│                          │   만족:              │
│ [AND] [OR]    │                          │   CCI(20)가 -100을   │
│ [NOT]         │                          │   상향 돌파          │
│               │                          │   RSI(14)가 30 이하" │
│ 📊 보조 지표  │                          │                       │
│ [CCI] [MACD]  │                          │  ✅ 전략이 유효합니다 │
│ [RSI] ...     │                          │                       │
└───────────────┴──────────────────────────┴───────────────────────┘
```

---

## 🚀 주요 기능

### 1. 드래그 앤 드롭
- **팔레트에서 노드 드래그**
  - 논리 연산자 (AND/OR/NOT)
  - 보조 지표 (CCI, MACD, RSI 등)
- **트리 구조 생성**
  - 자유로운 계층 구조
  - 재귀적 렌더링
- **드롭 영역 하이라이트**
  - 드롭 가능한 영역 표시
  - 실시간 피드백

### 2. 조건 편집
- **지표 선택**
  - 12종류 보조 지표 지원
  - 권장 기간 자동 설정
- **조건 타입 선택**
  - 13종류 조건 지원
  - 조건별 필수 입력 항목 자동 표시
- **실시간 미리보기**
  - 설정 중인 조건 자연어 표시

### 3. 자연어 변환
- **DSL → 한글 변환**
  - 논리 구조 명확히 표현
  - 들여쓰기로 계층 표시
- **통계 정보**
  - 노드 개수, 조건 개수
  - 트리 깊이, 복잡도 점수
- **유효성 검증**
  - 저장 가능 여부 표시
  - 복잡도 경고

### 4. 전략 관리
- **CRUD 작업**
  - 생성, 조회, 수정, 삭제
- **전략 복제**
  - 기존 전략 복사하여 새 전략 생성
- **활성화 관리**
  - 개별 전략 활성화/비활성화
- **FSM 토글**
  - Finite State Machine 사용 여부 설정

---

## 📝 사용 예시

### 예시 1: CCI 침체 탈출 전략

**구성:**
```
AND 노드
  ├─ CCI 조건: -100 상향 돌파
  └─ RSI 조건: 30 이하
```

**자연어:**
```
다음 조건을 모두 만족:
  CCI(20)가 -100을 상향 돌파
  RSI(14)가 30 이하
```

**DSL JSON:**
```json
{
  "id": "node-1",
  "type": "AND",
  "children": [
    {
      "id": "node-2",
      "type": "CONDITION",
      "condition": {
        "indicatorType": "CCI",
        "conditionType": "CROSS_UP",
        "targetValue": -100,
        "period": 20
      }
    },
    {
      "id": "node-3",
      "type": "CONDITION",
      "condition": {
        "indicatorType": "RSI",
        "conditionType": "BELOW",
        "targetValue": 30,
        "period": 14
      }
    }
  ]
}
```

### 예시 2: 복합 전략 (OR 조건)

**구성:**
```
OR 노드
  ├─ MACD 조건: 골든 크로스
  └─ Stochastic 조건: 과매도
```

**자연어:**
```
다음 조건 중 하나 이상 만족:
  MACD(12) 골든 크로스
  Stochastic(14) 과매도 구간
```

---

## 🔄 데이터 흐름

### 전략 생성 흐름
```
1. 사용자: 팔레트에서 AND 노드 드래그
   ↓
2. Frontend: LogicNode 생성 (type: "AND")
   ↓
3. 사용자: CCI 지표 드래그 → AND 노드에 드롭
   ↓
4. Frontend: CONDITION 노드 생성 → 자식으로 추가
   ↓
5. 사용자: 조건 편집 (기준값 -100, 기간 20)
   ↓
6. Frontend: ConditionDSL 업데이트
   ↓
7. 사용자: 저장 버튼 클릭
   ↓
8. Frontend: LogicNode → JSON.stringify
   ↓
9. Backend API: POST /api/strategies/dsl
   ↓
10. Backend: DSL → Legacy 변환 (StrategyConverterService)
   ↓
11. Database: strategy_rule 테이블에 저장
   ↓
12. Frontend: 스낵바 "전략이 생성되었습니다" 표시
```

### 백테스트 실행 흐름
```
1. 사용자: 투자분석 화면에서 전략 선택 (DSL 전략)
   ↓
2. Frontend: 백테스트 요청
   ↓
3. Backend: StrategyRule 조회 (dsl_json 포함)
   ↓
4. Backend: 기존 BacktestService 사용 (변경 없음)
   ↓
5. Backend: ConditionGroup, StrategyCondition 기반 평가
   ↓
6. Frontend: 매수/매도 마커 표시
```

---

## 🎓 기술 스택

| 항목 | 기술 |
|------|------|
| 언어 | TypeScript |
| UI 프레임워크 | React 18 |
| 디자인 시스템 | Material-UI 5 |
| 드래그 앤 드롭 | @dnd-kit |
| 상태 관리 | React Hooks (useState, useEffect) |
| API 통신 | Axios |
| 라우팅 | 없음 (단일 페이지 앱 내 페이지 전환) |

---

## ✅ 검증 항목

- [x] 드래그 앤 드롭 동작
- [x] API 통신 (CRUD)
- [x] 자연어 변환
- [x] 전략 저장/로드
- [x] 기존 화면 정상 동작
- [x] 다크 모드 지원
- [x] 반응형 레이아웃
- [x] TypeScript 타입 안정성
- [x] Lint 오류 없음

---

## 📦 파일 구조

```
frontend/src/
├── services/
│   └── strategyDSLApi.ts          (신규)
├── components/
│   └── strategy-tree/             (신규)
│       ├── NodePalette.tsx
│       ├── TreeNode.tsx
│       ├── ConditionEditor.tsx
│       ├── NaturalLanguagePreview.tsx
│       └── StrategyTreeBuilder.tsx
├── pages/
│   ├── StrategyRulePage.tsx       (기존, 수정 없음)
│   └── StrategyTreeBuilderPage.tsx (신규)
└── App.tsx                         (수정)
```

---

## 🔧 다음 단계 (선택사항)

### Week 5-6: 고급 기능 추가 (선택)
1. **전략 템플릿**
   - 사전 정의된 전략 템플릿 제공
   - 한 클릭으로 적용
2. **전략 시뮬레이션**
   - 드래그 화면에서 바로 백테스트
   - 실시간 성과 미리보기
3. **전략 공유**
   - 전략 내보내기/가져오기 (JSON)
   - 커뮤니티 전략 라이브러리

### Week 7-8: FSM 엔진 통합 (선택)
1. **Indicator FSM 활성화**
   - useFsm 플래그 활용
   - 성능 비교 대시보드
2. **실시간 상태 추적**
   - FSM 상태 시각화
   - 디버깅 도구

---

## 🎉 Week 3-4 구현 완료!

**모든 Frontend 작업이 완료되었습니다.**

- ✅ 드래그 앤 드롭 UI 완성
- ✅ DSL API 통합 완료
- ✅ 기존 기능 100% 보존
- ✅ 사용자 경험 최적화

**사용자는 이제:**
- 기존 폼 방식 (StrategyRulePage)
- 드래그 앤 드롭 방식 (StrategyTreeBuilderPage)

**두 가지 방법으로 전략을 생성할 수 있습니다!**

모든 전략은 동일한 테이블에 저장되며, 기존 백테스트 엔진에서 정상 동작합니다.