[흡구오디] 어디까지 개발했나 알려드림 | UI 라이브러리 | Firestore 연동

안녕하세요 ^^

은근 오랜만에 포스팅하네요

 

시간이 빠르다 빨라

 

저는 이번 여름 휴가로 울진, 울산, 제주도를 갔다왔답니다~!

 

그럼 이제 열심히 공부하고 개발하고 글 써야겠죠...네

 

레츠고!

 

글을 안쓴동안 은근 많은 변화가 있었답니다.

 

개발 내역들

1. UI를 라이브러리로 구성함

: snapkit, pinlayout, flexlayout 을 활용해서 해당 라이브러리들을 공부하고 적용해보았어요

그런데 뭐로 통일할지는 못정함

 

뭘로 할까요?

제 첫인상은 pin이 제일 좋음

쓰는게 간편함

 

2. 흡연구역의 환경 / 유형 / 시설 태그들을 만듦

: 각 흡연구역의 이름, 설명 뿐만 아니라 위와 같은 다양한 태그들을 등록할 수 있도록 했어요

현재는 이렇게 있어요

 

아이디어 있으신 분? 공유 부탁

 

흡연자분들께서는 저러한 정보가 함께 제공된다면

아따 흡구오디 기똥차다라고 생각하실 것 같아요 ^_^ (제발~)

 

이렇게 저장된 태그들은 나중에 홈 화면에서 필터링해서 해당 장소들만 찾아볼 수 있도록!

 

지금은 화면 구성까지 완료되었고

파이어베이스에 연결해서 값들 저장하고 마터로 나타나는 과정을 개발하고 있어요

 

기능 코드

은근슬쩍 개발 얘기로 넘어가 보겠음

- 태그들을 누르면

// MARK: Button Actions

  private func onTapButton(_ sender: UIButton) {
    // 선택에 따른 토글 변경
    sender.isSelected.toggle()
    // 버튼 외관 업데이트 함수
    self.updateButtonAppearance(sender)
    // 해당 배열 업데이트 함수
    self.updateSeletedTags(sender)
    // 프린트로 디버깅
  }
  
  // 버튼 외관 업데이트 함수
  private func updateButtonAppearance(_ button: UIButton) {
    // true일 때
      // 배경 진하게
    // false 일 때
      // 배경 원래 색상
    button.backgroundColor = button.isSelected ? .gray : .systemGray6
  }
  
  
  // 해당 배열 업데이트 함수
  private func updateSeletedTags(_ button: UIButton) {
    guard let title = button.titleLabel?.text else { return }

    if self.environmentTags.contains(title) { // 환경 태그일 때
      self.updateTag(title: "환경", array: &self.selectedEnvironmentTags, buttonTitle: title) // 해당 배열 업데이트 함수
    } else if self.typeTags.contains(title) { // 유형 태그일 때
      self.updateTag(title: "유형", array: &self.selectedTypeTags, buttonTitle: title) // 해당 배열 업데이트 함수
    } else if self.facilityTags.contains(title) { // 시설 태그일 때
      self.updateTag(title: "시설", array: &self.selectedFacilityTags, buttonTitle: title) // 해당 배열 업데이트 함수
    }
  }
  
  // 해당 배열 업데이트 함수
  private func updateTag(title: String, array: inout [String], buttonTitle: String) {
    if array.contains(buttonTitle) { // 배열에 해당 값이 있다면
      array = array.filter { $0 != buttonTitle } // 해당 배열에서 값 빼기
    } else { // 있으면
      array.append(buttonTitle) // 넣기
    }
    print(title, array)
  }

 

요러한 과정을 통해 각 카테고리의 배열에 태그들이 들어갔다 나왔다 할 수 있도록 만들었어요

이거 ai 안쓰고 내가 직접 개발함

그래서 좀 뿌듯함 ㅠ

 

일단 기능 구현은 됐고 가독성을 위해 if문 사용을 지양하는 것을 목표로 리팩토링 해보겠음...

근데 나중에,,, 지금은 일단 기능 구현으로 만족~

 

- 저장 버튼 누르면

private func saveSmokinAreaInfo() {
    // Add a new document with a generated id.
    do {
      let ref = try db.collection("smokingAreas").addDocument(data: [
        "name": self.nameTextField.text,
        "description": self.descriptionTextView.text,
        "areaLat": self.markerLat,
        "areaLng": self.markerLng,
        "environmentTags": self.environmentTags,
        "typeTags": self.typeTags,
        "facilityTags": self.facilityTags
      ])
      print("Document added with ID: \(ref.documentID)")
    } catch {
      print("Error adding document: \(error)")
    }
  }

 

아직 미완성 코드지만 이렇게 했을 때 firestore에 저장되는 것 확인!

 

물론 완전 이상하게 저장됨;

하지만 연결 됐자나 저장 됐자나 ^_^

 

그럼 다음 목표는 제대로 된 값 저장하는 것!!!

 

해볼게요

 

이 후에 내용이 추가되면 오늘 성공한거,,,

여기서 끝나면 오늘 성공 못한거,,,, 과연 결과는?!

---

안녕하세요? 성공함

 

ㅋㅋ

 

우선

struct SmokingArea {
  // var picture: Image
  var name: String
  var description: String
  var areaLat: Double
  var areaLng: Double
  var selectedEnvironmentTags: [String]
  var selectedTypeTags: [String]
  var selectedFacilityTags: [String]
  // var uploadUser: String
  // var uploadDate
  
  var asDictionary: [String: Any] {
      return [
        "name": name,
        "description": description,
        "areaLat": areaLat,
        "areaLng": areaLng,
        "environmentTags": selectedEnvironmentTags,
        "typeTags": selectedTypeTags,
        "facilityTags": selectedFacilityTags
      ]
    }
}

 

요롷게 구조체를 만들어 줬구요

 

이렇게

private func saveSmokinAreaInfo() {
    guard
      let name = self.nameTextField.text, !name.isEmpty,
      let description = self.descriptionTextView.text, !description.isEmpty,
      let lat = self.markerLat,
      let lng = self.markerLng
    else {
      // Alert 같은 걸 띄워서 사용자한테 알려주기
      let alert = UIAlertController(title: "입력 오류", message: "이름, 설명은 필수 입력 항목입니다.", preferredStyle: .alert)
      alert.addAction(UIAlertAction(title: "확인", style: .default))
      self.present(alert, animated: true)
      return
    }
    
    // 모델로 만들기
    let smokingArea = SmokingArea(
      name: name,
      description: description,
      areaLat: lat,
      areaLng: lng,
      selectedEnvironmentTags: self.selectedEnvironmentTags,
      selectedTypeTags: self.selectedTypeTags,
      selectedFacilityTags: self.selectedFacilityTags
    )
    
    // Firestore 저장
    db.collection("smokingAreas").addDocument(data: smokingArea.asDictionary) { error in
      if let error = error {
        print("저장 실패: \(error.localizedDescription)")
      } else {
        print("저장 성공")
      }
    }
  }

 

파베에 저장하는 로직 구현~

 

필수값들 구현하고

-> 받은 값들 모델로 만들어서

-> 파스에 저장해주기~

 

이렇게 잘 들어오네염

 

근데 왜 내가 구성한 순서대로 나오지 않는거니

 

이건 일단 무시할게요...쩝

 

이번 글이 너무 길어지니까 다음 글로 넘어갈게요

 

바바이