onsitesurvey/diagram/mermaid3.md

Pages and Components Class Diagram

Class Diagram

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 요소의 일관성 유지