마이구독 - 생활 구독 관리 서비스

프로젝트 소개

마이구독은 여러 구독 서비스를 한눈에 관리할 수 있는 서비스입니다.
총 구독료 확인, 구독 서비스 관리, 맞춤형 구독 추천 등의 기능을 제공합니다.

시작하기

환경 설정

1. 환경변수 설정

# .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 이상