SwiftUI / Team Project 5

-팀 프로젝트 진행-

오늘의 진행 내용

• forgot password 뷰 구현
• 이메일을 입력하면 비밀번호를 알려주는 시스템 구현

---

ViewReview

ForgotPasswordView
'비밀번호를 잊어버렸습니까?'
요즘처럼 자동으로 아이디나 비밀번호를 저장하는 시스템이 있고, 다양한 매체에서 회원가입을 진행하다보면 특정 사이트에서 비밀번호를 잊어버리는 경우가 종종 있다. 때문에 비밀번호를 찾을 수 있는 방법을 제시해 주는데, 그 중 오늘 구현한 것은 회원가입시 사용한 이메일을 입력하면 비밀번호를 알려주는 시스템이다.
이메일만 입력하면 비밀번호를 알려주기 때문에 보안에서는 취약하지만, 이번 과정에서는 기능의 구현만을 실천할 예정이기 때문에 보안은 생략했다.

1. 네비게이션 링크 설정하기

먼저 LoginView에서 Forgot password?를 클릭하면 네비게이션 뷰를 통해 비밀번호를 찾는 뷰로 이동하도록 설정한다.

NavigationLink(destination: ForgotPasswordView()) {
	Text("Forgot password?")
		.font(.system(size: 12))
        .fontWeight(.light)
        .foregroundColor(.secondary)
}

2. 에러타입 생성

이메일을 입력했을 때, 등록된 유저 정보가 아닐 경우와 맞는 경우에 따라 다른 값을 보여주도록 열거형으로 분류한다.

enum ConfirmValue: String {
    case notExist = "This email does not exist!!"
    case successEmail = "Your password is as follows."
}

3. 초기 설정

회원가입에서 유저의 정보를 UserDefaults에 저장했기 때문에, 이를 불러오는 변수를 하나 선언하고, 이메일을 입력할 텍스트필드의 바인딩 값, 에러타입에 따라 Alert가 나타나도록 하기 위한 바인딩 값을 선언한다.

// 저장된 유저의 패스워드를 불러온다.
let checkPassword = UserDefaults.standard.string(forKey: "userPassword")
    
@State private var userEmail: String = ""
@State private var showing: Bool = false
@State private var confirmValue: ConfirmValue = .notExist

4. 비밀번호 찾기 구현

이메일을 입력후 Confirm 버튼을 누르면 조건을 충족하는 경우 Alert로 비밀번호를 띄우고, 충족하지 못한 경우 에러를 띄운다.

Button(action: {
	print("Confirm Button clicked")
    // 유저정보를 저장하는 상수를 선언
	let checkEmail = UserDefaults.standard.string(forKey: "userEmail")
    // 입력한 이메일이 유저 정보와 일치하는지 확인
	guard self.userEmail == checkEmail else {
		self.confirmValue = .notExist
		self.showing = true
		return
	}
	self.confirmValue = .successEmail
    self.showing = true
	}, label: {
		Text("Confirm")
			.foregroundColor(.white)
			.font(.system(size: 15))
			.fontWeight(.medium)
			.frame(width: 350, height: 40)
			.background(Color.coffee)
			.cornerRadius(10)
	})
    // 에러타입의 상태에 따라 다른 Alert 창을 띄움
	.alert(isPresented: $showing) {
		switch confirmValue {
		case .notExist:
			return Alert(title: Text("Warning"), message: Text(confirmValue.rawValue), dismissButton: .cancel(Text("OK")))
		case .successEmail:
			return Alert(title: Text("List of passwords"), message: Text(checkPassword!), dismissButton: .cancel(Text("OK")))
		}		
	}

---

실행 결과물

에러가 발생할 때	비밀번호 찾기에 성공했을 때

---

-오늘의 학습 후기-

오늘은 사전캠프 퀘스트를 모두 완료하여 진행하지 않았고, 팀 프로젝트만 진행하였다.
구현한 뷰는 비밀번호를 찾는 뷰인데, 회원가입이나 로그인에 사용했던 데이터들을 재활용 하며 제작하면 되어서 큰 어려움은 없었다.
다만, 네비게이션 뷰를 중첩 적용한 탓에 문제가 있었는데, 팀원의 도움으로 무사히 해결했다.
부모뷰에 네비게이션 뷰를 작성하면 자식뷰에서는 네비게이션 뷰로 감싸지 않아도 네비게이션 링크를 사용할 수 있다는 사실을 처음 알았다.
뭐든 혼자서 해결하는 것보다는 주변에 조언을 구하는 것도 좋은 해결책이라는 것을 다시한번 깨닫게 되었다.