Feat/add singing list edit view

Semo/Extensions/ViewExtension.swift

@@ -15,18 +15,24 @@ extension View {
     /// 텍스트 필드 밑줄 커스텀 및 입력 여부에 따라 색이 변화합니다.
     /// - Parameter isEditing: 텍스트 필드 편집 여부 확인
     /// - Parameter isFull: 텍스트 필드 공백 여부 확인
+    /// - Parameter inset: 텍스트와 밑줄 간의 간격
+    /// - Parameter active: 밑줄 활성화 여부
     /// - Returns: 텍스트 필드 뷰
-    func underlineTextField(isEditing : Bool, isFull: Bool) -> some View {
+    func underlineTextField(isEditing : Bool, isFull: Bool, inset: CGFloat, active: Bool = true) -> some View {
         var lineColor: Color = Color.grayScale4
         if isEditing == true {
             lineColor = Color.mainPurpleColor
         }
         if isFull == true && isEditing == false {
             lineColor = Color.grayScale2
         }
+        if active == false {
+            lineColor = Color.clear
+        }
         return self
-            .padding(.vertical, 10)
-            .overlay(Rectangle().frame(height: 2).padding(.top, 35))
+        //TODO: - 불필요한 패딩값 삭제
+//            .padding(.vertical, 10)
+            .overlay(Rectangle().frame(height: 2).padding(.top, inset))
             .padding(10)
             .foregroundColor(lineColor)
     }

Semo/Views/MainView.swift

@@ -9,8 +9,8 @@ import SwiftUI
 
 struct MainView: View {
     @State var currentTab: Int = 0
-    @State var songEditButtonTap: Bool = false
-    @State var listEditButtonTap: Bool = false
+    @State var songEditButtonTapped: Bool = false
+    @State var listEditButtonTapped: Bool = false
     @State var songList: [Song] = CoreDataManager.shared.fetchSongList() ?? []
 
     // MARK: - BODY
@@ -22,8 +22,8 @@ struct MainView: View {
 
                 // MARK: - 상단 탭바
                 TabView(selection: self.$currentTab) {
-                    SongListView(refresh: $currentTab, songEditButtonTap: $songEditButtonTap).tag(0)
-                    SingingListView(refresh: $currentTab, songEditButtonTap: $songEditButtonTap, listEditButtonTap: $listEditButtonTap).tag(1)
+                    SongListView(refresh: $currentTab, songEditButtonTap: $songEditButtonTapped).tag(0)
+                    SingingListView(refresh: $currentTab, songEditButtonTapped: $songEditButtonTapped, listEditButtonTapped: $listEditButtonTapped).tag(1)
                 }
                 .tabViewStyle(.page(indexDisplayMode: .never))
                 .edgesIgnoringSafeArea(.all)

Semo/Views/Others/TextFieldView.swift

@@ -34,7 +34,7 @@ struct TextFieldView: View {
             }
             .foregroundColor(.white)
         }
-        .underlineTextField(isEditing: isEditing, isFull: !text.isEmpty)
+        .underlineTextField(isEditing: isEditing, isFull: !text.isEmpty, inset: 35)
     }
 }
 
@@ -52,7 +52,7 @@ struct SingListTitleTextFieldView: View {
             }
             .foregroundColor(.white)
         }
-        .underlineTextField(isEditing: isSingingListTitleEditing, isFull: !singingListTitle.isEmpty)
+        .underlineTextField(isEditing: isSingingListTitleEditing, isFull: !singingListTitle.isEmpty, inset: 35)
     }
 }
 

Semo/Views/SingingList/DeleteSingingListButtonView.swift

@@ -9,7 +9,7 @@ import SwiftUI
 
 struct DeleteSingingListButtonView: View {
     @State var showDeleteAlert: Bool = false
-    @Binding var listEditButtonTap: Bool
+    @Binding var listEditButtonTapped: Bool
 
     var singingList: SingingList
 
@@ -26,7 +26,7 @@ struct DeleteSingingListButtonView: View {
             Button("삭제", role: .destructive) {
                 // TODO: - 리스트 삭제 코드
                 CoreDataManager.shared.deleteSingingList(singingList: singingList)
-                listEditButtonTap = false
+                listEditButtonTapped = false
             }
         }
     }

Semo/Views/SingingList/SingingListCellView.swift

@@ -9,8 +9,8 @@ import SwiftUI
 
 struct SingingListCellView: View {
     @Binding var refresh: Int
-    @Binding var songEditButtonTap: Bool
-    @Binding var listEditButtonTap: Bool
+    @Binding var songEditButtonTapped: Bool
+    @Binding var listEditButtonTapped: Bool
 
     var singingList: SingingList
 
@@ -19,14 +19,14 @@ struct SingingListCellView: View {
         Button {
         } label: {
             HStack {
-                if listEditButtonTap == true {
-                    DeleteSingingListButtonView(listEditButtonTap: $listEditButtonTap, singingList: singingList)
+                if listEditButtonTapped == true {
+                    DeleteSingingListButtonView(listEditButtonTapped: $listEditButtonTapped, singingList: singingList)
                         .padding(.trailing, 8)
                         .transition(.move(edge: .leading))
                     // TODO: - animation(_:value:)로 변경
                         .animation(.easeInOut)
                 }
-                NavigationLink(destination: SingingListDetailView(listEditButtonTap: $listEditButtonTap, songEditButtonTap: $songEditButtonTap, singingList: singingList)) {
+                NavigationLink(destination: SingingListDetailView(listEditButtonTapped: $listEditButtonTapped, songEditButtonTapped: $songEditButtonTapped, singingList: singingList, singingListTitle: singingList.title ?? "제목없음")) {
                     // MARK: - 노래 정보 표시
                     VStack(alignment: .leading, spacing: 10) {
                         Text(singingList.title ?? "제목없음")
@@ -44,7 +44,7 @@ struct SingingListCellView: View {
                         .scaledToFit()
                         .foregroundColor(.grayScale1)
                 }
-                .disabled(listEditButtonTap)
+                .disabled(listEditButtonTapped)
             }
             .padding(.horizontal, 20)
         }

Semo/Views/SingingList/SingingListView.swift

@@ -11,8 +11,8 @@ struct SingingListView: View {
     @Environment(\.managedObjectContext) private var viewContext
     @FetchRequest(sortDescriptors: [NSSortDescriptor(keyPath: \SingingList.timestamp, ascending: true)], animation: .default) private var singingList: FetchedResults<SingingList>
     @Binding var refresh: Int
-    @Binding var songEditButtonTap: Bool
-    @Binding var listEditButtonTap: Bool
+    @Binding var songEditButtonTapped: Bool
+    @Binding var listEditButtonTapped: Bool
 
     // MARK: - BODY
     var body: some View {
@@ -25,7 +25,7 @@ struct SingingListView: View {
                     .fontWeight(.medium)
                 Spacer()
                 SongEditButtonView(buttonName: "리스트 편집", buttonWidth: 93) {
-                    self.listEditButtonTap.toggle()
+                    self.listEditButtonTapped.toggle()
                 }
             }
             .padding(EdgeInsets(top: 15, leading: 20, bottom: 15, trailing: 30))            
@@ -35,7 +35,7 @@ struct SingingListView: View {
                     .background(Color.grayScale6)
                     .frame(width: 350)
                 ForEach(singingList) {
-                    SingingListCellView(refresh: $refresh, songEditButtonTap: $songEditButtonTap, listEditButtonTap: $listEditButtonTap, singingList: $0)
+                    SingingListCellView(refresh: $refresh, songEditButtonTapped: $songEditButtonTapped, listEditButtonTapped: $listEditButtonTapped, singingList: $0)
                     Divider()
                         .background(Color.grayScale6)
                         .frame(width: 350)
@@ -46,13 +46,7 @@ struct SingingListView: View {
         }
         .padding(.top, 80)
         .onDisappear {
-            self.listEditButtonTap = false
+            self.listEditButtonTapped = false
         }
     }
 }
-
-//struct SingingListView_Preview: PreviewProvider {
-//    static var previews: some View {
-//        SingingListView()
-//    }
-//}

Semo/Views/SingingListDetail/SingingListDetailCellView.swift

@@ -9,7 +9,9 @@ import SwiftUI
 
 struct SingingListDetailCellView: View {
     @Binding var songEditButtonTap: Bool
+
     var singingList: SingingList
+
     // MARK: - BODY
     var body: some View {
         VStack {
@@ -29,14 +31,14 @@ struct SingingListDetailCellView: View {
                     .background(Color.grayScale6)
                     .frame(width: 350)                
                 ForEach(singingList.songArray) {
-                    // TODO: coreData에서 가져온 데이터 넣어주기
                     SongListCellView(songEditButtonTap: $songEditButtonTap, song: $0)
                     Divider()
                         .background(Color.grayScale6)
                         .frame(width: 350)
                 }
                 .padding(.top, 10)
-                AddSongButtonView()
+                // TODO: - 이후 업데이트에서 새 노래 추가가 아닌 기존 노래 추가로 기능 변경
+//                AddSongButtonView()
                 Spacer()
 
             }

Semo/Views/SingingListDetail/SingingListDetailView.swift

@@ -10,49 +10,92 @@ import SwiftUI
 struct SingingListDetailView: View {
     @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
     @GestureState private var dragOffset = CGSize.zero
-    @Binding var listEditButtonTap: Bool
-    @Binding var songEditButtonTap: Bool
-
+    @State var isSingingListTitleEditing: Bool = false
+    @State private var showSaveAlert: Bool = false
+    @Binding var listEditButtonTapped: Bool
+    @Binding var songEditButtonTapped: Bool
+
     var singingList: SingingList
 
+    @State var singingListTitle: String {
+        willSet {
+            singingListTitle = singingList.title ?? "제목없음"
+        }
+    }
+
     // MARK: - BODY
     var body: some View {
         ZStack {
             Image("backgroundImage")
                 .edgesIgnoringSafeArea(.vertical)
-            VStack {
-                Rectangle()
-                    .edgesIgnoringSafeArea(.all)
-                    .frame(height: UIScreen.main.bounds.height * 0.12)
-                    .foregroundColor(listEditButtonTap == true ? .grayScale7 : .grayScale6)
-                    .opacity(listEditButtonTap == true ? 1 : 0.4)
-                Spacer()
+            Rectangle()
+                .edgesIgnoringSafeArea(.all)
+                .frame(height: UIScreen.main.bounds.height * 0.16)
+                .foregroundColor(songEditButtonTapped == true ? .grayScale7 : .grayScale6)
+                .opacity(songEditButtonTapped == true ? 1 : 0.4)
+                .padding(.bottom, 700)
+            TextField("", text: $singingListTitle, onEditingChanged: { changed in
+                self.isSingingListTitleEditing = changed
+            })
+            .font(.system(size: 28, weight: .semibold))
+            .foregroundColor(.white)
+            .placeholder(when: singingListTitle.isEmpty) {
+                Text(singingList.title ?? "제목없음")
+                    .font(.system(size: 28, weight: .semibold))
+                    .foregroundColor(.grayScale2)
             }
-            SingingListDetailCellView(songEditButtonTap: $songEditButtonTap, singingList: singingList)
+            .disabled(!songEditButtonTapped)
+            .underlineTextField(isEditing: isSingingListTitleEditing, isFull: !singingListTitle.isEmpty, inset: 55, active: songEditButtonTapped)
+            .padding(.horizontal, 10)
+            .padding(.bottom, 650)
+            SingingListDetailCellView(songEditButtonTap: $songEditButtonTapped, singingList: singingList)
+                .padding(.top, 35)
         }
-        // TODO: - navigationtitle 폰트 크기, 굵기 수정(커스텀으로만 가능)
-        .navigationBarTitle(singingList.title ?? "제목 없음")
-        .navigationBarTitleDisplayMode(.large)
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
-                SongEditButtonView(buttonName: listEditButtonTap == true ? "완료" : "편집", buttonWidth: 50) {
-                    self.listEditButtonTap.toggle()
+                SongEditButtonView(buttonName: songEditButtonTapped == true ? "완료" : "편집", buttonWidth: 50) {
+                    self.songEditButtonTapped.toggle()
                 }
                 .padding(.trailing, 20)
             }
         }
         .toolbar {
             ToolbarItem(placement: .navigationBarLeading) {
-                CustomBackButton(buttonName: "") {
-                    self.presentationMode.wrappedValue.dismiss()
+                if songEditButtonTapped == false {
+                    CustomBackButton(buttonName: "") {
+                        self.presentationMode.wrappedValue.dismiss()
+                    }
+                    .navigationBarBackButtonHidden(true)
+                } else {
+                    Button {
+                        self.showSaveAlert = true
+                        print("리스트 편집 그만하기")
+                    } label: {
+                        Image(systemName: "xmark")
+                            .font(.system(size: 16, weight: .medium))
+                            .foregroundColor(.white)
+                    }
+                    .navigationBarBackButtonHidden(true)
+                    .alert("변경사항을 저장하시겠습니까?", isPresented: $showSaveAlert) {
+                        Button("아니요", role: .cancel) {
+                            self.presentationMode.wrappedValue.dismiss()
+                        }
+                        Button("저장", role: .none) {
+                            // TODO: - 리스트 데이터 변경사항 코어데이터에 저장하는 코드
+                            self.presentationMode.wrappedValue.dismiss()
+                        }
+                    }
                 }
-                .navigationBarBackButtonHidden(true)
             }
         }
         .gesture(DragGesture().updating($dragOffset) { (value, state, transaction) in
             if (value.startLocation.x < 30 && value.translation.width > 100) {
+                // TODO: - 변경된 값이 있는 경우 swipeback alert 띄우기
                 self.presentationMode.wrappedValue.dismiss()
             }
         })
+        .onDisappear {
+            self.songEditButtonTapped = false
+        }
     }
 }