유저가 즐겨찾기 장소를 표시할 수 있고, 즐겨찾기 장소만 볼 수 있도록 필터 기능을 만들어 봅니다.

1. 유저의 즐겨찾기 장소 표시하기

• Landmark.swift 파일에서 isFavorite 프로퍼티를 추가해줍니다.

  • Landmark 구조체가 Codable 프로토콜을 준수하기 때문에 새로운 프로퍼티를 추가해줘도 기존 Json 데이터에 같은 이름의 키만 있다면 바로 값을 읽어올 수 있다.

  struct Landmark: Hashable, Codable, Identifiable {
      var id: Int
      var name: String
      var park: String
      var state: String
      var description: String
      **var isFavorite: Bool // 즐겨찾기 여부 프로퍼티**
  ...
  

• LandmarkRow.swift 파일에서 행에 즐겨찾기 표시를 추가해준다.

  struct LandmarkRow: View {
      var landmark: Landmark
      
      var body: some View {
          HStack {
              landmark.image // landmark.image는 Image() 뷰임
                  .resizable()
                  .frame(width: 50, height: 50)
              Text(landmark.name)
              
              Spacer() // 랜드마크 정보를 행의 왼쪽으로 밀어주기 위해 넣어줌
              
              **if landmark.isFavorite {
                  Image(systemName: "star.fill")
                      .foregroundColor(.yellow)
              }**
          }
      }
  }
  

  

2. 리스트 뷰에 필터링 적용하기

• 즐겨찾기 여부에 따른 필터링을 적용하기 위해 LandmarkList 타입에 state 변수를 추가해주어야 합니다.
• LandmarkList.swift 파일에 state 변수를 활용한 필터링 기능을 넣어줍니다.

// LandmarkList.swift
import SwiftUI

struct LandmarkList: View {
    **@State private var showFavoritesOnly = false // 즐겨찾기 여부에 따른 필터링을 위한 state 변수**
    
    **var filteredLandmarks: [Landmark] {
        landmarks.filter { landmark in
            /*
             showFavoritesOnly가 true면 landmark.isFavorite==true인 랜드마크만
             showFavoritesOnly가 true면 모든 랜드마크
             */
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }**
    
    var body: some View {
        NavigationView { // 리스트를 내비게이션 뷰에 임베드 해줍니다.
            // List의 클로저에 LandmarkDetail() 뷰를 목적지로 하는 NavigationLink를 연결해줍니다.
            List(**filteredLandmarks**) { landmark in
                NavigationLink {
                    LandmarkDetail(landmark: landmark)
                } label: {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationTitle("Landmarks") // 내비게이션 바의 제목을 설정해줍니다.
        }
    }
}

• showFavoritesOnly를 true로 바꿔주면 필터링이 적용된 것을 볼 수 있습니다.

3. 즐겨찾기만 보기 위한 Toggle 스위치 추가해주기

• List 안에 Toggle 스위치를 넣어줘서 기존의 리스트 뷰의 위에 붙여줍니다.
• Toggle 스위치에 state 변수인 showFavoritesOnly를 바인딩 해줍니다.
• ForEach문 참고 : https://seons-dev.tistory.com/entry/SwiftUI-ForEach

**// LandmarkList.swift**
import SwiftUI

struct LandmarkList: View {
    @State private var showFavoritesOnly = false // 즐겨찾기 여부에 따른 필터링을 위한 state 변수
    
    var filteredLandmarks: [Landmark] {
        landmarks.filter { landmark in
            /*
             showFavoritesOnly가 true면 landmark.isFavorite==true인 랜드마크만
             showFavoritesOnly가 true면 모든 랜드마크
             */
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }
    
    var body: some View {
        NavigationView { // 리스트를 내비게이션 뷰에 임베드 해줍니다.
            ****// List의 클로저에 LandmarkDetail() 뷰를 목적지로 하는 NavigationLink를 연결해줍니다.
            **List {
                Toggle(isOn: $showFavoritesOnly) {
                    Text("Favorites only")
                }
                
                ForEach(filteredLandmarks) { landmark in
                    NavigationLink {
                        LandmarkDetail(landmark: landmark)
                    } label: {
                        LandmarkRow(landmark: landmark)
                    }
                }
            }**
            .navigationTitle("Landmarks") // 내비게이션 바의 제목을 설정해줍니다.
        }
    }
}

4. 스토리지에 저장하기 위해 Observable Object 사용하기