c6b605200d
신규 페이지: - 회계관리: 거래처, 예상비용, 청구서, 발주서 - 게시판: 공지사항, 자료실, 커뮤니티 - 고객센터: 문의/FAQ - 설정: 계정, 알림, 출퇴근, 팝업, 구독, 결제내역 - 리포트 (차트 시각화) - 개발자 테스트 URL 페이지 기능 개선: - HR 직원관리/휴가관리/카드관리 강화 - IntegratedListTemplateV2 확장 - AuthenticatedLayout 패딩 표준화 - 로그인 페이지 UI 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1.9 KiB
1.9 KiB
구독관리 페이지 구현
작성일: 2025-12-19 URL:
/ko/settings/subscription
스크린샷 분석
페이지 구조
- 제목: 구독관리
- 부제목: 구독 정보를 관리합니다
- 테넌트 마스터에게만 표시
상단 버튼
- 자료 내보내기 (01) - 클릭: 자료 다운로드 처리
- 서비스 해지 (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: 기본 구조
- page.tsx 생성 (
/settings/subscription) - SubscriptionManagement 컴포넌트 생성
- types.ts 정의
Phase 2: UI 구현
- PageLayout 적용
- 헤더 영역 (제목 + 버튼)
- 구독 정보 카드 3개 (최근결제, 다음결제, 금액)
- 구독 정보 영역 (플랜 + Progress Bar)
Phase 3: 기능 구현
- 자료 내보내기 버튼 핸들러
- 서비스 해지 AlertDialog 구현
- Mock 데이터 연결
Phase 4: 마무리
- URL 문서 업데이트
- 테스트
생성된 파일
src/
├── app/[locale]/(protected)/settings/subscription/
│ └── page.tsx
└── components/settings/SubscriptionManagement/
├── index.tsx
└── types.ts