74 lines
1.9 KiB
Markdown
74 lines
1.9 KiB
Markdown
# 마이구독 - 생활 구독 관리 서비스
|
|
|
|
## 프로젝트 소개
|
|
마이구독은 여러 구독 서비스를 한눈에 관리할 수 있는 서비스입니다.
|
|
총 구독료 확인, 구독 서비스 관리, 맞춤형 구독 추천 등의 기능을 제공합니다.
|
|
|
|
## 시작하기
|
|
|
|
### 환경 설정
|
|
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. 이미지 파일 준비
|
|
public/images 폴더에 필요한 이미지 파일들을 위치시킵니다
|
|
이미지 파일명은 서비스ID.png 형식이어야 합니다 (예: netflix.png)
|
|
이미지는 PNG 포맷, 투명 배경, 200x200px ~ 400x400px 크기여야 합니다
|
|
|
|
### 설치 및 실행
|
|
```
|
|
# 의존성 설치
|
|
npm install
|
|
|
|
# 개발 서버 실행
|
|
npm start
|
|
```
|
|
|
|
### 테스트 계정
|
|
```
|
|
ID: user01
|
|
Password: Passw0rd
|
|
```
|
|
|
|
## 주요 기능
|
|
로그인/로그아웃
|
|
총 구독료 조회
|
|
구독 등급별 이미지 표시
|
|
나의 구독 서비스 목록
|
|
지출 패턴 기반 구독 추천
|
|
카테고리별 구독 서비스 조회
|
|
구독 서비스 상세 정보
|
|
구독 신청/취소
|
|
|
|
## 기술 스택
|
|
React 18
|
|
React Router DOM 6
|
|
Material UI 5
|
|
Axios
|
|
Context API
|
|
|
|
## 폴더 구조
|
|
```
|
|
src/
|
|
├── components/ # 재사용 가능한 컴포넌트
|
|
│ ├── auth/ # 인증 관련
|
|
│ ├── common/ # 공통 컴포넌트
|
|
│ ├── main/ # 메인 화면
|
|
│ └── subscriptions/ # 구독 서비스 관련
|
|
├── contexts/ # Context API
|
|
├── pages/ # 페이지 컴포넌트
|
|
├── services/ # API 통신
|
|
└── utils/ # 유틸리티 함수
|
|
```
|
|
|
|
## 환경 요구사항
|
|
Node.js 18 이상
|
|
npm 9 이상
|
|
|
|
|