[흡구오디] 새로운 흡연구역 추가 기능 구현하기 | 🙊

하이염

요즘 현생이 바빠 포스팅을 등한시했네요

그리고 앱 만드는거 넘 잼써서 자꾸 글 안쓰고 폭풍 업뎃 ㅎ

 

봐주세요

 

(포스팅을 등한시한 거 봐달라는 뜻,

제발 내 글 좀 봐달라는 뜻)

 

아무튼 시작해볼게요

 

마지막 글은 추가 버튼 올리기 까지 작성했네요

 

글은 많이 못썼지만 그간 많은 업뎃을 했답니다 ㅋ

 

1. 흡연구역 추가 기능 구현

초기 기획은 홈 화면에서 추가 버튼을 누르면 같은 화면 내에서 마커 추가하는 것이었지만,

제목, 설명까지 추가하기 위해서는 다른 화면으로 아예 전환해서 추가 받는 것이 맞다고 생각해서!

 

AddSmokeAreaViewController를 추가했어요

 

근데 님들하 저 고민이 있어요.

흡연구역이 영어로 SmokeArea가 아니라 SmokingArea더라구요 ㅎ 이걸 어쩐담;;;

대참사의 시작인가요...

 

1-1. 화면 전환

내가 처음에 헤맨! 화면 전환 방법

루트 폴더에서 New File을 추가한다

> Cocoa Touch Class로 추가 (스위프트로 해도 되긴하는데 이거로 하는게 틀을 잡아줘서 편함!)

> 스토리보드에서도 동명의 뷰컨 추가

>

이렇게 클래스 이름하고 스토리보드ID도 동명으로 설정!

타켓 멤버십도 되어있는지 체크해야함

> 화면 전환 코드 구현

@IBAction func addMarkerButtonTapped(_ sender: UIButton) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        if let addVC = storyboard.instantiateViewController(withIdentifier: "AddSmokeAreaViewController") as? AddSmokeAreaViewController {
            addVC.modalPresentationStyle = .fullScreen // 화면 전체로 표시 (선택 사항)
            present(addVC, animated: true, completion: nil)
        } else {
            print("AddSmokeAreaViewController를 찾을 수 없음")
        }
    }

전 이렇게 햇서염

복붙해서 사용 고고

 

이럼 끗~!

 

아 화면 전환은 이게 끝이고

 

1-2. 화면 구성

 

화면은 이렇게 구성해봤어요

구현은 스토리보드로!

화면 구성 잡느라 고생 좀 함요...

 

포함된 기능으로는

뒤로가기 버튼

: 홈 화면으로 돌아감

SearchBar

: 이건 아직 기능 구현 안했지만 주소 검색하면 지도 화면 그곳으로 이동하게 할 것임

마커 이미지

: 제가 만들어서 에셋으로 추가했어요 헤헤

화면 중앙에 고정되어 있어서

사용자가 마커 추가를 위해 지도를 이리저리 움직이면

원하는 위치에 마커를 찍을 수 있게!

제목

: 흡연구역의 타이틀, 텍스트필드로 만듦

상세 설명

: 자세한 설명, 텍필만2

추가하기

: 버튼 누르면 마커의 위치가 앱에 저장되고 홈화면에서 새로운 마커로 뜨게 됨~

 

그럼 이제 각 기능별로 구현한 것 설명 고고

1-3 뒤로가기 버튼 구현

이건 쉬워요 

  @IBAction func backButtonTapped(_ sender: UIButton) {
        dismiss(animated: true, completion: nil)
    }

dimiss로 해주면 됨

 

1-4 마커 이미지 구현

마커 이미지는 스토리보드로 지도 화면 중앙에 배치

(마커가 제목이랑 같이 표시되어 추가하려던 위치보다 살짝 높게 저장되니까

사용자가 추가할 마커의 위치도 정중앙에서 살짝 위로 배치함 후후)

 

1-5 제목, 상세설명 구현

@IBAction func confirmLocationTapped(_ sender: UIButton) {
        let currentCenter = naverMapView.mapView.cameraPosition.target

        guard let title = titleTextField.text, !title.isEmpty else {
            showAlert(message: "제목을 입력해주세요.") {
                // 빈 제목 입력 시 처리
            }
            return
        }

        // 플레이스홀더와 실제 텍스트 구분
        let description = descriptionTextField.text == placeholderText ? "" : descriptionTextField.text

        // 새로운 흡연구역 데이터 생성
        let newSmokingArea = SmokingArea(name: title, latitude: currentCenter.lat, longitude: currentCenter.lng, description: description ?? "")

        // 새로운 흡연구역을 SmokingAreaData에 추가
        var updatedSmokingAreas = smokingAreas
        updatedSmokingAreas.append(newSmokingArea)
        smokingAreas = updatedSmokingAreas

        // NotificationCenter로 데이터 전달
        NotificationCenter.default.post(name: .smokingAreaAdded, object: nil, userInfo: ["area": newSmokingArea])

        showAlert(message: "새로운 흡연구역이 등록되었습니다!") {
            self.dismiss(animated: true, completion: nil)
        }
    }

코드 폭탄

100% 이해되진 않아서 다음 포스팅에선 이 코드들 문법 설명해야쥥

 

1-6 추가하기 구현

private func showAlert(message: String, completion: @escaping () -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "확인", style: .default, handler: { _ in
            completion()
        }))
        present(alert, animated: true, completion: nil)
    }

추가하기 버튼을 누르면

위 코드에 이어 요래 Alert창을 띄워서 사용자에게 알려주고 dismiss 로 홈화면으로 빠져나와 주기

 

2. 구현 화면

그렇게~~~

지금까지의 구현 화면!!!

완저니 뿌듯하다잉...

 

다음은 목록 화면 구현으로 고고싱이