[위코드 2차 프로젝트 회고(1)] 기능 구현에 대한 회고 (JEJUPASS 클론코딩)

https://jeongeuni.tistory.com/54?category=1103401

[위코드 2차 프로젝트 회고(2)] 팀 프로젝트에 관한 회고 (JEJUPASS 클론코딩 )

---

JEJUPASS를 모티브하여 만든 FREEPASS의 메인페이지 : )

---

-- 유튜브 최종 데모 영상 

https://www.youtube.com/watch?v=S5ElqSBUMzM 

 

 

-- 취뽀 FREEPASS 깃허브

https://github.com/wecode-bootcamp-korea/35-2nd-FREEPASS-frontend/blob/master/README.md

GitHub - wecode-bootcamp-korea/35-2nd-FREEPASS-frontend: 노정은, 엄성훈, 이현주, 이혜진

 

-- 내 개인 FREEPASS 깃허브

https://github.com/wjddms4107/FREEPASS_jeongeun

GitHub - wjddms4107/FREEPASS_jeongeun

---

2022년 8월 1일 ~ 8월 12일, 약 2주간 프론트 4명, 백엔드 2명으로 구성된 팀으로

JEJUPASS를 클론코딩하는 팀 프로젝트를 진행했다.

 

이번 프로젝트를 하며 느낀점이 너무 많아 우리팀이 모여 회고할 때 눈물이 났다..ʘ̥_ʘ

그만큼 뜻깊었던 2차 프로젝트..! 

차차 설명해보겠다!

 

---

< '취뽀 FREEPASS' >

우리팀의 이름은 '취뽀 FREEPASS'이고 매우 깊은 뜻을 지니고 있다 : )

짜잔 위에서 보면 알 수 있듯이

항공사를 '깨깨오항공', '코팡항공' 등으로 정해놓고 이 기업들을 향해 날아가자는 뜻이 담겨있다.

여기서는 특정 기업들이 언급되었지만 어디든지 자신이 목표로하는 원하는 기업으로 취직해내자는 포부가 담겨있는 것이다.

 

뿌듯하게도 이 항공사 아이디어는 내가 제안했다 : )

'취뽀 프리패스' 라는 키워드에 더 힘을 주고 싶어 생각하다가 갑자기 아이디어가 떠올라 팀원들에게 제안을 했고 

아주 좋은 아이디어라며 받아들여졌다.

 

그래서 아이패드로 조금 king받게 로고를 편집해서 보내줬고 이렇게 멋진 항공사가 탄생할 수 있었다!

 

---

< 우리가 클론 코딩한 JEJUPASS>

JEJUPASS는 제주 여행의 슈퍼 앱으로 전세계 실시간 최저가 항공, 제주 맛집까지 제주도 여행의 모든 것을 확인할 수 있는 웹 사이트이다.

https://rentcar.jejupass.com/web?ACE_REF=adwords_g&ACE_KW=%EC%A0%9C%EC%A3%BC%ED%8C%A8%EC%8A%A4&gclid=Cj0KCQjw0JiXBhCFARIsAOSAKqDVt0VwhDwpjMx109qhe-vGwjJOglosTU0eSM2fLJQjt5PHhSVmLnwaAuc-EALw_wcB 

대한민국 No.1 렌터카 플랫폼 | 제주패스

처음 어떤 사이트를 하게될 지 정해지지 않았을 때 제주패스에 도전해 볼 기능들이 많은 것 같아 하게된다면 재미있을 것 같았다.

그런데 운명처럼 이렇게 프로젝트를 진행하게되어 즐기면서 프로젝트를 진행했다!

---

< 우리가 구현한 기능 >

제주패스에는 항공, 렌터가, 숙박, 맛집 등의 다양한 서비스들이 있지만

우리팀은 그 중에서도 '항공'을 중점으로 구현하였으며

로그인 페이지 (카카오 로그인)
메인 페이지
지도 페이지 (카카오 맵 api)
항공 메인 페이지
항공 모달 (항공권 옵션 선택) (query parameter)
항공권 리스트 페이지 (query parameter)
항공권 예약 및 결제 페이지 (navigate state 전달)
네브바
푸터

총 정리해보자면 이렇게 구성되어있다.

 

이 중에서 나는

항공 모달, 로딩페이지, 항공권 리스트 페이지를 맡았고

이 페이지를 구현하기 위해 사용한 라이브러리로는

datePicker, react modal, react icon, react spinner

가 있다!

---

< 내가 구현한 기능 - 항공 모달 / 로딩페이지 / 항공권 리스트 페이지>

- 1. 항공 모달

위 동영상은 내가 구현한 항공 모달이다.

이 항공모달에서 항공권의 옵션들(출발지, 도착지, 탑습일, 인원 및 좌석등급)을 선택하여 항공권을 검색하는 것이기 때문에

어찌보면 내가 기능의 시작이라고 할 수 있다.

그래서 책임감을 가지고 구현해냈다!

 

제주패스의 항공모달과 매우 비슷하게 제작한 것 같다.

오른쪽: 제주패스 / 왼쪽: 내가 구현한 프리패스

1차 프로젝트할 때도 최대한 비슷하게 구현하려고 아등바등 1px, 색깔 등 사소한 거에도 집착(?)하는 모습을 볼 수 있었는데

2차 때도 이러는 걸 보니 코딩할 때 나의 기질인 것 같다.

하지만 프론트엔드 개발자로서 나쁘지 않은 기질인 것 같으니 만족 !! 

 

그리고 이 항공 모달에는 많은 기능들이 담겨있다. 

정리해보자면....

모달 기능, menu Tap 기능, 출발지&도착지 사진 선택&검색 기능,
캘린더 라이브러리를 이용한 날짜 선택 기능,
선택한 옵션들이 상단에 보여지게하는 state, props 기능,
선택한 옵션들을 담아 보내는 query parameter 등...

정말 많은 기능들이 담겨있다..

늪같은 항공 모달.. 너무 많은 기능이 있어 항공 모달에서 벗어나기 쉽지 않았다.

그래서 trello의 Blocker에 찡찡거린 것이 기억나 캡쳐해왔다.

그런데 찬규님의 Blocker에 더 눈에 보이는...(?)

아무튼! 거의 모두 처음 구현해보는 것들인데 해낸 것이 너무 뿌듯하다.

---

👉 모달 기능

출발 / 도착 / 탑승일 / 인원 및 좌석등급 이 담겨있는 filter bar를 누르면 모달이 켜지고 X를 누르면 꺼진다.

이 부분을 구현할 때 react modal 라이브러리를 이용하였다.

<Modal></Modal>이 사이에

내가 모달로 넣고싶은 부분인 <AirModal>을 넣고 X를 누르면 닫히게 하기 위해 closeModal을 전달해 주었다.

react modal 라이브러리를 이용하면 이렇게 쉽게 구현해낼 수 있다.

 

사실.. 구현 후 쓰는 회고라 지금은 쉽게 구현해낼 수 있다고 하지만

당시에는 내가 원하는 대로 적용하기위해

react modal 라이브러리의 예시도 많이 보고 공부해서 해낼 수 있었다.

---

👉 menu Tap 기능

이 부분은 미리 블로그로 정리해놓았으니 링크를 올려놓았다.

https://jeongeuni.tistory.com/50

[위코드 2차 프로젝트] 제주패스 클론코딩 : menu Tap 구현하기

---

 

👉 출발지, 도착지 사진 선택 & 검색 기능

해당 도시의 사진을 클릭해도, 

원하는 도시의 이름을 검색하여 이름을 클릭해도 반영되는 모습을 볼 수 있다.

또한 도시에 해당하는 영어네임도 반영된다.

 

즉, 포인트는

'김포' 이 부분 -> 사진이든 검색이든 도시를 클릭하면 반영되게하기
'GMP' 이 부분 -> 해당 도시에 맞는 영어네임도 함께 반영되게하기

이거다..!!!

 

* 사진이든 검색이든 도시를 클릭하면 해당 도시가 반영되게하기

-> 사진은 e.target.value의 name속성 / 검색기능에서는 e.target.value의  id속성을 이용했고

 

* 해당 도시에 맞는 영어네임도 함께 반영되게하기

-> 이 부분은 객체를 만들어 map을 돌려 구현할 수 있었다.

---

👉 캘린더 라이브러리를 이용한 날짜 선택 기능

이 부분도 미리 블로그로 정리해놓았으니 링크를 올려놓았다.

https://jeongeuni.tistory.com/51

리액트 캘린더 라이브러리 Datepicker 사용법, 커스텀하기

---

👉 선택한 옵션들을 담아 보내는 query parameter

항공 모달에서 무엇을 선택했는지 그 정보를

내 다음 페이지인 항공권 리스트 페이지에 보내줘야 한다.

위 사진에서 보면 알 수 있지만

탑승일은 22.08.13(토) 이런식의 날짜데이터로 들어가고

좌석등급은 전체 or 비즈니스로 들어가고

편도와 왕복은 편도면 편도 / 왕복이면 왕복으로 파란 버튼에 반영되고있다.

 

이제 이 부분을 quert String으로 보내주면 되는데..

다만.. 백엔드에서 요청을 했다.

탑승일은 22.08.13(토) -> 2022-08-13 

좌석등급은 전체면 'normal' , 비즈니스면 'business' 

편도와 왕복은 편도면 'one_way' , 왕복이면  'round_trip'

이렇게 보내달라고 말이다.

또한 편도면 출발지만 보내주고 왕복이면 출발지와 도착지 모두를 보내달라고 했다.

const goToAirList = () => {
    setIsLoading(true); //loading page를 위한 부분
    const departure_date = hyphenBoardStartDay.slice(0, 8); //backend에서 2022-08-14 이런 형식으로 보내달라고해서 데이터 가공
    const arrival_date = hyphenBoardEndDay.slice(0, 8); //backend에서 2022-08-14 이런 형식으로 보내달라고해서 데이터 가공
    const seat_class = rating === '전체' ? 'normal' : 'business'; //backend에서 좌석등급을 'normal', 'business' 이렇게 보내달라고해서 가공 
    const ticket_type = searchSort === '편도' ? 'one_way' : 'round_trip'; //backend에서 편도인지 왕복인지 알 수 있게 'one_way', 'round_trip' 이렇게 보내달라고해서 가공 
    
    //backend에서 왕복일 때는 출발지만 보내주고 왕복일 때는 도착지,출발지 모두 보내달라고해서 가공 
    const oneWayQueryString = `?ticket_type=${ticket_type}&departure_location=${departure}&arrival_location=${destination}&departure_date=${`20${departure_date}`}&adult=${adult}&infant=${child}&child=${baby}&remaining_seat=${seat_class}`;
    const roundTripQueryString = `?ticket_type=${ticket_type}&departure_location=${departure}&arrival_location=${destination}&departure_date=${`20${departure_date}`}&departure_date=${`20${arrival_date}`}&adult=${adult}&infant=${child}&child=${baby}&remaining_seat=${seat_class}`;
    const finalQueryString =
      ticket_type === 'one_way' ? oneWayQueryString : roundTripQueryString;
      
    //setTimeout은 loading page를 위한 부분
    setTimeout(() => {
      setIsLoading(false);
      //위에서 가공한 데이터를 퀴르스트링으로 담아주는 부분!!!
      navigate(`/airmodal${finalQueryString}`);
      navigate(`/airlist${finalQueryString}`);
      fetch(`${BASE_URL}/flights/schedules${location.search}`);
    }, 5000);
  };

그래서 탄생한 부분이다.

백엔드의 요청에 따라 데이터를 가공해야함을 다시한번 뼈저리게 느꼈다!

이 요청을 처리하기 위해서는 나의 코딩테스트 실력 또한 좋아야 한다는 것도..!

---

- 2. 로딩페이지

모두 선택 후 편도라고 쓰여있는 파란 버튼을 누르면 로딩페이지로 넘어간다.

사실 로딩페이지는 데이터가 많이 있어 실제 페이지가 로딩되기까지 시간이 좀 걸릴 때 그려주는 것인데

우리는 그렇게 데이터가 많지는 않아서

인위적으로 5초 동안 페이지가 보여지게 구현하였다.

const [isLoading, setIsLoading] = useState(false);

const goToAirList = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 5000);
  };

파란 버튼을 누르면 truer가 되어 로딩페이지가 보이고

5초후 다시 false가 되어 로딩페이지가 끝나며 항공권 리스트 페이지가 보이게된다.

짠 아름다운 로딩페이지...!!!

항공 모달에서 선택한 출발지, 도착지, 출발일, 도착일을 props로 전달해주고 있어서 반영되고

react spinner 라이브러리도 이용했다.

---

- 3. 항공권 리스트 페이지

이 페이지는 원래 나의 담당은 아니었지만 급하게 필터기능, 왕복 항공권 구현 부분을 맡게 되었다. 

위의 filter bar에 반영되게 하는 부분
정렬과 항공사를 선택 후 적용을 누르면 반영되게하는 부분
선택한 항공권이 예약페이지로 넘어아게 하는 부분
편도일 때는 편도 항공권 / 왕복일 때는 편도와 왕복 항공권의 데이터가 그려지게 하는 부분

이 네 가지를 구현해냈다.

👉 위의 filter bar에 반영되게 하기

항공 모달의 데이터를 fatch에서 location.search로 받아 useEffect를 사용해 filter bar 컴포넌트에 데이터를 넘겨 구현했다.

👉 정렬과 항공사를 선택 후 적용을 누르면 반영되게하는 부분

필터 기능을 처음 구현해봐서 제일 고생하여 구현했다.

체크박스에서 선택한 데이터가 원래는

정렬 ==> 출발시간 빠른 순 = 1 / 출발시간 늦은 순 = 2 / 가격 낮은 순 = 3 ... 이렇게 숫자로 출력이 됐다면

backend에서 'departure_time' , '-departure_time' 이렇게 보내달라하여 가공했고

항공사 ==> 항공사는 다중 선택이 가능하여 배열 안에 숫자로 [5, 6, 7] 이렇게 마구잡이로 출력이 되는데

이 또한  backend에서 '샘숭항공' , '깨깨오항공' 이렇게 보내달라하여 가공해야했다.

👉  선택한 항공권이 예약페이지로 넘어아게 하는 부분

 onClick={e => {
	navigate('/aircart', { state: { result } });
}}

onclick 이벤트에 navigate로 다음 페이지인 aircart페이지에 state로 데이터를 전달해줬다.

이렇게 전달할 수 있다는 것을 최종발표 전 날 저녁에 알았다.

진작 알았으면 다른 부분도 이렇게 해볼 수 있었을 텐데!!! 하는 아쉬움이 있다.

👉 편도일 때는 편도 항공권 / 왕복일 때는 편도와 왕복 항공권의 데이터가 그려지게 하는 부분

편도일 때는 편도의 데이터만 담고

왕복일 때는 편도와 왕복의 데이터 모두를 새로운 객체안에 담아줘야했다.

그 후 편도일 때는 편도의 티켓데이터를 꺼내쓰고

왕복을 때는 편도와 왕복의 데이터가 담겨있는 티켓데이터를 꺼내써야했기에

삼항연산자와 조건부렌더링을 하여 그려줄 수 있었다.