Sesac 시험강의 응용 03.헬스장 멤버등록및 체크인 앱 구현(dictionary 활용)

Woong·2022년 6월 2일
0
post-thumbnail

선생님이 강의중에 Dictionary를 활용하여 학생증을 만들 수 있다고 말해줬다.
(물론 실제로는 Dictionary를 활용하여 만들진 않는다고 하는데)
하지만, 나는 지금있는 지식을 총동원해서 헬스장 출입 및 멤버등록 앱을 만들어보려고한다.

느낀점 :
1. 이거 로그인창을 Dictionary로 만드는건 진짜 비효율적인것같다...(특히, 이중딕셔너리..)
2. 더 좋은방법이 있을 것 같은데 찾아보고싶다.
3. 화면전환, 뷰컨트롤러 간의 데이터 전달 방법을 더 공부할 필요가 있는 것 같다.
4. 정말 배운걸 짜낸 것 같다.
5. 아무튼 기쁘다.
6. GitHub에 첫번째 프로젝트로 업로드 해야겠다!
7. 유후

1. UI 구성

일단, UI구성은 위와같이 해줬다.

  1. MainViewController에 (멤버등록 기능,로그인 기능)
  2. ResisterViewController에 (멤버등록 기능: 등록 시, Dictionary에 회원데이터 추가)
  3. LoginViewController에 (회원데이터 불러오기: 이름,남은기간, 창 자동종료 카운트 및 자동종료)

2. segue & identifier 구현

우선, segue를 만들어 각각의 움직임을 구현해줬다.
(*그림은 위 그림과 동일)

  1. 멤버등록으로 갔을 때는 아예 창이 넘어갔으면 좋겠어서 PresentModally - Full Screen 방식을 사용했고,
  2. OK(Login)으로 갔을 때는 사용자들이 닫을 수 있도록 그냥 Show 형식으로 구성해줬다.
  3. 각각의 뷰컨트롤러 파일과 스토리보드 identifier를 연결시켜줬다.

3. File.swift - Class MemberInfo 생성

멤버로 등록된 고객의 데이터를 담고있는 클래스를 생성했다. 이는 Dictionary를 활용하여 구현했고 만약 ResisterViewController에서 멤버등록 시 Memberinfo의 연산프로퍼티에 저장되도록 구성했다.

  1. static var dictionary -> 회원번호(Key) : [회원이름(Value[0]),이용권종류(Value[1]) 로 지정
class MemberInfo {
    static var dictionary : [String:[String:String]] = [:]
}

사실 이 지점에서 나는 왜 ?static을 사용했나? 다른 프로퍼티는 어떻게 불러와서 사용하는 줄 모른다..(static이 . 형태로 불러오기가 편리해서... 그냥 사용했당.. 나중에 공부해서 velog에 정리하겠다... ㅠㅠ (무튼 잘됨)

4. ResisterViewController 기능구현

여기서 구현할 기능은 3가지다.

  1. 입력한 [이름,회원번호,회원권] 의 정보를 MemberInfo Class에 저장한다.
  2. 회원권 눌렀을 때, 애니메이션(어거지로?) 처리하기
  3. 빈 칸 있을 때, Alert창 띄우기

자세한 내용은 아래 코드 내부 주석을 보면서 참고하라.

import UIKit

class ResistrationViewController: UIViewController {
    
    @IBOutlet weak var tfName: UITextField!		// 이름 입력창
    @IBOutlet weak var tfNumber: UITextField!	// 회원번호(휴대폰번호 )입력창
    let btnStyle = true   // ButtonBackground를 위한 기본코드 (의미x)
    var useValue: String = ""		// 이용권종류를 저장하기 위한 변수
    
    
    @IBOutlet weak var firstBtnStyle: UIButton!	// 첫번째버튼 스타일위한 아울렛
    @IBOutlet weak var secondBtnStyle: UIButton! // 두번째버튼 스타일위한 아울렛
    @IBOutlet weak var thirdBtnStyle: UIButton! // 세번째버튼 스타일위한 아울렛
    @IBOutlet weak var fourthBtnStyle: UIButton! // 네번째버튼 스타일위한 아울렛
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
    }
    
    @IBAction func btnUse(_ sender: UIButton) {		// 회원권선택 버튼
        
     // 1. 회원권 선택 시, 종류를 useValue변수에 임시로 저장 (MemberInfo Class에 넘기기 전에 임시로!)     
        useValue = (sender.titleLabel?.text)!	
     // 2. 회원권 선택 시, 타이틀라벨의 이름을 키 값으로하여 색상이 변경되도록 함.           
        switch btnStyle {
        case sender.titleLabel?.text == "1개월 이용권":
            firstBtnStyle.backgroundColor = UIColor.red
            secondBtnStyle.backgroundColor = UIColor.lightGray
            thirdBtnStyle.backgroundColor = UIColor.lightGray
            fourthBtnStyle.backgroundColor = UIColor.lightGray
        case sender.titleLabel?.text == "3개월 이용권":
            firstBtnStyle.backgroundColor = UIColor.lightGray
            secondBtnStyle.backgroundColor = UIColor.red
            thirdBtnStyle.backgroundColor = UIColor.lightGray
            fourthBtnStyle.backgroundColor = UIColor.lightGray
        case sender.titleLabel?.text == "1년 이용권":
            firstBtnStyle.backgroundColor = UIColor.lightGray
            secondBtnStyle.backgroundColor = UIColor.lightGray
            thirdBtnStyle.backgroundColor = UIColor.red
            fourthBtnStyle.backgroundColor = UIColor.lightGray
        case sender.titleLabel?.text == "평생 이용권":
            firstBtnStyle.backgroundColor = UIColor.lightGray
            secondBtnStyle.backgroundColor = UIColor.lightGray
            thirdBtnStyle.backgroundColor = UIColor.lightGray
            fourthBtnStyle.backgroundColor = UIColor.red
        default : break
            
        }
    }
    
    @IBAction func btnResistration(_ sender: UIButton) {	// 완료버튼
  
  	//1. [회원이름,번호,회원권] 세가지가 전부 입력된다면, --- 
    //2. MemberInfo Class의 dictionary 프로퍼티에 저장되도록 한다.
    //3. dismiss로 창 종료해준다.
        
        if !tfName.text!.isEmpty && !tfNumber.text!.isEmpty && !useValue.isEmpty{
            
            MemberInfo.dictionary.updateValue([tfName.text!:useValue], forKey: tfNumber.text!)
            
            dismiss(animated: true)
   //1. [회원이름,번호,회원권] 세가지 중 하나라도 입력되지않는다면,
   //2. Alert창이 뜨도록 하고, 정보 입력을 강제한다.
        }else{
            let alert = UIAlertController(title: "경고", message: "정보를 모두 입력해주세요", preferredStyle: .alert)
            let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
            
            alert.addAction(okAction)
            
            present(alert, animated: true, completion: nil)
        }
    }
}

5. Login Viewcontroller 기능구현

여기서 구현할 기능은 3가지다.

  1. 입력한 회원번호(MemberInfo.dictionary.keys)가 일치한다면, 체크인 완료 창으로 화면을 전환시켜주기
  2. 만약, 입력한 회원번호가 클래스의 연산프로퍼티 데이터에 없을 때, 경고 라벨 출력

자세한 내용은 아래 코드 내부 주석을 보면서 참고하라.

import UIKit

class MainViewController: UIViewController {

    @IBOutlet weak var tfNumberLog: UITextField!
    @IBOutlet weak var tfMessage: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    
    @IBAction func btnOk(_ sender: UIButton) { // OK 버튼 누를 경우, 
  //1. 클래스의 Dictionary 타입프로퍼티의 키값에 해당 회원번호를 포함하고 있다면 loginVC로 화면전환 
        if MemberInfo.dictionary.keys.contains(tfNumberLog.text!) {
            
            let uvc = storyboard?.instantiateViewController(withIdentifier: "loginVC")
            uvc?.modalTransitionStyle = UIModalTransitionStyle.coverVertical
            present(uvc!, animated: true)
      // 로그인 시 필수 입력창 초기화
            tfNumberLog.text?.removeAll()
                        
  //2. 해당 클래스의 타입프로퍼티에 키값이 포함되어있지 않다면 경고라벨 출력 후 화면전환 x            
        }else{
            tfMessage.textColor = UIColor.red
            tfMessage.text = "경고 : 등록되지않은 회원입니다. \n올바른 회원번호(전화번호)를 입력해주세요!"
        }
    }
}

6. LoginViewController 기능구현

이곳에서 구현할 기능은 2가지다.

  1. MainViewController에서 입력받은 회원번호를 MemberInfo.Dictionary에서 찾아와 [이름 + 회원권종류] 출력해주기
  2. TimeSelector를 사용하여 5..4..3..2..1..0 이 후, 창을 종료시키기
import UIKit

class LoginViewController: UIViewController {

    @IBOutlet weak var lblBigMessage: UITextView!
    @IBOutlet weak var lblUseValueType: UILabel!
    @IBOutlet weak var tfAutoClose: UITextField!

	// objc func 에서 count == -1 될 때, 창이 닫히도록 설정하기 위한 변수
   
    var timerCount = 6
    
    override func viewDidLoad() {
        super.viewDidLoad()
    // TimerSelector    
        let timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
        
    // 서현웅회원님!정상적으로 체크인되셨습니다.
    // MemberInfo 클래스의 Dictionary.values에서 로그인했던 회원정보의 키값을 추출
        
       lblBigMessage.text = "\(MemberInfo.dictionary[MemberInfo.logInNum]!.keys)님 정상적으로 체크인 되었습니다."

        
    // 이용권 종류 표기 
    // MemberInfo 클래스의 Dictionary.values에서 로그인했던 회원정보의 밸류값을 추출
        
        lblUseValueType.text = "이용권 : \(MemberInfo.dictionary[MemberInfo.logInNum]!.values)"
    }
 	
    // TimeSelector를 구동 시키기위한 @objc func
    // timerCount가 1초가 지날때마다 -1되며, 메시지를 보여준다.
    // 5..4..3..2..1..0 , -1이 될 때, dismiss하여 창을 종료
    
    @objc func updateTime() {
    
        timerCount -= 1
        
        if timerCount == -1 {
            dismiss(animated: true)
        }else{
            tfAutoClose.layer.borderWidth = 1.0
            tfAutoClose.text = "\(timerCount)초 후, 메인페이지로 이동합니다."
        }
    }
}

7. 시연영상

profile
https://github.com/iOS-Woong

0개의 댓글