2022/12 3

08. 기본 UI 구현하기 #8

기본 UI 구현하기 #8 CustomTextField & AuthHeaderView & RegistrationView CustomTextField 더보기 Source VStack(spacing: 40) { TextField("Email", text: $email) SecureField("Password", text: $password) } .padding(.horizontal, 32) .padding(.top, 44) LoginView에서 사용했던 두 개의 TextField는 이미지와 TextField 혹은 SecureField, Divider의 조합으로 이루어져 있다. 같은 UI가 동일하게 RegistrationView에서도 사용되기 때문에 재사용을 용이하게 하기 위해 모듈화 한다. 더보기 Source..

07. 기본 UI 구성하기 #7

기본 UI 구성하기 #7 LoginView 계정 로그인에 사용할 UI를 구성한다. LoginView | Header Login 화면의 상단에 해당하는 부분이다. 푸른색의 배경과 두 줄의 TextView로 이루어져 있다. 더보기 Source VStack(alignment: .leading) { HStack { Spacer() } Group { Text("Hello.") Text("Welcom Back") } .font(.largeTitle) .fontWeight(.semibold) } .frame(height: 260) .padding(.leading) .background(Color(.systemBlue)) .foregroundColor(.white) .clipShape(RoundedShape(corne..

06. 기본 UI 구성하기 #6

기본 UI 구성하기 #6 FloatingButton & NewTweetView FloatingButton 메인 화면 어디서든 새 글을 작성할 수 있도록 FeedView 위에 표시되는 FloatingButton을 생성한다. 더보기 Source struct FeedView: View { var body: some View { ZStack(alignment: .bottomTrailing) { ScrollView { LazyVStack { ForEach(0 ... 20, id: \.self) { _ in TweetRowView() .padding() } } } Button { print("this is Floating Button Function") } label: { Image("tweet") .resizab..