26. 스파르타 코딩 클럽 - 팀 프로젝트 1, 2일차

  👥 팀 프로젝트 - 키오스크 앱 만들기

내일 배움 캠프 6주 차 과제는 팀 프로젝트이다.

일주일의 기간동안 각자 선정한 주제로 키오스크 앱을 만들어 보는 프로젝트이다.

 

[ 1일차 ]

먼저 첫날인 어제는 브레인스토밍을 통해 주제를 선정하고, 와이어 프레임을 작성하고 목업을 만들었다.

 

목업 이미지

우리 팀의 주제는 굿즈를 판매하는 모바일 주문 앱이고, 이름은 '오더ㅋ'이다.

이름의 뜻은 주문(Order)과 웃음 또는 즐거움(ㅋ)의 합성어로, 즐거움을 주문한다는 의미를 담고 있다.

또한, '오타쿠'라는 단어처럼 한 분야에 마니아 이상으로 심취한 사람을 의미하는 뜻을 빌려,

우리도 개발에 오타쿠처럼 심취해 보자!라는 의지를 담아 네이밍 하였다.

 

우리 팀은 4명이고, 서로 부분을 나눠서 역할을 분담했다.

내가 맡은 역할은 녹색 테두리 부분인 사용자가 상품을 장바구니 버튼을 눌러 클릭했을 때

해당 상품들이 담긴 장바구니 부분을 구현하는 것이다.

주문 내역 파트 구현

 

추가로 SA를 작성하고, 역할을 나누고, Github 브랜치를 나누고, 컬러, 폰트를 정하고 등등...

점심이랑 저녁 시간도 미루면서 팀 프로젝트 초기 작업을 하다 보니 하루가 녹았다.

 

그러나 주제 선정과 목업 디자인이 나름 괜찮게 나온 거 같아서 좋았다.

---

[ 2일 차 ]

2일 차인 오늘은 README 작성과 커스텀 Table View를 만들기 위해서 Table View를 간단하게 만들어 보았다.

 

스탠다드 분반 수업이 끝나고 README를 작성하기 시작했는데

조금씩 조금씩 내용을 추가하고, 꾸미다 보니 또 4시간이 녹아있었다...

 

오더ㅋ 의 README 파일 주소를 아래 링크에 남겨 두겠다.

Oduk/README.md at main · heopill/Oduk

 

[ Table View 만들어보기 ]

그다음으로는 내일 본격적인 Custom Table View를 만들기 위해서 기본 Table View를 만들어 보았다.

저번에 한번 했었는데 다시 하려니까 기억이 잘 안 나서

예전 프로젝트 파일을 찾아보고 구글링을 통해 간단한 Table View를 완성했다.

 

//  ViewController.swift

import UIKit
import SnapKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let orderTable = OrderTable()
        self.view = orderTable
        
    }
}

 

//  OrderTable.swift

import Foundation
import UIKit
import SnapKit

class OrderTable: UIView, UITableViewDelegate, UITableViewDataSource {
    
    private let tableView = UITableView()
    private let cellArray = ["고독한 영라기", "고독한 영라기2", "고독한 영라기3",
                             "고독한 영라기4", "고독한 영라기5", "고독한 영라기6",
                             "고독한 영라기7", "고독한 영라기8", "고독한 영라기9"]
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        makeTableView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        makeTableView()
    }
    
    func makeTableView() {
        self.backgroundColor = .cyan
        
        self.addSubview(tableView)
        
        tableView.snp.makeConstraints { make in
            make.top.equalTo(self.safeAreaLayoutGuide).offset(594)
            make.leading.equalTo(self.safeAreaLayoutGuide).offset(27)
            make.width.equalTo(348) // 테이블 뷰의 가로 길이 설정
            make.height.equalTo(99) // 테이블 뷰의 세로 길이 설정
        }
        
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellArray.count // 테이블 뷰에 표시할 셀의 갯수
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = "\(cellArray[indexPath.row])"
            return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 33 // 전체 테이블 뷰의 크기 (높이 : 99)  / 보이고 싶은 셀의 갯수 (3) = 33
    }
}

 

---

 📋 내일 할 것

1. 현재 Tabel View를 Label, Button이 추가된 Custom Table View로 변경하기
2. 버튼 클릭 시 이벤트 처리하기
3. Table View 아래에 Label을 추가해서 총 개수와 총금액 표시하기
4. Figma에 작성된 제약조건과 동일하게 Xcode에서 UI 제약조건 설정하기

할 게 산더미

 

9to9으로 팀 프로젝트를 하고 있지만 중간에 특강도 있고, 분반 수업도 있어서

시간이 정말 빨리 간다 ㅠㅠ

오후 9시 이후에 야자가 거의 필수다...

 

ㅠㅠㅠ