[Navigation and modal presentation] Creating a navigation hierarchy

rrudalstjยท2024๋…„ 7์›” 17์ผ
0

Apple App Dev Tutorials

๋ชฉ๋ก ๋ณด๊ธฐ
5/5
post-thumbnail

๐Ÿ”Ž ์ด ๊ธ€์€ Apple Developer Documentation - SwiftUI App Dev Tutorials๋ฅผ ChatGPT๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Œ์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.


SwiftUI ๋ทฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์› ์ง€๋งŒ, ๋ทฐ ๊ฐ„์˜ ํƒ์ƒ‰ ๋ฐฉ๋ฒ•๋„ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ณ„์ธต์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์—์„œ ์‹œ์ž‘ํ•˜์—ฌ ์ƒ์„ธ ๋ทฐ๋ฅผ ํ‘œ์‹œํ•œ ๋‹ค์Œ, ํƒ€์ด๋จธ ๋ทฐ๋ฅผ ๋„ค๋น„๊ฒŒ์ด์…˜ ์Šคํƒ์˜ ๋งจ ์œ„๋กœ ํ‘ธ์‹œํ•ฉ๋‹ˆ๋‹ค.

Section 1. Set up navigation

NavigationStack ์ปจํ…Œ์ด๋„ˆ ๋ทฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ„์ธต ๊ตฌ์กฐ์˜ ๋ทฐ ์Šคํƒ์„ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ScrumsView.swift ํŒŒ์ผ์—์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ž˜ํ•‘ํ•˜์—ฌ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์„ค์ •ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์Šคํฌ๋Ÿผ ๋ฆฌ์ŠคํŠธ๋Š” ๋ฃจํŠธ ๋ทฐ๋กœ ์ž‘๋™ํ•˜๋ฉฐ ํ•ญ์ƒ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋ฆฌ์ŠคํŠธ์—์„œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ๋ฅผ ์„ ํƒํ•˜๋ฉด ์Šคํƒ์— ์Šคํฌ๋Ÿผ ์ƒ์„ธ ๋ทฐ๊ฐ€ ์ถ”๊ฐ€๋˜์–ด ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ฎ์Šต๋‹ˆ๋‹ค. ๋’ค๋กœ ํƒ์ƒ‰ํ•˜๋ฉด ์ƒ์„ธ ๋ทฐ๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋‹ค์‹œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ์Šคํฌ๋Ÿผ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์Šคํƒ์— ์žˆ๋Š” ์œ ์ผํ•œ ๋ทฐ์ผ ๋•Œ๋Š” ์‹œ์Šคํ…œ์ด ๋’ค๋กœ ํƒ์ƒ‰ํ•˜๋Š” ์ œ์–ด๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.

Step 1.

ScrumsView.swift์—์„œ List๋ฅผ NavigationStack์œผ๋กœ ๊ฐ์‹ธ์„ธ์š”.

Step 2.

NavigationLink๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ์ดˆ๊ธฐํ™”์ž์— Text(scrum.title)์„ ๋Œ€์ƒ์œผ๋กœ ์ „๋‹ฌํ•˜์„ธ์š”.

๋Œ€์ƒ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์š”์†Œ์™€ ์ƒํ˜ธ์ž‘์šฉํ•  ๋•Œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ณ„์ธต์—์„œ ๋‹จ์ผ ๋ทฐ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํ–‰์€ ๊ฐœ๋ณ„ ๋Œ€์ƒ์œผ๋กœ ํ‘ธ์‹œ๋ฉ๋‹ˆ๋‹ค. Text ๋ทฐ๋Š” ๋‹ค์Œ ์„น์…˜์—์„œ ์ƒ์„ธ ํ™”๋ฉด์„ ๋งŒ๋“ค ๋•Œ๊นŒ์ง€ ํ”Œ๋ ˆ์ด์Šคํ™€๋”๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ : SwiftUI๋Š” ํ–‰์— ์ž๋™์œผ๋กœ ๋””์Šคํด๋กœ์ € ์ธ๋””์ผ€์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

Step 3.

.listRowBackground ์ˆ˜์ •์ž๋ฅผ NavigationLink๋กœ ์ด๋™ํ•˜์„ธ์š”.

Step 4.

์ด ์„น์…˜์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์—์„œ๋Š” ์ œ๋ชฉ๊ณผ ํˆด๋ฐ” ํ•ญ๋ชฉ์„ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

navigationTitle์„ "Daily Scrums"์œผ๋กœ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

.navigationTitle ์ˆ˜์ •์ž๋ฅผ List์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ž์‹ ๋ทฐ๋Š” ์ˆ˜์ •์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ NavigationStack์˜ ์™ธ๊ด€์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Step 5.

ํˆด๋ฐ”๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ๋”ํ•˜๊ธฐ ์•„์ด์ฝ˜์„ ํ‘œ์‹œํ•˜๋Š” Button ํˆด๋ฐ” ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”. ํ˜„์žฌ๋Š” ๋ฒ„ํŠผ์— ๋นˆ ์•ก์…˜์„ ์ „๋‹ฌํ•˜์„ธ์š”.

์ด ๋ทฐ๋Š” ๋‚˜์ค‘์— ์ƒˆ๋กœ์šด ์Šคํฌ๋Ÿผ์„ ์ถ”๊ฐ€ํ•˜๋Š” ํ™”๋ฉด์„ ๋งŒ๋“ค ๋•Œ ๋‹ค์‹œ ๋ฐฉ๋ฌธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 6.

๋”ํ•˜๊ธฐ ๋ฒ„ํŠผ์˜ ๋ชฉ์ ์„ ์„ค๋ช…ํ•˜๋Š” accessibilityLabel์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 7.

์•ฑ์„ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ๋นŒ๋“œํ•˜๊ณ  ์‹คํ–‰ํ•˜์—ฌ, ํ–‰์—์„œ scrum.title ๋ทฐ๋กœ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

SwiftUI๋Š” ์ƒ์„ธ ๋ทฐ์— ์ž๋™์œผ๋กœ ๋’ค๋กœ ๊ฐ€๊ธฐ ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์ด์ „ ํ™”๋ฉด์˜ ์ œ๋ชฉ์„ ์ฑ„์›๋‹ˆ๋‹ค.

Section 2. Create the detail view

๊ณ„์ธตํ˜• ์•ฑ์—์„œ๋Š” ์ƒ์œ„ ๋ทฐ์—์„œ ์ƒ์„ธ ๋ทฐ๋กœ ์ด๋™ํ•˜์—ฌ ํŠน์ • ๋ฐ์ดํ„ฐ ์š”์†Œ๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์„น์…˜์—์„œ๋Š” ์Šคํฌ๋Ÿผ ์ƒ์„ธ ๋ทฐ๋ฅผ ์ƒ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 1.

์ƒˆ๋กœ์šด SwiftUI View ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ์ด๋ฆ„์„ DetailView.swift๋กœ ์ง€์ •ํ•˜์„ธ์š”.

Step 2.

scrum ์ƒ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 3.

ํ”„๋ฆฌ๋ทฐ ํ”„๋กœ๋ฐ”์ด๋”์—์„œ DetailView๋ฅผ ์ƒ˜ํ”Œ ์Šคํฌ๋Ÿผ์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•˜์„ธ์š”.

Step 4.

DetailView๋ฅผ NavigationStack์œผ๋กœ ๊ฐ์‹ธ์„œ ์บ”๋ฒ„์Šค์—์„œ ๋„ค๋น„๊ฒŒ์ด์…˜ ์š”์†Œ๋ฅผ ๋ฏธ๋ฆฌ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์„ธ์š”.

Step 5.

ScrumsView.swift์—์„œ NavigationLink๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์—ฌ DetailView๋ฅผ ์ƒˆ๋กœ์šด ๋Œ€์ƒ์œผ๋กœ ์„ค์ •ํ•˜์„ธ์š”.

Section 3. Add visual components to the detail view

์ด์ œ ์ƒ์„ธ ๋ทฐ์˜ ํ…œํ”Œ๋ฆฟ์ด ์ค€๋น„๋˜์—ˆ์œผ๋ฏ€๋กœ, ์‹œ๊ฐ์  ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์™„์„ฑํ•˜์„ธ์š”. ์™„์„ฑ๋œ ์ƒ์„ธ ๋ทฐ๋Š” ์Šคํฌ๋Ÿผ์˜ ์ด๋ฆ„, ํšŒ์˜ ์‹œ๊ฐ„, ์นด๋“œ ์ƒ‰์ƒ ๋ฐ ์ฐธ์„์ž ๋ชฉ๋ก์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

Step 1.

DetailView.swift์—์„œ Text ๋ทฐ๋ฅผ List๋กœ ๊ต์ฒดํ•˜์—ฌ ํšŒ์˜ ์„ธ๋ถ€ ์ •๋ณด๋ฅผ ํ‘œ์‹œํ•˜์„ธ์š”.
๋ฆฌ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ผ ์—ด์— ์ •์  ํ•˜์œ„ ๋ทฐ๋ฅผ ํ–‰์œผ๋กœ ํ‘œ์‹œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์˜ ๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ๋ฆฌ์ŠคํŠธ ํ–‰์„ ๋™์ ์œผ๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 2.

"Meeting Info"๋ผ๋Š” ํ—ค๋”๋ฅผ ๊ฐ€์ง„ ์„น์…˜์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

์„น์…˜์€ ๋ฆฌ์ŠคํŠธ ๋‚ด์—์„œ ์‹œ๊ฐ์  ๊ตฌ๋ถ„์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์„น์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ ๋ฅผ ๋ฌถ์–ด ์ •๋ณด๋ฅผ ๊ณ„์ธต์ ์œผ๋กœ ๊ทธ๋ฃนํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Step 3.

"Start Meeting"์ด๋ผ๋Š” ํ…์ŠคํŠธ์™€ ํƒ€์ด๋จธ ์•„์ด์ฝ˜์„ ํฌํ•จํ•˜๋Š” Label์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.
์ด ํ–‰์„ ํƒญํ•ด๋„ ์•„๋ฌด ์ผ๋„ ์ผ์–ด๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚˜์ค‘์— ์‚ฌ์šฉ์ž๋ฅผ ํšŒ์˜ ๋ทฐ๋กœ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํŒ

๊ธฐ๋ณธ์ ์œผ๋กœ VoiceOver๋Š” Label์˜ ์ œ๋ชฉ์„ ์ฝ์Šต๋‹ˆ๋‹ค. VoiceOver๊ฐ€ ๋” ๋งŽ์€ ์„ธ๋ถ€ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ๊ธฐ๋ณธ ์Œ์„ฑ ํ…์ŠคํŠธ๋ฅผ ๊ต์ฒดํ•˜๊ณ  ์š”์†Œ๋ฅผ ์„ค๋ช…ํ•˜๋Š” accessibilityLabel์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 4.

Label์˜ ์™ธ๊ด€์„ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด foregroundColor์™€ font ์ˆ˜์ •์ž๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

์ด ํ–‰์€ ์ƒํ˜ธ์ž‘์šฉ ๊ฐ€๋Šฅํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์ƒํ˜ธ์ž‘์šฉ ์š”์†Œ์™€ ๋™์ผํ•œ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด accentColor๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

Step 5.

HStack์„ ์ƒ์„ฑํ•˜๊ณ , ํšŒ์˜ ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์‹œ๊ณ„ ์•„์ด์ฝ˜์ด ์žˆ๋Š” Label์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 6.

Spacer๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ํšŒ์˜ ๊ธธ์ด ๊ฐ’์„ ํ…์ŠคํŠธ ๋ทฐ์— ํ‘œ์‹œํ•˜์„ธ์š”.

Step 7.

HStack์— accessibilityElement(children:)๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ ‘๊ทผ์„ฑ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด Label๊ณผ Text ์š”์†Œ๋ฅผ ๊ฒฐํ•ฉํ•˜์„ธ์š”.
VoiceOver๋Š” ๊ทธ๋Ÿฌ๋ฉด ๋‘ ์š”์†Œ๋ฅผ ํ•˜๋‚˜์˜ ๋ฌธ์žฅ์œผ๋กœ ์ฝ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, โ€œLength, 10 minutesโ€์™€ ๊ฐ™์ด ์ฝํž™๋‹ˆ๋‹ค. ์ˆ˜์ •์ž๊ฐ€ ์—†์œผ๋ฉด VoiceOver ์‚ฌ์šฉ์ž๋Š” ๊ฐ ์š”์†Œ ์‚ฌ์ด๋ฅผ ๋‹ค์‹œ ์Šค์™€์ดํ”„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Step 8.

HStack์„ ์ƒ์„ฑํ•˜๊ณ , ์Šคํฌ๋Ÿผ ์นด๋“œ ํ…Œ๋งˆ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํŽ˜์ธํŠธ ํŒ”๋ ˆํŠธ ์•„์ด์ฝ˜์ด ์žˆ๋Š” Label์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 9.

ํ…Œ๋งˆ ๊ฐ’์„ ์ธํ„ฐํŽ˜์ด์Šค์— ํ‘œ์‹œํ•˜๊ธฐ ์ „์—, ํ˜„์žฌ ๋ชจ๋‘ ์†Œ๋ฌธ์ž๋กœ ์ •์˜๋œ Theme ์—ด๊ฑฐํ˜• ์ผ€์ด์Šค๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ๋ณ€๊ฒฝํ•˜์„ธ์š”.

Theme.swift์—์„œ ์›์‹œ ๊ฐ’์„ ๋Œ€๋ฌธ์ž๋กœ ๋ณ€ํ™˜ํ•˜๋Š” name ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 10.

DetailView.swift์—์„œ Spacer()๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , Text ๋ทฐ์— ํ…Œ๋งˆ ์ด๋ฆ„์„ ํ‘œ์‹œํ•˜์„ธ์š”. HStack์— accessibilityElement(children:)๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ VoiceOver์—์„œ Label๊ณผ Text ์š”์†Œ๋ฅผ ๊ฒฐํ•ฉํ•˜์„ธ์š”.

Step 11.

Text ๋ทฐ์— ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด, ํŒจ๋”ฉ, ์ „๊ฒฝ์ƒ‰ ๋ฐ ๋ฐฐ๊ฒฝ์ƒ‰, ๊ทธ๋ฆฌ๊ณ  ๋ชจ์„œ๋ฆฌ ๋ฐ˜๊ฒฝ์„ ์„ค์ •ํ•˜์„ธ์š”

Section 4. Iterate through attendees

์ƒ์„ธ ํ™”๋ฉด์— ์ถ”๊ฐ€ํ•  ๋งˆ์ง€๋ง‰ ์„น์…˜์€ ์ฐธ์„์ž ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ForEach๋Š” ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ์ปฌ๋ ‰์…˜์—์„œ ํ•„์š”์— ๋”ฐ๋ผ ๋ทฐ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ViewBuilder์ž…๋‹ˆ๋‹ค. ์ด ์„น์…˜์—์„œ๋Š” ForEach๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ์˜ ์ฐธ์„์ž ๋ชฉ๋ก์„ ๋ฐ˜๋ณตํ•˜์—ฌ ์ผ๋ จ์˜ ํ…์ŠคํŠธ ๋ทฐ๋ฅผ ๊ตฌ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 1.

์Šคํฌ๋Ÿผ ์ฐธ์„์ž๋Š” ๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. List์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•  ๋•Œ ๋ชจ๋ธ์ด Identifiable ํ”„๋กœํ† ์ฝœ์„ ์ค€์ˆ˜ํ•˜๋ฉด ์•ˆ์ •์ ์ธ ์‹๋ณ„์ž๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ๊ธฐ์–ตํ•˜์„ธ์š”.

DailyScrum.swift์—์„œ Identifiable์„ ์ค€์ˆ˜ํ•˜๋Š” ๋‚ด๋ถ€ ๊ตฌ์กฐ์ฒด Attendee๋ฅผ ๊ฐ–๋Š” ํ™•์žฅ์„ ์ƒ์„ฑํ•˜์„ธ์š”.

Step 2.

ํ•„์ˆ˜ id ์†์„ฑ๊ณผ name์„ ์œ„ํ•œ ๋ณ€์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 3.

id ์†์„ฑ์— ๊ธฐ๋ณธ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ์ดˆ๊ธฐํ™”์ž๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 4.

attendees ํƒ€์ž…์„ [Attendee]๋กœ ์—…๋ฐ์ดํŠธํ•˜์„ธ์š”. ๊ทธ๋Ÿฐ ๋‹ค์Œ, ์ดˆ๊ธฐํ™”์ž์—์„œ ์ฐธ์„์ž ์ด๋ฆ„ ๋ฐฐ์—ด์„ Attendee ํƒ€์ž…์˜ ๊ฐ’์œผ๋กœ ๋งคํ•‘ํ•˜์„ธ์š”.

map(_:)๋Š” ๊ธฐ์กด ์ปฌ๋ ‰์…˜์˜ ๊ฐ ์š”์†Œ์— ๋ณ€ํ™˜์„ ์ ์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ์ปฌ๋ ‰์…˜์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

Step 5.

์ด์ œ ์ฐธ์„์ž ์ด๋ฆ„์ด ๊ณ ์œ ํ•˜๊ฒŒ ์‹๋ณ„ ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ, ์ฐธ์„์ž ๋ชฉ๋ก์„ ์ƒ์„ธ ๋ทฐ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

DetailView.swift์—์„œ ์ฐธ์„์ž ์ •๋ณด๋ฅผ ๊ทธ๋ฃนํ™”ํ•˜๊ธฐ ์œ„ํ•ด "Attendees"๋ผ๋Š” ํ—ค๋”๋ฅผ ๊ฐ€์ง„ ์„น์…˜์„ ์ƒ์„ฑํ•˜์„ธ์š”.

Step 6.

ForEach๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ฐธ์„์ž ๋ชฉ๋ก์„ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜๊ณ , scrum.attendees๋ฅผ ๋ฐ์ดํ„ฐ๋กœ ์ „๋‹ฌํ•˜์„ธ์š”.

Step 7.

์ฐธ์„์ž ์ด๋ฆ„์„ ํ‘œ์‹œํ•˜๊ณ  ์‚ฌ๋žŒ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๋Š” Label์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Section 5. Navigate between screens

์ƒ์„ธ ํ™”๋ฉด์ด ์™„์„ฑ๋˜์—ˆ์œผ๋ฏ€๋กœ, ํ™”๋ฉด ๊ฐ„ ์ „ํ™˜์„ ์œ„ํ•œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ณ„์ธต์„ ์ƒ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 1.

ScrumsView.swift์—์„œ NavigationLink์˜ ๋Œ€์ƒ์„ DetailView๋กœ ์„ค์ •ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ DetailView์—์„œ MeetingView๋กœ์˜ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ณ„์ธต ์„ค์ •์„ ์™„๋ฃŒํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Start Meeting ๋ ˆ์ด๋ธ”์„ NavigationLink๋กœ ๊ฐ์‹ธ๊ณ , MeetingView๋ฅผ ๋ชฉ์ ์ง€๋กœ ์„ค์ •ํ•˜์„ธ์š”.
NavigationLink๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ ˆ์ด๋ธ”์ด ์ œ์Šค์ฒ˜ ์ธ์‹๊ธฐ๋กœ ๊ฐ์‹ธ์ ธ, ์‚ฌ์šฉ์ž๊ฐ€ ์ด ํ–‰์„ ํƒญํ•˜์—ฌ ํšŒ์˜ ํƒ€์ด๋จธ ํ™”๋ฉด์œผ๋กœ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Step 2.

List์— .navigationTitle(scrum.title)์„ ์„ค์ •ํ•˜์—ฌ ์Šคํฌ๋Ÿผ ์ œ๋ชฉ์„ ํ‘œ์‹œํ•˜์„ธ์š”.

Step 3.

์•ฑ์„ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ์‹คํ–‰ํ•˜์—ฌ ๋ฆฌ์ŠคํŠธ, ์ƒ์„ธ, ํƒ€์ด๋จธ ํ™”๋ฉด ๊ฐ„์— ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

SwiftUI๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ์Šคํƒ์—์„œ ํ‘ธ์‹œ(push) ๋ฐ ํŒ(pop)ํ•  ๋•Œ ์ž๋™์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ ํ™”๋ฉด ๊ฐ„ ์ „ํ™˜์„ ์œ„ํ•œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ณ„์ธต์„ ์ƒ์„ฑํ–ˆ์œผ๋ฏ€๋กœ, ํ™”๋ฉด ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ด๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” ๋ฐ์ดํ„ฐ ํŽธ์ง‘, ์—…๋ฐ์ดํŠธ ๋ฐ ๋„ค๋น„๊ฒŒ์ด์…˜ ์Šคํƒ์„ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

profile
helloooo

0๊ฐœ์˜ ๋Œ“๊ธ€