[Design] 메인 지도 뷰 UI를 구성합니다. #35

compuTasha · 2023-01-21T15:22:09Z

1. 관련 이슈

close [Design] 메인으로 사용하는 지도 뷰 UI를 구성합니다. #20

2. 배경

메인으로 사용하는 지도 뷰 UI를 구성합니다.

3. 작업 내용

MainMapViewController 추가
Google Map ID를 생성한 후 지도 스타일 적용 (variation : 야간)
각 버튼 추가, 레이아웃 설정
현 위치를 나타낼 주소 라벨 추가, 레이아웃 설정

4. 리뷰 노트

맵 스타일을 적용하기 위해 MapsInfo.plist에 GMS_MAP_ID를 추가해주세요
[Design] extension UIFont를 통해 font Type를 추가합니다. #31 이 merge 되면 currentLocationLabel 에 font type을 적용할 예정입니다.
지도 스타일 중에서 피그마 디자인과 가장 비슷한 걸 골랐는데 어떠신가요..?!
피그마 디자인 상에서 왼쪽 라벨과 오른쪽 버튼 그룹의 각 leading, trailing 패딩 값이 다른데 확인 한번 부탁드립니다 @GODNOEL

5. 테스트 방법

SceneDelegate에서 아래와 같이 수정해주세요.

window.rootViewController = MainMapViewController()

6. 스크린샷

…ock/GetARock-iOS into feature/20-design-map-ui

currentLocationButton -> moveToCurrentLocationButton

compuTasha · 2023-01-21T15:23:42Z

.github/workflows/BuildTest.yml

@@ -0,0 +1,21 @@
+name: GetARock Build Test


오잉 이 파일이 왜 여기 따라왔을까요..?

compuTasha · 2023-01-21T15:29:37Z

구글 맵 색상 종류도 공유합니다

GODNOEL · 2023-01-22T01:18:12Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+    private lazy var bottomButtonStackView: UIStackView = {
+        $0.axis = .horizontal
+        return $0
+    }(UIStackView(arrangedSubviews: [createEventsButton, myBandsButton, myPageButton]))


q5;
요기 arrangedSubviews부분도 아래처럼 줄바꿈해주시면 좋을것같아용

엇 여기는 120자가 안 넘어서 줄바꿈을 안 했는데 필요할까요..?

엇 제가 Xcode 글자 수 가이드라인을 99자로 설정해 둬서 아래 코드도 잘못 개행한 거였어요..!
120자로 변경하고 보니 아래 코드도 120자를 안 넘기길래 개행 삭제하고 원래대로 돌렸습니다! e07dbdd

GODNOEL · 2023-01-22T01:20:17Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+        let camera: GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86,
+                                                                 longitude: 151.20,
+                                                                 zoom: 11)


Q;
이 부분은 위치값이 없을때 지도애서 보여주는 초기 위치 값인가요?

네 사용자가 권한 허용을 안 했을 때 보여줄 기본 위치입니다
현재 시드니가 기본값이에요!

GODNOEL · 2023-01-22T02:00:30Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+
+    // MARK: - Life Cycle
+
+    override func loadView() {


Q;
loadView()는 super.loadView() 가 사용되지않아 검색해보니
공식문서에서 super 키워드를 사용하지 말라고 되어있네요
Your custom implementation of this method should not call super.

그래서 좀 찾아보니 스토리보드를 사용한 경우 ,
스토리보드에서 그린 뷰들이 loadView()에서 그려지기 때문에
super.loadView()를 사용하게되면 코드에서 정의한 뷰로 재정의? 되기때문에 사용하지 말라고 하는 걸까요..?

참고
https://developer.apple.com/documentation/uikit/uiviewcontroller/1621454-loadview
https://mrgamza.tistory.com/279

P5

viewDidLoad에 해도 문제없이 실행되긴하던데 제일 mapView 설정이 제일 기본적인거라서 loadView에 선언하신건가요??

우선 루키 질문에 대해서는

loadView()는 뷰 컨트롤러의 루트뷰(view)를 만들고 로드하는 메서드이고,
코드로 작성한 커스텀 뷰를 루트 뷰로 지정해줄 때 override해서 구현한다고 알고 있습니다.
그래서 여기서는 구글맵인 mapView를 루트 뷰로 사용하기 위해
loadView에서 해당 코드를 작성했습니다.

그리고 노엘의 질문에 대해서는
스택오버플로우를 참고하니 2가지 큰 이유가 있는 것 같습니다.

첫 번째로는 노엘이 말씀해 주신 것처럼 스토리보드를 통해 구현한 경우 뷰컨트롤러 안에 뷰가 이미 구현되어 있어서 super.loadView()를 하는 경우 불필요하게 두번 호출됩니다. 또한 xib가 있는데 loadView를 오버라이드해서 구현하게 되면 기존 xib를 무시하고 loadView의 내용이 반영되는 것 같습니다.

두 번째로는 코드로만 개발하는 경우, 위에서 언급했듯이 코드로 작성한 커스텀 뷰를 루트 뷰로 지정해 줄 때 loadView를 오버라이드해서 구현하므로 굳이 superclass를 필요로 하지 않는 것 같습니다.

결론은, 필요 없으니까 굳이 호출해서 일을 늘리지 말라..? 인 것 같습니다.

참고

https://stackoverflow.com/questions/15111153/what-are-the-side-effects-of-calling-super-loadview

https://stackoverflow.com/questions/9105450/should-super-loadview-be-called-from-loadview-or-not

https://stackoverflow.com/questions/9569749/is-it-ok-to-call-super-loadview

GODNOEL

고생하셨어요 로라! 지도색상 좋아요!
그리고 상단 요소들 좌우 패딩 값은 25로 맞춰주시면 감사하겠습니다!!🥰

Rookie0031

👍 고생하셨습니다!

구글맵스 도입부터 초기세팅까지 감사합니다.

저는 xCode 시뮬레이터로 실행시에 빌드는 잘되지만 위치는 시드니에 있고 ㅋㅋㅋㅋ 콘솔창에 여러 에러가 뜨는데 다른분들은 어떤지 궁금하네요

참고로 실기기로 테스트했을 때 콘솔창에 에러는 없지만 위치는 시드니로 잡힙니다. 위치 권한 설정 관련 코드가 추가되면 해결될까요??

Rookie0031 · 2023-01-22T06:04:26Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+
+    // MARK: - Life Cycle
+
+    override func loadView() {


P5

viewDidLoad에 해도 문제없이 실행되긴하던데 제일 mapView 설정이 제일 기본적인거라서 loadView에 선언하신건가요??

Rookie0031 · 2023-01-22T06:21:33Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+    private let createEventsButton: UIButton = {
+        $0.setImage(UIImage(named: "createEventsButton"), for: .normal)
+        return $0
+    }(UIButton())


P3

프로퍼티 선언 방식도 처음에 맞추고 가는게 좋을 거 같아요 @GODNOEL @compuTasha @ccdkk
참고로 저는 이런식으로 합니다!

private lazy var textViewVstack: UIStackView = { let stackView = UIStackView(arrangedSubviews: [bandIntroductionLabel, bandIntroTextView]) stackView.axis = .vertical stackView.spacing = 10 return stackView }()

엇 저는 위키에 View Controller Convention 참고해서 구현했습니다!

저는 클로저 문법($0)을 사용하는데,
선택한 이유는 프로퍼티 내에서 변수선언 할때의 네이밍 고민할 시간도 단축해주고
개인적으로 코드를 읽는데 더 가독성이 좋아서 그렇게 사용하고 있었습니다!

그렇군요 좋아요 일단 이대로 갑시다!

저도 루키와 같은 방법으로 사용합니다. 어떤 방법이 더 좋을까요? 통일하면 좋을 것 같아요

compuTasha · 2023-01-22T09:55:12Z

참고로 실기기로 테스트했을 때 콘솔창에 에러는 없지만 위치는 시드니로 잡힙니다. 위치 권한 설정 관련 코드가 추가되면 해결될까요??

넵! 지금은 구글맵 뷰만 추가한 상황이라 기본 값으로 설정해둔 시드니가 보이고
다음 PR로 위치 권한 받고 현재 위치를 지도에 반영하는 코드 올라갈 예정입니다! @Rookie0031

GODNOEL

고생하셨어요 로라!🫶

Rookie0031

고생하셨습니다 로라 👍 설 연휴에도 열정 멋지네요🔥 감사합니다

ccdkk

고생하셨습니다 로라! 맵뷰 싱크로율이 장난없네요.

ccdkk · 2023-01-22T14:38:59Z

.github/workflows/BuildTest.yml

@@ -0,0 +1,21 @@
+name: GetARock Build Test


ccdkk · 2023-01-22T14:43:13Z

GetARock/GetARock/Screens/Maps/View/MainMapViewController.swift

+    private var currentLocationLabel: UILabel = {
+        $0.text = "포항시 남구 효자동"
+        $0.textColor = .white
+        $0.font = UIFont.systemFont(ofSize: 30, weight: .bold)


p4;
develop에 머지된 font extension 메소드를 사용해보는 것은 어떨까요?

앗 투두에 적어두고 반영없이 머지할뻔 했네요😓
확인 감사합니다! a48da22

…into feature/20-design-map-ui

compuTasha · 2023-01-22T16:42:33Z

그리고 상단 요소들 좌우 패딩 값은 25로 맞춰주시면 감사하겠습니다!!🥰

변경했습니다! 37f0884 @GODNOEL

[Design] 메인 지도 뷰 UI를 구성합니다.

compuTasha added 11 commits January 20, 2023 23:05

Merge branch 'feature/13-add-api-key' of https://github.com/extreme-r…

0bc9d5d

…ock/GetARock-iOS into feature/20-design-map-ui

[Add] MainMapViewController 추가 (#20)

911d328

[Design] 지도 다크모드 스타일 적용 (#20)

6410a1b

[Resource] 메인 맵 버튼 이미지 추가 (#20)

e092415

[Style] MARK 주석 추가 (#20)

ee7ae38

[Design] 메인 맵 하단 버튼 추가 (#20)

597326b

[Design] 메인 맵 상단 버튼 추가 (#20)

6acff4b

[Design] 메인 맵 현 위치 라벨 추가 (#20)

283e06a

[Style] 개행 수정 (#20)

9e850ef

[Refactor] 메인 맵 레이아웃 코드 리팩토링 (#20)

25a6871

[Rename] 현위치로 이동하는 버튼 네이밍 수정 (#20)

c17cc2c

currentLocationButton -> moveToCurrentLocationButton

compuTasha added design type : UI, 스타일 관련 수정 및 파일 추가 등 로라 지도 epic : 지도 labels Jan 21, 2023

compuTasha self-assigned this Jan 21, 2023

auto-assign bot requested review from ccdkk, GODNOEL and Rookie0031 January 21, 2023 15:22

compuTasha commented Jan 21, 2023

View reviewed changes

GODNOEL reviewed Jan 22, 2023

View reviewed changes

[Style] 개행 수정 (#20)

e07dbdd

Rookie0031 reviewed Jan 22, 2023

View reviewed changes

[Design] padding 값 변경 (#20)

37f0884

GODNOEL approved these changes Jan 22, 2023

View reviewed changes

Rookie0031 approved these changes Jan 22, 2023

View reviewed changes

ccdkk approved these changes Jan 22, 2023

View reviewed changes

compuTasha added 3 commits January 23, 2023 01:36

Merge branch 'develop' of https://github.com/extreme-rock/GetARock-iOS …

15582c0

…into feature/20-design-map-ui

[Rename] Screens > View 폴더 삭제 (#20)

b07ec55

[Design] UIFont extension 적용 (#20)

a48da22

compuTasha merged commit 022c926 into develop Jan 22, 2023

compuTasha deleted the feature/20-design-map-ui branch January 22, 2023 17:24

Rookie0031 pushed a commit that referenced this pull request Jan 23, 2023

Merge pull request #35 from extreme-rock/feature/20-design-map-ui

629f6cc

[Design] 메인 지도 뷰 UI를 구성합니다.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Design] 메인 지도 뷰 UI를 구성합니다. #35

[Design] 메인 지도 뷰 UI를 구성합니다. #35

compuTasha commented Jan 21, 2023 •

edited

compuTasha Jan 21, 2023

GODNOEL Jan 22, 2023

ccdkk Jan 22, 2023

compuTasha commented Jan 21, 2023

GODNOEL Jan 22, 2023

compuTasha Jan 22, 2023

compuTasha Jan 22, 2023

GODNOEL Jan 22, 2023

compuTasha Jan 22, 2023 •

edited

GODNOEL Jan 22, 2023

Rookie0031 Jan 22, 2023

compuTasha Jan 22, 2023

compuTasha Jan 22, 2023

GODNOEL left a comment •

edited

Rookie0031 left a comment •

edited

Rookie0031 Jan 22, 2023

Rookie0031 Jan 22, 2023

compuTasha Jan 22, 2023 •

edited

GODNOEL Jan 22, 2023

Rookie0031 Jan 22, 2023

ccdkk Jan 22, 2023

compuTasha commented Jan 22, 2023

GODNOEL left a comment

Rookie0031 left a comment

ccdkk left a comment

ccdkk Jan 22, 2023

ccdkk Jan 22, 2023

compuTasha Jan 22, 2023

compuTasha commented Jan 22, 2023

[Design] 메인 지도 뷰 UI를 구성합니다. #35

[Design] 메인 지도 뷰 UI를 구성합니다. #35

Conversation

compuTasha commented Jan 21, 2023 • edited

1. 관련 이슈

2. 배경

3. 작업 내용

4. 리뷰 노트

5. 테스트 방법

6. 스크린샷

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

compuTasha commented Jan 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

compuTasha Jan 22, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

P5

Choose a reason for hiding this comment

Choose a reason for hiding this comment

참고

GODNOEL left a comment • edited

Choose a reason for hiding this comment

Rookie0031 left a comment • edited

Choose a reason for hiding this comment

👍 고생하셨습니다!

구글맵스 도입부터 초기세팅까지 감사합니다.

Choose a reason for hiding this comment

P5

Choose a reason for hiding this comment

P3

compuTasha Jan 22, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

compuTasha commented Jan 22, 2023

GODNOEL left a comment

Choose a reason for hiding this comment

Rookie0031 left a comment

Choose a reason for hiding this comment

ccdkk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

compuTasha commented Jan 22, 2023

compuTasha commented Jan 21, 2023 •

edited

compuTasha Jan 22, 2023 •

edited

GODNOEL left a comment •

edited

Rookie0031 left a comment •

edited

compuTasha Jan 22, 2023 •

edited