프로젝트 구조 및 기능 분석 보고서

📋 프로젝트 개요

프로젝트 구성

• 프론트엔드: React + Vite + Tailwind CSS
• 백엔드: Node.js + Express + MongoDB
• 주요 기능: 요금제 진단, 요금제 비교, 마이페이지, 요금제 보관함

🏗️ 아키텍처 구조

프론트엔드 구조

src/
├── pages/           # 페이지 컴포넌트
├── components/      # 재사용 가능한 컴포넌트
├── contexts/        # React Context (상태 관리)
├── store/          # 상태 관리 (진단 관련)
├── apis/           # API 통신 모듈
├── hooks/          # 커스텀 훅
├── utils/          # 유틸리티 함수
└── assets/         # 정적 자산

백엔드 구조

Ureca-Chatbot-Team3-Backend/
├── controllers/     # 비즈니스 로직 처리
├── models/         # MongoDB 스키마
├── routes/         # API 라우트 정의
├── services/       # 서비스 레이어
├── middleware/     # 미들웨어
├── utils/          # 유틸리티 함수
└── config/         # 설정 파일

🎯 주요 기능 분석

1. 진단 페이지 (DiagnosisPage)

구성과 로직

프론트엔드 구조

• 위치: src/pages/DiagnosisPage/DiagnosisPage.jsx
• 상태 관리: DiagnosisContext를 통한 중앙 집중식 상태 관리
• 주요 컴포넌트:
  • DiagnosisIntroSection: 진단 시작 화면
  • 질문 진행 화면
  • 로딩 및 에러 처리 화면