VeganScan Frontend

식당 메뉴의 채식 가능 여부를 분석하는 웹 애플리케이션

기술 스택

• React 18 - 함수형 컴포넌트 + Hooks
• Emotion - CSS-in-JS 스타일링
• React Router v6 - 라우팅
• Axios - HTTP 클라이언트
• Zustand - 전역 상태 관리 (준비됨)

시작하기

설치

npm install

개발 서버 실행

npm start

브라우저에서 http://localhost:3000 자동 실행

빌드

npm run build

환경 설정

.env 파일에서 Mock 데이터/API 모드 설정:

# Mock 데이터 사용
REACT_APP_USE_MOCK_DATA=true

# 실제 API 사용 시
REACT_APP_USE_MOCK_DATA=false
REACT_APP_API_BASE_URL=https://your-api-server.com

프로젝트 구조

src/
├── components/     # 재사용 컴포넌트 (Header, SearchBox, MenuCard, VegTag, FloatingBox)
├── pages/          # 페이지 (Main, MenuList, MenuDetail, MenuBucket)
├── utils/          # 유틸리티 (mockData, api)
└── stores/         # 상태 관리 (향후 확장)

주요 페이지

• Main (/) - 랜딩 페이지 및 식당 URL 검색
• MenuList (/menulist) - 메뉴 분석 결과 및 필터링
• MenuDetail (/menudetail/:menuId) - 메뉴 상세 정보
• MenuBucket (/menubucket) - 저장된 메뉴 목록