프로젝트 (86) 썸네일형 리스트형 11. 기능 구현하기 #3 기능 구현하기 #3 UserInformation UserInformation | UserModel struct User: Identifiable, Codable { @DocumentID var id: String? let username: String let fullname: String let profileImageUrl: String let email: String } Firebase에서 받아와 사용할 수 있도록 User 데이터에 대한 모델을 구성한다. UserInformation | UserService import Firebase import FirebaseFirestoreSwift Firebase에서 사용자의 정보를 받아오기 위한 함수를 작성한다. 이를 위해 Firebase와 FirebaseFi.. 10. 기능 구현하기 #2 기능 구현하기 #2 프로필 이미지 설정하기 ImagePicker SwiftUI를 사용하는 앱에서는 iOS16 혹은 동세대의 OS 이상을 사용하는 경우 PhotosUI를 사용하도록 개선이 이루어졌다. 물론 iOS16 이상을 대상으로만 서비스를 한다면 문제가 없겠지만 세상은 그리 녹록지 않기 마련이다. 이전까지는 PHPickerViewController나 UIKit의 UIImagePickerController를 사용해야만 한다. 영상에서는 UIImagePickerController를 사용하는 방식을 사용했으므로 이에 대해 나열한다. Utils 폴더를 하나 만들어 주고, 그 안에 ImagePicker를 구현한다. import SwiftUI struct ImagePicker: UIViewControllerRep.. 09. 기능 구현하기 #1 기능 구현하기 #1 Firebase Import & Login Function Firebase Import 02. Firebase 연결하기 Firebase 프로젝트 생성 Firebase에 회원가입을 하고, 'Get started'를 선택한다. 프로젝트를 생성하고, 이름을 지정한 뒤 지금은 필요 없는 Google Analystic은 비활성화한다. 해당 기능은 Google의 분석 툴로, chillog.page 기본적인 방법은 위와 같다. 다만 사용하려는 모듈은 조금 다른데 아래와 같다. 회원가입과 로그인 기능을 위한 'FirebaseAuth', DB 접근을 위한 'FirebaseFirestore'와 'FirebaseFirestoreSwift', 이미지 등의 큰 데이터를 저장하고 불러 올 'FirebaseSt.. iOS 스크롤샷 이미지로 저장하기 iOS14 부터 기본 브라우저인 Safari에 한해 FullPage Screenshot(ScollShot)을 지원한다. 문제는 어째서인지 이걸 JPG나 PNG가 아니라 PDF로 저장하도록 해 놨다는 점인데, Web2Pics나 PicSew같은 유료 앱들을 사용하는 방법도 있지만 조금 번거롭기도 한 게 사실이고, 이를 단축어로 조금 편하게 해결할 수도 있다. 1.0 Pdf To Image www.icloud.com 문서화 구조도 매우 단순한 단축어다. 표시한 부분을 선택해 PNG가 아닌 원하는 형식으로 저장할 수도 있다. 동작 예시 스크린샷 창에서 공유 버튼을 눌러 사용하면 된다. 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 =.. 이전 1 2 3 4 5 6 7 8 9 다음
