프로젝트/Twitter Clone App (w/Firebase) 9

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..

05. 기본 UI 구성하기 #5

기본 UI 구성하기 #5 SideMenuView & ContentView SideMenuView | UserStatsView var userInfoDetails: some View { VStack(alignment: .leading, spacing: 4) { HStack { Text("Archimedes") .font(.title2).bold() Image(systemName: "checkmark.seal.fill") .foregroundColor(Color(.systemBlue)) } Text("@mathematician") .font(.subheadline) .foregroundColor(.gray) Text("Eureka!") .font(.subheadline) .padding(.vertical) ..

04. 기본 UI 구성하기 #4

기본 UI 구성하기 #4 ExplorerView, UserRowView 사용자 검색을 위한 화면을 구성한다. UserRowView 더보기 Source struct UserRowView: View { var body: some View { HStack(spacing: 12) { Circle() .frame(width: 45, height: 45) VStack(alignment: .leading, spacing: 4) { Text("user1") .font(.subheadline).bold() .foregroundColor(.black) Text("almost admin") .font(.subheadline) .foregroundColor(.gray) } Spacer() } .padding(.horizont..

03. 기본 UI 구성하기 #3

기본 UI 구성하기 #3 ProfileView ProfileView | tweetFilterBar 향후 해당 계정의 Tweet을 불러올 때 사용할 버튼을 구상한다. 세 개의 항목이 존재하고, 바로 아래에는 밑줄과 같은 인디케이터가 존재하는 것이 특징이다. 더보기 Source var tweetFilterBar: some View { HStack { ForEach(TweetFilterViewModel.allCases, id: \.rawValue) { item in VStack { Text(item.title) .font(.subheadline) .fontWeight(selectedFilter == item ? .semibold : .regular) .foregroundColor(selectedFilter =..

02. 기본 UI 구성하기 #2

기본 UI 구성하기 #2 MainTabView & ProfileView MainTabView 이전에 구현한 FeedView를 시작으로, 이후에 구현할 SearchView, NotificationView, MessageView를 포함한 TabView를 추가한다. 더보기 Source struct MainTabView: View { @State private var selectedIndex = 0 var body: some View { TabView(selection: $selectedIndex) { FeedView() .onTapGesture { self.selectedIndex = 0 } .tabItem { Image(systemName: "house") }.tag(0) ExploreView() .onTa..

01. 기본 UI 구성하기 #1

기본 UI 구성하기 #1 TweetRowView & FeedView TweetRowView Twitter의 글들은 Tweet으로 불리고, 위와 같은 레이아웃을 가진다. 더보기 Source struct TweetRowView: View { var body: some View { VStack(alignment: .leading) { //profile image & user info & tweet HStack(alignment: .top, spacing: 12) { Circle() .frame(width: 56, height: 56) .foregroundColor(Color(.systemBlue)) //user info & tweet caption VStack(alignment: .leading, spacin..

00. 시작하며

백엔드 Firebase Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com DB를 혼자 구성할 능력도, 생각도 없기 때문에 이 부분은 클라우드 서비스를 적극적으로 사용한다. 이번에도 가장 익숙한 Firebase를 활용하는 방향으로 계획했다. 앱 UI Apple Developer Documentation developer.apple.com 역시나 SwiftUI를 사용한다. 22년 iOS16 및 여러 새 OS들의 배포와 함께 SwiftUI 4.0도 함께 출시됐다. 여러 API들이 새로 생겼고, 기존의 API 중 일부가 deprecated 되는 등 변화가 있다. 아직 관련 자료들이 최신화되지..