SwiftUI / Team Project 3

오늘은 iOS 5기 사전캠프 퀘스트 한 개와 팀 프로젝트로 진행 중인 UI 제작 중 회원가입UI를 구현해 보았다.

---

-퀘스트 진행-

퀘스트명: 은행 계좌 관리 시스템을 구축해요.

프로퍼티 옵저버 기능을 활용하여 은행 계좌를 관리하는 시스템을 만든다.

// iOS 5기 사전캠프 퀘스트, 은행 계좌 관리 시스템

// 1. 전역 변수를 사용하여 은행 계좌 잔액을 관리하세요.
var balance: UInt = 0 {
    willSet {
        print("이전 잔액: \(balance), 현재 잔액: \(newValue)")
    }
    didSet {
        print("현재 잔액: \(balance), 이전 잔액: \(oldValue)")
    }
}

balance = 2500
balance += 100

// 2. 실행결과와 같도록 만들기
var bankBalance: Int = 0 {
    willSet {
        guard newValue >= 0 else {
            print("🚨 경고: 잔액은 음수가 될 수 없습니다. 잔액을 0원으로 설정합니다.")
            bankBalance = 0
            print("최종 잔액: \(bankBalance)원")
            return
        }
        print("잔액이 \(newValue)원으로 변경되었습니다.")
    }
}

bankBalance = 1000
bankBalance -= 500
bankBalance -= 1000

---

-팀 프로젝트 진행-

오늘의 진행 내용

• 회원가입 뷰 작성
• 회원가입 기능 구현
• 로그인 뷰와 연동(실패)

  금일 구현한 뷰

  ---

View Review

SignUpView
SignView는 로그인뷰 진입 전 Sign Up 버튼을 눌러 진입하는 뷰이다.
Email, Password, Confirm password 3개의 텍스트 필드가 있으며, 여기에 입력한 값을 UserInformation이라는 Dictionary값에 저장하는 과정을 구현해 보았다.
이 때, 텍스트 필드의 구현 코드는 지난번 로그인뷰에서 작성한 코드와 동일하게 구성하였다.

1. 에러타입 생성

먼저, 회원가입 중 발생할 수 있는 상황을 가정하여 3가지의 에러타입을 만들었다.

enum AlertError: String {
    case confirmError = "Password does not match." // 비밀번호와 컨펌비밀번호가 일치하지 않을 때
    case blankError = "There are empty values." // 텍스트필드에 빈 값이 하나라도 존재할 경우
    case duplicateError = "This is a duplicate email." // 이메일이 중복되는 경우
    case noError
}

2. 초기 설정

@State를 활용하여 텍스트 필드를 구현할 때 바인딩할 값과 에러타입에 대한 초기값을 설정하였다.

// 텍스트 필드 값
@State private var signUpUserEmail: String = ""
@State private var signUpUserPassword: String = ""
@State private var confirmUserPassword: String = ""
    
// 에러타입 초기 설정
@State private var errorShowing: Bool = false
@State private var error: AlertError = .noError

// 유저 정보를 저장할 값
@State var userInformation = UserInformation(userInformation: [:])

3. 회원가입 버튼 구현

텍스트필드에 모든 값을 입력하면 Log In 버튼을 사용하여 회원가입을 완료한다.
이 때, 버튼을 누르면 에러타입에 감지되는지 3가지 조건을 확인한 후 문제가 없을 경우 메인 화면으로 이동하도록 코드를 구현하였다.

 Button(action: {
	print("Login button clicked")
    // 조건 1. 패스워드와 컨펌패스워드의 값이 같은가?
	guard self.signUpUserPassword == self.confirmUserPassword else {
		self.errorShowing = true
        self.error = .confirmError
        self.signUpUserPassword = ""
        self.confirmUserPassword = ""
        return
	}
    // 조건 2. 입력한 이메일이 이미 존재하지 않는가?            
	guard (self.userInformation.userInformation[self.signUpUserEmail]) == nil else {
		self.error = .duplicateError
		self.errorShowing = true
		return
	}
    // 조건 3. 모든 텍스트 필드가 빈 값이 아닌가?            
	if self.signUpUserEmail.count > 0 && self.signUpUserPassword.count > 0 && self.confirmUserPassword.count > 0 {
                    
		self.userInformation.userInformation[self.signUpUserEmail] = self.signUpUserPassword
                    
		withAnimation {
        	self.loginStatus = .signUp
			self.state = .loading
		}
                    
	} else {
		self.error = .blankError
		self.errorShowing = true
	}
}) {
	Text("Log In")
		.foregroundColor(.white)
		.font(.system(size: 15))
		.fontWeight(.medium)
		.frame(width: 350, height: 40)
		.background(Color.coffee)
		.cornerRadius(10)
	}
    // 위 조건을 하나라도 만족하지 못한 경우 Alert 경고 창 생성
	.alert(error.rawValue, isPresented: $errorShowing) {
		Button("OK", role: .cancel) {
	}
}

4. 해결하지 못한 과제

기존에 구현하려고 했던 것은 회원가입을 통해 이메일과 패스워드를 Dictionary값에 저장하고, 이 값을 로그인 뷰에서 확인하여 딕셔너리 값에 저장된 아이디와 비밀번호로만 로그인이 가능하게끔 하는 것이었다.
그러나 이를 구현하는 과정에서 로그인 뷰에서 딕셔너리 값과 비교하는 중 계속 에러가 발생하여 결국 딕셔너리에 값을 저장하는 과정까지만 진행하였다.
추후 해결방법을 찾아보며 다시 구현에 도전해 볼 생각이다.

---

결과물

값이 비었을 때	비밀번호가 틀렸을 때	회원가입 성공!

---

-오늘의 학습 후기-

오늘은 팀원과 함께 iOS 5기 사전캠프의 퀘스트인 은행 계좌 관리에 대해 작성해 보았다.
이 과정에서 같은걸 배워도 서로 다른 방법으로 문제풀이를 하는 것을 알 수 있었고, 흥미로움을 느꼈다.
다른 팀원들의 방식을 참고하여 추후 다른 미션에서도 활용할 수 있을 것이라고 생각했다.
또, 팀 프로젝트인 UI 제작을 진행하였는데, 회원가입UI를 작성하며 어려움을 많이 겪었다. 결국 원하던 대로 완전히 구현하지 못하였고,
추후 해결방안을 마련하여 수정을 진행할 예정이다.
사전캠프 기간 내에 완성할 수 있을지 걱정이다.