Merge pull request #127 from Za-DO/feat/DeviceSize

[2022.10.29] feat/DeviceSize >> 메인뷰, 디테일뷰 기기대응
Za-DO · Oct 29, 2022 · 8db5050 · 8db5050
2 parents 43ec215 + 754b5be
commit 8db5050
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 85 deletions.
diff --git a/Semo/Views/AddSong/AddMoreInfoView.swift b/Semo/Views/AddSong/AddMoreInfoView.swift
@@ -35,15 +35,15 @@ struct AddMoreInfoView: View {
             // MARK: - 추가 정보 입력란
 
             VStack(alignment: .center) {
-                Text("노래방에서 필요한 정보를 \n입력하세요.")
-                    .lineSpacing(10)
+                Text("노래방에서 필요한 정보를\n입력하세요.")
+                    .lineSpacing(UIScreen.getHeight(10))
                     .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                     .foregroundColor(.white)
-                    .font(.system(size: 24, weight: .semibold))
-                    .padding(EdgeInsets(top: 14, leading: 20, bottom: 0, trailing: 0))
+                    .font(.system(size: 24 * Font.setSize(), weight: .semibold))
+                    .padding(EdgeInsets(top: UIScreen.getHeight(14), leading: UIScreen.getWidth(20), bottom: 0, trailing: 0))
 
                 LevelPickerView(levelIndexBase: $levelPickerIndex, levelItems: levelPickerItems)
-                    .padding(.top, 60)
+                    .padding(.top, UIScreen.getHeight(60))
 
                 TunePickerView(genderIndexBase: $genderIndex, genderItems: genderItems, tuneIndexBase: $tunePickerIndex, tuneItems: tunePickerItems)
 
@@ -69,7 +69,7 @@ struct AddMoreInfoView: View {
                     Text("건너뛰기")
                         .foregroundColor(.grayScale1)
                         .font(.system(size: 16, weight: .semibold))
-                        .padding(EdgeInsets(top: 28, leading: 0, bottom: 60, trailing: 0))
+                        .padding(EdgeInsets(top: UIScreen.getHeight(28), leading: 0, bottom: UIScreen.getHeight(60), trailing: 0))
                 })
             }
         }

diff --git a/Semo/Views/AllSongList/SongListView.swift b/Semo/Views/AllSongList/SongListView.swift
@@ -33,12 +33,12 @@ struct SongListView: View {
             ScrollView {
                 Divider()
                     .background(Color.grayScale6)
-                    .frame(width: 350)                
+                    .frame(width: UIScreen.getWidth(350))
                 ForEach(songList) {
                     SongListCellView(songEditButtonTapped: $songEditButtonTapped, refreshView: $refreshView, song: $0)
                     Divider()
                         .background(Color.grayScale6)
-                        .frame(width: 350)
+                        .frame(width: UIScreen.getWidth(350))
                 }
                 .padding(.top, 10)
                 Spacer()

diff --git a/Semo/Views/MainView.swift b/Semo/Views/MainView.swift
@@ -24,64 +24,69 @@ struct MainView: View {
     // MARK: - BODY
     var body: some View {
         NavigationView {
-            ZStack(alignment: .top) {
-                Image("backgroundImage")
-                    .ignoresSafeArea()
-
-                // MARK: - 상단 TabBar
-                // -------------------------------------------
-
-                TabView(selection: self.$currentTab) {
-                    SongListView(songList: $songList, refreshView: $mainFetch, songEditButtonTapped: $songEditButtonTapped).tag(0)
-                    SingingListView(songList: $songList, refreshView: $mainFetch, songEditButtonTapped: $songEditButtonTapped, listEditButtonTapped: $listEditButtonTapped).tag(1)
-                }
-                .tabViewStyle(.page(indexDisplayMode: .never))
-                .edgesIgnoringSafeArea(.all)
-                .navigationBarTitle("", displayMode: .inline)
-
-
-                // MARK: 커스텀된 TabBar 메뉴 버튼
-
-                HStack {
-                    HStack {
-                        ForEach(Array(zip(self.tabBarOptions.indices,
-                                          self.tabBarOptions)),
-                                id: \.0,
-                                content: { index, name in
-                            TabBarItemView(tabBarItemName: name,
-                                           currentTab: self.$currentTab,
-                                           namespace: namespace.self,
-                                           tab: index)
-                        })
+            GeometryReader { geometry in
+                ZStack(alignment: .top) {
+                    Image("backgroundImage")
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: UIScreen.getWidth(390), height: UIScreen.getHeight(844))
+                        .ignoresSafeArea()
+
+                    // MARK: - 상단 TabBar
+                    // -------------------------------------------
+
+                    TabView(selection: self.$currentTab) {
+                        SongListView(songList: $songList, refreshView: $mainFetch, songEditButtonTapped: $songEditButtonTapped).tag(0)
+                        SingingListView(songList: $songList, refreshView: $mainFetch, songEditButtonTapped: $songEditButtonTapped, listEditButtonTapped: $listEditButtonTapped).tag(1)
                     }
-                    Spacer()
+                    .tabViewStyle(.page(indexDisplayMode: .never))
+                    .edgesIgnoringSafeArea(.all)
+                    .navigationBarTitle("", displayMode: .inline)
 
-                    // MARK: 우측 상단 노래 및 리스트 추가 버튼
 
-                    if tabBarOptions[currentTab] == "전체 노래" {
-                        NavigationLink(destination: AddSongView(isPopToRoot: $isPopToRoot), isActive: self.$isPopToRoot) {
-                            Image("Songlistbuttonimage")
-                        }
-                        .isDetailLink(false)
-                    } else {
-                        Button {
-                            self.showSingingListModal = true
-                        } label: {
-                            Image(tabBarOptions[currentTab] == "전체 노래" ? "Songlistbuttonimage" : "Singinglistbuttonimage")
+                    // MARK: 커스텀된 TabBar 메뉴 버튼
+
+                    HStack {
+                        HStack {
+                            ForEach(Array(zip(self.tabBarOptions.indices,
+                                              self.tabBarOptions)),
+                                    id: \.0,
+                                    content: { index, name in
+                                TabBarItemView(tabBarItemName: name,
+                                               currentTab: self.$currentTab,
+                                               namespace: namespace.self,
+                                               tab: index)
+                            })
                         }
-                        .sheet(isPresented: $showSingingListModal) {
-                            SingingListModalView(singingListArray: $singingListArray, refreshView: $mainFetch, listEditButtonTapped: $listEditButtonTapped)
+                        Spacer()
+
+                        // MARK: 우측 상단 노래 및 리스트 추가 버튼
+
+                        if tabBarOptions[currentTab] == "전체 노래" {
+                            NavigationLink(destination: AddSongView(isPopToRoot: $isPopToRoot), isActive: self.$isPopToRoot) {
+                                Image("Songlistbuttonimage")
+                            }
+                            .isDetailLink(false)
+                        } else {
+                            Button {
+                                self.showSingingListModal = true
+                            } label: {
+                                Image(tabBarOptions[currentTab] == "전체 노래" ? "Songlistbuttonimage" : "Singinglistbuttonimage")
+                            }
+                            .sheet(isPresented: $showSingingListModal) {
+                                SingingListModalView(singingListArray: $singingListArray, refreshView: $mainFetch, listEditButtonTapped: $listEditButtonTapped)
+                            }
                         }
                     }
+                    .padding(EdgeInsets(top: geometry.safeAreaInsets.top, leading: 10, bottom: 0, trailing: UIScreen.getWidth(24)))
+                    // FIXME: - background 생략시 탭바가 아래로 밀리는 현상 발생
+                    .background(.clear)
+                    .frame(height: UIScreen.getHeight(32))
+
+                    // -------------------------------------------
                 }
-                .padding(EdgeInsets(top: 120, leading: 10, bottom: 0, trailing: 24))
-                // FIXME: - background 생략시 탭바가 아래로 밀리는 현상 발생
-                .background(.clear)
-                .frame(height: 32)
-
-                // -------------------------------------------
+                .navigationBarHidden(true)
             }
-            .navigationBarHidden(true)
         }
         .accentColor(.mainPurpleColor)
         .onAppear {

diff --git a/Semo/Views/SingingList/SingingListView.swift b/Semo/Views/SingingList/SingingListView.swift
@@ -34,12 +34,12 @@ struct SingingListView: View {
             ScrollView {
                 Divider()
                     .background(Color.grayScale6)
-                    .frame(width: 350)
+                    .frame(width: UIScreen.getWidth(350))
                 ForEach(singingList) {
                     SingingListCellView(songList: $songList, songEditButtonTapped: $songEditButtonTapped, listEditButtonTapped: $listEditButtonTapped, singingList: $0)
                     Divider()
                         .background(Color.grayScale6)
-                        .frame(width: 350)
+                        .frame(width: UIScreen.getWidth(350))
                 }
                 .padding(.top, 10)
             }

diff --git a/Semo/Views/SingingListDetail/SingingListDetailView.swift b/Semo/Views/SingingListDetail/SingingListDetailView.swift
@@ -30,13 +30,17 @@ struct SingingListDetailView: View {
         GeometryReader { _ in
             ZStack {
                 Image("backgroundImage")
-                    .ignoresSafeArea(.all)
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: UIScreen.getWidth(390), height: UIScreen.getHeight(844))
+                    .ignoresSafeArea()
                 Rectangle()
-                    .edgesIgnoringSafeArea(.all)
-                    .frame(height: UIScreen.main.bounds.height * 0.16)
+                    .foregroundColor(.grayScale6)
+                    .frame(height: UIScreen.getHeight(220))
                     .foregroundColor(listDetailEditButtonTapped == true ? .grayScale7 : .grayScale6)
                     .opacity(listDetailEditButtonTapped == true ? 1 : 0.4)
                     .padding(.bottom, 650)
+                    .ignoresSafeArea()
                 TextField("", text: $singingListTitle, onEditingChanged: { changed in
                     self.isSingingListTitleEditing = changed
                 })
@@ -64,20 +68,21 @@ struct SingingListDetailView: View {
                     ScrollView {
                         Divider()
                             .background(Color.grayScale6)
-                            .frame(width: 350)
+                            .frame(width: UIScreen.getWidth(350))
                         ForEach(singingList.songArray) {
                             SingingListDetailCellView(singingListViewFetch: $singingListViewFetch, listDetailEditButtonTapped: $listDetailEditButtonTapped, singingList: singingList, song: $0)
                             Divider()
                                 .background(Color.grayScale6)
-                                .frame(width: 350)
+                                .frame(width: UIScreen.getWidth(350))
                         }
                         .padding(.top, 10)
                         // TODO: - 이후 업데이트에서 새 노래 추가가 아닌 기존 노래 추가로 기능 변경
         //                AddSongButtonView()
                         Spacer()
                     }
                 }
-                .padding(.top, 175)
+                .padding(.top, UIScreen.getHeight(220))
+                .ignoresSafeArea()
             }
             .ignoresSafeArea(.all)
         }

diff --git a/Semo/Views/SongDetail/LevelPickerView.swift b/Semo/Views/SongDetail/LevelPickerView.swift
@@ -38,11 +38,11 @@ struct LevelPickerView: View {
                         Text("\(value)")
                             .frame(width: reader.size.width, height: reader.size.height,
                                    alignment: .center)
-                            .font(.system(size: 24, weight: .semibold))
+                            .font(.system(size: 24 * Font.setSize(), weight: .semibold))
                     }
                 }
                 .scrollAlpha(0.1)
-                .frame(width: UIScreen.main.bounds.width, height: 30, alignment: .center)
+                .frame(width: UIScreen.main.bounds.width, height: UIScreen.getHeight(30), alignment: .center)
             }
         }
     }

diff --git a/Semo/Views/SongDetail/SongDetailView.swift b/Semo/Views/SongDetail/SongDetailView.swift
@@ -34,20 +34,26 @@ struct SongDetailView: View {
     var body: some View {
         ZStack(alignment: .top) {
             Image("backgroundImage")
+                .resizable()
+                .scaledToFill()
+                .frame(width: UIScreen.getWidth(390), height: UIScreen.getHeight(844))
                 .ignoresSafeArea()
 
             Rectangle()
                 .foregroundColor(.grayScale6)
                 .opacity(0.4)
-                .frame(height: 220)
+                .frame(height: UIScreen.getHeight(220))
                 .ignoresSafeArea()
 
             // MARK: - 디테일뷰 컨텐츠
 
             VStack {
                 SongInfoView(song: song)
-                    .padding(.bottom, 46)
+                    .padding(EdgeInsets(top: 0, leading: 0, bottom: UIScreen.getHeight(40), trailing: 0))
+                Spacer()
+            }
 
+            VStack {
                 ScrollView {
                     LevelPickerView(levelIndexBase: $levelPickerIndex, levelItems: levelPickerItems)
                         .onChange(of: levelPickerIndex, perform: { _ in
@@ -59,7 +65,7 @@ struct SongDetailView: View {
 
                     TunePickerView(genderIndexBase: $genderIndex, genderItems: genderItems, tuneIndexBase: $tunePickerIndex, tuneItems: tunePickerItems)
                     // TODO: Padding 세부 간격 조절 필요
-                        .padding(.bottom, 42)
+                        .padding(.bottom, UIScreen.getHeight(42))
                         .onChange(of: genderIndex, perform: { _ in
                             if genderIndex != song.gender {
                                 isChanged = true
@@ -79,7 +85,7 @@ struct SongDetailView: View {
                         SongEditButtonView(buttonName: "추가하기", buttonWidth: 80){
                             isPresented.toggle()
                         }
-                        .padding(EdgeInsets(top: 16, leading: 0, bottom: 0, trailing: 34))
+                        .padding(EdgeInsets(top: UIScreen.getHeight(16), leading: 0, bottom: 0, trailing: UIScreen.getWidth(34)))
                     }
 
                     ForEach(song.singingListArray) {
@@ -93,7 +99,7 @@ struct SongDetailView: View {
                         self.showDeleteAlert = true
                     }, label: {
                         ConfirmButtonView(buttonName: "노래 삭제하기", buttonColor: Color.grayScale7.opacity(0.2), textColor: .red)
-                            .padding(.top, 30)
+                            .padding(.top, UIScreen.getHeight(30))
                     })
                     .alert("이 노래를 삭제하시겠습니까?", isPresented: $showDeleteAlert) {
                         Button("취소", role: .cancel) {}
@@ -103,23 +109,25 @@ struct SongDetailView: View {
                         }
                     }
                 }
+                .padding(.top, UIScreen.getHeight(220))
+                .ignoresSafeArea()
 
                 // MARK: - 상단 네비게이션 바 저장 버튼
 
                 .toolbar {
                     ToolbarItem(placement: .navigationBarTrailing) {
-                        SongEditButtonView(buttonName: "저장", buttonWidth: 50) {
+                        SongEditButtonView(buttonName: "저장", buttonWidth: UIScreen.getHeight(50)) {
                             // 노래 데이터 변경사항 코어데이터에 저장하는 코드
                             CoreDataManager.shared.updateSongAdditionalInformation(song: song, gender: genderIndex, level: levelPickerItems[levelPickerIndex], tune: tunePickerItems[tunePickerIndex])
                             print("기록 저장하기")
                             isChanged = false
                         }
-                        .padding(.trailing, 20)
+                        .padding(.trailing, UIScreen.getWidth(20))
                         .opacity(isChanged == true ? 1 : 0.2)
                         .disabled(!isChanged)
                     }
                 }
-                .padding(.bottom, 100)
+                .padding(.bottom, UIScreen.getHeight(100))
                 .toolbar {
                     ToolbarItem(placement: .navigationBarLeading) {
                         if !isChanged {
@@ -184,15 +192,15 @@ struct SongDetailView: View {
             } label: {
                 Image(systemName: "minus.circle.fill")
                     .foregroundColor(.grayScale4)
-                    .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 10))
+                    .padding(EdgeInsets(top: 0, leading: UIScreen.getWidth(20), bottom: 0, trailing: UIScreen.getWidth(10)))
             }
             HStack {
                 Text(singingList.title ?? "제목 없음")
-                    .font(.system(size: 20, weight: .semibold))
+                    .font(.system(size: 20 * Font.setSize(), weight: .semibold))
                     .foregroundColor(.white)
             }
             Spacer()
         }
-        .padding(.top, 20)
+        .padding(.top, UIScreen.getHeight(20))
     }
 }
diff --git a/Semo/Views/SongDetail/TunePickerView.swift b/Semo/Views/SongDetail/TunePickerView.swift
@@ -42,27 +42,27 @@ struct TunePickerView: View {
                 }
             }
             .pickerStyle(SegmentedPickerStyle())
-            .padding(EdgeInsets(top: 24, leading: 24, bottom: 48, trailing: 24))
+            .padding(EdgeInsets(top: UIScreen.getHeight(24), leading: UIScreen.getWidth(24), bottom: UIScreen.getHeight(48), trailing: UIScreen.getWidth(24)))
 
             // MARK: - 키 조절값 설정 Picker
 
             ZStack {
                 Circle()
                     .foregroundColor(.mainPurpleColor)
                     .opacity(0.5)
-                    .frame(width: 64, height: 64, alignment: .center)
-                    .shadow(color: .mainPurpleColor, radius: 10, x: 0, y: 0)
+                    .frame(width: UIScreen.getWidth(64), height: UIScreen.getHeight(64), alignment: .center)
+                    .shadow(color: .mainPurpleColor, radius: UIScreen.getWidth(10), x: 0, y: 0)
                 SwiftUIWheelPicker($tuneIndexBase, items: tuneItems) { value in
                     GeometryReader { reader in
                         Text("\(value)")
                             .frame(width: reader.size.width, height: reader.size.height,
                                    alignment: .center)
-                            .font(.system(size: 24, weight: .semibold))
+                            .font(.system(size: 24 * Font.setSize(), weight: .semibold))
                     }
                 }
                 .scrollAlpha(0.1)
-                .frame(width: UIScreen.main.bounds.width, height: 30, alignment: .center)
-            .padding(.horizontal, -20)
+                .frame(width: UIScreen.main.bounds.width, height: UIScreen.getHeight(30), alignment: .center)
+                .padding(.horizontal, -UIScreen.getHeight(20))
             }
         }
     }