Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[숲] 6주차 미션 #16

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[숲] 6주차 미션 #16

wants to merge 1 commit into from

Conversation

00yhsp
Copy link

@00yhsp 00yhsp commented Nov 23, 2023

📌 관련 이슈

#15

✨ 이슈 내용

SwiftUI 뷰 구성

📸 스크린샷(선택)

image

📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들

상단바 붙이기???

@00yhsp 00yhsp requested a review from iiuoon November 23, 2023 08:02
@00yhsp 00yhsp self-assigned this Nov 23, 2023
@00yhsp 00yhsp added the 🌳 숲 숲's work label Nov 23, 2023
Copy link
Member

@iiuoon iiuoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SwiftUI까지 ,, 🥺 너무 수고하셨어요!!
뷰를 많이 짜보다보면 코드를 짧게 쓰는 법을 터득할 수 있으실 거예요 수고하셨습니다~!!👍🏻

Comment on lines +163 to +178
struct BaedalView: View {
let viewTitle: String
let viewContent: String

init(viewTitle: String, viewContent: String) {
self.viewTitle = viewTitle
self.viewContent = viewContent
}

var body: some View {
VStack {
Text(viewTitle).bold()
Text(viewContent)
}
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BaedalView를 이렇게 수정하면 코드를 간단하게 수정할 수 있어요

struct BaedalView: View {
    let viewTitle: String
    let viewContent: String

    init(viewTitle: String, viewContent: String) {
        self.viewTitle = viewTitle
        self.viewContent = viewContent
    }

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.white)
                .frame(width: UIScreen.main.bounds.width / 4, height: UIScreen.main.bounds.height / 8)
                .overlay(
                    VStack {
                        Text(viewTitle).bold()
                        Text(viewContent)
                    }
                )
        }
    }
}

Comment on lines +55 to +74
HStack(spacing: 20) {

ZStack {
Color.white
.cornerRadius(10)
affordableView
}.frame(width: UIScreen.main.bounds.width / 4, height: UIScreen.main.bounds.height / 8)

ZStack {
Color.white
.cornerRadius(10)
baedalView
}.frame(width: UIScreen.main.bounds.width / 4, height: UIScreen.main.bounds.height / 8)

ZStack {
Color.white
.cornerRadius(10)
storeView
}.frame(width: UIScreen.main.bounds.width / 4, height: UIScreen.main.bounds.height / 8)
}.padding(.top, 20)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ZStack은 웬만하면 사용을 지양하는 것이 좋아요!

HStack(spacing: 20) {
                        BaedalView(viewTitle: "알뜰배달", viewContent: "쿠폰 골라 받기")
                        BaedalView(viewTitle: "배달", viewContent: "세상은 넓고\n맛집은 많다")
                        BaedalView(viewTitle: "배민스토어", viewContent: "배달은 지금\n옵니다")
                    }.padding(.top, 20)

라고 수정할 수 있습니다.
위에 affordableView, baedalView, storeView 객체를 만들어주지 않아도 됩니다!

Comment on lines +14 to +16
let affordableView = BaedalView(viewTitle: "알뜰배달", viewContent: "쿠폰 골라 받기")
let baedalView = BaedalView(viewTitle: "배달", viewContent: "세상은 넓고\n맛집은 많다")
let storeView = BaedalView(viewTitle: "배민스토어", viewContent: "배달은 지금\n옵니다")
Copy link
Member

@iiuoon iiuoon Nov 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

위 코드로 수정하면 삭제가 가능합니다.

}

struct MenuView: View {
var body: some View {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기에 버튼을 만드는 함수를 만들어 주면 코드를 훨씬 줄일 수 있어요

func menuItem(imageName: String, title: String) -> some View {
        Button(action: {}) {
            VStack {
                Image(systemName: imageName)
                Text(title)
            }
        }
        .background(Color.white)
        .cornerRadius(5)
    }

.cornerRadius(5)
}.padding(.horizontal, 20)
.padding(.top, 20)
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분을

        VStack {
            HStack(spacing: 20) {
                menuItem(imageName: "trophy.circle", title: "인기")
                menuItem(imageName: "tag.circle", title: "신상품")
                menuItem(imageName: "flame.circle", title: "특가")
                menuItem(imageName: "bag.circle", title: "쌀 잡곡")
                menuItem(imageName: "bathtub", title: "화장지")
                
            }
            .padding(.horizontal, 20)
            .padding(.top, 20)
            
            HStack(spacing: 20) {
                menuItem(imageName: "trophy.circle", title: "인기")
                menuItem(imageName: "tag.circle", title: "신상품")
                menuItem(imageName: "flame.circle", title: "특가")
                menuItem(imageName: "bag.circle", title: "쌀 잡곡")
                menuItem(imageName: "bathtub", title: "화장지")
            }
            .padding(.horizontal, 20)
            .padding(.top, 20)
        }

이렇게 수정 가능합니다!

@iiuoon
Copy link
Member

iiuoon commented Nov 26, 2023

실제 어플처럼 서치바 위에 부분은 네비게이션 바 커스텀을 이용해서 구현하고 화면 전체에 스크롤이 되게 만들어서 서치바는 다른 뷰처럼 넣어주면 될 것 같아요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌳 숲 숲's work
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants