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

프로젝트 소개

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

시작하기

환경 설정

환경변수 설정

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

1.8 KiB Raw Blame History