iOS 포켓몬 연락처 앱 트러블 슈팅

호씨·2024년 12월 11일
0

iOS 포켓몬 연락처 앱 트러블 슈팅

1. 전화번호 포맷팅 구현

구현 방법

extension AddNumberViewController: UITextFieldDelegate {
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if textField == phoneTextField {
            let fullString = (textField.text ?? "") + string
            let cleanNumber = fullString.components(separatedBy: CharacterSet.decimalDigits.inverted).joined()
            
            // 백스페이스 처리
            if string.isEmpty {
                textField.text = formatPhoneNumber(String(cleanNumber.dropLast()))
                return false
            }
            
            // 숫자만 입력 가능
            if !string.isEmpty && !CharacterSet.decimalDigits.isSuperset(of: CharacterSet(charactersIn: string)) {
                return false
            }
            
            // 최대 11자리 제한
            if cleanNumber.count > 11 {
                return false
            }
            
            textField.text = formatPhoneNumber(cleanNumber)
            return false
        }
        return true
    }
    
    private func formatPhoneNumber(_ number: String) -> String {
        let cleanNumber = number.components(separatedBy: CharacterSet.decimalDigits.inverted).joined()
        
        // 3자리 이하
        if cleanNumber.count <= 3 {
            return cleanNumber
        }
        
        // 3자리 초과 7자리 이하
        if cleanNumber.count <= 7 {
            let index = cleanNumber.index(cleanNumber.startIndex, offsetBy: 3)
            return String(format: "%@-%@",
                        String(cleanNumber[..<index]),
                        String(cleanNumber[index...]))
        }
        
        // 7자리 초과
        let prefix = String(cleanNumber.prefix(3))
        let middle = String(cleanNumber[cleanNumber.index(cleanNumber.startIndex, offsetBy: 3)..<cleanNumber.index(cleanNumber.startIndex, offsetBy: 7)])
        let end = String(cleanNumber[cleanNumber.index(cleanNumber.startIndex, offsetBy: 7)...])
        
        return String(format: "%@-%@-%@", prefix, middle, end)
    }
}

동작 방식

  1. UITextField의 델리게이트 메서드를 활용
  2. 입력된 문자열을 실시간으로 포맷팅
  3. 백스페이스, 숫자 입력 제한 등 처리

2. 테이블뷰 구분선 정렬

해결 방법

private func setupTableView() {
    tableView.delegate = self
    tableView.dataSource = self
    tableView.register(ContactCell.self, forCellReuseIdentifier: "ContactCell")
    tableView.rowHeight = 80
    tableView.separatorStyle = .singleLine
    tableView.separatorInset = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)
}

UIEdgeInsets 설명

  • top: 구분선의 위쪽 여백
  • left: 구분선의 왼쪽 여백
  • bottom: 구분선의 아래쪽 여백
  • right: 구분선의 오른쪽 여백

3. 테이블뷰 셀 레이아웃 조정

ContactCell 레이아웃 최적화

private func setupCell() {
    // 프로필 이미지 설정
    profileImageView.backgroundColor = .lightGray
    profileImageView.layer.cornerRadius = 25
    profileImageView.clipsToBounds = true
    
    // SnapKit을 사용한 오토레이아웃
    profileImageView.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.leading.equalToSuperview().offset(40)
        make.width.height.equalTo(50)
    }
    
    nameLabel.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.leading.equalTo(profileImageView.snp.trailing).offset(40)
    }
    
    phoneLabel.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.leading.equalTo(nameLabel.snp.trailing).offset(40)
        make.trailing.equalToSuperview().offset(-40)
    }
}

레이아웃 조정 포인트

  1. 프로필 이미지: 좌측 여백 40, 크기 50x50
  2. 이름 레이블: 이미지 우측 40 여백
  3. 전화번호 레이블: 이름 레이블 우측 40 여백, 우측 끝 40 여백
  4. 모든 요소 수직 중앙 정렬

결과

  • 전화번호 자동 포맷팅 (XXX-XXXX-XXXX)
  • 테이블뷰 구분선 좌우 여백 통일
  • 셀 내부 요소들의 정렬된 배치

확인해야할 부분

  • coredata 사용시 테이블 내에 저장되는 데이터들 확인필요
  • 테이블뷰와 ios 관련 공부 필요
profile
이것저것 많이 해보고싶은 사람

0개의 댓글