[Feat/MenuTabBar]: 메뉴 탭 컴포넌트를 구현했습니다.

[Seobe95]

PR 가이드라인

PR Checklist

PR 날릴 때 체크 리스트

• [x] 코드 컨벤션을 잘 지키셨나요?
• [x] 이슈 체크리스트를 잘 반영했나요?
• [x] Conflict 문제가 발생하지는 않나요?

PR Type

어떤 종류의 PR인가요?

• [ ] 버그 수정
• [x] 새 기능 개발
• [ ] 코드 스타일 변경
• [ ] 리팩토링
• [ ] 문서 작업 변경
• [ ] 기타 작업

연관되는 issue 정보를 알려주세요

Issue Number: #149

PR 설명하기

메뉴 탭 컴포넌트를 구현했습니다. 재사용이 가능하도록 MenuTabModel 타입의 배열을 통해 사용할 수 있도록 구현했습니다.

어떻게 작동하나요? code 기반으로 설명해주세요

MenuTabBar 파라미터

• menus: MenuTabModel을 담는 배열입니다. MenuTabModel은 순서와 id의 역할을 하는 Int 타입의 index, 아이콘을 사용할 때 systemName이 되는 String타입의 image로 구성되어있습니다.
• selectedIndex: 선택되는 index에 따라 알맞은 화면을 보여줍니다.
• fullWidth: 사용하는 View에서 사용될 MenuTabBar의 width입니다.
• spacing: 버튼과 버튼 사이의 간격입니다.
• horizontalInset: 버튼 옆에서 끝까지의 거리입니다. 예를 들어, |옆간격|버튼| spacing |버튼|옆간격| 인 경우 옆간격 * 2를 입력하시면 됩니다.

struct MainSectionsView: View {
    @EnvironmentObject var mainMapViewModel: MainMapViewModel
    @Binding var sortDistance: Bool
    @State var selectedIndex = 0
    var body: some View {
        NavigationStack {
            VStack {
                MenuTabBar(
                    menus: [MenuTabModel(index: 0, image: "list.bullet.below.rectangle"), MenuTabModel(index: 1, image: "newspaper")],
                    selectedIndex: $selectedIndex,
                    fullWidth: UIScreen.main.bounds.width,
                    spacing: 50,
                    horizontalInset: 91.5)

                switch selectedIndex {
                case 0:
                    MemoListView(sortDistance: $sortDistance)
                        .environmentObject(mainMapViewModel)
                default:
                    CommunityView()
                }
            }
            .background(Color.bgColor)
        }
    }
}

---

가능하다면 추가해주세요

변경 사항 스크린샷 혹은 화면 녹화

https://github.com/APP-iOS3rd/PJ3T2_Mymory/assets/79817557/e1eda71b-5878-49cd-ba22-0e9c988a98d6

기타 언급해야 할 사항들

• 탭 바에 아이콘(SF Symbol)을 사용하게 될 경우, 아이콘 중 fill이 포함되어 있는 아이콘으로 통일하는 것이 재사용성을 더욱 높일 수 있을 것 같습니다. 현재 사용하고 있는 아이콘 중, fill 유형이 없는 아이콘이 있어 예외처리를 추가적으로 해야해서, 이부분은 디자인에 큰 영향이 없다면 수정하면 좋을 것 같습니다.