💊 VitaCheck

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

---

📖 프로젝트 소개

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

✨ 주요 특징

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

---

📱 스크린샷

---

🧩 주요 기능

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

---

🛠️ Tech Stack

Frontend

Data & State

Dev Tools

Deployment & Version Control

---

🚀 시작하기

사전 요구사항

• 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	정적 웹 호스팅 및 안정적인 배포

---

📚 참고 문서

• 프로젝트 위키
• API 문서
• 백엔드 repository