프론트엔드 컴포넌트 로직 빌더

프론트엔드 아키텍트로서 다음 로직을 설계합니다: **멀티스텝 폼 (검증, 진행률, 상태)** - 상태 머신: `idle` → `step1` → `step2` → `step3` → `submitting` → `success` | `error` - 데이터 흐름: 부모 컴포넌트가 각 스텝의 입력값을 `useState`로 관리, 스텝 이동 시 검증 이벤트 발생, API 호출은 최종 제출 시에만 - 오류 처리: 필드별 오류 메시지 표시, API 실패 시 재시도 버튼 - 로딩/빈 상태: 스텝 전환 시 스피너, 성공 화면에 확인 아이콘 - 엣지 케이스: 브라우저 새로고침 시 현재 스텝 복원 (localStorage), 뒤로가기 버튼 처리 **동적 가격 계산기 (실시간)** - 상태 머신: `initial` → `calculating` → `calculated` | `error` - 데이터 흐름: 사용자 입력 (수량, 옵션) → `useMemo`로 계산 → 결과 표시, 부모에서 가격 정책 API 호출 - 오류 처리: 잘못된 입력 (음수, NaN) 시 기본값으로 대체, API 실패 시 이전 가격 유지 - 로딩/빈 상태: 계산 중 스켈레톤, 결과 없음 메시지 - 엣지 케이스: 빠른 입력 변경 시 디바운스 (300ms), 할인 코드 적용 시 재계산 **검색 (패싯, 정렬, 페이지네이션)** - 상태 머신: `idle` → `fetching` → `fetched` | `error`, 필터 변경 시 `refetching` - 데이터 흐름: 검색어, 필터, 정렬, 페이지 상태를 URL 쿼리로 동기화, API 호출은 서버 사이드 - 오류 처리: 네트워크 오류 시 재시도, 빈 결과 시 "결과 없음" 안내 - 로딩/빈 상태: 스켈레톤 카드, 필터 초기화 버튼 - 엣지 케이스: 동시 요청 시 AbortController로 취소, 페이지 범위 초과 시 마지막 페이지로 이동 **사용자 대시보드 (시각화, CRUD)** - 상태 머신: `loading` → `ready` → `editing` | `deleting` | `error` - 데이터 흐름: 대시보드 데이터 fetch → 차트 컴포넌트에 props 전달, CRUD 작업은 모달에서 수행 후 리스트 갱신 - 오류 처리: 삭제 실패 시 롤백, 차트 데이터 없음 시 빈 차트 표시 - 로딩/빈 상태: 전체 페이지 스피너, 항목 없음 시 CTA 버튼 - 엣지 케이스: 실시간 업데이트 (WebSocket) 시 충돌 방지, 대용량 데이터는 가상화 **인증 흐름 (로그인/회원가입/비밀번호 재설정)** - 상태 머신: `idle` → `submitting` → `authenticated` | `error`, 재설정은 `requested` → `verified` → `reset` - 데이터 흐름: 폼 제출 → 인증 API → 토큰 저장 → 사용자 정보 전역 상태로, 라우터 가드로 보호 - 오류 처리: 잘못된 자격 증명 시 에러 메시지, 토큰 만료 시 자동 로그아웃 - 로딩/빈 상태: 제출 중 버튼 비활성화, 성공 시 리다이렉트 - 엣지 케이스: 이메일 중복 확인, 비밀번호 강도 검사, 세션 유지 (리프레시 토큰) **React 구조:** ``` src/ components/ MultiStepForm/ StepIndicator.tsx Step1.tsx Step2.tsx Step3.tsx PricingCalculator/ Calculator.tsx PriceDisplay.tsx Search/ SearchBar.tsx FilterPanel.tsx ResultList.tsx Pagination.tsx Dashboard/ ChartWidget.tsx DataTable.tsx EditModal.tsx Auth/ LoginForm.tsx SignupForm.tsx ResetPassword.tsx hooks/ useFormValidation.ts useDebounce.ts useAuth.ts services/ api.ts authApi.ts store/ authContext.tsx dashboardContext.tsx ```