[Team05][iOS][Jason] 앱 초기화면(검색탭) 구현

[JasonLee0223]

안녕하세요! 이번에 Team05에서 iOS Jason입니다. 앞으로 3주 잘부탁드립니다!
이전까지 작업할 때 팀원들의 도움을 많이 받아서 혼자서 한 번 해내보고싶어서 학습했던 내용을 바탕으로
최대한 구현할 수 있는 부분까지 진행해보는게 이번 프로젝트 목적입니다!

🧑🏼‍💻 작업 목록

• Airbnb 프로젝트 생성
• 브랜치 생성
• .gitignore 작성
• 메인 레이아웃 구성
  • TabBarController & NavigationController Embed
  • 각 탭 별로 Controller 구별
  • NavigationBar 에 SearchBar 생성하기
    • UISearchController 적용

💭 학습 키워드

• NavigationController
• UISearchController
• UIScrollView
• AutoLayout
• SF symbol

🤔 고민과 해결

• UISearchBar를 처음 써보는 계기가 되어 진행하였다가 검색창을 눌렀을 때 목록들이 올라올 수 있도록 UISearchController로 변경하여 해결하였습니다.
• 처음 SF symbol을 사용하다보니 searchBar에 왼쪽에 돋보기 이모티콘으로 사용될 줄 알았지만 default로 제공해준다는것을 알게되어 화면 하단의 탭바에만 symbol을 적용하였습니다.

💬 부연 설명

• ScrollView의 Scroll 하는 액션을 취하려고 contentLayoutGuide를 사용하였는데 좀 어색하게 움직여서 보완할 예정입니다. (FrameLayoutGuide를 사용하는것도 고민해보고있습니다!)

💬 실행 화면

[GangWoon]

안녕하세요 :)
제 생각은 정답이 아니기에 참고만 하시고, 납득이 되는 부분만 수정하셨으면 좋겠습니다.

스토리보드로 작업한 부분이 있으셔서 해당 부분은 집가서 확인해보고 말씀드릴 부분이 있다면 추가적으로 언급드리도록 하겠습니다 :)

[GangWoon]

해당 작업을 의미가 있는 메소드로 분리시키는 건 어떠실까요? 시스템 노티를 받을 수 있는 공간에서 생각보다 큰 작업을 하실 경우에 읽는 사람에게 혼돈을 줄수도 있습니다.

추가적으로 배열 인덱스에 직접 접근하는 방법말고 다른 방법은 없었을까요??

[JasonLee0223]

스토리보드를 사용하다보니 배열 인덱스로 접근하는 방법으로 생각하였습니다. 하여 메서드로 분리시키는 것으로 생각해보니
제가 ViewController의 컨테이너 형식을 놓친 것 같아 변경하고 스토리보드없이 코드로 작성하는쪽으로 방향을 돌리게 되었습니다.
수정한 내용은 아래와 같습니다.
SceneDelegate.swift

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: windowScene)
        
        let rootViewController = TabBarController()
        self.window?.rootViewController = rootViewController
        window?.makeKeyAndVisible()
    }

TabBarController.swift

class TabBarController: UITabBarController {
    
    let searchViewController = SearchViewController()
    let wishlistViewController = WishlistViewController()
    let reservationViewController = ReservationViewController()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setTabBarItems()
        setTabBarBackgroundColor()
    }
}

private extension TabBarController {
    
    func setTabBarItems() {
        let navigationViewController = UINavigationController(rootViewController: searchViewController)
        
        navigationViewController.tabBarItem = UITabBarItem(title: "검색", image: UIImage(systemName: "magnifyingglass"), tag: 0)
        wishlistViewController.tabBarItem = UITabBarItem(title: "위시리스트", image: UIImage(systemName: "heart"), tag: 1)
        reservationViewController.tabBarItem = UITabBarItem(title: "내 예약", image: UIImage(systemName: "person.fill"), tag: 2)
        self.viewControllers = [navigationViewController, wishlistViewController, reservationViewController]
    }
    
    func setTabBarBackgroundColor() {
        if #available(iOS 15.0, *) {
            let appearance = UITabBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = .systemGray6
            self.tabBar.standardAppearance = appearance
            self.tabBar.scrollEdgeAppearance = self.tabBar.standardAppearance
        } else {
            self.tabBar.barTintColor = .systemGray6
        }
    }
}

[GangWoon]

코드로 작성하시라는 말은 아니였습니다 ㅋㅋ
스토리 보드로 작성하더라도 신델리게이트가 갖는 내부 메소드로 작성해서 해당 메소드를 호출하는 식으로 가게되면 10줄에 걸쳐 작성하던 내용을 1줄 메소드 호출로 둔갑시킬수 있어서 드린 말씀이였습니다 :)

[GangWoon]

탭바 아이템의 경우도 조금더 이쁘게 포팅할수 있는 방법이 있을거 같아요.
다만 중요한 부분은 아니니 넘어가셔도 괜찮을 거 같습니다.

[JasonLee0223]

코드로 작성하게 된 것은 배열의 인덱스로 접근하는게 위험하다고 생각이 들어 주변 팀원들도 대부분 코드로 작성하여 방향을 틀게되었습니다..😅 말씀해주신 10줄에 걸쳐 작성된 부분을 1줄로 호출할 수 있는 방법도 찾아보고 테스트해보겠습니다! ㅎㅎ

[GangWoon]

프레임을 직접 설정하는 방법말고 다른 방법은 없었을까요?

[JasonLee0223]

피그마에 표기된 Rect 사이즈를 맞추려고하다보니 직접 설정하게되었는데 해당 코드없이도 정상적으로 표현되어 삭제하였습니다.

[GangWoon]

메소드 이름이 혼란을 주는거 같습니다.
그 이유는 오픈된 메소드면서 UIView.addSubView메소드가 기존에 존재하기때문인 거 같습니다.

[JasonLee0223]

이 부분은 함수명을 작성하면서 신경이 쓰였습니다..😅 좀 어색할 수 있지만 동일한 의미를 갖는 단어 appendSubView로 바꾸었습니다!

[GangWoon]

의미가 있는 코드일까요?

[JasonLee0223]

AutoLayout을 코드로 설정해줄때 항상 빼먹지않고 적어야하는 것으로 알고있었습니다.
scrollView의 constraint가 safeAreaLayoutGuide를 통해 리사이징 되는 것 같다고 생각이듭니다..
하여 코드를 지워도 정상적으로 돌아가서 수정하였습니다. 아래 참고사이트를 좀 더 자세히 읽어보려고합니다!
https://zeddios.tistory.com/474

[GangWoon]

이닛할때 동일한 작업을 하신거 같아서 드린 질문이였습니다.

[GangWoon]

동일합니다.

[GangWoon]

레퍼런스를 유지하는게 의미가 있을까요??

[JasonLee0223]

이 부분은 SearchView가 SearchBar를 구현하는 목적에 맞춰 작성하였는데 취지에 벗어나서 HomeView로 변경하였습니다!

[JasonLee0223]

수정한 내용을 push하여 적용하였습니다!
아! 현재 HomeView 영역을 ScrollView로 코딩하였는데 이 부분을 CollectionView로 미션 내용에 맞춰 변경할 예정입니다!

[GangWoon]

해당 pr에서 수정할게 더 이상 없다고 판단이 드시면 머지하시고 진행하셔도 됩니다 :)