[FEAT] 공용 모달 뷰 구현

[dlrjswns]

Describe

공통으로 사용할 수 있는 ModalContainerView를 구현했습니다. 하나의 공통 컴포넌트로 분리하여 모달의 공통적인 동작을 재사용할 수 있도록 개선했습니다.

Works made

구현 내용

• @ViewBuilder를 사용하여 모달 내부 UI를 자유롭게 구성할 수 있도록 지원
• @Binding을 통해 부모 View에서 모달 표시 여부를 제어할 수 있도록 구현
• 반투명 Overlay를 추가하여 모달 표시 시 배경을 dim 처리
• 배경 터치 시 모달을 닫을 수 있도록 dismissOnBackgroundTap 옵션 제공

사용 예시

@State private var isPresented = false

var body: some View {
    ZStack {
        Button("모달 열기") {
            isPresented = true
        }

        if isPresented {
            ModalContainerView(isPresented: $isPresented) {
                DeleteModalView()
            }
        }
    }
}

Changes Made

As-Is

기존 로직
없음

스크린샷

To-Be

변경 로직

• ModalContainerView에서 모달의 공통 동작을 담당하도록 변경했습니다.
• 각 모달은 실제 콘텐츠(UI)만 구현하면 되도록 역할을 분리했습니다.
• 배경 처리, dismiss, 애니메이션을 하나의 공통 컴포넌트에서 관리하도록 개선했습니다.

스크린샷

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-08-04.at.11.18.36.mov

How to Test

1. @State로 모달 표시 여부를 관리합니다.
2. ModalContainerView(isPresented:)를 생성합니다.
3. 원하는 모달 View를 Content로 전달합니다.
4. 버튼 클릭 시 모달이 정상적으로 표시되는지 확인합니다.
5. 배경을 터치했을 때 모달이 정상적으로 dismiss 되는지 확인합니다.
6. 모달의 등장 및 종료 애니메이션이 정상적으로 동작하는지 확인합니다.

Issues Resolved

• 없음

Additional context

ModalContainerView는 공통 Container 역할만 담당하며 실제 모달 UI는 외부에서 주입받는 구조입니다.

이를 통해 Alert, Confirm, Error, Logout 등 다양한 모달을 동일한 방식으로 구현할 수 있으며 공통 로직 변경 시 하나의 컴포넌트만 수정하면 되어 유지보수성을 높일 수 있습니다.

References

• 없음