[ Project ] Book search APP

과제긴 하지만 프로젝트 진행 연습이라고 생각하고 진행해보기!

 

  Book search APP  

  LV 1 .  두개의 탭과 세개의 뷰   - VC생성 및 탭바 이용한 화면전환만 구현

• 검색뷰(메인뷰), 상세페이지 뷰(모달), 장바구니 뷰
• 첫번째 탭 - 검색, 두번째 탭 - 장바구니

• UITabBarController
• UIModal

BookSearch APP
├── AppDelegate.swift
├── SceneDelegate.swift
├── Info.plist
├── Assets.xcassets/
│   └── AppIcon.appiconset/
├── Models/
│   ├── Book+CoreDataClass.swift
│   └── Book+CoreDataProperties.swift
├── ViewControllers/
│   ├── SearchViewController.swift
│   ├── BookInfoViewController.swift
│   ├── CartViewController.swift
│   └── CustomTabBarController.swift

 

🍏 1-1 .  SceneDelegate에서 UITabBarController 선언

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    
    var window: UIWindow?
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: windowScene)
        
        let tabBarVC = UITabBarController()
        
        let vc1 = UINavigationController(rootViewController: SearchViewController())
        let vc2 = CartViewController()
        
        vc1.title = "검색 탭"
        vc2.title = "담은 책 리스트"
        
        tabBarVC.setViewControllers([vc1, vc2], animated: false)
        
        guard let items = tabBarVC.tabBar.items else { return }
        items[0].image = UIImage(systemName: "magnifyingglass")
        items[1].image = UIImage(systemName: "cart")
    
        
        // Set the root view controller
        window?.rootViewController = tabBarVC
        window?.makeKeyAndVisible()
    }

🍏 1-2 . BookInfoViewController 모달로 띄우는 것은 Lv2 에서 버튼 생성하며 같이 해줄것

• 책 상세 화면 (BookInfoViewController)
  • 사용자는 검색 결과의 리스트 아이템을 ‘탭’하여 책 상세 화면에 진입할 수 있습니다.
  • 책 상세 화면은 모달 방식으로 등장합니다.

 

  LV 2 .  책 검색 화면 구현   

 🍏 2-1 .  화면 구성  

•  서치바 생성 (UISearchBar, UITextField)
• 사용자는 검색 이후 검색 결과 (컬렉션 뷰) 를 리스트를 통해 볼 수 있습니다.
  • FlowLayout or CompositionalLayout
• UISearchBar 사용

class SearchViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSearchBar()
        setupNavigationBarButtons()
        view.backgroundColor = .white
    }
    
    private func setupSearchBar() {
           let searchBar: UISearchBar = {
               let search = UISearchBar()
               search.placeholder = "검색어를 입력하세요"
               return search
           }()
           
           navigationItem.titleView = searchBar
       }
    
    private func setupNavigationBarButtons() {
            let searchButton: UIBarButtonItem = {
                let button = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: #selector(searchButtonTapped))
                return button
            }()
            
            navigationItem.rightBarButtonItem = searchButton
        }
    
    @objc private func searchButtonTapped() {
        print("검색버튼이 클릭되었습니다")
    }
}

private func createCompositionalLayout() -> UICollectionViewLayout {
        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
        let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: "header", alignment: .topTrailing)
        
        // 아이템 3가지 정의
        let bookTitleItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(100))
        let bookTitleItem = NSCollectionLayoutItem(layoutSize: bookTitleItemSize)
        
        let authorsItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(70))
        let authorsItem = NSCollectionLayoutItem(layoutSize: authorsItemSize)
        
        let bookPriceItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(100))
        let bookPriceItem = NSCollectionLayoutItem(layoutSize: bookPriceItemSize)
        
        
        // 그룹 크기 및 섹션 설정
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(120))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [bookTitleItem, authorsItem, bookPriceItem])
        
        group.interItemSpacing = NSCollectionLayoutSpacing.fixed(10)
        
        let section = NSCollectionLayoutSection(group: group)
        
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 24, bottom: 0, trailing: 24)
        
        //        section.interGroupSpacing = 20
        
        section.boundarySupplementaryItems = [header]
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }

 

  CompositionalLayout 추가 공부 필요! (속성에 대해서 알아보기)  

 🍏 2-2 .  검색 기능  

• 서치바를 사용하여 책을 검색
• 검색(입력완료)를 누르면, 검색 결과 리스트에 책 목록이 등장
• 검색에는, 또한 카카오 책 검색 REST API 를 이용합니다.
  • Kakao Developers 검색 제품의 책검색 기능 활용

 

• 컬렉션뷰셀 -  책 제목, 저자, 가격
• 컬렉션뷰 Header - 검색 결과 >>2-1 에서 구현완료