카드 디자인 어떻게 만들것인가.

View + 그림자

디자인 분석

Username은 아래와 나눠서 VStack으로 쪼개고 HStack으로 쪼개고 다시 VStack으로 쪼개면 어떻게 넣어야 할지 보인다.

Card같은 느낌

내용물은 어떻게 만들어야 하는지 보이는데 테두리에 있는 그림자 같은 무언가가 보인다.
오른쪽과 밑으로 그림자 같은 효과가 있다. background와 shadow를 사용하여 그림자처럼 보이게, Card 같은 느낌으로 만들어 보자.

    .background(
       RoundedRectangle(cornerRadius: 20)
           .foregroundColor(.white)
           .shadow(color: .gray, radius: 1, x: 1, y: 1)
           .opacity(0.3)
       )

HStack과 VStack을 이용하여 만든 뷰에 background로 RoundedRectangle을 넣고 shadow를 x, y축 방향으로 1만큼 준다.
foregroundColor는 Rectangle이 기본으로 검정색으로 나와서 설정해 주었고 opacity는 그림자를 조금 더 연하게 만든다.

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(.white)
                    .shadow(color: .gray, radius: 1, x: 1, y: 1)
                    .opacity(0.3)
            )
    }
}

이번 앱에서는 Card가 기본 형식처럼 사용되기 때문에 ViewModifier를 통해 반복되는 부분을 따로 빼준다.
ViewModifier는 Content로 들어온 뷰에 카드처럼 보이게 배경요소를 넣어서 리턴한다.

일반 뷰가 modifier를 통해서 card 느낌이 된다.

modifierd의 사용법은 다음과 같다.

	View.modifier(CardModifier())

ViewModifier는 코드량을 크게 줄여줘서 자주 사용할 것 같다.