📘 TIL: iOS 전화번호부 UI 구현 (SnapKit + UIKit)

🛠️ 작업 내용

1. 프로젝트 세팅

• UIKit과 SnapKit을 사용하여 UI를 구성했습니다.
• UIViewController를 생성하고, 화면에 필요한 컴포넌트를 추가했습니다.

---

2. 상단 타이틀과 추가 버튼 구현

• 컴포넌트 추가
  • UILabel을 사용해 상단에 "친구 목록"이라는 타이틀을 표시했습니다.
  • UIButton을 사용해 우측 상단에 "추가" 버튼을 배치했습니다.
• SnapKit을 사용한 레이아웃
  • titleLabel은 화면 상단 중앙에 배치했습니다.
  • addButton은 titleLabel의 오른쪽에 위치하도록 설정했습니다.

코드:

private let titleLabel: UILabel = {
    let label = UILabel()
    label.text = "친구 목록"
    label.font = UIFont.boldSystemFont(ofSize: 24)
    label.textAlignment = .center
    return label
}()

private let addButton: UIButton = {
    let button = UIButton(type: .system)
    button.setTitle("추가", for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 18)
    return button
}()

---

3. 테이블 뷰 추가

• UITableView 추가
  • 전화번호 목록을 표시하기 위해 테이블 뷰를 추가했습니다.
  • 셀 높이를 80으로 설정했습니다.
• SnapKit 레이아웃
  • 테이블 뷰는 상단 타이틀 아래에 배치하고, 화면의 나머지 영역을 모두 차지하도록 설정했습니다.

코드:

private let tableView: UITableView = {
    let tableView = UITableView()
    tableView.separatorStyle = .singleLine
    tableView.rowHeight = 80 // 셀 높이 설정
    return tableView
}()

---

4. 테이블 뷰 셀 구성

• 더미 데이터 활용
  • UITableViewDataSource를 구현하여 임의의 데이터를 표시했습니다.
• 셀 구성
  • 각 셀에는 프로필 이미지, 이름, 전화번호를 표시하도록 설계했습니다.
  • 프로필 이미지는 원형으로 표시되도록 layer.cornerRadius와 layer.borderWidth를 활용할 예정입니다.

---

📌 오늘 배운 점

1. SnapKit을 활용한 레이아웃 구성

   • SnapKit은 제약 조건을 간단하게 작성할 수 있어 효율적입니다.
   • makeConstraints를 사용해 컴포넌트 배치를 쉽게 설정할 수 있었습니다.

2. UITableView 기본 사용법

   • 테이블 뷰의 셀 높이를 rowHeight로 설정할 수 있음을 다시 확인했습니다.
   • UITableViewDataSource를 구현하여 데이터를 렌더링할 수 있었습니다.

3. 컴포넌트 간 정렬

   • 타이틀과 버튼을 동일한 centerY에 정렬하여 깔끔한 UI를 구성했습니다.

---

📝 앞으로 해야 할 일

• 테이블 뷰 셀을 커스터마이징하여 프로필 이미지, 이름, 전화번호를 표시하도록 구현하기.
• "추가" 버튼을 눌렀을 때 새로운 데이터를 추가하는 기능 구현하기.
• 더미 데이터를 실제 데이터로 교체하기.