React 프론트엔드 개발 — 페이지, 컴포넌트, API 서비스, 라우팅, 상태 관리 작업을 수행할 때 사용합니다.
frontend/src/
├── components/
│ ├── common/ 공통 UI (Modal, Toast, Loader, ProtectedRoute 등)
│ ├── layout/ 레이아웃 (Header, Sidebar, BottomNavBar, Footer)
│ └── reports/ 리포트 컴포넌트
├── contexts/
│ ├── AuthContext.js 인증 상태 (user, token, login/logout)
│ └── AppContext.js 앱 설정 (theme, locale)
├── i18n/
│ ├── config.js i18n 초기화
│ └── index.js 번역 리소스 (ko, es)
├── pages/ 라우트 페이지
│ ├── Login.js
│ ├── Dashboard.js
│ ├── Bills.js / BillDetail.js
│ ├── Settings.js
│ └── admin/ 관리자 전용 페이지
├── screens/ 모바일 최적화 화면
│ ├── admin/ 관리자 화면 (8개)
│ └── resident/ 주민 화면 (6개)
├── services/ API 서비스 모듈
│ ├── http.js Axios 인스턴스 + 인터셉터
│ ├── authService.js 인증 API
│ ├── billService.js 관리비 API
│ ├── financeReportsService.js
│ ├── userAdminService.js
│ └── geminiApi.js AI 분석 API
├── App.js 라우터 설정
├── constants.js 상수
└── index.js 진입점
Dashboard.js)services/ 폴더의 서비스 모듈을 통해 수행http.js의 Axios 인스턴스 사용 (baseURL: /api, withCredentials: true)// 서비스 모듈 작성 패턴
import http from './http';
export const getMyBills = (params) => http.get('/bills/my', { params });
export const getBillDetail = (id) => http.get(`/bills/${id}`);
AuthContext에서 전역 인증 상태 관리ProtectedRoute 컴포넌트로 인증 라우트 보호/dashboard, /bills, /reservations, /maintenance, /settings/admin/dashboard, /admin/billing, /admin/users, /admin/reportsuser.role === 'ADMIN'으로 판단feature.scope.key (예: dashboard.title, bill.status.paid)const { t } = useTranslation(); t('dashboard.title')ko (한국어, 기본), es (스페인어)# 로컬 개발 서버
cd frontend && npm start # :3000
# Docker 재빌드
docker compose up -d --build frontend
# 로그 확인
docker compose logs -f frontend