onsitesurvey/diagram/mermaid2.md
yoosangwook 37435d2cca feat: add documentation for Login component, project structure, and login process
- 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.
2025-05-29 10:32:10 +09:00

2.9 KiB

Login Process Documentation

Login Sequence Diagram

sequenceDiagram
    actor User
    participant Login as Login Component
    participant API as Auth API
    participant QSP as QSP API
    participant Session as Session Store
    participant Router as Next Router

    User->>Login: Enter credentials
    Login->>Login: Validate input
    alt Invalid Input
        Login->>User: Show error message
    else Valid Input
        Login->>API: POST /api/auth
        API->>QSP: POST /api/user/login
        QSP-->>API: Return user data

        alt Login Success
            API->>Session: Create session
            Session->>Session: Set user data
            Session->>Session: Set role
            API-->>Login: Return success response
            Login->>Router: Redirect to home
            Router->>User: Show home page
        else Login Failed
            API-->>Login: Return error response
            Login->>User: Show error message
        end
    end

Login Process Flow

  1. User Input

    • User enters login credentials (ID and password)
    • Optional: User can toggle Q.PARTNERS mode
    • Optional: User can save ID
  2. Input Validation

    • Checks if ID and password are not empty
    • Validates email format for Q.PARTNERS mode
  3. Authentication Request

    • Sends credentials to Auth API
    • Auth API forwards request to QSP API
    • QSP API validates credentials
  4. Session Management

    • On successful login:
      • Creates new session
      • Stores user data
      • Sets user role based on permissions
      • Saves session to cookies
  5. Response Handling

    • Success: Redirects to home page
    • Failure: Shows error message

Role Assignment Logic

The system assigns roles based on the following rules:

  • T01: If userId is 'T01'
  • Admin: If groupId is '60000'
  • Admin_Sub: If groupId is '70000' and builderNo is null
  • Builder: If groupId is '70000' and builderNo is not null
  • User: Default role for all other cases
graph TD
subgraph Root
A[RootLayout] --> B[ReactQueryProviders]
B --> C[EdgeProvider]
C --> D[HTML Structure]
end
    subgraph Layout Components
        D --> E[Header]
        D --> F[Main Content]
        D --> G[Footer]
        D --> H[Float Button]
        D --> I[PopupController]
    end
    subgraph Pages
        F --> J[Login]
        F --> K[Survey Sale]
        F --> L[Suitable]
        F --> M[Inquiry]
        F --> N[Password Reset]
        F --> O[PDF]
    end
    subgraph Providers
        P1[ReactQueryProvider]
        P2[EdgeProvider]
    end
    subgraph Components
        C1[UI Components]
        C2[Popup Components]
        C3[PDF Components]
        C4[Survey Components]
        C5[Inquiry Components]
    end
    subgraph Utils
        U1[Session Management]
        U2[Mailer]
        U3[API Routes]
    end
    %% Relationships
    A --> P1
    A --> P2
    J --> U1
    K --> C4
    L --> C4
    M --> C5
    N --> U2
    O --> C3