[FEAT] 공용 모달 컴포넌트 요소 구현

[dlrjswns]

Describe

계정 정보 화면에서 로그아웃을 실행하기 전 사용자에게 확인을 받을 수 있도록 로그아웃 확인 모달을 구현합니다.

Works made

• ModalContainerView를 활용하여 공통 모달 UI를 구성했습니다.
• ModalContentView를 통해 제목, 부제목 및 버튼 구성을 커스텀할 수 있도록 구현했습니다.
• ModalAction을 활용하여 모달 내 버튼의 스타일과 액션을 정의할 수 있도록 구성했습니다.
• 계정 정보 화면의 로그아웃 버튼 선택 시 바로 로그아웃을 수행하지 않고 확인 모달을 노출하도록 변경했습니다.
• 모달의 로그아웃 버튼 선택 시 기존 logout() 로직을 수행하도록 연결했습니다.
• 마저 사용하기 버튼 및 배경 영역 선택 시 모달을 닫을 수 있도록 처리했습니다.

Changes Made

As-Is

기존 로직

• 계정 정보 화면에서 로그아웃을 선택하면 별도의 확인 과정 없이 즉시 로그아웃 API를 호출했습니다.
• 로그아웃 실행 전 사용자의 의사를 확인할 수 있는 UI가 없었습니다.

스크린샷

To-BE

변경 로직

• 계정 정보 화면에서 로그아웃을 선택하면 로그아웃 확인 모달을 표시합니다.
• 로그아웃 선택 시 로그아웃 API를 호출하고 LoginSession을 갱신합니다.
• 마저 사용하기 선택 시 로그아웃을 수행하지 않고 모달을 닫습니다.
  모달 외부 배경을 선택해도 모달을 닫을 수 있도록 처리했습니다.

스크린샷

How to Test

1. 계정 정보 화면으로 이동합니다.
2. 로그아웃 메뉴를 선택합니다.
3. 로그아웃 하시겠어요? 확인 모달이 정상적으로 노출되는지 확인합니다.
4. 마저 사용하기 버튼을 선택합니다.
5. 모달이 닫히고 로그아웃되지 않는지 확인합니다.
6. 다시 로그아웃 메뉴를 선택합니다.
7. 로그아웃 버튼을 선택합니다.
8. 로그아웃 API가 호출되는지 확인합니다.
9. 로그아웃 후 LoginSession이 갱신되는지 확인합니다.
10. 모달 외부 배경을 선택합니다.
11. 모달이 정상적으로 닫히는지 확인합니다.

Issues Resolved

Additional context

References