여기의 시퀀스/클래스 다이어그램 예시에서는 일부 시퀀스와 클래스에 관해서만 제작하였습니다. 실제 웹 애플리케이션에 모든 시퀀스와 클래스 다이어그램을 제작해야 합니다.

머메이드차트 웹 도구(https://www.mermaidchart.com/app/projects/)

<aside> 📖

</aside>

시퀀스 다이어그램 (Sequence Diagram)

시퀀스 다이어그램은 사용자와 시스템 내부 객체 간의 상호작용 흐름을 시간 순으로 표현합니다.

회원가입 시퀀스 (유스케이스 UC-001a 회원가입)

• 흐름

시퀀스 흐름 설명

1. 사용자가 /api/signup에서 email, password, nickname 입력
2. AuthController.register()에서 요청을 수신
3. AuthService.register()에서 이메일 중복 검사, 닉네임 중복 검사 → 중복일 경우 예외 발생
4. AuthRepository.save()에서 DB에 저장 요청
5. 저장된 결과를 DB → Repository → Service → Controller로 전달
6. 회원가입 성공 메시지를 사용자에게 반환 (UI)

sequenceDiagram
    title UC-001a 회원가입

    actor Guest as 비회원
    participant UI as React UI
    participant C as AuthController
    participant S as AuthService
    participant R as UserRepository
    participant DB as DB

    Guest->>UI: 회원가입 폼 입력
    UI->>C: POST /api/signup (email, password, nickname)
    C->>S: signup(dto)

    S->>R: existsByEmail(email)?
    R->>DB: SELECT email
    DB-->>R: 결과
    R-->>S: true/false

    alt 이미 존재하는 이메일
        S-->>C: throw DuplicateEmailException
        C-->>UI: 409 CONFLICT
        UI-->>Guest: "이미 사용 중인 이메일"
    else 신규 이메일
        S->>S: passwordHash = BCrypt(pw)
        S->>R: save(User)
        R->>DB: INSERT user(...)
        DB-->>R: userId
        R-->>S: saved
        S-->>C: success(userId)
        C-->>UI: 201 CREATED
        UI-->>Guest: 가입 완료
    end

• 고화질 이미지

로그인 시퀀스 (유스케이스 UC-001b 로그인)