pbg0205 / airbnb

그룹프로젝트 #4

Hi~ I'm Cooper 🤨

• I'm Backend Developer using Java and Spring .
• I'm interested in OOP , Clean Code .

Skill

• Language -
• Backend -
• DevOps -
• Tools -

Github Stats 🔥

airbnb's Issues

[iOS] 검색바 장소 입력 시 관련 장소 자동완성 구현

카카오 API 초기 설정

• 카카오 개발자 등록
• KAKAO API KEY 등록
• 카카오 SDK 설치

네트워크 구현

• Alamofire 설치
• Network Manager 구현
• 장소 리스트를 get 하기 위한 query, header 설정

searchResultController 구현

• searchResultCollectionViewController 생성 (collectionView이기에 초기 layout 등록)
• collectionViewLayout 설정
• collectionView Cell 생성 (장소 이름 길이에 따라 1~2줄로 구현)
• collectionView DataSource 구현

UISearchResultsUpdating 구현

• 검색바에 타자를 칠 때마다 네트워크를 통해 연관된 장소 GET
• 올바른 데이터를 가져왔을 시 searchResultController의 모델에 데이터 삽입 및 데이터소스 apply
• 네트워킹 실패 혹은 데이터가 없을 때 아무일도 일어나지 않도록 구현

Landing Page UI

검색 화면 달력 추가

지도 API 사용하여 지도 제작

달력 기능 : 날짜 선택

mouseOver 이벤트를 통해 현재의 checkinState와 checkOutState를 관리해준다.

상태비교를 통해 className을 selected로 바꾸어준다.

값의 비교는 new Date < currentDate

모달 3개 상태관리 리팩토링

게스트 인원수 모달

로그인 요청 이후 PROFILE ID or NICKNAME 받아서 출력하기

달력 기능 추가

라우터에 react suspense 활용하기

[iOS] 날짜 입력 페이지 구성

예약 정보 테이블뷰 구성

• 각 화면(날짜 입력, 가격 입력 등)마다 입력되는 셀 구현
• 날짜 입력 페이지로 넘어올 시 위치 데이터 받아오기
• 체크인 날짜 선택 시 테이블 뷰 reload (체크인 날짜 출력)
• 체크아웃 날짜 선택 시 테이블 뷰 reload (체크인 ~ 체크아웃 날짜 출력)

날짜 입력 캘린더 구성

• 체크인/체크아웃 선택 가능하도록 구현
• 오늘 날짜를 기준으로 지난 날짜는 선택할 수 없도록 구현 (색상은 회색)
• 체크인 날짜를 기준으로 이전 날짜를 선택 시 체크인 날짜 변경
• 체크아웃 날짜를 기준으로 다음 날짜 선택 시 체크아웃 날짜 변경
• 동일한 날짜를 체크인/체크아웃으로 선택할 수 있도록 구현

툴바 구현

• 날짜를 입력하지 않았을 시 '건너뛰기' 버튼 활성화, '다음' 버튼 비활성화
• '건너뛰기'를 클릭 시, 날짜 입력을 생략한채로 다음 화면으로 넘어감
• 날짜 입력 시 '건너뛰기' 버튼이 '지우기' 버튼으로 바뀜
• '지우기' 버튼 클릭 시 날짜 초기화

[iOS] 메인 페이지 UI 구성

검색바 생성

• placeholder 생성
• 네비게이션을 이용하여 화면 이동

---

Compositional Layout 구현하기

히어로 이미지 영역 생성

• 이미지 출력
• Label, Button 생성 (동작은 하지 않음)

첫번째 탭

• 이미지, Label을 가지는 CustomCell 생성
• 가로 스크롤링 구현

두번째 탭

• 이미지, Label을 가지는 CustomCell 생성
• 가로 스크롤링 구현

---

하단 탭 바 구현하기

• 검색, 위시리스트, 로그인 탭바 아이템 구현 (SFSymbol)
• 검색을 누르면 검색 네비게이션 실행

금액에 따른 변동표 만들기

금액 변동표를 위한 GET 요청 함수 작성

[iOS] 검색바 네비게이션 구현

네비게이션 컨트롤러 구현

• tabbar controller를 최상단으로 구현하고, navigation controller Embed
• 검색 버튼을 눌렀을 때 화면 이동
• Navigation back button의 text 변경
• SearchController를 이용해 네비게이션에 검색바 삽입

[iOS] 검색바 디폴트 여행지(근처의 인기 여행지) 구현

CollectionView 구현

• collectionViewLayout 설정
• collectionView Header 설정 (MainPage 헤더뷰 셀 재사용)
• collectionView Cell 설정 (MainPage 셀 재사용)
• MockData 생성

숙소 검색 후 페이지 이동, search page UI

[iOS] 테스트 가능한 구조로 바꾸기

• Mock Data를 사용하는 모델 의존성 주입
• 의존성 주입이 된 모델 XCTest

숙소 컴포넌트 UI