SwiftUI / Team Project 6

-팀 프로젝트 회의-

• 앱 기획안의 제작방식 회의
• 멤버별 UI 할당
• 개인별 제작

회의 내용

개발 입문자를 위한 학습 앱(가명: parSta!)의 뷰 구현 방식에 대해 회의하고, 팀 멤버가 만들어준 UI를 보며 수정이 필요한 부분, 추가 및 보완할 부분에 대해 회의를 진행했다. 이후 멤버별로 파트를 나눠 구현할 뷰를 배분하였고, 오늘부터 프로젝트 제작을 진행하기로 하였다.

---

-제작을 맡은 뷰-

내가 제작을 맡은 부분은 Swift에 대한 사전 부분과, 이를 리스트로 정리하여 Menu로 구현하는 두가지 일을 맡았다.

SwiftDataDetailView	SwiftDataMenuView

---

-진행내용-

ViewReview

SwiftDataDetailView
해당 뷰를 맡은 이유는 아직 사이드메뉴를 구현해본 적이 없기에 실력을 늘리기 위해 시도해보고 싶었기 때문이다.
코드 작성을 시작할 때 고려한 점은 아래와 같다.

• 본 뷰는 NavigationLink를 통해 넘어오는 뷰임을 감안하여 구현
• 뷰에 나타날 Swift의 정보를 저장할 별도의 로컬 DB 작성
• Prev, Next를 눌렀을 때 데이터 값을 변화

1. SwiftData 타입 생성

먼저 swift에 대해 데이터를 저장할 구조체를 선언하였다.

import SwiftUI
import Foundation

struct SwiftData: Hashable {
    var title: String
    var content: String
    var id: Int
}

2. SwiftData 타입 선언 및 저장

다음으로 SwiftData타입을 가진 상수를 선언하고, 이를 모두 저장하는 배열을 생성한다.

import Foundation

let theBasics: SwiftData = SwiftData(title: "Constants and Variables",
                                     content: "Constants and variables associate a name...중략",
                                     id: 0)

let basicOperators: SwiftData = SwiftData(title: "Basic Operators",
                                          content: "Operators are unary, binary, or ternary:Unary...중략",
                                          id: 1)

let stringsAndCharacters: SwiftData = SwiftData(title: "Strings and Characters",
                                                content: "A string is a series of characters, such as \"hello, world\" or \"albatross\"...중략",
                                                id: 2)

let collectionType: SwiftData = SwiftData(title: "Collection Types",
                                          content: "Swift provides three primary collection types...중략", id: 3)

let controlFlow: SwiftData = SwiftData(title: "Control Flow",
                                       content: "Swift provides a variety of control flow statements...중략", id: 4)

let swiftDataSet: [SwiftData] = [theBasics,
                                 basicOperators,
                                 stringsAndCharacters,
                                 collectionType,
                                 controlFlow]

3. 초기 설정

SwiftDataDetailView로 돌아와 SwiftData에 저장된 정보를 불러오기 위한 초기 설정을 해준다.

import SwiftUI

struct ContentView: View {
    
    private var swiftData: [SwiftData] = swiftDataSet // SwiftData 정보를 불러오기
    @State private var id: Int = 0 // id 값의 변화에 따라 SwiftData 값 변경

4. 타이틀과 Contents의 호출 설정

어느 조건에서 어떤 데이터가 화면에 보일 것인지 설정한다.
이번 코드의 경우, 위에서 선언한 swiftData라는 배열의 인덱스값으로 id를 사용하고 해당 값의 프로퍼티(title, content)를 가져오는 방식을 사용했다.

Text(swiftData[self.id].title) // 현재 id의 값에 따른 title 값 가져오기
	.font(.system(size: 20))
	.fontWeight(.medium)
	.padding(.bottom, 30)
                
ScrollView {
	Text(swiftData[self.id].content) // 현재 id의 값에 따른 content 값 가져오기
		.font(.system(size: 15))
		.fontWeight(.light)
		.lineSpacing(2)
		.padding(10)
	}
	.frame(maxWidth: .infinity, maxHeight: 450)
	.padding(.bottom, 10)

5. Prev, Next 버튼 설정

뷰에 보여질 SwiftData값을 변경하기 위한 버튼으로 Prev, Next 버튼을 만들고, 이를 .onTapGesture를 사용하여 작동하도록 구현하였다.

HStack(spacing: 0) {
	Text("< Prev")
		.font(.system(size: 15))
		.fontWeight(.semibold)
		.foregroundStyle(Color.blue)
		.onTapGesture {
			withAnimation {
            	// id의 값은 음수가 되면 안된다
                // 때문에 Prev 버튼을 눌렀을 때 id의 값이 0과 같거나 작은 경우 swiftData의 마지막 인덱스값으로 이동하게 한다.
				if self.id <= 0 {
					self.id = swiftData.count - 1 
				} else {
					self.id -= 1
				}
			}
		}
        
	Spacer()
                    
	Text("Next >")
		.font(.system(size: 15))
		.fontWeight(.semibold)
		.foregroundStyle(Color.blue)
		.onTapGesture {
			withAnimation {
            	// id의 값이 swiftData의 멤버 수보다 커지면 안된다.
                // 때문에 id의 값이 swiftData의 멤버 수와 같거나 큰 경우 id의 값을 0으로 초기화 시킨다.
				if self.id >= swiftData.count - 1 {
					self.id = 0
				} else {
					self.id += 1
				}
			}
		}
}

6. 구현 결과물

화면 구성	Prev 버튼 클릭	Next 버튼 클릭

---

-오늘의 학습 후기-

오늘은 이전 프로젝트인 카페앱UI 구현을 그만두고 새로운 프로젝트를 시작하였다.
회의를 통해 의견을 나누고 이를 UI로 나타내는 과정에서 작은 분쟁이 있기도 했지만, 실제 앱개발을 하게되면 앞으로 자주 겪게 될 일이라고 생각하며 회의 과정을 머릿속에 담았다.
회의결과 일단은 멤버별로 구현할 뷰를 나누고 이를 구현하는 것을 우선적으로 진행하자는 결론이 나왔기 때문에 제작할 뷰를 할당받게 되었다.
나는 내가 직접 선택하였는데, 한번도 구현해본 적이 없던 사이드메뉴를 구현해보고 싶었기 때문이다.
오늘은 사이드메뉴를 구현해보지 않았지만, 이후에는 사이드메뉴를 구현하고 swiftData의 샘플을 추가하며 뷰를 보다 깔끔하게 정리할 예정이다.