diff --git a/README.md b/README.md index eab5ad6..b8ba5aa 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,303 @@ -# 마이구독 - 생활 구독 관리 서비스 +# 마이구독 서비스 (LifeSub) -## 프로젝트 소개 -마이구독은 여러 구독 서비스를 한눈에 관리할 수 있는 서비스입니다. -총 구독료 확인, 구독 서비스 관리, 맞춤형 구독 추천 등의 기능을 제공합니다. +## 1. 소개 +마이구독은 다양한, 증가하는 생활 구독 서비스를 한 곳에서 편리하게 관리할 수 있는 애플리케이션입니다. 사용자가 구독 중인 서비스를 한눈에 확인하고, 월별 구독료를 관리하며, 새로운 구독 서비스를 추천받을 수 있습니다. -## 시작하기 +### 1.1 핵심 기능 +- **구독 관리**: 다양한 구독 서비스를 한 곳에서 관리 +- **비용 분석**: 월별 구독료 총액 및 수준 확인 (Liker, Collector, Addict) +- **맞춤형 추천**: 사용자의 지출 패턴 기반 새로운 구독 서비스 추천 -### 환경 설정 -1. 환경변수 설정 -```bash -# .env 파일을 생성하고 아래 환경변수를 설정합니다 -REACT_APP_MEMBER_URL=http://localhost:8081 -REACT_APP_MYSUB_URL=http://localhost:8082 -REACT_APP_RECOMMEND_URL=http://localhost:8083 -``` +## 2. 시스템 아키텍처 -2. 이미지 파일 준비 -public/images 폴더에 필요한 이미지 파일들을 위치시킵니다 -이미지 파일명은 서비스ID.png 형식이어야 합니다 (예: netflix.png) -이미지는 PNG 포맷, 투명 배경, 200x200px ~ 400x400px 크기여야 합니다 +### 2.1 전체 구조 +프론트엔드와 마이크로서비스 백엔드로 구성된 웹 애플리케이션 -### 설치 및 실행 -``` -# 의존성 설치 -npm install +### 2.2 마이크로서비스 구성 +- **회원 서비스 (Member)**: 사용자 인증 및 토큰 관리 +- **구독 서비스 (MySub)**: 구독 정보 관리 및 카테고리 관리 +- **추천 서비스 (Recommend)**: 사용자 맞춤형 구독 서비스 추천 -# 개발 서버 실행 -npm start -``` +### 2.3 기술 스택 +- **프론트엔드**: React, Material UI, React Router +- **백엔드**: Spring Boot, Java +- **인프라**: Azure Kubernetes Service (AKS), Azure Container Registry +- **CI/CD**: Jenkins, Podman (컨테이너 빌드) +- **코드 품질**: SonarQube -### 테스트 계정 -``` -ID: user01 -Password: Passw0rd -``` +## 3. 프론트엔드 (lifesub-web) -## 주요 기능 -로그인/로그아웃 -총 구독료 조회 -구독 등급별 이미지 표시 -나의 구독 서비스 목록 -지출 패턴 기반 구독 추천 -카테고리별 구독 서비스 조회 -구독 서비스 상세 정보 -구독 신청/취소 +### 3.1 주요 화면 +- **로그인 화면**: 사용자 인증 +- **메인 대시보드**: 월별 구독료 및 구독 서비스 목록, 추천 카테고리 표시 +- **구독 서비스 목록**: 카테고리별 구독 서비스 브라우징 +- **구독 상세**: 구독 서비스 상세 정보 및 구독/취소 기능 -## 기술 스택 -React 18 -React Router DOM 6 -Material UI 5 -Axios -Context API +### 3.2 API 연동 +애플리케이션은 다음 백엔드 서비스와 API를 통해 통신합니다: +- `MEMBER_URL`: 인증 관련 API +- `MYSUB_URL`: 구독 관리 관련 API +- `RECOMMEND_URL`: 추천 관련 API -## 폴더 구조 -``` -src/ - ├── components/ # 재사용 가능한 컴포넌트 - │ ├── auth/ # 인증 관련 - │ ├── common/ # 공통 컴포넌트 - │ ├── main/ # 메인 화면 - │ └── subscriptions/ # 구독 서비스 관련 - ├── contexts/ # Context API - ├── pages/ # 페이지 컴포넌트 - ├── services/ # API 통신 - └── utils/ # 유틸리티 함수 -``` +## 4. 백엔드 서비스 -## 환경 요구사항 -Node.js 18 이상 -npm 9 이상 +### 4.1 인증 서비스 (Member) +회원 로그인 및 로그아웃, JWT 토큰 관리를 담당합니다. +#### 4.1.1 주요 API +- `POST /login`: 로그인 +- `POST /logout`: 로그아웃 +### 4.2 구독 서비스 (MySub) +사용자의 구독 정보 관리 및 카테고리 관리를 담당합니다. + +#### 4.2.1 주요 API +- `GET /total-fee`: 총 구독료 조회 +- `GET /list`: 사용자 구독 목록 조회 +- `GET /services/{id}`: 구독 서비스 상세 조회 +- `POST /services/{id}/subscribe`: 구독 신청 +- `DELETE /services/{id}`: 구독 취소 +- `GET /categories`: 카테고리 목록 조회 +- `GET /services`: 카테고리별 서비스 조회 + +### 4.3 추천 서비스 (Recommend) +사용자의 지출 패턴 기반 구독 서비스를 추천합니다. + +#### 4.3.1 주요 API +- `GET /categories`: 추천 카테고리 조회 + +## 5. 개발 환경 설정 + +### 5.1 필수 요구사항 +- Java 21 (백엔드) +- Node.js 20.x (프론트엔드) +- Docker 또는 Podman +- kubectl (Kubernetes CLI) +- Gradle (백엔드 빌드) + +### 5.2 프론트엔드 개발 환경 설정 +1. 저장소 클론 + ```bash + git clone https://github.com/your-org/lifesub-web.git + cd lifesub-web + ``` + +2. 의존성 설치 + ```bash + npm install + ``` + +3. 개발 서버 실행 + ```bash + npm start + ``` + +4. 환경 설정 + 프로젝트에서는 `public/runtime-env.js` 파일을 통해 런타임 환경 설정을 관리합니다: + ```javascript + window.__runtime_config__ = { + MEMBER_URL: 'http://localhost:8081/api/auth', + MYSUB_URL: 'http://localhost:8082/api/mysub', + RECOMMEND_URL: 'http://localhost:8083/api/recommend' + } + ``` + +### 5.3 필요한 백킹 서비스 설치 + +#### 5.3.1 PostgreSQL 데이터베이스 설치 +각 마이크로서비스는 별도의 PostgreSQL 데이터베이스를 사용합니다. + +1. Docker로 설치 + ```bash + # Member 서비스용 DB + docker run -d --name member-postgres \ + -e POSTGRES_DB=member \ + -e POSTGRES_USER=admin \ + -e POSTGRES_PASSWORD=Passw0rd \ + -p 5432:5432 \ + postgres:13.2-alpine + + # MySub 서비스용 DB + docker run -d --name mysub-postgres \ + -e POSTGRES_DB=mysub \ + -e POSTGRES_USER=admin \ + -e POSTGRES_PASSWORD=Passw0rd \ + -p 5433:5432 \ + postgres:13.2-alpine + + # Recommend 서비스용 DB + docker run -d --name recommend-postgres \ + -e POSTGRES_DB=recommend \ + -e POSTGRES_USER=admin \ + -e POSTGRES_PASSWORD=Passw0rd \ + -p 5434:5432 \ + postgres:13.2-alpine + ``` + +2. Kubernetes Helm Chart로 설치 + ```bash + # Helm 저장소 추가 + helm repo add bitnami https://charts.bitnami.com/bitnami + helm repo update + + # Member 서비스용 DB + helm install member 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=member + + # MySub 서비스용 DB + helm install mysub 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=mysub + + # Recommend 서비스용 DB + helm install 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=recommend + ``` + +#### 5.3.2 Message Queue 설치 + +### 5.4 백엔드 개발 환경 설정 +1. 저장소 클론 + ```bash + git clone https://github.com/your-org/lifesub.git + cd lifesub + ``` + +2. 의존성 설치 및 각 서비스 개별 빌드 + ```bash + # 각 서비스 모듈을 개별적으로 빌드 + ./gradlew :member:build + ./gradlew :mysub-infra:build + ./gradlew :recommend:build + + # 또는 테스트 스킵 옵션으로 빌드 + ./gradlew :member:build -x test + ./gradlew :mysub-infra:build -x test + ./gradlew :recommend:build -x test + ``` + +3. 각 서비스 실행 + ```bash + # Member 서비스 실행 + java -jar member/build/libs/member.jar + + # MySub 서비스 실행 (mysub-biz는 라이브러리 모듈로 mysub-infra에 포함됨) + java -jar mysub-infra/build/libs/mysub.jar + + # Recommend 서비스 실행 + java -jar recommend/build/libs/recommend.jar + ``` + +4. 환경 설정 + 각 서비스는 `application.yml` 파일에서 설정을 관리합니다. 기본 구성: + ```yaml + server: + port: 8081 # 각 서비스별로 다른 포트 사용 + + spring: + datasource: + url: jdbc:postgresql://localhost:5432/member # 각 서비스별 DB 이름 변경 필요 + username: admin + password: Passw0rd + + jwt: + secret-key: '8O2HQ13etL2BWZvYOiWsJ5uWFoLi6NBUG8divYVoCgtHVvlk3dqRksMl16toztDUeBTSIuOOPvHIrYq11G2BwQ' + access-token-validity: 3600000 + refresh-token-validity: 86400000 + + allowed-origins: http://localhost:3000 + ``` + +## 6. 빌드 및 배포 + +### 6.1 프론트엔드 빌드 및 배포 +1. 애플리케이션 빌드 + ```bash + npm run build + ``` + +2. 컨테이너 이미지 빌드 + ```bash + docker build \ + --build-arg PROJECT_FOLDER="." \ + --build-arg REACT_APP_MEMBER_URL="http://api.example.com/member" \ + --build-arg REACT_APP_MYSUB_URL="http://api.example.com/mysub" \ + --build-arg REACT_APP_RECOMMEND_URL="http://api.example.com/recommend" \ + --build-arg BUILD_FOLDER="deployment/container" \ + --build-arg EXPORT_PORT="18080" \ + -f deployment/container/Dockerfile-lifesub-web \ + -t {Image Registry주소}/lifesub/lifesub-web:latest . + ``` + +3. 이미지 푸시 + ```bash + docker push {Image Registry주소}/lifesub/lifesub-web:latest + ``` + +4. Kubernetes 배포 + ```bash + kubectl apply -f deployment/manifest/ + ``` + +### 6.2 백엔드 빌드 및 배포 +1. 애플리케이션 빌드 + ```bash + # 각 서비스 모듈을 개별적으로 빌드 + ./gradlew :member:clean :member:build -x test + ./gradlew :mysub-infra:clean :mysub-infra:build -x test + ./gradlew :recommend:clean :recommend:build -x test + ``` + +2. 컨테이너 이미지 빌드 (각 서비스별로 수행) + ```bash + # Member 서비스 + docker build \ + --build-arg BUILD_LIB_DIR="member/build/libs" \ + --build-arg ARTIFACTORY_FILE="member.jar" \ + -f deployment/Dockerfile \ + -t {Image Registry주소}/lifesub/member:latest . + + # MySub 서비스 + docker build \ + --build-arg BUILD_LIB_DIR="mysub-infra/build/libs" \ + --build-arg ARTIFACTORY_FILE="mysub.jar" \ + -f deployment/Dockerfile \ + -t {Image Registry주소}/lifesub/mysub:latest . + + # Recommend 서비스 + docker build \ + --build-arg BUILD_LIB_DIR="recommend/build/libs" \ + --build-arg ARTIFACTORY_FILE="recommend.jar" \ + -f deployment/Dockerfile \ + -t {Image Registry주소}/lifesub/recommend:latest . + ``` + +3. 이미지 푸시 + ```bash + docker push {Image Registry주소}/lifesub/member:latest + docker push {Image Registry주소}/lifesub/mysub:latest + docker push {Image Registry주소}/lifesub/recommend:latest + ``` + +4. Kubernetes 배포 + ```bash + kubectl apply -f deployment/manifest/ + ``` + +## 7. 팀 + +- 오유진 "피오" - Product Owner +- 강동훈 "테키" - Tech Lead +- 김민지 "유엑스" - UX Designer +- 이준혁 "백개" - Backend Developer +- 박소연 "프개" - Frontend Developer +- 최진우 "큐에이" - QA Engineer +- 정해린 "데브옵스" - DevOps Engineer