[Project 일지] 단어장 앱 만들기 (1)

오늘부터 실전 프로젝트 전 마지막 팀 프로젝트가 진행되었다. 우리 팀이 선정한 주제는 단어장 앱 만들기! 이번에 기간이 조금 긴 만큼 가능하다면 출시까지 해보는 것을 목표로 프로젝트를 수행할 예정이다.

 

오늘은 전반적인 팀 코드 및 깃허브 컨벤션, 주제선정, 역할 분담 등 회의하는 시간이 길어 구현한 내용은 많지 않지만 기록으로 남겨두려고 한다.

 

내가 맡은 역할은 단어장 앱 내 캘린더와 그 날 저장된 단어를 표시하는 탭과 문의하기 , 개인정보 , 로그인 정보 등 담고 있는 마이페이지 구현을 맡았다.

 

Calender 구현하기

원래 iOS 15 버전을 기준으로 개발이 시작되었으나, 간편하게 사용할 수 있는 UICalender가 iOS16 버전부터 사용이 가능한 점이 발견되어 iOS16 버전의 호환되는 기기들을 살펴 보았다.

 

거의 모든 기기가 iOS16 버전을 지원하고 있는 것으로 확인되어 팀원들에게 양해를 구하고 iOS16버전으로 개발을 시작하게 되었다.

var selectedDate: DateComponents? = nil

let dateView: UICalendarView = {
   var view = UICalendarView()
    view.wantsDateDecorations = true
    return view
}()

let viewLine: UIView = {
    var view = UIView()
    view.backgroundColor = .gray
    return view
}()

let dayTableView = UITableView()

UICalenderView를 생성하고 테이블 뷰와 경계를 나눌 UIView하나 만들어 준 뒤 테이블 뷰까지 생성하면 이 탭에서 만들어야 할 컴포넌트들이 완성된다.

func setupUI() {
    view.addSubview(dateView)
    view.addSubview(viewLine)
    view.addSubview(dayTableView)
    
    dayTableView.delegate = self
    dayTableView.dataSource = self
    dayTableView.register(CalenderTableViewCell.self, forCellReuseIdentifier: CalenderTableViewCell.identifier)
    dayTableView.showsVerticalScrollIndicator = false
    
    dateView.snp.makeConstraints {
        $0.top.equalTo(view.safeAreaLayoutGuide).offset(20)
        $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(10)
    }
    
    viewLine.snp.makeConstraints {
        $0.top.equalTo(dateView.snp.bottom).offset(50)
        $0.leading.trailing.equalTo(view.safeAreaLayoutGuide)
        $0.height.equalTo(1)
    }
    
    dayTableView.snp.makeConstraints {
        $0.top.equalTo(viewLine.snp.bottom).offset(20)
        $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(20)
        $0.bottom.equalTo(view.safeAreaLayoutGuide)
    }
}

그 이후 오토 레이아웃을 잘 잡아주면 퀄리티 좋은 캘린더 구현이 이렇게 쉽게 사용이 가능하다.

TableView 구현하기

extension CalenderViewController: UITableViewDelegate, UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: CalenderTableViewCell.identifier, for: indexPath) as? CalenderTableViewCell else { fatalError("테이블 뷰 에러") }
        
        cell.layer.cornerRadius = 10
        cell.layer.borderWidth = 1.0
        cell.layer.borderColor = UIColor.gray.cgColor
        cell.selectionStyle = .none
        
        return cell
    }
    
}

테이블 뷰와 컬렉션 뷰는 프로젝트를 거치면서 많이 해봐서 그런지 이제 능숙하게 구현이 가능해 진 것 같다.

 

아직 저장된 단어가 없으므로 구현된 내용을 확인할 수 있도록 이렇게 설정해서 구현하면 완료된다!

 

여기서 고민되는 점은 테이블 뷰 셀 사이의 간격을 벌리고 싶은데, 구글링에서 확인되는 내용대로 진행해도 사이 간격이 잘 벌어지지 않는 문제가 있어 컬렉션 뷰를 활용할지 고민되는 부분이다.

 

이제 시작 된 긴 팀프로젝트 기간이 시작되었으니 이번 팀프로젝트도 화이팅해보자!