[오류] Alert 다중 사용 시 1개만 실행되고 나머지는 실행 안됨

1. 내용 캡쳐

- 기존에 생각한 방식은 텍스트를 입력할 수 있는 Alert가 먼저 나오고, 텍스트 입력 후 '완료' 버튼을 누르면 해당 값이 기존에 생성된 Tag값과 같은지 확인하여 같은 경우 이름 중복에 대한 Alert가 뜨는 프로세스를 생각하였다.

따라서 아래와 같이 태그 생성 버튼에 텍스트 입력이 가능한 Alert를 생성해주었고, Alert 내부의 '완료' 버튼 클릭 시 태그 중복 여부 체크 후 Alert를 생성해주었습니다. 하지만 첫번째 텍스트 입력 Alert만 실행되고, 두번째 Alert가 실행되지 않았습니다.

 

 

2. 원인 분석

https://yyomzzi.tistory.com/m/8

[Issue 해결] SwiftUI에서 하나의 뷰에 여러 개의 Alert 나타내기

해당 게시글을 기반으로 확인해보니, 하나의 View에는 1개의 Alert만 작동하는 것을 확인하였습니다. 저의 경우 Tag를 만들어주는 한 개의 Button(즉 View) 하위에 Alert가 2개의 depth로 붙어있는 형식이기 때문에 상위의 1개만 실행되 되는 것으로 판단하였습니다.

 

3. 결과

그렇다면 Button과 다른 View에 Alert를 설정해준다면 가능할 것이라고 생각했습니다.

'완료' 버튼 클릭하게 되면 기존의 태그와 같은지 확인 후 같다면 Button이 포함되어 있지만 현재 상태에서 가장 하위뷰에서 중복 여부 Alert를 실행시켜줍니다. 태그 이름 중복 시 첫번째 Alert가 사라진 후 중복에 관한 두번째 Alert까지 잘 나오는 것을 확인할 수 있습니다.

(문제는 해결했지만 디자인, 프로세스적인 고민으로 중복 Alert는 결국 이번 프로젝트에 사용하지 않았습니다.)

import SwiftUI

struct ContentView: View {
    @State private var tags : [String] = ["의료"]
    @State private var showInputNewTag : Bool = false
    @State private var showSameName : Bool = false
    @State private var name : String = ""
    var body: some View {
        VStack {
            Button(action: {
                showInputNewTag.toggle()
            }, label: {
                Text("태그 생성 버튼")
            })
            .alert("새로운 태그 입력", isPresented: $showInputNewTag) {
                TextField("태그를 입력해주세요", text: $name)
                Button(action: {
                    
                }, label: {
                    Text("취소")
                })
                Button(action: {
                    if tags.contains(name) {
                        showSameName.toggle()
                    }
                }, label: {
                    Text("완료")
                })
            } message:{
                Text("새로운 태그를 입력해주세요")
            }
        }
        .alert("중복 태그 알림", isPresented: $showSameName, actions: {
            Button(action: {
                
            }, label: {
                Text("확인")
            })
        })
        .padding()
    }
}