테이블 뷰 만들기

UIKit으로 해야 할 것 같았지만
너무 무지해서.. SwiftUI로..!ㅜㅜ

1. 테이블 뷰 만들기 실습

하나의 테이블 뷰를 만들고, 5개의 항목을 추가하세요.
각 항목을 클릭했을 때 그 항목의 이름이 화면에 표시되도록 하세요.

import SwiftUI

struct ContentView: View {
    let fruits = ["사과", "바나나", "딸기", "수박", "귤"] 
    // 변수의 값이 바뀌지 않으니 let 사용하여 배열 구현
    
    @State private var selectedItem: String? = nil
    // 사용자가 선택한 과일을 저장하는 상태 변수
    // 처음에는 아무것도 선택하지 않았기 때문에 nil로 초기화
    @State private var showingAlert = false
    // 알림(Alert)을 보여줄지 말지를 결정하는 플래그
    // true가 되면 알림이 표시되고 false면 숨김

    var body: some View {
        NavigationView { 
            List(fruits, id: \.self) { fruit in
            // fruits라는 배열을 이용해서 리스트 생성
            // id: \.self는 항목의 고유 식별자를 값 자체로 사용한다는 뜻임 (문자열이기 때문에 가능)
                Text(fruit)
                // 각 항목을 Text로 표현
                    .onTapGesture {
                    // 탭 했을 때 동작
                        selectedItem = fruit
                        // selectedItem에 선택된 item 저장
                        showingAlert = true
                        // showingAlert를 true로 변경해서 알림을 띄움
                    }
            }
            .navigationTitle("과일 목록")
            // NavigationView 상단에 표시할 제목 설정
            .alert(isPresented: $showingAlert) {
            // showingAlert가 true일 때 
                Alert(
                    title: Text("선택한 항목"),
                    message: Text(selectedItem ?? ""),
                    // selectedItem을 메시지로 표시, 만약 선택하지 않았다면 빈문자열 표시
                    dismissButton: .default(Text("확인"))
                    // 확인 버튼, 누르면 알림 사라지게 구현
                )
            }
        }
    }
}

#Preview {
    ContentView()
}

2. 네비게이션 바 추가하기

네비게이션 바를 추가하고, "다음 화면으로" 버튼을 눌렀을 때 새로운 화면으로 이동하게 구현하세요.
이동한 화면에서 "뒤로" 버튼으로 원래 화면으로 돌아오도록 하세요.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
        // 화면 이동할 수 있게
        // 상단에 제목 표기 가능
            VStack(spacing: 20) {
            // 수직으로 뷰 나열, 뷰들 사이 간격 20
                Text("MainView")
                    .font(.title)

                NavigationLink(destination: NextView()) {
                // 다른 화면으로 이동할 수 있는 링크
                // destination: NextView() : 버튼을 누르면 다음 뷰로 넘어감
                    Text("다음 화면으로")
                        .font(.title3)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("네비게이션 예제")
            // 제목
        }
    }
}

struct NextView: View {
    var body: some View {
        VStack {
            Text("다음 화면")
                .font(.largeTitle)
        }
        .navigationTitle("NextView")
        .navigationBarTitleDisplayMode(.inline)
    }
} // 이동되는 뷰

3. 배열을 사용한 데이터 관리

배열에 3가지 과일 이름을 저장하고, 테이블 뷰에 그 배열의 내용을 표시하세요.
새로운 과일을 추가할 수 있도록 입력 필드를 추가하고, 추가된 과일이 테이블 뷰에 반영되도록 만드세요.

import SwiftUI

struct ContentView: View {
    @State private var fruits = ["사과", "바나나", "딸기"]
    // 과일 이름 담을 배열 생성
    // @State 선언해서 화면에 표시되는 값이 변할 때 UI를 자동으로 업데이트
    @State private var newFruit = ""
    // newFruit : TextField에 입력되는 새로운 과일

    var body: some View {
        NavigationView {
            VStack() {
                HStack {
                    TextField("과일 이름 입력...", text: $newFruit)
                    // 사용자가 새로운 과일을 입력하는 필드
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding(.horizontal)

                    Button(action: {
                    // 버튼을 누르면
                        if !newFruit.isEmpty {
                        // newFruit가 비어있지 않으면
                            fruits.append(newFruit)
                            // neFruit를 배열에 추가해 줌
                            newFruit = ""
                            // 입력창 초기화
                        }
                    }) {
                        Text("추가")
                            .padding(.horizontal, 12)
                            .padding(.vertical, 8)
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                }
                .padding(.horizontal, 10)

                List(fruits, id: \.self) { fruit in
                // fruits 배열을 List로 표현
                // id: \.self : 고유값을 각 문자열로
                    Text(fruit)
                }
                Spacer()
            }
            .navigationTitle("과일 목록")
        }
    }
}

#Preview {
    ContentView()
}