Skip to content

README.md

Latest commit

 

History

History
218 lines (162 loc) · 8.89 KB

README.md

File metadata and controls

218 lines (162 loc) · 8.89 KB

💊 VitaCheck

영양제 섭취부터 맞춤 추천까지 비타체크!

비타체크_서비스 소개 001 비타체크_서비스 소개 002 비타체크_서비스 소개 004 비타체크_서비스 소개 005 비타체크_서비스 소개 006 비타체크_서비스 소개 007 비타체크_서비스 소개 008 비타체크_서비스 소개 009 비타체크_서비스 소개 010 비타체크_서비스 소개 011

📖 프로젝트 소개

VitaCheck는 일상 속 영양제 관리를 스마트하게 돕는 웹 애플리케이션입니다. 복잡한 영양제 성분 조합을 분석하고, 맞춤형 알림으로 꾸준한 섭취를 지원합니다.

✨ 주요 특징

  • 📱 모바일 & 데스크탑 최적화 - 데스크탑과 모바일 반응형 디자인으로 언제 어디서나 편리하게
  • 🔔 스마트 알림 - 날짜와 시간별 맞춤 알림 설정
  • 🧪 성분 분석 - 영양제 성분 조합 충돌 분석 및 경고
  • 📊 시각적 대시보드 - 캘린더 UI로 한눈에 보는 섭취 루틴

📱 스크린샷

메인 화면 알림 화면 조합 분석

🧩 주요 기능

기능 설명
🔔 알림 관리 영양제 섭취 알림 생성, 수정, 삭제
📆 캘린더 뷰 날짜별 알림 루틴을 캘린더 UI로 확인
🔍 제품 검색 키워드 기반 영양제 제품 검색
🧪 성분 조합 분석 여러 영양제 성분 간 상호작용 및 충돌 분석
👤 회원 관리 JWT 기반 회원가입 / 로그인
🖼️ 프로필 관리 마이페이지에서 프로필 수정

🛠️ Tech Stack

Frontend

VITE React TypeScript TailwindCSS React Router

Data & State

Axios React Query

Dev Tools

Prettier PNPM

Deployment & Version Control

AWS S3 Git GitHub

🚀 시작하기

사전 요구사항

  • Node.js 18.x 이상
  • PNPM 8.x 이상

설치 및 실행

# 저장소 클론
git clone https://github.com/VitaCheck/vitacheck-fe

# 프로젝트 디렉토리로 이동
cd vitacheck

# 의존성 설치
pnpm install

# 환경 변수 설정
cp .env.example .env
# .env 파일을 열어 필요한 값을 입력하세요

# 개발 서버 실행
pnpm dev

빌드 및 배포

# 프로덕션 빌드
pnpm build

📁 프로젝트 구조

📦 vitacheck
 ┣ 📂 src
 ┃ ┣ 📂 components       # 공통 UI 컴포넌트
 ┃ ┣ 📂 pages            # 라우트 단위 페이지 컴포넌트
 ┃ ┣ 📂 hooks            # 커스텀 React 훅
 ┃ ┣ 📂 lib              # axios 인스턴스, 유틸리티 함수
 ┃ ┣ 📂 routes           # React Router 설정
 ┃ ┣ 📂 types            # TypeScript 타입 정의
 ┃ ┣ 📂 assets           # 이미지, 아이콘 등 정적 파일
 ┃ ┣ 📂 styles           # 전역 스타일 및 Tailwind 설정
 ┃ ┣ 📜 App.tsx          # 루트 컴포넌트
 ┃ ┗ 📜 main.tsx         # 엔트리 포인트
 ┣ 📂 public             # 정적 리소스
 ┣ 📜 index.html
 ┣ 📜 package.json
 ┣ 📜 tsconfig.json
 ┣ 📜 vite.config.ts
 ┗ 📜 tailwind.config.js

👩‍💻 VitaCheck Web Developers
한현서 김희원 전영은 이서연 노윤선
Frontend Lead Frontend Developer Frontend Developer Frontend Developer Frontend Developer
로그인/온보딩
알림 · 조합		 메인
마이페이지		 목적 조합 성분

🌿 브랜치 전략

브랜치 용도
main 프로덕션 배포 브랜치
develop 개발 통합 브랜치
feature/* 기능 개발 브랜치 (예: feature/login)
hotfix/* 긴급 수정 브랜치 (예: hotfix/critical-bug)

📝 Commit 컨벤션

태그 설명
feat 새로운 기능 구현
style UI 및 스타일 관련 작업
fix 버그 및 오류 수정
docs 문서 수정 (README 등)
setting 설정 파일 및 환경 구성 변경
add 에셋/라이브러리 추가
refactor 코드 리팩토링 (기능 변경 없이 구조 개선)
chore 사소한 수정 및 유지보수 작업
hotfix 긴급 수정 (배포 또는 개발 중 발생한 치명적 이슈 해결)

Commit 메시지 예시

feat: 영양제 알림 생성 기능 추가
fix: 캘린더 날짜 선택 버그 수정
style: 마이페이지 레이아웃 개선
docs: README 설치 가이드 업데이트

🎯 기술적 의사결정

기술 선택 이유
Vite CRA 대비 빠른 빌드 속도와 HMR(Hot Module Replacement)
React 19 최신 React 기능 활용 및 성능 최적화
TypeScript 타입 안정성 보장 및 개발 생산성 향상
TailwindCSS 일관된 디자인 시스템 구축 및 빠른 스타일링
React Query 서버 상태 관리 및 캐싱 최적화
Axios 간편한 HTTP 요청 처리 및 인터셉터 활용
PNPM 디스크 공간 효율성 및 빠른 설치 속도
AWS S3 정적 웹 호스팅 및 안정적인 배포

📚 참고 문서