PharmQ SaaS 구독 서비스 관리 시스템 완전 구현

📋 기획 및 설계:
- PharmQ SaaS 서비스 기획서 작성
- 구독 서비스 라인업 정의 (클라우드PC, AI CCTV, CRM)
- DB 스키마 설계 및 API 아키텍처 설계

🗄️ 데이터베이스 구조:
- service_products: 서비스 상품 마스터 테이블
- pharmacy_subscriptions: 약국별 구독 현황 테이블
- subscription_usage_logs: 서비스 이용 로그 테이블
- billing_history: 결제 이력 테이블
- 샘플 데이터 자동 생성 (21개 구독, 월 118만원 매출)

🔧 백엔드 API 구현:
- 구독 현황 통계 API (/api/subscriptions/stats)
- 약국별 구독 조회 API (/api/pharmacies/subscriptions)
- 구독 상세 정보 API (/api/pharmacy/{id}/subscriptions)
- 구독 생성/해지 API (/api/subscriptions)

🖥️ 프론트엔드 UI 구현:
- 대시보드 구독 현황 카드 (월 매출, 구독 수, 구독률 등)
- 약국 목록에 구독 상태 아이콘 및 월 구독료 표시
- 약국 상세 페이지 구독 서비스 섹션 추가
- 실시간 구독 생성/해지 기능 구현

✨ 주요 특징:
- 서비스별 색상 코딩 및 이모지 아이콘 시스템
- 실시간 업데이트 (구독 생성/해지 즉시 반영)
- 반응형 디자인 (모바일/태블릿 최적화)
- 툴팁 기반 상세 정보 표시

📊 현재 구독 현황:
- 총 월 매출: ₩1,180,000
- 구독 약국: 10/14개 (71.4%)
- AI CCTV: 6개 약국, CRM: 10개 약국, 클라우드PC: 5개 약국

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

farmq-admin/templates/pharmacy/detail.html

@@ -162,6 +162,32 @@
     </div>
 </div>
 
+<!-- 구독 서비스 정보 -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">
+                    <i class="fas fa-box text-success"></i> 구독 서비스 현황
+                </h5>
+                <button class="btn btn-outline-success btn-sm" onclick="showSubscriptionModal()">
+                    <i class="fas fa-plus"></i> 새 서비스 구독
+                </button>
+            </div>
+            <div class="card-body">
+                <div id="subscription-content">
+                    <div class="text-center">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">로딩 중...</span>
+                        </div>
+                        <p class="mt-2 text-muted">구독 정보를 불러오는 중...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- 연결된 머신 목록 -->
 <div class="row">
     <div class="col-12">
@@ -315,5 +341,233 @@ function deleteMachine(machineId, machineName) {
         showToast('머신 삭제 중 오류가 발생했습니다.', 'error');
     });
 }
+
+// 구독 정보 로드
+function loadSubscriptionInfo() {
+    const pharmacyId = {{ pharmacy.id }};
+    
+    fetch(`/api/pharmacy/${pharmacyId}/subscriptions`)
+        .then(response => response.json())
+        .then(result => {
+            if (result.success) {
+                displaySubscriptionInfo(result.data);
+            } else {
+                showSubscriptionError();
+            }
+        })
+        .catch(error => {
+            console.error('구독 정보 로드 오류:', error);
+            showSubscriptionError();
+        });
+}
+
+function displaySubscriptionInfo(data) {
+    const activeSubscriptions = data.active_subscriptions;
+    const availableServices = data.available_services;
+    
+    let html = '';
+    
+    // 활성 구독 서비스
+    if (activeSubscriptions.length > 0) {
+        html += `
+            <div class="row">
+                <div class="col-12">
+                    <h6 class="mb-3"><i class="fas fa-check-circle text-success"></i> 구독 중인 서비스</h6>
+                </div>
+            </div>
+            <div class="row">
+        `;
+        
+        let totalFee = 0;
+        activeSubscriptions.forEach(sub => {
+            totalFee += sub.monthly_fee;
+            
+            const serviceIcons = {
+                'CLOUD_PC': { icon: '💻', color: 'primary' },
+                'AI_CCTV': { icon: '📷', color: 'info' },
+                'CRM': { icon: '📊', color: 'warning' }
+            };
+            
+            const service = serviceIcons[sub.code] || { icon: '📦', color: 'secondary' };
+            
+            html += `
+                <div class="col-lg-4 col-md-6 mb-3">
+                    <div class="card border-${service.color}">
+                        <div class="card-body">
+                            <div class="d-flex align-items-center mb-2">
+                                <div class="me-3" style="font-size: 2rem;">${service.icon}</div>
+                                <div class="flex-grow-1">
+                                    <h6 class="mb-1">${sub.name}</h6>
+                                    <div class="small text-muted">
+                                        시작일: ${sub.start_date}<br>
+                                        다음결제: ${sub.next_billing_date}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <div>
+                                    <strong class="text-${service.color}">₩${sub.monthly_fee.toLocaleString()}/월</strong>
+                                </div>
+                                <div>
+                                    <button class="btn btn-outline-danger btn-sm" onclick="cancelSubscription(${sub.id}, '${sub.name}')">
+                                        <i class="fas fa-times"></i> 해지
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        html += `
+            </div>
+            <div class="row mb-4">
+                <div class="col-12">
+                    <div class="alert alert-info">
+                        <strong><i class="fas fa-calculator"></i> 총 월 구독료: ₩${totalFee.toLocaleString()}</strong>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    // 구독 가능한 서비스
+    if (availableServices.length > 0) {
+        html += `
+            <div class="row">
+                <div class="col-12">
+                    <h6 class="mb-3"><i class="fas fa-plus-circle text-primary"></i> 구독 가능한 서비스</h6>
+                </div>
+            </div>
+            <div class="row">
+        `;
+        
+        availableServices.forEach(service => {
+            const serviceIcons = {
+                'CLOUD_PC': { icon: '💻', color: 'primary' },
+                'AI_CCTV': { icon: '📷', color: 'info' },
+                'CRM': { icon: '📊', color: 'warning' }
+            };
+            
+            const serviceInfo = serviceIcons[service.code] || { icon: '📦', color: 'secondary' };
+            
+            html += `
+                <div class="col-lg-4 col-md-6 mb-3">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="d-flex align-items-center mb-2">
+                                <div class="me-3" style="font-size: 2rem;">${serviceInfo.icon}</div>
+                                <div class="flex-grow-1">
+                                    <h6 class="mb-1">${service.name}</h6>
+                                    <p class="small text-muted mb-2">${service.description}</p>
+                                </div>
+                            </div>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <div>
+                                    <strong class="text-${serviceInfo.color}">₩${service.monthly_price.toLocaleString()}/월</strong>
+                                </div>
+                                <div>
+                                    <button class="btn btn-${serviceInfo.color} btn-sm" onclick="subscribeService(${service.id}, '${service.name}', ${service.monthly_price})">
+                                        <i class="fas fa-plus"></i> 구독
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        html += '</div>';
+    }
+    
+    if (activeSubscriptions.length === 0 && availableServices.length === 0) {
+        html = `
+            <div class="text-center py-4">
+                <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
+                <p class="text-muted">구독 가능한 서비스가 없습니다.</p>
+            </div>
+        `;
+    }
+    
+    document.getElementById('subscription-content').innerHTML = html;
+}
+
+function showSubscriptionError() {
+    document.getElementById('subscription-content').innerHTML = `
+        <div class="text-center py-4">
+            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
+            <p class="text-muted">구독 정보를 불러오는 중 오류가 발생했습니다.</p>
+            <button class="btn btn-outline-primary btn-sm" onclick="loadSubscriptionInfo()">
+                <i class="fas fa-redo"></i> 다시 시도
+            </button>
+        </div>
+    `;
+}
+
+function subscribeService(serviceId, serviceName, monthlyPrice) {
+    if (!confirm(`"${serviceName}" 서비스를 월 ₩${monthlyPrice.toLocaleString()}에 구독하시겠습니까?`)) {
+        return;
+    }
+    
+    const pharmacyId = {{ pharmacy.id }};
+    
+    fetch('/api/subscriptions', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            pharmacy_id: pharmacyId,
+            product_id: serviceId,
+            monthly_fee: monthlyPrice
+        })
+    })
+    .then(response => response.json())
+    .then(result => {
+        if (result.success) {
+            showToast(result.message, 'success');
+            setTimeout(() => loadSubscriptionInfo(), 1000);
+        } else {
+            showToast(result.error, 'error');
+        }
+    })
+    .catch(error => {
+        console.error('구독 생성 오류:', error);
+        showToast('구독 생성 중 오류가 발생했습니다.', 'error');
+    });
+}
+
+function cancelSubscription(subscriptionId, serviceName) {
+    if (!confirm(`"${serviceName}" 서비스 구독을 해지하시겠습니까?`)) {
+        return;
+    }
+    
+    fetch(`/api/subscriptions/${subscriptionId}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json',
+        }
+    })
+    .then(response => response.json())
+    .then(result => {
+        if (result.success) {
+            showToast(result.message, 'success');
+            setTimeout(() => loadSubscriptionInfo(), 1000);
+        } else {
+            showToast(result.error, 'error');
+        }
+    })
+    .catch(error => {
+        console.error('구독 해지 오류:', error);
+        showToast('구독 해지 중 오류가 발생했습니다.', 'error');
+    });
+}
+
+// 페이지 로드 시 구독 정보 로드
+document.addEventListener('DOMContentLoaded', function() {
+    setTimeout(() => loadSubscriptionInfo(), 500);
+});
 </script>
 {% endblock %}