Skip to content

Commit

Permalink
Refactor: Section 2.6. update
Browse files Browse the repository at this point in the history
### Motivation
- Section 2.6. Set Up Navigation Between List and Detail

### Key Changes
- Section 2.6. Set Up Navigation Between List and Detail 예제 코드 및 주석 추가

### To Reviewers
- 없음
  • Loading branch information
garlicvread committed Aug 11, 2022
1 parent 85cd835 commit 2e3456f
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 48 deletions.
4 changes: 4 additions & 0 deletions tutorial.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
941CE6C828A4B83C00484938 /* ModelData.swift in Sources */ = {isa = PBXBuildFile; fileRef = 941CE6C728A4B83C00484938 /* ModelData.swift */; };
941CE6CC28A4BC7900484938 /* LandmarkRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 941CE6CB28A4BC7900484938 /* LandmarkRow.swift */; };
941CE6CE28A4C2E400484938 /* LandmarkList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 941CE6CD28A4C2E400484938 /* LandmarkList.swift */; };
941CE6D028A4CC5E00484938 /* LandmarkDetail.swift in Sources */ = {isa = PBXBuildFile; fileRef = 941CE6CF28A4CC5E00484938 /* LandmarkDetail.swift */; };
9D5E3EBA280475CB0076AFDF /* tutorialApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9D5E3EB9280475CB0076AFDF /* tutorialApp.swift */; };
9D5E3EBC280475CB0076AFDF /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9D5E3EBB280475CB0076AFDF /* ContentView.swift */; };
9D5E3EC1280475CC0076AFDF /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 9D5E3EC0280475CC0076AFDF /* Preview Assets.xcassets */; };
Expand All @@ -31,6 +32,7 @@
941CE6C728A4B83C00484938 /* ModelData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModelData.swift; sourceTree = "<group>"; };
941CE6CB28A4BC7900484938 /* LandmarkRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LandmarkRow.swift; sourceTree = "<group>"; };
941CE6CD28A4C2E400484938 /* LandmarkList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LandmarkList.swift; sourceTree = "<group>"; };
941CE6CF28A4CC5E00484938 /* LandmarkDetail.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LandmarkDetail.swift; sourceTree = "<group>"; };
9D5E3EB6280475CB0076AFDF /* SwiftUITutorialWithNotes.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = SwiftUITutorialWithNotes.app; sourceTree = BUILT_PRODUCTS_DIR; };
9D5E3EB9280475CB0076AFDF /* tutorialApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = tutorialApp.swift; sourceTree = "<group>"; };
9D5E3EBB280475CB0076AFDF /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -66,6 +68,7 @@
941CE6C128A499BD00484938 /* MapView.swift */,
941CE6CB28A4BC7900484938 /* LandmarkRow.swift */,
941CE6CD28A4C2E400484938 /* LandmarkList.swift */,
941CE6CF28A4CC5E00484938 /* LandmarkDetail.swift */,
);
path = Views;
sourceTree = "<group>";
Expand Down Expand Up @@ -194,6 +197,7 @@
940ECDAE28A37ECF00092638 /* MainContentView.swift in Sources */,
941CE6C628A4B42100484938 /* Landmark.swift in Sources */,
941CE6CC28A4BC7900484938 /* LandmarkRow.swift in Sources */,
941CE6D028A4CC5E00484938 /* LandmarkDetail.swift in Sources */,
941CE6C828A4B83C00484938 /* ModelData.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down
Binary file not shown.
3 changes: 1 addition & 2 deletions tutorial/Views/CircleImage.swift
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,4 @@ struct CircleImage_Previews: PreviewProvider {
}
}

// 이제 MapView.swift 파일을 만들어야 한다.
// MapView.swift는 SwiftUIView를 위한 파일이다.
// 주석 1.4.7.까지 따라왔다면 MapView.swift 파일로 이동하자.
65 changes: 65 additions & 0 deletions tutorial/Views/LandmarkDetail.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
//
// LandmarkDetail.swift
// tutorial
//
// Created by 김제필 on 8/11/22.
//

// MainContentView.swift 파일의 안내에 따라 왔다면 주석 1.6.10의 내용을 확인한 후 CircleImage.swift 파일로 이동하자.

import SwiftUI

struct LandmarkDetail: View {
var body: some View {

// 2.6.2. MainContentView 코드를 복붙해옴
// 이제 MainContentView의 내용을 변경하러 가자

// 1.6.2. 기존 VStack을 감쌀 새 VStack 삽입
VStack {
// 1.6.3. MapView 가져오기, 1.6.4. 리이브 프리뷰로 확인
MapView()
.ignoresSafeArea(edges: .top) // 1.6.8. safe area 무시 옵션 추가
.frame(height: 300)

CircleImage() // 1.6.5. CircleImage 뷰 추가
.offset(y: -130) // 1.6.6. y축 offset 값 -130으로 설정 -> MapView 위에 CircleImage를 겹쳐 표시
.padding(.bottom, -130) // 1.6.6. 하단 padding값도 -130으로 설정 -> 아래 텍스트 뷰와의 거리 조절

// 1.3.1., 1.3.2. VStack 추가
VStack(alignment: .leading) { // 1.3.5. alignment 옵션 추가
Text("Turtle Rock")
.font(.title)

// 1.3.6. HStack 추가
HStack {
Text("Joshua Tree National Park") // 1.3.3. TextView의 placeholder 변경
// .font(.subheadline) // 1.3.4. 폰트 변경

Spacer() // 1.3.8. Spacer 추가

Text("California") // 1.3.7. TextView 추가
// .font(.subheadline)
}
.font(.subheadline) // 1.6.10. 폰트 설정 이동
.foregroundColor(.secondary) // 1.6.10. 폰트 색상 변경

Divider() // 1.6.9. divider 및 기타 정보를 표시하는 Text 추가

Text("About Turtle Rock")
.font(.title2)

Text("Descriptive text goes here.")
}
.padding() // 1.3.9. 패딩 추가

Spacer() // 1.6.7. Spacer 추가 -> 전체 오브젝트를 화면 상단으로 배치
}
}
}

struct LandmarkDetail_Previews: PreviewProvider {
static var previews: some View {
LandmarkDetail()
}
}
16 changes: 13 additions & 3 deletions tutorial/Views/LandmarkList.swift
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,17 @@ struct LandmarkList: View {
// // 2.5.2. 항목까지 따라왔으면 이제 Landmark.swift 파일로 가 보자
// }

// 2.5.4. 두 번째 방식 코딩: 코드가 더 간결해짐
List(landmarks) { landmark in
LandmarkRow(landmark: landmark)
// 2.6.4. List를 NavigationView 안으로 재배치
NavigationView {
// 2.5.4. 두 번째 방식 코딩: 코드가 더 간결해짐
List(landmarks) { landmark in
NavigationLink { // 2.6.6. NavigationLink 내 반환되는 row를 래핑하고 목적지를 LandmarkDetail로 명시
LandmarkDetail()
} label: {
LandmarkRow(landmark: landmark)
}
}
.navigationTitle("Landmarks") // 2.6.5. navigationTitle(_ :) modifier 메서드 호출
}
}
}
Expand All @@ -38,3 +46,5 @@ struct LandmarkList_Previews: PreviewProvider {
LandmarkList()
}
}

// 2.6.6. 항목까지 따라왔으면 이제 CircleImage.swift로 이동한다
47 changes: 4 additions & 43 deletions tutorial/Views/MainContentView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,12 @@ import Foundation
import SwiftUI

// View 프로토콜 렌더링을 위한 구조체(Structure)
// 2.6.3 작업으로 인해 원래 있던 내용이 LandmarkDetail.swift 파일로 이동되었다.
// 1.5. Use SwiftUI Views From Other Frameworks 섹션 다음 작업을 위해 이 파일로 왔다면 LandmarkDerail.swift 파일로 가보자.
struct MainContentView: View {
var body: some View {
// 1.6.2. 기존 VStack을 감쌀 새 VStack 삽입
VStack {
// 1.6.3. MapView 가져오기, 6.4. 리이브 프리뷰로 확인
MapView()
.ignoresSafeArea(edges: .top) // 1.6.8. safe area 무시 옵션 추가
.frame(height: 300)

CircleImage() // 1.6.5. CircleImage 뷰 추가
.offset(y: -130) // 1.6.6. y축 offset 값 -130으로 설정 -> MapView 위에 CircleImage를 겹쳐 표시
.padding(.bottom, -130) // 1.6.6. 하단 padding값도 -130으로 설정 -> 아래 텍스트 뷰와의 거리 조절

// 1.3.1., 1.3.2. VStack 추가
VStack(alignment: .leading) { // 1.3.5. alignment 옵션 추가
Text("Turtle Rock")
.font(.title)

// 1.3.6. HStack 추가
HStack {
Text("Joshua Tree National Park") // 1.3.3. TextView의 placeholder 변경
// .font(.subheadline) // 1.3.4. 폰트 변경

Spacer() // 1.3.8. Spacer 추가

Text("California") // 1.3.7. TextView 추가
// .font(.subheadline)
}
.font(.subheadline) // 1.6.10. 폰트 설정 이동
.foregroundColor(.secondary) // 1.6.10. 폰트 색상 변경

Divider() // 1.6.9. divider 및 기타 정보를 표시하는 Text 추가

Text("About Turtle Rock")
.font(.title2)

Text("Descriptive text goes here.")
}
.padding() // 1.3.9. 패딩 추가

Spacer() // 1.6.7. Spacer 추가 -> 전체 오브젝트를 화면 상단으로 배치
}
LandmarkList() // 2.6.3. 기존 내용을 LandmarkDetail.swift로 옮기고 LandmarkList를 불러옴
// 2.6.3. 항목 이후 LandmarkList.swift 파일로 이동

}
}
Expand All @@ -61,6 +25,3 @@ struct MainContentView_Previews: PreviewProvider {
MainContentView()
}
}

// 이제 CircleImage.swift 파일을 작성한다.
// CircleImage.swift 파일은 SwiftUIView를 위한 파일이다.

0 comments on commit 2e3456f

Please sign in to comment.