[ Project ] 퍼스널 모빌리티앱 #1 / 초기 와이어 프레임 / 마이페이지 구현

 

 

안녕하세요~!

오늘은 새로운 팀 프로젝트를 시작한 날입니다!

팀원들과 상의 끝에 퍼스널 모빌리티앱을 구현해보기로 했어요~!

MapKit을 처음 사용해 봐서 꼭 도전해보고 싶었던 앱이었습니다!

 

 

 

초기 와이어 프레임

 

초기의 와이어 프레임입니다. 저희는 GCOO 앱을 모방하여 앱을 디자인하였습니다~!

 

총 5개의 페이지로 구성되어있습니다.

• 로그인 화면
• 회원가입 화면
• 맵 화면
• 사용자 화면
• 대여 화면

 

 

 

이번에 제가 맡은 구현 부분은 사용자 화면입니다!✨

사용자 화면 ( 마이페이지 ) 구현

 

구현 전 로직 구상하기

 

제목 부분은 뒤로 가기 버튼이 자동으로 생성이 되는 내비게이션 바를 이용하여,

프로필, 대여중, 이전 대여 목록 부분은 테이블 뷰의 세션을 나누어서 구현을 해야겠다는 생각이 들었어요~!

 

 

 

? View로 구현해도 되는데 왜 굳이 테이블 뷰를 사용했나

사용자가 킥보드를 대여중일 때는 대여중 부분이 사용자 정보 부분에서 보여야 하고, 사용자가 킥보드를 대여중이지 않을 때는 대여중 부분이 보이지 않아 이전 대여 목록 부분이 프로필 바로 아래로 오게끔 오토레이아웃을 조정해야 했는데, 그 부분에서 세션을 나누어서 세션을 없애는 방법이 구현하기에 편할 것 같았어요!

 

또한 "대여중"의 내용 부분과 "이전 대여 목록"의 내용 부분의 형태가 일치하는 부분에서 반복적인 View를 그리는 대신 같은 cell로 구현을 하되 내용을 바꾸는 식으로 구현하는 것을 떠올렸습니다. 이전 대여 목록 부분은 원래 TableView로 그려야 하니 해당 cell을 대여중에서 재사용하고자 했어요!

 

"프로필", "대여중", "이전 대여 목록" 라벨도 동일한 글꼴과 글꼴 크기를 가지고 있어 Section의 제목으로 들어간다면 코드 중복을 방지할 수도 있었습니다!

 

최종적으로 전체 3개의 section으로 나누어 프로필 부분의 cell과 대여중/이전 대여 목록의 cell을 xib로 구현하여 사용하기로 했어요!

 

 

 

UI 작업하기

 

우선 TableView와 로그아웃 버튼의 UI를 잡아주었어요!

 

cell들도 따로 xib 파일을 만들어서 구현해 주었습니다!

 

 

 

UI 연결하기

각각의 UI와 ViewController 간의 object들을 연결해 주었습니다.

 

UserViewController.swift

@IBOutlet weak var userTableView: UITableView!
@IBOutlet weak var logoutButton: UIButton!

 

UserDefaultTableViewCell.swift

@IBOutlet weak var firstLabel: UILabel!
@IBOutlet weak var LastLabel: UILabel!

 

RentalListTableViewCell.swift

@IBOutlet weak var rentalStartTimeLabel: UILabel!
@IBOutlet weak var kickBoardIDLabel: UILabel!
@IBOutlet weak var kickBoardNumberLabel: UILabel!
@IBOutlet weak var rentalTimeLabel: UILabel!
@IBOutlet weak var rentalPriceLabel: UILabel!

 

 

 

TableView 구현하기

 

ViewController의 코드와 TableView의 코드를 분리시켜 주기 위해서 따로 swift 파일을 생성해 주었습니다.

 

우선 tableView를 세팅하는 함수를 만들어서 기본적인 delegate와 dataSource를 설정해 주었고요!

func setUserTableView() {
    
    userTableView.delegate = self
    userTableView.dataSource = self
    
    let nib1 = UINib(nibName: "UserDefaultTableViewCell", bundle: nil)
    let nib2 = UINib(nibName: "RentalListTableViewCell", bundle: nil)
    
    userTableView.register(nib1, forCellReuseIdentifier: "userDefaultCell")
    userTableView.register(nib2, forCellReuseIdentifier: "rentalListCell")
}

두 가지의 cell XIB 파일을 연결해 주는 코드도 넣어주었습니다.

cell에서 identifier 설정하는 것을 까먹으시면 안 돼요~!!!

 

 

 

TableView의 Section 수 결정

// MARK: - 테이블 뷰의 Section 수 결정
func numberOfSections(in tableView: UITableView) -> Int {
    
    // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
    if userData.status {
        return 3
    }else {
        return 2
    }
}

유저가 킥보드를 대여중이라면 3개의 Section을 대여중이 아니라면 2개의 Section을 출력하도록 구현하였어요!

 

 

 

TableView의 SectionHeader 설정

func tableView(_ tableView: UITableView,
               viewForHeaderInSection section: Int) -> UIView? {
    
    let headerView = UIView()
    headerView.backgroundColor = .white
    
    // headerLabel 설정
    let headerLabel = UILabel(frame: CGRect(x: 20, y: 0, width: tableView.bounds.size.width, height: 45))
    headerLabel.font = UIFont.systemFont(ofSize: 16, weight: .bold)
    headerLabel.textColor = UIColor.black // 텍스트 색상 설정
    
    // hearerBorderView 설정
    let borderWidth: CGFloat = tableView.bounds.size.width - 40
	let borderX: CGFloat = (tableView.bounds.size.width - borderWidth) / 2
	let headerBorderView = UIView(frame: CGRect(x: borderX, y: 40, width: borderWidth, height: 2))
	headerBorderView.backgroundColor = .black

    // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
    if userData.status {
        switch section {
        case 0: headerLabel.text = "프로필"
        case 1: headerLabel.text = "대여중"
        case 2: headerLabel.text = "이전 대여 목록"
        default: headerLabel.text = ""
        }
    }else {
        switch section {
        case 0: headerLabel.text = "프로필"
        case 1: headerLabel.text = "이전 대여 목록"
        default: headerLabel.text = ""
        }
    }
    
    headerView.addSubview(headerLabel)
    
    return headerView
}

tableview의 header 부분의 Lable을 설정하고 그 아래 border를 추가한 뒤 section에 따른 header의 이름을 설정해 주었어요!

 

 

 

TableView의 Section에 따른 cell의 개수

// MARK: - tableView의 셀의 개수
func tableView(_ tableView: UITableView,
               numberOfRowsInSection section: Int) -> Int {
    
    // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
    if userData.status {
        switch section {
        case 0: 2
        case 1: 1
        case 2: userData.rentalList.count
        default: 0
        }
    }else {
        switch section {
        case 0: 2
        case 1: userData.rentalList.count
        default: 0
        }
    }
}

사용자의 대여중 여부에 따른 section 수가 달라지므로 각각의 section수의 cell 개수도 따로 설정해주어야 했습니다!

Section 0 부분은 사용자의 이름과 아이디만 보일 예정이라 2로 고정하였고, 사용자가 대여중일 때의 Section 1 부분은 사용자가 현재 타고 있는 킥보드 정보만을 출력하고, 사용자는 한 번에 1개의 킥보드만 탈 수 있으므로 1로 고정해 두었습니다~!

 

 

 

TableView의 section에 따른 다른 Cell 출력

// MARK: - tableView의 cell 출력

func tableView(_ tableView: UITableView,
               cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
    if userData.status {
        switch indexPath.section {
        case 0:
            return setUserDefaultCell(tableView, indexPath: indexPath)
        case 1:
            let cell = tableView.dequeueReusableCell(withIdentifier: "rentalListCell", for: indexPath) as! RentalListTableViewCell
            cell.kickBoardIDLabel.text = currentRental.kickBoardID
            cell.kickBoardNumberLabel.text = "\(currentRental.kickBoardNumber)"
            cell.rentalPriceLabel.text = setPriceLabel(price: currentRental.rentalPrice)
            cell.rentalStartTimeLabel.text = currentRental.rentalStartTime
            if let rentalTotalTime = currentRental.rentalTotalTime {
                cell.rentalTimeLabel.text = "\(rentalTotalTime)분"
            }
            return cell
        case 2:
            return setUserRentalListCell(tableView, indexPath: indexPath)
        default:
            fatalError("Unknown section")
        }
    }else {
        switch indexPath.section {
        case 0:
            return setUserDefaultCell(tableView, indexPath: indexPath)
        case 1:
            return setUserRentalListCell(tableView, indexPath: indexPath)
        default:
            fatalError("Unknown section")
        }
    }
}

 

사용자의 킥보드 사용 중에 따른 section 변경과 해당 section의 cell을 설정하는 부분입니다.

사용중과 사용 중이 아닐 때 모두 "프로필"의 부분과 "이전 대여 목록"의 부분이 같은 코드를 반복해야 되어서 코드의 중복 방지를 위해 따로 함수를 만들어주었습니다.

 

func setUserDefaultCell(_ tableView: UITableView,
                        indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "userDefaultCell", for: indexPath) as! UserDefaultTableViewCell
    let cellConfigure: [(String,String)] = [("이름", userData.userName), ("아이디", userData.id)]
    cell.firstLabel.text = cellConfigure[indexPath.row].0
    cell.LastLabel.text = cellConfigure[indexPath.row].1
    return cell
}


func setUserRentalListCell(_ tableView: UITableView,
                           indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "rentalListCell", for: indexPath) as! RentalListTableViewCell
    cell.kickBoardIDLabel.text = userData.rentalList[indexPath.row].kickBoardID
    cell.kickBoardNumberLabel.text = "\(userData.rentalList[indexPath.row].kickBoardNumber)"
    cell.rentalPriceLabel.text = setPriceLabel(price: userData.rentalList[indexPath.row].rentalPrice)
    cell.rentalStartTimeLabel.text = userData.rentalList[indexPath.row].rentalStartTime
    if let rentalTotalTime = userData.rentalList[indexPath.row].rentalTotalTime {
        cell.rentalTimeLabel.text = "\(rentalTotalTime)분"
    }
    return cell
}

 

 

 

TableView의 Section Header와 Footer의 높이 설정

// 섹션 헤더의 높이를 설정
func tableView(_ tableView: UITableView,
               heightForHeaderInSection section: Int) -> CGFloat {
    return 45
}


// 섹션 푸터의 높이를 설정
func tableView(_ tableView: UITableView,
               heightForFooterInSection section: Int) -> CGFloat {
    return 5
}

헤더와 푸터의 높이 설정 함수를 이용해 헤더 부분의 Section 높이를 조절하였습니다.

 

 

 

천 단위, 찍기

func setPriceLabel(price: Int) -> String {
    let numberFormatter = NumberFormatter()
    numberFormatter.numberStyle = .decimal
    guard let priceString = numberFormatter.string(from: NSNumber(value: price)) else { return "" }
    return priceString + "원"
}

NumberFormatter를 이용한 천 단위의 , 찍는 방법입니다.

 

 

 

문제점 ( cell의 separator 선의 앞뒤 간격의 다름 )

오늘도 어김없이 등장하는 문제점은 UI적으로 cell과 cell 사이의 선인 separator 선이 마음에 들지 않았습니다.

 

 

cell 사이의 선이 위의 사진처럼 앞뒤의 일정한 간격을 가지고 있는 것이 아닌 아래의 사진처럼 앞의 부분의 간격만 띄어져 있어서 신경이 쓰이더라고요~!

 

 

첫 번째 방법

이를 해결하기 위한 첫번째 방법은 View로 직접 간격 선을 그리는 것입니다.

 

우선 cell의 선을 없애는 코드를 추가해 줍니다.

userTableView.separatorStyle = .none

저는 위의 코드를 처음 tableView를 세팅하는 함수에 넣어주었어요!

 

 

Cell의 하단에 UIView를 추가해 원하는 모양의 선을 그려주었습니다.

 

 

 

두 번째 방법

tableView의 separator의 여백 설정을 통해서 코드로 수정하는 것입니다.

tableView.separatorInsetReference = .fromCellEdges

 

 

[ SeparatorInsetReference ]

• Automatic (default) : 왼쪽에 15 포인트의 간격이 떨어짐
• Custom : 왼쪽이나 오른쪽에 원하는 간격을 설정
  • fromCellEdges : 양 끝에 여백을 줌
  • fromAutomaticInsets : 사용 환경에 따라 자동으로 설정해 줌. ( 겹침 방지 )

 

추가로 separator의 색이나 스타일도 설정할 수 있습니다.

 

 

[ separator 색 설정 ]

tableView.separatorColor = .black

 

 

[ separator 스타일 설정 ]

tableView.separatorStyle = .singleLine

• none : 선을 표시하지 않음
• singleLine(default) : 선을 하나만 표시
• singleLineEtched : 지금은 더 이상 사용하지 않음.

 

 

 

전체 코드

import Foundation
import UIKit

extension UserViewController: UITableViewDelegate, UITableViewDataSource {
    
    
    func setUserTableView() {
        
        userTableView.delegate = self
        userTableView.dataSource = self
        userTableView.separatorStyle = .none
        
        let nib1 = UINib(nibName: "UserDefaultTableViewCell", bundle: nil)
        let nib2 = UINib(nibName: "RentalListTableViewCell", bundle: nil)
        userTableView.register(nib1, forCellReuseIdentifier: "userDefaultCell")
        userTableView.register(nib2, forCellReuseIdentifier: "rentalListCell")
    }
    
    
    func setUserDefaultCell(_ tableView: UITableView, 
                            indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "userDefaultCell", for: indexPath) as! UserDefaultTableViewCell
        let cellConfigure: [(String,String)] = [("이름", userData.userName), ("아이디", userData.id)]
        cell.firstLabel.text = cellConfigure[indexPath.row].0
        cell.LastLabel.text = cellConfigure[indexPath.row].1
        return cell
    }
    
    
    func setUserRentalListCell(_ tableView: UITableView,
                               indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "rentalListCell", for: indexPath) as! RentalListTableViewCell
        cell.kickBoardIDLabel.text = userData.rentalList[indexPath.row].kickBoardID
        cell.kickBoardNumberLabel.text = "\(userData.rentalList[indexPath.row].kickBoardNumber)"
        cell.rentalPriceLabel.text = setPriceLabel(price: userData.rentalList[indexPath.row].rentalPrice)
        cell.rentalStartTimeLabel.text = userData.rentalList[indexPath.row].rentalStartTime
        if let rentalTotalTime = userData.rentalList[indexPath.row].rentalTotalTime {
            cell.rentalTimeLabel.text = "\(rentalTotalTime)분"
        }
        return cell
    }
    
    
    func setPriceLabel(price: Int) -> String {
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        guard let priceString = numberFormatter.string(from: NSNumber(value: price)) else { return "" }
        return priceString + "원"
    }
    
    
    // MARK: - 테이블 뷰의 Section 수 결정
    func numberOfSections(in tableView: UITableView) -> Int {
        
        // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
        if userData.status {
            return 3
        }else {
            return 2
        }
    }
    
    
    func tableView(_ tableView: UITableView, 
                   heightForHeaderInSection section: Int) -> CGFloat {
        return 45
    }

    
    // 섹션 푸터의 높이를 설정
    func tableView(_ tableView: UITableView, 
                   heightForFooterInSection section: Int) -> CGFloat {
        return 5
    }

    
    func tableView(_ tableView: UITableView,
                   viewForHeaderInSection section: Int) -> UIView? {
        
        let headerView = UIView()
        headerView.backgroundColor = .white
        
        let headerLabel = UILabel(frame: CGRect(x: 20, y: 0, width: tableView.bounds.size.width, height: 45))
        headerLabel.font = UIFont.systemFont(ofSize: 16, weight: .bold)
        headerLabel.textColor = UIColor.black // 텍스트 색상 설정
        
        let borderWidth: CGFloat = tableView.bounds.size.width - 40
        let borderX: CGFloat = (tableView.bounds.size.width - borderWidth) / 2
        let headerBorderView = UIView(frame: CGRect(x: borderX, y: 40, width: borderWidth, height: 2))
        headerBorderView.backgroundColor = .black
        
        // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
        if userData.status {
            switch section {
            case 0: headerLabel.text = "프로필"
            case 1: headerLabel.text = "대여중"
            case 2: headerLabel.text = "이전 대여 목록"
            default: headerLabel.text = ""
            }
        }else {
            switch section {
            case 0: headerLabel.text = "프로필"
            case 1: headerLabel.text = "이전 대여 목록"
            default: headerLabel.text = ""
            }
        }
        
        headerView.addSubview(headerLabel)
        headerView.addSubview(headerBorderView)
        
        return headerView
    }
    
    
    // MARK: - tableView의 셀의 개수
    func tableView(_ tableView: UITableView,
                   numberOfRowsInSection section: Int) -> Int {
        
        // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
        if userData.status {
            switch section {
            case 0: 2
            case 1: 1
            case 2: userData.rentalList.count
            default: 0
            }
        }else {
            switch section {
            case 0: 2
            case 1: userData.rentalList.count
            default: 0
            }
        }
    }
    
    
    // MARK: - tableView의 cell 출력
    
    func tableView(_ tableView: UITableView,
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // 대여중이면 section 수 3개 / 대여중이 아니라면 section 수 2개
        if userData.status {
            switch indexPath.section {
            case 0:
                return setUserDefaultCell(tableView, indexPath: indexPath)
            case 1:
                let cell = tableView.dequeueReusableCell(withIdentifier: "rentalListCell", for: indexPath) as! RentalListTableViewCell
                cell.kickBoardIDLabel.text = currentRental.kickBoardID
                cell.kickBoardNumberLabel.text = "\(currentRental.kickBoardNumber)"
                cell.rentalPriceLabel.text = setPriceLabel(price: currentRental.rentalPrice)
                cell.rentalStartTimeLabel.text = currentRental.rentalStartTime
                if let rentalTotalTime = currentRental.rentalTotalTime {
                    cell.rentalTimeLabel.text = "\(rentalTotalTime)분"
                }
                return cell
            case 2:
                return setUserRentalListCell(tableView, indexPath: indexPath)
            default:
                fatalError("Unknown section")
            }
        }else {
            switch indexPath.section {
            case 0:
                return setUserDefaultCell(tableView, indexPath: indexPath)
            case 1:
                return setUserRentalListCell(tableView, indexPath: indexPath)
            default:
                fatalError("Unknown section")
            }
        }
    }

    
}

 

 

 

적용화면

사용자가 킥보드를 대여중일 경우

사용자가 킥보드를 대여중이 아닐 경우