smarketing-frontend/README.md

# 요식업 소상공인을 위한 AI 마케팅 솔루션 (SmartKeting)

## 1. 소개

**SmartKeting**은 요식업 소상공인을 위한 AI 기반 마케팅 자동화 솔루션입니다. 복잡한 마케팅 업무를 자동화하고, 개인화된 AI 추천을 통해 소상공인이 손쉽게 효과적인 마케팅을 수행할 수 있도록 지원합니다.

### 1.1 핵심 기능
- **AI 콘텐츠 생성**: Claude Sonnet 4를 활용한 SNS 게시물, 블로그 포스트, 홍보 포스터 자동 생성
- **매장 운영 관리**: 매장 정보, 메뉴 관리 및 매출 데이터 분석
- **개인화 AI 추천**: 매장 특성과 현황에 맞는 맞춤형 마케팅 팁 제공
- **다채널 콘텐츠 관리**: 인스타그램, 네이버 블로그 등 다양한 플랫폼별 최적화된 콘텐츠 제공

### 1.2 MVP 산출물
- **발표자료**: https://gamma.app/docs/AI--2rd5s7od8hlkm6z?mode=doc
- **설계결과**: UML 기반 시스템 설계 문서
- **Git Repository**:
  - 프론트엔드: https://github.com/won-ktds/smarketing-frontend.git
  - 백엔드: https://github.com/won-ktds/smarketing-backend.git
- **시연 동영상**: 실제 서비스 사용 시나리오 데모

## 2. 시스템 아키텍처

### 2.1 전체 구조
마이크로서비스 아키텍처 기반의 클라우드 네이티브 애플리케이션으로 설계되었으며, 프론트엔드와 4개의 핵심 마이크로서비스로 구성되어 있습니다.

**아키텍처 특징:**
- **회복성 패턴**: Circuit Breaker, Retry 패턴으로 외부 API 호출 안정성 확보
- **효율적 분산처리**: 비동기 메시징과 큐 기반 부하 분산
- **읽기 최적화**: Cache-Aside, CQRS 패턴 적용
- **API Gateway**: 단일 진입점을 통한 통합 관리

### 2.2 마이크로서비스 구성

#### **사용자 관리 서비스 (User Management)**
- **아키텍처**: Layered Architecture
- **책임**: 사용자 인증, 권한 관리, JWT 토큰 관리
- **기술**: Spring Security 기반 인증/인가

#### **매장 운영 서비스 (Store Management)**
- **아키텍처**: Clean Architecture  
- **책임**: 매장 정보 관리, 메뉴 관리, 매출 데이터 수집 및 분석
- **외부 연동**: POS 시스템, 배달앱 API 연동

#### **콘텐츠 관리 서비스 (Content Management)**
- **아키텍처**: Clean Architecture
- **책임**: 콘텐츠 생성, 편집, 관리, 다채널 발행
- **외부 연동**: Instagram API, 네이버 블로그 API

#### **AI 추천 서비스 (AI Recommendation)**
- **아키텍처**: Layered Architecture
- **책임**: 개인화 마케팅 팁 생성, AI 기반 콘텐츠 추천
- **외부 연동**: Claude Sonnet 4 API, DALL-E 3 API

### 2.3 기술 스택

#### **프론트엔드**
- **Framework**: Vue 3 + TypeScript
- **UI Library**: Vuetify 3 (Material Design)
- **상태관리**: Pinia
- **빌드도구**: Vite

#### **백엔드**
- **Language**: Java 21
- **Framework**: Spring Boot 3.4.0
- **아키텍처**: 멀티 프로젝트 구조
- **빌드도구**: Gradle

#### **AI 서비스**
- **Language**: Python 3.11
- **Framework**: FastAPI
- **AI API**: Claude Sonnet 4, DALL-E 3

#### **인프라**
- **Container Platform**: Azure Kubernetes Service (AKS)
- **Container Registry**: Azure Container Registry (ACR)
- **API Gateway**: Azure API Management + Istio Service Mesh
- **CI/CD**: Jenkins + ArgoCD (GitOps)

#### **백킹 서비스**
- **Database**: 
  - PostgreSQL (관계형 데이터)
  - Redis (캐싱, 세션)
- **Storage**: Azure Blob Storage (이미지, 동영상)
- **Message Queue**: Azure Service Bus
- **Monitoring**: ELK Stack + Prometheus + Grafana

## 3. 백킹 서비스 설치

### Database 설치

```bash
# Helm 저장소 추가
helm repo add bitnami https://charts.bitnami.com/bitnami
helm repo update

# 사용자 관리 서비스용 DB
helm install user-mgmt bitnami/postgresql \
   --set global.postgresql.auth.postgresPassword=Passw0rd \
   --set global.postgresql.auth.username=admin \
   --set global.postgresql.auth.password=Passw0rd \
   --set global.postgresql.auth.database=user_mgmt

# 매장 운영 서비스용 DB
helm install store-mgmt bitnami/postgresql \
   --set global.postgresql.auth.postgresPassword=Passw0rd \
   --set global.postgresql.auth.username=admin \
   --set global.postgresql.auth.password=Passw0rd \
   --set global.postgresql.auth.database=store_mgmt

# 콘텐츠 관리 서비스용 DB
helm install content-mgmt bitnami/postgresql \
   --set global.postgresql.auth.postgresPassword=Passw0rd \
   --set global.postgresql.auth.username=admin \
   --set global.postgresql.auth.password=Passw0rd \
   --set global.postgresql.auth.database=content_mgmt

# AI 추천 서비스용 DB
helm install ai-recommend bitnami/postgresql \
   --set global.postgresql.auth.postgresPassword=Passw0rd \
   --set global.postgresql.auth.username=admin \
   --set global.postgresql.auth.password=Passw0rd \
   --set global.postgresql.auth.database=ai_recommend
```

### Redis 설치

```bash
# Redis 클러스터 설치
helm install redis bitnami/redis \
   --set auth.enabled=true \
   --set auth.password=Redis123! \
   --set master.persistence.enabled=true \
   --set replica.persistence.enabled=true
```

### Azure Service Bus 설정

```bash
# Azure Service Bus 네임스페이스 생성
az servicebus namespace create \
   --name smarketing-sb \
   --resource-group smarketing-rg \
   --location koreacentral \
   --sku Standard

# 토픽 생성
az servicebus topic create \
   --namespace-name smarketing-sb \
   --resource-group smarketing-rg \
   --name content-generation-topic

az servicebus topic create \
   --namespace-name smarketing-sb \
   --resource-group smarketing-rg \
   --name social-posting-topic

az servicebus topic create \
   --namespace-name smarketing-sb \
   --resource-group smarketing-rg \
   --name analytics-topic
```

## 4. 빌드 및 배포

### 4.1 프론트엔드 빌드 및 배포

#### 컨테이너 이미지 빌드

```bash
docker build \
  --build-arg NODE_ENV="production" \
  --build-arg VITE_API_BASE_URL="https://api.smarketing.com" \
  --build-arg VITE_AI_API_URL="https://ai.smarketing.com" \
  -f deployment/Dockerfile \
  -t {Image Registry주소}/smarketing/frontend:latest .
```

#### 이미지 푸시

```bash
docker push {Image Registry주소}/smarketing/frontend:latest
```

#### Kubernetes 배포

```bash
kubectl apply -f deployment/manifest/frontend/
```

### 4.2 백엔드 빌드 및 배포

#### 애플리케이션 빌드

```bash
# 각 서비스 모듈을 개별적으로 빌드
./gradlew :user-management:clean :user-management:build -x test
./gradlew :store-management:clean :store-management:build -x test
./gradlew :content-management:clean :content-management:build -x test
./gradlew :ai-recommend:clean :ai-recommend:build -x test
```

#### 컨테이너 이미지 빌드 (각 서비스별로 수행)

```bash
# 사용자 관리 서비스
docker build \
  --build-arg BUILD_LIB_DIR="user-management/build/libs" \
  --build-arg ARTIFACTORY_FILE="user-management.jar" \
  -f deployment/Dockerfile \
  -t {Image Registry주소}/smarketing/user-management:latest .

# 매장 운영 서비스
docker build \
  --build-arg BUILD_LIB_DIR="store-management/build/libs" \
  --build-arg ARTIFACTORY_FILE="store-management.jar" \
  -f deployment/Dockerfile \
  -t {Image Registry주소}/smarketing/store-management:latest .

# 콘텐츠 관리 서비스
docker build \
  --build-arg BUILD_LIB_DIR="content-management/build/libs" \
  --build-arg ARTIFACTORY_FILE="content-management.jar" \
  -f deployment/Dockerfile \
  -t {Image Registry주소}/smarketing/content-management:latest .

# AI 추천 서비스
docker build \
  --build-arg BUILD_LIB_DIR="ai-recommend/build/libs" \
  --build-arg ARTIFACTORY_FILE="ai-recommend.jar" \
  -f deployment/Dockerfile \
  -t {Image Registry주소}/smarketing/ai-recommend:latest .
```

#### 이미지 푸시

```bash
docker push {Image Registry주소}/smarketing/user-management:latest
docker push {Image Registry주소}/smarketing/store-management:latest
docker push {Image Registry주소}/smarketing/content-management:latest
docker push {Image Registry주소}/smarketing/ai-recommend:latest
```

#### Kubernetes 배포

```bash
kubectl apply -f deployment/manifest/backend/
```

### 4.3 AI 서비스 빌드 및 배포

#### 컨테이너 이미지 빌드

```bash
docker build \
  --build-arg PYTHON_VERSION="3.11" \
  --build-arg REQUIREMENTS_FILE="requirements.txt" \
  -f deployment/ai/Dockerfile \
  -t {Image Registry주소}/smarketing/ai-service:latest .
```

#### 이미지 푸시 및 배포

```bash
docker push {Image Registry주소}/smarketing/ai-service:latest
kubectl apply -f deployment/manifest/ai/
```

### 4.4 테스트

#### 프론트엔드 페이지 주소 확인

```bash
kubens smarketing
kubectl get svc smarketing-frontend-service
```

#### 로그인 정보
- **테스트 계정**: 
  - ID: testuser1
  - PW: password123!

#### API 엔드포인트 확인

```bash
# API Gateway 주소 확인
kubectl get ingress smarketing-api-gateway

# 서비스 상태 확인
kubectl get pods -l app.kubernetes.io/name=smarketing
```

## 5. 팀

**₩ON팀** - 소상공인에게 가치있는 서비스를 제공하는 것을 목표로 하는 팀

### 팀 구성원

**이준영 "우디"** - Frontend Developer (Scrum Master)
- 프론트엔드 개발 및 애자일 방법론 전문가
- 팀 스크럼 마스터 역할 수행

**한지윤 "제니"** - Frontend Developer (Product Owner)
- 프론트엔드 개발 및 제품 기획 담당
- 사용자 요구사항 분석 및 제품 로드맵 관리

**박서은 "고래"** - Backend Developer
- Spring Boot 기반 마이크로서비스 개발
- API 설계 및 데이터베이스 아키텍처 구축

**유하연 "하루"** - UI/UX Designer & Data Architect & Backend Developer
- 사용자 인터페이스 및 사용자 경험 설계
- 데이터 아키텍처 설계 및 백엔드 개발 지원

**오성락 "오잉"** - AI Developer & CI/CD & QA Engineer
- AI/ML 모델 개발 및 최적화
- CI/CD 파이프라인 구축 및 품질 보증

**김한주 "해몽"** - Infrastructure Architect & System Analyst & CI/CD Engineer
- 인프라 설계 및 시스템 기획 (TA)
- CI/CD 환경 구축 및 운영

### 팀 행동원칙 - 'M'사상

- **Value-Oriented**: WHY First, Align WHY - 가치 중심의 의사결정
- **Interactive**: Believe crew, Yes And - 상호작용과 협업 중시  
- **Iterative**: Fast fail, Learn and Pivot - 빠른 실패와 학습을 통한 개선

---

**비전**: 효과적인 소통을 통해 소상공인에게 가치있는 서비스를 제공하여, 소상공인의 디지털 마케팅 역량을 혁신하고 수익 창출을 극대화한다.