recall-admin-web

리콜(Recall) 관련 운영자 검수/관리용 웹 프로젝트입니다.

• 프론트엔드: React + Vite + TypeScript
• 백엔드: FastAPI

현재 구현 기준으로 운영자 로그인, 검수 대시보드(리콜 제품 검수 / 제품 수기 등록 검수), 상세 모달 UI, 리콜 제품 검색 탭(placeholder)이 포함되어 있습니다.

주요 기능

1) 운영자 로그인

• 관리자 계정 로그인
• 인증 토큰 저장/갱신(axios interceptor 기반)
• 세션 만료 시 자동 로그아웃 처리

2) 리콜 제품 검수 (RecallReportsReviewPanel)

• 상태 카드(PENDING, IN REVIEW, APPROVED, REJECTED) + 클릭 필터
• 테이블형 리스트
• 제품명 검색
• 상태/제보건수(report_count) 표시
• 상세보기 모달 (현재 제품 정보 / 제보된 리콜 정보 / 검토 액션)

3) 제품 수기 등록 검수 (ManualSubmissionsReviewPanel)

• 상태 카드 + 클릭 필터
• 테이블형 리스트
• 상세보기 모달 (제출 제품 정보 / 검토·매칭 정보)
• 유사 제품 영역은 현재 목업 UI (백엔드 미연동)
• 전용 스타일 파일 분리: ManualSubmissionsReviewPanel.css

프로젝트 구조

.
├── backend/                 # FastAPI 서버
│   ├── app/
│   │   └── main.py         # FastAPI 앱 엔트리
│   └── requirements.txt
├── frontend/                # React(Vite) 관리자 웹
│   ├── src/
│   │   ├── app/router.tsx  # 라우팅
│   │   ├── features/
│   │   │   ├── auth/       # 로그인/인증
│   │   │   ├── dashboard/  # 상단 네비/대시보드
│   │   │   ├── review/     # 검수 패널들
│   │   │   └── search/     # 리콜 제품 검색 탭 페이지
│   │   └── shared/         # API client, endpoint config 등
│   └── package.json
└── README.md

실행 방법

사전 요구사항

• Node.js 18+
• npm
• Python 3.11+ (프로젝트 환경에 맞는 버전)

백엔드 실행 (FastAPI)

backend/app/main.py 기준으로 FastAPI 앱이 구성되어 있습니다.

cd backend
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --reload --host 127.0.0.1 --port 8000

기본 API URL(프론트 기본값):

• http://127.0.0.1:8000

프론트엔드 실행 (Vite)

cd frontend
npm install
npm run dev

기본 개발 서버:

• http://localhost:5173

프론트 API Base URL 설정

프론트는 기본적으로 아래 값을 사용합니다.

• VITE_API_BASE_URL=http://127.0.0.1:8000

필요하면 frontend/.env에 설정:

VITE_API_BASE_URL=http://127.0.0.1:8000

빌드

cd frontend
npm run build