SwiftUI에서 중복된 뒤로가기 버튼 문제 해결하기

SwiftUI에서 NavigationStack을 사용할 때, 커스텀 뒤로가기 버튼을 추가하면 기본적으로 제공되는 < 버튼과 중복되어 < 뒤로가기 <처럼 보이는 문제가 발생할 수 있다. 이 문제를 해결하는 방법을 정리해 본다.

---

1. 문제 상황

아래와 같이 DetailView에서 커스텀 뒤로가기 버튼을 추가한 경우를 가정해 보자.

.background(Color.viewBackground.ignoresSafeArea())
.ignoresSafeArea(edges: .bottom)
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true) // 기본 뒤로가기 버튼 숨김
.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button(action: {
            dismiss()
        }) {
            HStack {
                Image(systemName: "chevron.left")
                    .foregroundStyle(Color.textAccent)
                Text("기억들")
                    .font(.maruburiot(type: .bold, size: 16))
                    .foregroundStyle(Color.textAccent)
            }
        }
    }
}

이 코드에서는 .navigationBarBackButtonHidden(true)를 사용하여 기본 < 버튼을 숨기고, ToolbarItem을 통해 커스텀 뒤로가기 버튼을 추가했다. 하지만 여전히 < 뒤로가기 <처럼 중복으로 표시되는 문제가 발생할 수 있다.

---

2. 원인 분석

이 문제는 이전 화면(예: 목록 화면)에서도 ToolbarItem(placement: .navigationBarLeading)을 추가했기 때문에 발생하는 경우가 많다.

예를 들어, 목록 화면에서 다음과 같은 코드가 있을 수 있다.

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        if !isBackButtonHidden {
            Button(action: {
                dismiss()
            }) {
                Image(systemName: "chevron.backward") // 🚨 중복 원인 가능성
            }
        }
    }
}

이 코드가 있으면 DetailView에서 추가한 ToolbarItem과 함께 중복으로 표시될 수 있다.

---

3. 해결 방법

✅ 1) 이전 화면에서 불필요한 ToolbarItem을 제거하기

목록 화면에서는 ToolbarItem(placement: .navigationBarLeading)을 정의하지 않도록 수정해야 한다.

📌 수정 전 (중복 발생 가능)

// 목록 화면 (예: HomeView.swift)
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {
            dismiss()
        }) {
            Image(systemName: "chevron.backward") // 🚨 중복 원인 가능성 있음
        }
    }
}

⬇ 이 코드를 삭제 ⬇

📌 수정 후 (중복 제거)

// 목록 화면에서는 불필요한 ToolbarItem을 제거한다.

이렇게 하면 목록 화면에서는 기본 < 버튼만 표시되고, DetailView에서는 커스텀 뒤로가기 버튼이 정상적으로 동작한다.

---

✅ 2) ToolbarItem을 if 문으로 감싸기

만약 특정 조건에서만 뒤로가기 버튼을 보이게 하고 싶다면, ToolbarItem 자체를 if 문으로 감싸는 것이 좋다.

.toolbar {
    if !isBackButtonHidden {
        ToolbarItem(placement: .navigationBarLeading) {
            Button(action: {
                dismiss()
            }) {
                Image(systemName: "chevron.backward")
            }
        }
    }
}

이렇게 하면 isBackButtonHidden == true일 때 ToolbarItem이 생성되지 않아 불필요한 버튼이 표시되지 않는다.

---

✅ 3) 네비게이션 바 자체를 숨기기

기록 탭과 같은 특정 화면에서 네비게이션 바를 완전히 숨기고 싶다면, .toolbar(.hidden, for: .navigationBar)를 사용할 수도 있다.

.toolbar(isBackButtonHidden ? .hidden : .visible, for: .navigationBar)

이렇게 하면 isBackButtonHidden == true일 때 네비게이션 바 전체가 사라지므로, 뒤로가기 버튼을 따로 조작할 필요가 없다.

---

4. 결론

✔ DetailView에서 navigationBarBackButtonHidden(true)를 적용했는데도 < 뒤로가기 <처럼 중복된다면, 이전 화면에서 ToolbarItem(placement: .navigationBarLeading)을 추가했는지 확인해야 한다.
✔ 불필요한 ToolbarItem을 제거하면 중복이 사라진다.
✔ if 문을 사용해 ToolbarItem이 필요할 때만 생성하도록 하면 코드가 더욱 깔끔해진다.
✔ 네비게이션 바 자체를 숨겨야 한다면 .toolbar(.hidden, for: .navigationBar)를 활용할 수도 있다.