# 구독관리 페이지 구현

> 작성일: 2025-12-19
> URL: `/ko/settings/subscription`

## 스크린샷 분석

### 페이지 구조
- **제목**: 구독관리
- **부제목**: 구독 정보를 관리합니다
- **테넌트 마스터에게만 표시**

### 상단 버튼
1. **자료 내보내기** (01) - 클릭: 자료 다운로드 처리
2. **서비스 해지** (02) - 클릭: "모든 데이터가 삭제되며 복구할 수 없습니다. 정말 서비스를 해지하시겠습니까?" 확인 Alert 표시, 확인 버튼 클릭 시 서비스 해지 처리

### 구독 정보 카드 (3개 가로 배열)
| 항목 | 값 |
|------|-----|
| 최근 결제일시 | 2025년 12월 1일 |
| 다음 결제일시 | 2025년 12월 1일 |
| 구독금액 | 500,000원 |

### 구독 정보 영역 (03)
| 항목 | 진행률 | 값 |
|------|--------|-----|
| 플랜 | - | 프리미엄 |
| 사용자 수 | Progress Bar | 100명 / 무제한 |
| 저장 공간 | Progress Bar | 5.5 TB / 10 TB |
| AI API 호출 | Progress Bar | 8,500 / 10,000 |

---

## 체크리스트

### Phase 1: 기본 구조
- [x] page.tsx 생성 (`/settings/subscription`)
- [x] SubscriptionManagement 컴포넌트 생성
- [x] types.ts 정의

### Phase 2: UI 구현
- [x] PageLayout 적용
- [x] 헤더 영역 (제목 + 버튼)
- [x] 구독 정보 카드 3개 (최근결제, 다음결제, 금액)
- [x] 구독 정보 영역 (플랜 + Progress Bar)

### Phase 3: 기능 구현
- [x] 자료 내보내기 버튼 핸들러
- [x] 서비스 해지 AlertDialog 구현
- [x] Mock 데이터 연결

### Phase 4: 마무리
- [x] URL 문서 업데이트
- [ ] 테스트

---

## 생성된 파일

```
src/
├── app/[locale]/(protected)/settings/subscription/
│   └── page.tsx
└── components/settings/SubscriptionManagement/
    ├── index.tsx
    └── types.ts
```

## 테스트 URL

http://localhost:3000/ko/settings/subscription