✨ [Feat] modifying Router & Tabbar

[syss220211]

✨ [Feat] modifying Router & Tabbar

구현내용 #10 #13

1️⃣ 라우터 수정 (탭바 별로 RouterView를 가져가도록 수정함)

• 탭바 두번 탭시 루트뷰로 이동하는 제스처를 추가하고 싶은데 현재 코드상.. 에매한것 같아서 고민중입니다.

시도한 방법

• Router를 상위에서 선언하고 환경변수로 뿌려주면 탭뷰에는 NavigationStack이 안 걸려있어서 AutoLayout 에러 발생
• Router를 TabView위에 씌워버리면 완전 화면 이동이라 화면 이동에 따른 탭바 유무 결정 후에 다시 수정이 필요할 수도 있습니다.

2️⃣ 탭바 디자인 적용

• empty <-> fill 로 탭바 디자인 구현 완료

[WallabyStuff]

라우터 관련 아이디어

최고의 방법인지는 저도 잘 모르겠지만 그래도 도움이 될까 하는 마음에 의견 드려보자면...
저는 다음 두 가지 방식이 떠오르네요.

1. 각 탭 별로 Router를 지정하고 TabView와 TabBar가 있는 위치에서 각 탭의 router를 environmentObject로 뿌려준다.
   즉 TabView가 있는 위치에서 StateObject로 각 탭의 router를 가지고 있는 형식이 될 것 같은데요, 예를들면

// ../TabbarMainView
struct ContentView: View {
    
    ...

    @StateObject private var aTabRouter = ATabRouter()
    @StateObject private var bTabRouter = BTabRouter()

    var body: some View {
        NavigationStack() {
            TabView(selection: $selectedTab) {
                ATab()
                    .environmentObject(aTabRouter)
                    .tag(0)
                    .onDoubleTap { /// 대충 이런 modifier가 있다고 칩시다
                        aTabRouter.navigateToRoot()
                    }

                BTab()
                    .environmentObject(bTabRouter)
                    .tag(1)
                    .onDoubleTap {
                        bTabRouter.navigateToRoot()
                    }
            }
        }
    }
}

이렇게 하면 탭바의 아이템을 더블클릭했을 때 다른 navigationStack에 미치는 영향 없이 관리할 수 있지 않을까 싶어요!

2. DIContainer를 이용해서 router를 관리하는 방법
   두 번째 방법도 첫 번째 방법과 크게 다르진 않는데요 diContainer를 이용해서 router를 등록해 뒀다가 각 탭에서 필요한 라우터를 꺼내서 사용하고 TabView를 구현하는 위치에서도 diContainer를 이용해서 TabRouter를 꺼내서 navigation 로직을 이용하면 되지 않을까 싶은데요, 필요에 따라서 router에 id를 부여하고 필요한 router를 꺼내서 사용할 수 있을것 같아요!

만약 이 두 방법 모두 서연님이 하고 계신 프로젝트에서 한계가 있다 싶으면 얘기해주세요!
같이 고민해보면 좋을것 같아요!

[syss220211]

@WallabyStuff 남겨준 1번 방법으로도 시도 했었는데 좀 더 다듬어서 다시 한번 참고해볼게여! 감사해여!!!

[WallabyStuff]

NavigationStack Router 관련해서는 아래 프로젝트 참고해보면 도움이 될 수도 있을것 같아요!
https://github.com/hoangatuan/iMovie

이 프로젝트에서도 각 탭 별로 router를 가지고 있는 형태인데 이 상태에서 1번처럼 분리하기 간단할 것 같아서 참고가 되면 좋을것 같네요!