SwiftUI / Team Project 2

오늘은 iOS 5기 사전캠프 퀘스트를 하나 진행하고, 팀 프로젝트로 진행 중인 UI 제작을 이어서 진행하였다.

---

-퀘스트 진행-

퀘스트명: 직사각형의 넓이와 둘레를 계산해요

저장 프로퍼티(Stored Property)와 연산 프로퍼티(Computed Property)를 사용하여 직사각형의 넓이와 길이를 구한다.

// 사각형의 넓이를 구하는 식: 가로 x 세로
// 사각형의 둘레를 구하는 식: 2 x (가로 + 세로)

// 미션 1
var width: Double = 10
var height: Double = 5

// 미션 2 & 선택과제
var squareArea: Double {
    if width <= 0 || height <= 0 {
        return 0
    } else {
        return width * height
    }
}

var squarePerimeter: Double {
    if width <= 0 || height <= 0 {
        return 0
    } else {
        return 2 * (width + height)
    }
}

print("사각형의 넓이: \(squareArea)")
print("사각형의 둘레: \(squarePerimeter)")

---

-팀 프로젝트 진행-

오늘의 진행 내용

• 로그인 뷰 작성
• 세부기능 수정
• 로그인 기능 구현
  

  금일 구현한 뷰(LoginTitleView)

---

View Review

LoginTitleView

로그인 타이틀 뷰는 로그인 뷰에서 Log In 버튼을 누름으로서 NavigationLink를 통해 연결되는 뷰이다.
금일 구현한 내용은 Email과 Password를 입력할 수 있는 TextField를 생성하고, 텍스트필드의 글자가 1개라도 쓰이면 텍스트필드 우측에 Delete버튼이 나타나 버튼을 누르면 입력한 내용이 모두 삭제되도록 하였다. 또, 텍스트필드가 비어있는 채로 로그인 버튼을 누르면 Error알림창이 나타나도록 Alert를 사용하였다.
다음으로 'Remember me'라는 텍스트 좌측의 체크박스를 클릭하면 체크박스의 상태에 따라 텍스트필드에 입력한 이메일이 저장되는 여부를 선택할 수 있는 기능을 구현하였다.
마지막으로 이메일과 비밀번호를 입력한 후 로그인 버튼을 누르면, LoadingView가 나타나고 잠시 뒤 MainTitleView로 이동되는 코드를 구현하였다. 지금은 이메일과 비밀번호를 입력하기만 하면 로그인에 성공하지만, 다음 구현에서 저장되어있는 이메일과 비밀번호가 아닐시 로그인에 실패하는 코드를 구현할 예정이다.

import SwiftUI

enum CurrentCheckBox: String {
    case check = "checkmark.square.fill"
    case nonCheck = "checkmark.square"
}

struct LogInTitleView: View {
    
    @Binding var state: CurrentState
    @Binding var loginStatus: LoginStatus
    
    init(loginStatus: Binding<LoginStatus> = .constant(.loginFailed), state: Binding<CurrentState> = .constant(.loading)) {
        
        _loginStatus = loginStatus
        
        _state = state
    }
    
    @State private var userEmail: String = ""
    @State private var userPassword: String = ""
    @State private var checkBox: CurrentCheckBox = .nonCheck
    @State private var showing: Bool = false
    
    var body: some View { 
        
        VStack(spacing: 0) {
            // 중략...
            HStack {
                TextField("Text your email", text: $userEmail)
                    .textFieldStyle(.roundedBorder)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                
                Button(action: {
                    print("Delete")
                    self.userEmail = ""
                }) {
                	// 텍스트필드에 1글자 이상이라도 글자가 있는 경우 Delete버튼 생성
                    if (self.userEmail.count > 0) {
                        Image(systemName: "multiply.circle.fill")
                            .foregroundColor(.secondary)
                            .font(.system(size: 25))
                    }
                }
            }
            .padding(.bottom, 15)
            // 중략...
            
            HStack(spacing: 0) {
                
                Image(systemName: checkBox.rawValue)
                    .padding(.trailing, 5)
                    .foregroundColor(.green)
                    .onTapGesture(perform: {
                    	// 체크박스를 클릭하면 현재 상태에 따라 상태 변경
                        if self.checkBox == .nonCheck {
                            self.checkBox = .check
                        } else {
                            self.checkBox = .nonCheck
                        }
                    })
                    // 중략...
                    
            Button(action: {
                print("Log In")
                // 텍스트필드 중 하나라도 입력이 없는 경우 경고 알림
                if self.userEmail.count == 0 || self.userPassword.count == 0 {
                    self.showing = true
                } else {
                	// 로그인 성공
                    withAnimation {
                        self.loginStatus = .loginSucces
                        self.state = .loading
                    }
                }               
            }, label: {
            	// 중략...
            })
            .alert("The email or password is invalid.", isPresented: $showing) {
                Button("OK", role: .cancel) {
                	// 체크박스의 상태에 따라 Email을 지울지 말지 선택
                    if checkBox == .nonCheck {
                        self.userEmail = ""
                    } else {
                        return
                    }
                    self.userPassword = ""
                }
            }
            .padding(.bottom, 30)
            // 중략...
    }
    
}

---

결과물

로그인 실패	로그인 성공	아이디 저장

---

-오늘의 학습 후기-

추석연휴를 지새고 약 일주일을 쉰 후 오랜만에 코딩작업을 하니 무언가 어색하고 어렵게 느껴졌다.
다행히 조금 하다보니 금새 익숙해져서 무리없이 작업을 진행할 수 있었지만,
학습은 역시 꾸준히 하는 것이 중요하다는 것을 느낄 수 있었다.
사전캠프 기간이 벌써 절반은 지나간 것 같은데 아직 무언가 이루었다는 생각은 들지 않는다.
남은 기간동안 더 열심히 공부하여 본 캠프가 시작되기 전 무언가를 이루어내고 싶다고 생각했다.