# 기능명
> 한줄 설명

# Part A: Visual Overview (사람용)
├── 시스템 아키텍처 (Mermaid flowchart)
├── 데이터 흐름 (Mermaid sequence)
├── UI 흐름도 (Mermaid flowchart - 패턴별)
└── ER 다이어그램 (Mermaid erDiagram)

# Part B: Detailed Spec (AI용)
├── 메타 정보
├── 1. 기능 범위 (CRUD, 파일)
├── 2. UI 구성 (화면, 검증)
├── 3. DB 스키마 (컬럼, 인덱스, 참조)
├── 4. 파일 목록 (Backend, Frontend)
└── 5. 참조

# env 파일 위치
api/src/environments/env.local.yml

# DATABASE_URL 확인
DATABASE_URL: 'postgresql://...'  # → PostgreSQL 모드
DATABASE_URL: 'mysql://...'       # → MySQL 모드

```mermaid
sequenceDiagram
    participant U as 사용자
    participant F as Frontend
    participant B as Backend
    participant D as Database
    [선택된 블록 조합]

**findPaging: Y → 포함**

Note over U,D: 목록 조회 (findPaging)
U->>F: 목록 요청
F->>B: GET /MODULE_NAME
B->>D: SELECT with pagination
D-->>B: rows + count
B-->>F: {list, totalRow}
F-->>U: 테이블 렌더링

**detailOne: Y → 포함**

Note over U,D: 상세 조회 (detailOne)
U->>F: 상세 클릭
F->>B: GET /MODULE_NAME/:seq
B->>D: SELECT by PK
D-->>B: row
B-->>F: detail data
F-->>U: 상세 표시

**insert: Y → 포함**

Note over U,D: 등록 (insert)
U->>F: 저장 클릭
F->>B: POST /MODULE_NAME
B->>D: INSERT
D-->>B: inserted seq
B-->>F: success
F-->>U: 목록 새로고침

**update: Y → 포함**

Note over U,D: 수정 (update)
U->>F: 수정 저장
F->>B: PUT /MODULE_NAME/:seq
B->>D: UPDATE by PK
D-->>B: affected rows
B-->>F: success
F-->>U: 목록 새로고침

**updateUse: Y → 포함**

Note over U,D: 사용여부 변경 (updateUse)
U->>F: 토글 클릭
F->>B: PATCH /MODULE_NAME/:seq/use
B->>D: UPDATE is_use
D-->>B: affected rows
B-->>F: success
F-->>U: 토글 반영

**softDelete: Y → 포함**

Note over U,D: 삭제 (softDelete)
U->>F: 삭제 클릭
F->>B: DELETE /MODULE_NAME/:seq
B->>D: UPDATE is_delete='Y'
D-->>B: affected rows
B-->>F: success
F-->>U: 목록 새로고침

---

#### 다이어그램 플레이스홀더 (Part A용)
- `UI_FLOW_DIAGRAM` → UI 패턴별 Mermaid 흐름도 (아래 템플릿 참조)
- `SCHEMA_ER_COLUMNS` → ER 다이어그램용 컬럼 정의 (타입 컬럼명 형식)
- `ER_RELATIONS` → 테이블 관계 정의 (예: `member ||--o{ notice_board : "작성"`)

### 3. 파일 저장
Write tool로 지정 경로에 Spec 저장

### 4. 완료 안내
완료 후 안내 섹션의 템플릿 출력

---

## UI 패턴별 Mermaid 흐름도 템플릿

### crud 패턴 (Modal)

```mermaid
flowchart LR
    subgraph 목록["목록 화면"]
        Search[검색 영역]
        Table[테이블]
        Pagination[페이지네이션]
    end

    subgraph Modal["모달"]
        Insert[등록 모달]
        Update[수정 모달]
        Detail[상세 모달]
    end

    Search --> Table
    Table --> Pagination
    Table -->|등록 클릭| Insert
    Table -->|행 클릭| Detail
    Detail -->|수정 클릭| Update
    Insert -->|저장| Table
    Update -->|저장| Table

flowchart LR
    subgraph List["/module/list"]
        Search[검색 영역]
        Table[테이블]
    end

    subgraph Detail["/module/:seq"]
        Info[상세 정보]
        Actions[액션 버튼]
    end

    subgraph Form["/module/new, /module/:seq/edit"]
        Fields[입력 폼]
        Submit[저장 버튼]
    end

    Table -->|행 클릭| Info
    Table -->|등록 클릭| Fields
    Info -->|수정 클릭| Fields
    Info -->|← 목록| Table
    Fields -->|저장| Info
    Fields -->|← 취소| List

flowchart LR
    subgraph Layout["Two-Depth 레이아웃"]
        subgraph Left["좌측 (목록)"]
            Search[검색]
            Table[테이블]
        end
        subgraph Right["우측 (상세+탭)"]
            DetailTab[상세 탭]
            SubTab1[하위 탭 1]
            SubTab2[하위 탭 2]
        end
    end

    Table -->|행 클릭| DetailTab
    DetailTab --> SubTab1
    DetailTab --> SubTab2

flowchart LR
    subgraph 목록["목록 화면"]
        Search[검색 영역]
        Table[테이블]
        ExcelBtn["[엑셀 업로드] [엑셀 다운로드]"]
    end

    subgraph Excel["Excel 모달"]
        Template[템플릿 다운로드]
        Upload[파일 업로드]
        Progress[진행 상황]
        Result[결과 표시]
    end

    ExcelBtn -->|업로드 클릭| Template
    Template --> Upload
    Upload --> Progress
    Progress --> Result
    Result -->|완료| Table
    ExcelBtn -->|다운로드 클릭| Table

docs/spec/{년}/{월}/
└── [개발자아이디]-[YYMMDD]-[한글기능명].md
    예: nettem-260315-공지사항-게시판.md

┌─────────────────────────────────┐
│ 완료 체크리스트                 │
│ □ 4단계 질의 + AI 제안 + 확인 완료 │
│ □ Spec 템플릿 로드               │
│ □ 플레이스홀더 치환 완료        │
│ □ 다이어그램 생성 완료          │
│ □ 파일 저장 완료                │
└─────────────────────────────────┘

Spec 생성이 완료되었습니다.

📄 파일: docs/spec/{년}/{월}/[개발자아이디]-[YYMMDD]-[한글기능명].md

**다음 단계:**
- `/peach-gen-db` - DB 스키마 → 마이그레이션 파일 생성
- `/peach-gen-backend` - Backend API 코드 생성
- `/peach-gen-store` - Frontend Store 코드 생성
- `/peach-gen-ui` - UI 컴포넌트 코드 생성