연락처 관리 앱 [STEP 3] 노움, 샘

[Gnoam-R]

STEP3

안녕하세요, 시온[@LeeZion94]

Sam[@ParkChanH], 노움[@Gnoam-R]입니다.

UML

classDiagram
    class SceneDelegate {
      +UIWindow? window
    }
    SceneDelegate --|> UIWindowSceneDelegate
    SceneDelegate --> ContactListStorage

    class ContactListViewController {
      -ContactListStorage? contactListStorage
      -UITableView! tableView
      -UISearchBar! searchBar
    }
    ContactListViewController --|> UIViewController
    ContactListViewController --|> UISearchResultsUpdating
    ContactListViewController --|> UITableViewDataSource
    ContactListViewController --|> UITableViewDelegate
    ContactListViewController --> ContactListStorage

    class AddContactViewController {
      -ContactListStorage? contactListStorage
      -PhoneFormat? phoneFormat
      -Int? tableCellIndex
    }
    AddContactViewController --|> UIViewController
    AddContactViewController --> ContactListStorage
    AddContactViewController --> PhoneFormat

    class ContactListStorage {
      -[ContactList] contactList
    }

    class ContactList {
      -String name
      -String phoneNumber
      -Int age
    }
    ContactListStorage --> ContactList

    class PhoneFormat {
      -Character appendCharacter
      -String digits
    }
    PhoneFormat --> String

    class ContactListError {
    }

    class ContactValidateCheck {
    }
    ContactValidateCheck --> ContactListError

    UIWindowSceneDelegate <|.. SceneDelegate
    UIViewController <|.. ContactListViewController
    UIViewController <|.. AddContactViewController
    UISearchResultsUpdating <|.. ContactListViewController
    UITableViewDataSource <|.. ContactListViewController
    UITableViewDelegate <|.. ContactListViewController

Loading

파일트리

📦contact-management
 ┣ 📂App
 ┃ ┣ 📜AppDelegate.swift
 ┃ ┗ 📜SceneDelegate.swift 
 ┣ 📂Common
 ┃ ┣ 📜Alert.swift
 ┃ ┗ 📜PhoneFormat.swift
 ┣ 📂Controller
 ┃ ┣ 📜AddContactViewController+TextFieldListener.swift
 ┃ ┣ 📜AddContactViewController.swift
 ┃ ┣ 📜ContactListViewController+SearchBar.swift
 ┃ ┣ 📜ContactListViewController+TableView.swift
 ┃ ┗ 📜ContactListViewController.swift
 ┣ 📂Model
 ┃ ┣ 📜ContactList.swift
 ┃ ┣ 📜ContactListError.swift
 ┃ ┣ 📜ContactListStorage.swift
 ┃ ┗ 📜ContactValidateCheck.swift
 ┣ 📂View
 ┃ ┗ 📂Base.lproj
 ┃ ┃ ┣ 📜LaunchScreen.storyboard
 ┃ ┃ ┗ 📜Main.storyboard
 ┣ 📜AppDelegate.swift
 ┣ 📜Info.plist
 ┣ 📜SceneDelegate.swift
 ┗ 📜ViewController.swift

Step3 요구사항

• 필수 테이블뷰의 셀을 스와이프하여 삭제하는 메뉴를 보이고, 실제로 삭제할 수 있도록 구현합니다.
• 아래 기능 중 모두 구현하기에 시간이 부족하다면 구현하고 싶은 기능을 우선적으로 구현해보세요.
  1. 검색기능 통해 연락처 목록 내의 특정 연락처만 테이블뷰에 남길 수 있도록 구현해 주세요.
  2. Cell을 사용자정의하여 원하는 레이아웃으로 표현하도록합니다. (예시와 똑같지 않아도 됩니다.)
  3. Dynamic Type을 활용하여 시스템 설정에 따라 앱 글자 크기가 변경될 수 있도록 구현해주세요.

Bonus STEP

해외 연락처 입력

• 위 STEP2의 입력 방법으로는 한국의 전화번호 형식만 표현할 수 있습니다.
• 국제전화 및 해외 전화번호 입력 형식을 고민하고 구현해보세요.
  • 예시: +82 10-2323-4545
    • 국가번호(ex. +82) 입력시 뒤에 자동으로 공백이 추가됩니다.
    • +821023234545 입력시 +82 10-2323-4545로 나타납니다.
    • +8201023234545 입력시 +82 (0) 10-2323-4545로 나타납니다.
    • 그 외 표현 규칙은 스스로 정하고 구현해보세요.

연락처 정보 변경

• 연락처 목록에서 연락처를 선택하면 Step2의 연락처 추가 화면과 동일한 화면이 나옵니다. (단. 상단의 title 은 기존 연락처 로 변경합니다.)
  • 연락처 추가 화면 의 이름, 나이, 연락처 UITextfield에는 사용자가 변경을 위해 선택한 연락처의 정보가 입력되어있습니다.
  • 모든 정보가 올바르게 입력되었다면 저장 버튼을 선택했을 때 이전 화면으로 돌아가고, 새로 입력한 연락처 정보가 반영됩니다.

Step3 설계 및 구현 설명

서치 바 추가

이번 서치 바 구현 에서는 StoryBoard를 사용한 방법 대신에 코드로 생성 하게 되었습니다. 서치 바에 입력되는 글자에 따라 검색되는 아이템을 reload하는 방법을 사용했고 이름의 입력을 통해 아이템을 띄우게 되었습니다. 검색 필터가 끝난 아이템을 기존 연락처 저장소 리스트와는 다른 새로운 리스트에 저장하고 테이블 뷰를 reload 시켜 보여줍니다.

연락처 삭제

사용자가 앱내에 저장된 연락처를 삭제할 수 있는 기능 구현

contactListViewController 내에 스와이프 액션을 추가하여 사용자가 연락처 목록에서 직접 연락처를 스와이프 하여 삭제할 수 있도록 했습니다. 이를위해 tabelView(_: commit:forRowAt:) 메서드를 구현했습니다.

앱 글자 크기 변경

사용자가 시스템 설정에서 글자 크기를 조절했을 때, 앱 내의 글자 크기가 동적으로 반응하여 변경되는 기능을 추가했습니다.

• UIFont를 확장하여 시스템 글자 크기 설정에 따라 동적으로 조절되는 커스텀 폰트 추가.
• 텍스트필드, 레이블 같은 UI 요소에 다이나믹 타입 적용.

연락처	연락처 추가	연락처 클릭시

---

연락처 정보 변경

연락처 목록에서 특정 셀을 선택하게 되면 해당 아이템을 Edit할 수 있는 창으로 이동합니다. 연락처 추가 화면 AddContactView 와 동일한 화면으로 재사용 했고 이를 위해서 modal, navigation 화면 이동을 구분하여 modal의 경우 기존의 아이탬 추가 화면, navigation은 Edit 화면으로 클릭 된 화면의 아이템(이름, 나이, 전화번호)를 전달 받습니다. 사용자의 연락처 변경 기능은 아직 구현하지 못했습니다.

질문

글자 크기 조절 기능과 관련한 질문 : 사용자가 시스템 설정에서 글자 크기를 조절했을 때 앱 내 글자 크기가 동적으로 변경되도록 구현했습니다. 여기서 다이나믹 타입을 적용한 UI요소들이 기기에 따라 다르게 보이는 문제는 어떻게 해결해야 할까요?

글자 크기 조절 기능과 관련한 질문