내일배움캠프 앱개발 심화 프로젝트

3X3X3 하루 3분 3번 3달동안 공부하면~

1. Icon, Team Color Asset에 추가하기

• 이번 프로젝트에서 만드는 앱의 테마(?) 색상을 Asset으로 추가했다. sRGB(255, 255, 255)값을 기준으로 컬러를 넣었다.
  • Xcode 내장 기능인지는 모르겠는데, 네이밍을 보다시피 Team332Color로 했더니, UIColor.team332 와 같이 색상을 사용할 수 있었다.

2. UI 구성하기

// 모든 단어장
class TotalVocabularyList {
    static let shared = TotalVocabularyList()
    
    private init() {}
    
    var list: [VocabularyList]? // 사용자가 생성한 단어장을 모두 모은 프로젝트 내의 유일한 요소
}

// 단어 하나
struct Word {
    var word: String // 외국어 단어
    var meaning: String // 한글 뜻
    var isCorrect: Bool // 정답 여부
}

// 단어장
struct VocabularyList {
    var name: String // 단어장 이름
    var word: [Word] // 단어장 내용
    var isCompleted: Bool // 리스트 학습 완료 여부(만점인지 아닌지로 결정)
}

• 위의 코드와 같은 데이터 모델을 사용할 예정이다.
• VocabularyList.word.word 하나(외국어 단어)를 라벨에 띄워 사용자에게 보여주고, UITextField에 입력을 받아 뜻을 맞추면 isCorrect(정답 여부)를 true로 기록하는 기능을 만들면 된다.
• 모든 단어에 대한 시험이 끝나면 isCorrect값이 저장된 VocabularyList 자료를 시험결과를 보여주는 ViewModel로 전달한다.
• 이런 로직을 수행할 수 있도록 화면에 UILabel과 UITextField, UIButton을 만들어 두었다.

class TestViewController: UIViewController {
    
    let quizStack: UIStackView = {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = -15
        stack.alignment = .leading
        return stack
    }()
    
    let quizLabel: UILabel = {
        let label = UILabel()
        label.text = "QUIZ"
        label.font = .systemFont(ofSize: 20)
        label.textAlignment = .center
        label.backgroundColor = .team332
        label.layer.cornerRadius = 15
        return label
    }()

    let wordLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .team332
        label.text = "문제"
        label.font = .systemFont(ofSize: 30)
        label.layer.masksToBounds = true
        label.numberOfLines = 0
        label.layer.cornerRadius = 20
        label.textAlignment = .center
        return label
    }()
    
    lazy var meaningTextField: UITextField = {
       let field = UITextField()
        field.placeholder = "정답을 입력하세요"
        field.borderStyle = .roundedRect
        field.backgroundColor = .team332
        field.textAlignment = .center
        return field
    }()
    
    let submitButton: UIButton = {
        let button = UIButton(configuration: .filled())
        button.setTitle("제출하기", for: .normal)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.hideKeyboardWhenTappedAround()

        view.backgroundColor = .white
        setStackView()
        addViews()
        setConstraint()
    }
    
    private func setStackView() {
        [quizLabel, wordLabel].map {
            self.quizStack.addArrangedSubview($0)
        }
    }
    
    private func addViews() {
        view.addSubview(quizStack)
        view.addSubview(meaningTextField)
        view.addSubview(submitButton)
    }
    
    private func setConstraint() {
        quizLabel.snp.makeConstraints({ make in
            make.height.equalTo(60)
            make.width.equalTo(80)
        })
        wordLabel.snp.makeConstraints({ make in
            make.width.equalTo(self.view).multipliedBy(0.8)
            make.height.equalTo(self.view).multipliedBy(0.2)
        })
        quizStack.snp.makeConstraints{ make in
            make.centerX.equalToSuperview()
            make.top.equalToSuperview().offset(200)
        }
        meaningTextField.snp.makeConstraints({ make in
            make.width.equalTo(self.view).multipliedBy(0.6)
            make.height.equalTo(self.view).multipliedBy(0.15)
            make.top.equalTo(quizStack.snp.bottom).offset(30)
            make.centerX.equalTo(self.view)
        })
        submitButton.snp.makeConstraints({ make in
            make.height.equalTo(self.view).multipliedBy(0.05)
            make.width.equalTo(self.view).multipliedBy(0.4)
            make.top.equalTo(meaningTextField.snp.bottom).offset(30)
            make.centerX.equalTo(self.view)
        })
    }
}

• 화면을 캡처해서 포스트하기에는 너무 조악한 화면이기에... 코드로 대신합니다...

3. 내일 할 일

1. 단어장 더미데이터를 만들고, 시험을 진행할 수 있도록 하는 코드를 작성하기
2. 시험이 모두 끝나고, 정답을 맞춘 단어에 대한 마킹(Word 자료형의 isCorrect 변수가 제대로 입력, 저장이 되었는지)을 확인하기