yoosangwook
37435d2cca
- Introduced diagrams for the Login component structure, project architecture, and login sequence. - Detailed state management, external hooks, event handling, and UI components in the Login documentation. - Provided an overview of the component relationships and roles within the application architecture.
158 lines
3.3 KiB
Markdown
158 lines
3.3 KiB
Markdown
# 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 요소의 일관성 유지
|