Skip to content

Commit afc12e2

Browse files
iOS-RueliOS-Ruel
committed
Merge branch 'mghwang' into dev
2 parents 937cdad + ae03900 commit afc12e2

File tree

8 files changed

+1459
-941
lines changed

8 files changed

+1459
-941
lines changed

‎TutorialSwiftUI/TutorialSwiftUI/Contents/DividerView.swift‎

Lines changed: 152 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -7,152 +7,204 @@
77

88
import SwiftUI
99

10+
private let pickerCount = 4
11+
12+
private struct CodeSource {
13+
14+
var original:String = "Divider()"
15+
var text:[String] = Array(repeating: "", count: pickerCount)
16+
17+
var toString: String {
18+
//print("CodeSource - \(text)")
19+
return original + text.joined()
20+
}
21+
}
22+
private struct CodeDescription {
23+
var original: String = "Divider View : 수평 또는 수직으로 선을 출력해주는 뷰"
24+
var text:[String] = Array(repeating: "", count: pickerCount)
25+
26+
var toString: String {
27+
//print("CodeDescription - \(text)")
28+
return original + text.joined()
29+
30+
}
31+
}
1032
/// 사용할 모디파이어 기재
1133
private enum Modifire: String, CaseIterable {
1234
case none
13-
case foregroundColor
1435
case opacity
1536
case padding
1637
case frame
1738
case background
1839
case offset
40+
41+
var description: String {
42+
switch self {
43+
case .none:
44+
return ""
45+
case .opacity:
46+
return "\nopacity : Divider의 투명도 조절"
47+
case .padding:
48+
return "\npadding : Divider의 주위에 여백 추가"
49+
case .frame:
50+
return "\nframe : Divider의 크기 지정"
51+
case .background:
52+
return "\nbackground : Divider의 배경에 색상 또는 이미지 추가"
53+
case .offset:
54+
return "\noffset : Divider의 위치 조절"
55+
}
56+
}
57+
var code: String {
58+
switch self {
59+
case .none:
60+
return ""
61+
case .opacity:
62+
return "\n\t.opacity(0.6)"
63+
case .padding:
64+
return "\n\t.padding()"
65+
case .frame:
66+
return "\n\t.frame(height: 100)"
67+
case .background:
68+
return "\n\t.background(Color.red)"
69+
case .offset:
70+
return "\n\t.offset(y: 10)"
71+
}
72+
}
1973
}
2074

2175
struct DividerView: View {
2276

2377
/// 각각의 Picker에서 선택될 enum 타입의 모디파이어 배열
2478
@State private var selectedModifire: [Modifire] =
2579
Array(repeating: .none, count: 10)
80+
@State private var codeSource = CodeSource()
81+
@State private var codeDescription = CodeDescription()
2682

2783
var body: some View {
2884
ScrollView {
2985
VStack {
30-
Spacer()
31-
// 코드 결과
32-
VStack{
33-
Divider()
34-
Text("Divider")
35-
.font(.largeTitle)
36-
Divider()
37-
Text("Divider")
38-
.font(.largeTitle)
39-
Divider()
40-
}
41-
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[0]))
42-
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[1]))
43-
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[2]))
44-
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[3]))
45-
4686

47-
Spacer()
87+
viewPreviewSection
4888

49-
50-
// 코드 텍스트
51-
VStack(alignment: .leading) {
52-
Text("Divider()")
53-
CodeBuilder(selectedModifire: $selectedModifire[0])
54-
CodeBuilder(selectedModifire: $selectedModifire[1])
55-
CodeBuilder(selectedModifire: $selectedModifire[2])
56-
CodeBuilder(selectedModifire: $selectedModifire[3])
57-
}
58-
.frame(width: 350)
59-
.font(.system(size: 18, design: .monospaced))
60-
.background(Color.gray.opacity(0.1))
61-
.cornerRadius(8)
62-
63-
Spacer()
64-
65-
// 코드 설명
66-
VStack(alignment: .leading) {
67-
Text("Divider View : 수평 또는 수직으로 선을 출력해주는 뷰")
68-
DescriptionBuilder(selectedModifire: $selectedModifire[0])
69-
DescriptionBuilder(selectedModifire: $selectedModifire[1])
70-
DescriptionBuilder(selectedModifire: $selectedModifire[2])
71-
DescriptionBuilder(selectedModifire: $selectedModifire[3])
72-
}
73-
.frame(width: 350)
74-
.font(.system(size: 18, design: .monospaced))
75-
.background(Color.gray.opacity(0.1))
76-
.cornerRadius(8)
77-
78-
Spacer()
7989
// List Picker - 위치별 모디파이어 선택
80-
List {
81-
Picker("First", selection: $selectedModifire[0]) {
90+
HStack {
91+
Text ("Modifer 1")
92+
93+
Spacer()
94+
95+
Picker("Modifier 1", selection: $selectedModifire[0]) {
8296
ForEach(Modifire.allCases, id: \.self) { modi in
8397
Text("\(modi.rawValue)")
8498
.tag(modi)
8599
}
86100
}
87-
Picker("Second", selection: $selectedModifire[1]) {
101+
.onChange(of: selectedModifire) { oldValue, newValue in
102+
codeSource.text[0] = newValue[0].code
103+
codeDescription.text[0] = newValue[0].description
104+
}
105+
}
106+
HStack {
107+
Text ("Modifer 2")
108+
109+
Spacer()
110+
111+
Picker("Modifier 2", selection: $selectedModifire[1]) {
88112
ForEach(Modifire.allCases, id: \.self) { modi in
89113
Text("\(modi.rawValue)")
90114
.tag(modi)
91115
}
92116
}
93-
Picker("Third", selection: $selectedModifire[2]) {
117+
.onChange(of: selectedModifire) { oldValue, newValue in
118+
codeSource.text[1] = newValue[1].code
119+
codeDescription.text[1] = newValue[1].description
120+
}
121+
}
122+
HStack {
123+
Text ("Modifer 3")
124+
125+
Spacer()
126+
127+
Picker("Modifier 3", selection: $selectedModifire[2]) {
94128
ForEach(Modifire.allCases, id: \.self) { modi in
95129
Text("\(modi.rawValue)")
96130
.tag(modi)
97131
}
98132
}
99-
Picker("Fourth", selection: $selectedModifire[3]) {
133+
.onChange(of: selectedModifire) { oldValue, newValue in
134+
codeSource.text[2] = newValue[2].code
135+
codeDescription.text[2] = newValue[2].description
136+
}
137+
}
138+
HStack {
139+
Text ("Modifer 4")
140+
141+
Spacer()
142+
143+
Picker("Modifier 4", selection: $selectedModifire[3]) {
100144
ForEach(Modifire.allCases, id: \.self) { modi in
101145
Text("\(modi.rawValue)")
102146
.tag(modi)
103147
}
104148
}
105-
}.frame(height: 250)
149+
.onChange(of: selectedModifire) { oldValue, newValue in
150+
codeSource.text[3] = newValue[3].code
151+
codeDescription.text[3] = newValue[3].description
152+
}
153+
}
154+
.frame(maxWidth: .infinity)
155+
156+
codePreviewSection
106157
}
158+
.padding()
159+
.frame(maxHeight: .infinity) // 내부 VStack의 세로 크기를 최대화
160+
.navigationTitle("Divider")
161+
.navigationBarTitleDisplayMode(.inline)
107162
}
108163
}
109-
}
110-
111-
/// 코드 텍스트 - 출력할 코드 설정
112-
private struct CodeBuilder: View {
113-
@Binding var selectedModifire: Modifire
114-
115-
var body: some View {
116-
switch selectedModifire {
117-
case .none:
118-
return Text("")
119-
case .foregroundColor:
120-
return Text("\t.foregroundColor(.blue)")
121-
case .opacity:
122-
return Text("\t.opacity(0.6)")
123-
case .padding:
124-
return Text("\t.padding()")
125-
case .frame:
126-
return Text("\t.frame(height: 100)")
127-
case .background:
128-
return Text("\t.background(Color.red)")
129-
case .offset:
130-
return Text("\t.offset(x: 10)")
164+
private var viewPreviewSection: some View {
165+
VStack(alignment: .leading, spacing: 10) {
166+
TitleTextView(title: "View Preview")
167+
168+
Text("Divider")
169+
.frame(maxWidth: .infinity, alignment: .leading)
170+
Divider()
171+
VStack {
172+
Text("Divider")
173+
.font(.largeTitle)
174+
Divider()
175+
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[0]))
176+
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[1]))
177+
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[2]))
178+
.modifier(ModifireBuilder(selectedModifire: $selectedModifire[3]))
179+
Text("Divider")
180+
.font(.largeTitle)
181+
}
131182
}
183+
.padding()
184+
.background(Color.gray.opacity(0.2))
185+
.cornerRadius(10)
132186
}
133-
}
134-
135-
/// 코드 설명 - 출력할 설명 설정
136-
private struct DescriptionBuilder: View {
137-
@Binding var selectedModifire: Modifire
138-
139-
var body: some View {
140-
switch selectedModifire {
141-
case .none:
142-
return Text("")
143-
case .foregroundColor:
144-
return Text("foregroundColor : Divider의 색상 설정")
145-
case .opacity:
146-
return Text("opacity : Divider의 투명도 조절")
147-
case .padding:
148-
return Text("padding : Divider의 주위에 여백 추가")
149-
case .frame:
150-
return Text("frame : Divider의 크기 지정")
151-
case .background:
152-
return Text("background : Divider의 배경에 색상 또는 이미지 추가")
153-
case .offset:
154-
return Text("offset : Divider의 위치 조절")
187+
private var codePreviewSection: some View {
188+
VStack(spacing:20) {
189+
TitleTextView(title: "Code Preview")
190+
CodePreviewView(code: returnCode(), copyAction: copyCode, showCopy: true)
191+
192+
TitleTextView(title: "Description")
193+
CodePreviewView(code: basecode(), copyAction: copyCode, showCopy: false)
155194
}
195+
.padding()
196+
.frame(maxWidth: .infinity)
197+
.background(Color.gray.opacity(0.2))
198+
.cornerRadius(10)
199+
}
200+
func basecode() -> String {
201+
return codeDescription.toString
202+
}
203+
func copyCode(_ code: String) {
204+
UIPasteboard.general.string = code
205+
}
206+
func returnCode() -> String {
207+
return codeSource.toString
156208
}
157209
}
158210

@@ -163,16 +215,16 @@ private struct ModifireBuilder: ViewModifier {
163215
func body(content: Content) -> some View {
164216
switch selectedModifire {
165217
case .none : content
166-
case .foregroundColor: content.foregroundColor(.blue)
167218
case .opacity: content.opacity(0.6)
168219
case .padding: content.padding()
169220
case .frame: content.frame(height: 100)
170221
case .background: content.background(Color.red)
171-
case .offset: content.offset(x: 10)
222+
case .offset: content.offset(y: 10)
172223
}
173224
}
174225
}
175226

176227
#Preview {
177228
DividerView()
178229
}
230+

0 commit comments

Comments
 (0)