250807 | 마커 등록 화면 UI 구성 (FlexLayout + NMFMapView + 태그 영역 레이아웃 작업)

 

하이염

오늘은 흡연구역 등록 화면을 본격적으로 만들었다.
FlexLayout으로 전체 UI를 잡았고, 지도부터 입력 필드, 태그 섹션까지 기본적인 구조를 구성했다.

주요 작업 내용

• 레이아웃 작업을 Snapkit, Pin, Flex등으로 설정함!!!
• NMFMapView로 지도 보여주기
• 흡연구역 이름 (UITextField) / 설명 (UITextView) 입력 필드 추가
• 설명창은 placeholder처럼 보이게 구현 (TextView엔 기본적으로 placeholder 없음 → delegate로 직접 처리)
• 환경 / 유형 / 편의시설 태그 카테고리별 label 추가
• FlexLayout으로 전체 레이아웃 구성

---

삽질한 부분...

- 스크롤 처리

입력 항목이 많아지면 스크롤이 필요했는데, 처음엔 Flex만 쓰면 자동으로 스크롤 될 줄 알았음
결론은 안 됨ㅠ

UIScrollView를 써야 하고, 그 안에 contentView 만들어서 그 안에서 Flex를 적용하는 식으로 구성해야 함

이번 코드에선 ScrollView 없이 우선 화면 안에서만 테스트했지만, 내일은 제대로 스크롤 되는 구조로 바꿔볼 예정 ㅜ

메모

• UITextView는 기본 placeholder 기능이 없어서 delegate에서 직접 색상 바꿔주면서 구현해줘야 함
• FlexLayout은 유연하고 편하긴 한데, 기본 UIKit 뷰랑 섞을 때 순서, height 지정 등을 꼼꼼히 신경 써야 레이아웃이 안정적으로 잡힘

내일 할 일

• 스크롤 가능한 구조로 다시 재정비 (ScrollView + contentView + Flex)
• 각 태그 버튼 구성하고 선택 UI 연결 (중복 선택 가능하게)
• Firestore 연동해서 데이터 저장 처리까지 해보기

생각보다 FlexLayout 쓰는 걸 조금(진짜 조금) 익히긴 했는데 역시 기본적인 컨셉을 정확히 알고 써야 낭비되는 시간이 줄어들 것 같다

항상 이렇게 생각하지만 실천이 쉽지가 아늠,,쩝

전체 흐름 잡혔으니, 다음은 실제 입력/저장 흐름까지 이어붙이기~!

 

갈 길이 멀다~,~

 

그래도 옛날에 비하면 ㅋㅋ