[Design] #43 - 탭 바 작업중

DeveloperAcademy-POSTECH · Aug 5, 2024 · 31906c2 · 31906c2
1 parent 47917a0
commit 31906c2
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 5 deletions.
diff --git a/2024-MC3-Team4-NewT/Source/View/MainView/CustomTabBar.swift b/2024-MC3-Team4-NewT/Source/View/MainView/CustomTabBar.swift
@@ -75,7 +75,7 @@ struct CustomTabBar: View {
                 }
                 else {
                     Spacer()
-                    //버튼 바뀌고 올라가는 애니메이션
+                    //버튼 바뀌고 위에 버튼 추가되는 애니메이션 넣어야 함
                     ZStack(alignment: .bottom) {
                         Rectangle()
                         .frame(height: 380)

diff --git a/2024-MC3-Team4-NewT/Source/View/MainView/FitChartView.swift b/2024-MC3-Team4-NewT/Source/View/MainView/FitChartView.swift
@@ -30,9 +30,7 @@ struct FitChartView: View {
                     StatisticsView()
                 } else {
                     Text("통계 데이터가 없습니다.")
-                        .foregroundColor(.gray)
                 }
-//                RecentChartsVIew()
                 RecentChartsView()
                 PinChartsView()
             }.padding(.top, 12)
@@ -41,7 +39,6 @@ struct FitChartView: View {
             .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
             // .never 로 하면 배경 안보이고 .always 로 하면 인디케이터 배경 보입니다.
         }
-
     }
 }
 

diff --git a/2024-MC3-Team4-NewT/Source/View/MainView/MainView.swift b/2024-MC3-Team4-NewT/Source/View/MainView/MainView.swift
@@ -12,6 +12,8 @@ import SwiftData
 struct MainView: View {
     @State private var scrollOffset: CGFloat = 0 // 스크롤 오프셋 상태 변수
     @State var isHeaderVisible: Bool = true // 헤더 가시성 상태 변수
+    @State private var selectedTab: Int = 0
+    @State private var isRecord: Bool = false
     var body: some View {
         NavigationStack {
             ZStack{
@@ -41,7 +43,88 @@ struct MainView: View {
                 VStack{
                     Spacer()
                     //여기에 탭바 넣으면 됩니다
-                    CustomTabBar()
+                    ZStack {
+                        HStack{
+                            Spacer()
+                            ZStack(alignment: .top) {
+                                HStack {
+                                    Spacer()
+                                    TabBarButton(icon: ((selectedTab == 0) ? "chartBarXaxis" : "chartBarXaxis.gray"), label: "파도차트", isSelected: selectedTab == 0)
+                                        .onTapGesture {
+                                            selectedTab = 0
+                                        }
+
+                                    Spacer()
+                                    Spacer()
+                                    Spacer()
+
+                                    TabBarButton(icon: ((selectedTab == 2) ? "bookPages" : "bookPages.gray"), label: "기록 차트", isSelected: selectedTab == 2)
+                                        .onTapGesture {
+                                            selectedTab = 2
+                                        }
+
+                                    Spacer()
+                                }
+                                .frame(height: 60)
+                                .padding(.vertical, 10)
+                                .padding(.horizontal, 20)
+                                .background(
+                                    Rectangle()
+                                        .fill(.white)
+                                )
+                                Rectangle()
+                                    .frame(height: 0.5) // 선의 두께, 0.33은 반영을 안해줘서 0.5로 설정
+                                    .foregroundColor(.black.opacity(0.3))
+                            }
+                        }
+
+
+                        //Floating Button
+                        Button(action: {
+
+                        }, label: {
+                            if !isRecord {
+                                ZStack{
+                                    Circle()
+                                        .fill(.surfBlue)
+                                        .frame(width: 70, height: 70)
+
+                                    VStack {
+                                        Image("waterWaves")
+                                            .font(.system(size: 24))
+                                            .foregroundColor(.white)
+                                            .padding(.bottom, 4)
+                                        Text("파도기록")
+                                            .font(.CaptionSemiBold)
+                                            .foregroundColor(.white)
+                                    }
+                                }
+                                .offset(y: -20)
+                                .onTapGesture {
+                                    isRecord = true
+                                }
+                            }
+                            else {
+                                Spacer()
+                                //버튼 바뀌고 올라가는 애니메이션
+                                ZStack{
+                                    Rectangle()
+                                    .frame(height: 380)
+                                    .foregroundColor(.white.opacity(0.7))
+                                    .cornerRadius(24)
+                                    .blur(radius: 40)
+                                    Image("recordXButton")
+//                                        .offset(y: -20)
+                                        .onTapGesture {
+                                            isRecord = false
+                                        }
+                                }
+
+
+                            }
+                        })
+                    }
+
                 }
             }