Swift :: 버스시간표 앱을 만들기 - 4 [ UI 개선 ]

ContentVeiw - 메인화면 디자인을 해주자

NavigationView 안에 ZStack 추가

ZStack { //배경 색 설정
                LinearGradient( // LinearGradient 사용
                    gradient: Gradient(colors: [Color.white, Color.purple]), // 그라데이션 색상
                    startPoint: .topLeading, // 그라데이션 시작점
                    endPoint: .bottomTrailing // 그라데이션 끝점
                )
                .edgesIgnoringSafeArea(.all)

ZStack - 뷰를 겹쳐 쌓는 데 사용하는 레이아웃 ( 배경, 중앙 콘텐츠, 맨 위 요소 등)

LinearGradient - 그라데이션 배경을 만들 때 사용하는 뷰 (선형적으로 색상 변환)

.edgesIgnoringSafeArea(.all) - Swift에서 뷰의 배경 또는 콘텐츠가 안전 영역(Safe area)을 무시하고 화면 전체 영역을 덮도록 설정

---

 

CustomNavigationButton 컴포넌트 추가

VStack(spacing: 50) {
                    // 첫 번째 버튼
                    CustomNavigationButton(
                        text: "부산대 ➜ 밀양역",
                        iconName: "tram.fill",
                        colors: [Color.blue, Color.purple],
                        destination: MYS_Dir()
                    )
                    
                    // 두 번째 버튼
                    CustomNavigationButton(
                        text: "밀양역 ➜ 부산대",
                        iconName: "graduationcap",
                        colors: [Color.purple, Color.blue],
                        destination: PNU_Dir()
                    )
                }
                .padding()
                .navigationTitle("INOUTY")
                .navigationBarTitleDisplayMode(.inline)

.navigationTitle("INOUTY") - 네비게이션 타이틀 INOUTY

.navigationBarTitleDisplayMode(.inline) - 네비게이션 바 제목을 작은 제목으로 표시

.automatic - 기본 동작 / .large - 큰 제목

---

< CustomNavigationButton >

struct CustomNavigationButton<Destination: View>: View {
    let text: String
    let iconName: String
    let colors: [Color]
    let destination: Destination

    var body: some View {
        NavigationLink(destination: destination) {
            HStack {
                Text(text)
                    .font(.system(size: 24))
                    .fontWeight(.semibold)
                Image(systemName: iconName)
                    .font(.system(size: 24))
            }
            .frame(width: 300, height: 80)
            .background(
                LinearGradient(
                    gradient: Gradient(colors: colors),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .foregroundColor(.white)
            .cornerRadius(15)
            .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
        }
    }
}

 

 

HStack - 수평으로 뷰를 정렬하는 컨테이너 

Image(systemName: iconName) - 버스 아이콘 추가

---

< 전체 코드 >

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                // 배경 그라데이션
                LinearGradient(
                    gradient: Gradient(colors: [Color.white, Color.purple]),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
                .edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 50) {
                    // 첫 번째 버튼
                    CustomNavigationButton(
                        text: "부산대 ➜ 밀양역",
                        iconName: "tram.fill",
                        colors: [Color.blue, Color.purple],
                        destination: MYS_Dir()
                    )
                    
                    // 두 번째 버튼
                    CustomNavigationButton(
                        text: "밀양역 ➜ 부산대",
                        iconName: "graduationcap",
                        colors: [Color.purple, Color.blue],
                        destination: PNU_Dir()
                    )
                }
                .padding()
                .navigationTitle("INOUTY")
                .navigationBarTitleDisplayMode(.inline)
            }
        }
    }
}

// 공통 버튼 컴포넌트
struct CustomNavigationButton<Destination: View>: View {
    let text: String
    let iconName: String
    let colors: [Color]
    let destination: Destination

    var body: some View {
        NavigationLink(destination: destination) {
            HStack {
                Text(text)
                    .font(.system(size: 24))
                    .fontWeight(.semibold)
                Image(systemName: iconName)
                    .font(.system(size: 24))
            }
            .frame(width: 300, height: 80)
            .background(
                LinearGradient(
                    gradient: Gradient(colors: colors),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .foregroundColor(.white)
            .cornerRadius(15)
            .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
        }
    }
}