마이구독 - 생활 구독 관리 서비스
프로젝트 소개
마이구독은 여러 구독 서비스를 한눈에 관리할 수 있는 서비스입니다.
총 구독료 확인, 구독 서비스 관리, 맞춤형 구독 추천 등의 기능을 제공합니다.
시작하기
환경 설정
- 환경변수 설정
# .env 파일을 생성하고 아래 환경변수를 설정합니다
REACT_APP_MEMBER_URL=http://localhost:8081
REACT_APP_MYSUB_URL=http://localhost:8082
REACT_APP_RECOMMEND_URL=http://localhost:8083
- 이미지 파일 준비 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 이상