# Pages and Components Class Diagram

## Class Diagram

```mermaid
classDiagram
    class RootLayout {
        +ReactNode children
        +ReactNode header
        +ReactNode footer
        +ReactNode floatBtn
        +ReactQueryProviders
        +EdgeProvider
        +PopupController
    }

    class Page {
        <<interface>>
        +ReactNode render()
    }

    class LoginPage {
        +Login component
        +handleLogin()
        +validateInput()
    }

    class SurveySalePage {
        +SurveySaleList
        +SurveySaleDetail
        +handleSurveySubmit()
    }

    class SuitablePage {
        +SuitableList
        +SuitableDetail
        +handleSuitableSubmit()
    }

    class InquiryPage {
        +InquiryList
        +InquiryDetail
        +handleInquirySubmit()
    }

    class PasswordResetPage {
        +PasswordResetForm
        +handlePasswordReset()
    }

    class PDFPage {
        +PDFViewer
        +PDFGenerator
        +handlePDFGeneration()
    }

    class BaseComponent {
        <<interface>>
        +ReactNode render()
    }

    class UIComponent {
        +Button
        +Input
        +Select
        +Modal
    }

    class PopupComponent {
        +PopupController
        +PopupContent
        +handlePopup()
    }

    class PDFComponent {
        +PDFViewer
        +PDFGenerator
        +handlePDF()
    }

    class SurveyComponent {
        +SurveyForm
        +SurveyList
        +handleSurvey()
    }

    class InquiryComponent {
        +InquiryForm
        +InquiryList
        +handleInquiry()
    }

    %% Relationships
    RootLayout --> Page
    Page <|-- LoginPage
    Page <|-- SurveySalePage
    Page <|-- SuitablePage
    Page <|-- InquiryPage
    Page <|-- PasswordResetPage
    Page <|-- PDFPage

    BaseComponent <|-- UIComponent
    BaseComponent <|-- PopupComponent
    BaseComponent <|-- PDFComponent
    BaseComponent <|-- SurveyComponent
    BaseComponent <|-- InquiryComponent

    LoginPage --> BaseComponent
    SurveySalePage --> SurveyComponent
    SuitablePage --> SurveyComponent
    InquiryPage --> InquiryComponent
    PasswordResetPage --> UIComponent
    PDFPage --> PDFComponent

    RootLayout --> PopupComponent
```

## Component Hierarchy

1. **Root Layout**

   - 최상위 레이아웃 컴포넌트
   - ReactQuery와 Edge Provider를 포함
   - 공통 레이아웃 요소 관리

2. **Pages**

   - LoginPage: 로그인 기능
   - SurveySalePage: 설문 판매 관리
   - SuitablePage: 적합성 관리
   - InquiryPage: 문의 관리
   - PasswordResetPage: 비밀번호 재설정
   - PDFPage: PDF 생성 및 관리

3. **Base Components**
   - UIComponent: 기본 UI 요소
   - PopupComponent: 팝업 관리
   - PDFComponent: PDF 관련 기능
   - SurveyComponent: 설문 관련 기능
   - InquiryComponent: 문의 관련 기능

## Component Relationships

1. **Page-Component Relationship**

   - 각 페이지는 필요한 컴포넌트들을 조합하여 구성
   - 페이지별로 특화된 컴포넌트 사용

2. **Component Inheritance**

   - 모든 컴포넌트는 BaseComponent 인터페이스 구현
   - 각 컴포넌트 타입별로 특화된 기능 제공

3. **Layout Integration**
   - RootLayout이 전체 페이지 구조 관리
   - PopupComponent를 통한 모달 관리
   - 공통 UI 요소의 일관성 유지