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

이번 2차 프로젝트로 제주패스를 클론 코딩한다.

나는 꽤 중요한 모달 부분을 맡았다!

이 모달에서 도착지, 출발지, 탑승일(캘린더 라이브러리), 인원 및 좌석등급을 선택해줘야 하기 때문이다.

중요한 부분을 맡았으니 열심히 책임감을 가지고 해보려고 한다.

---

모달에는 tap 기능이 참 많다. 

첫번째로 위의 사진처럼 항공, 자동차, 숙박, 맛집, 카페의 menu tap이 있다.

 

비행기를 누르면 항공에 대한 탭이 나오고

자동차를 누르면 자동차에 대한 탭, 숙박을 누르면 숙박에 대한 탭 ... 탭 지옥(?)이다.

 

 

두번째로는 위에서 볼 수 있듯이 항공에 대한 탭에 또 탭 기능이 있다.

도착을 선택했을 때, 출발을 선택했을 때, 탑승일을 선택했을 때, 인원 및 좌석등급을 선택했을 때의 레이아웃이 모두 다르다..

 

레이아웃도 레이아웃이지만 

이러한 menu tap기능의 레이아웃을 구현해본 것이 처음이라 이해하고 구현하는데 좀 걸렸다.

이 부분을 정리해보려고 한다!

---

< 1.  항공, 자동차, 숙박, 맛집, 카페 : menu tap 구현하기 >

위의 각 아이콘을 눌렀을 때 해당하는 탭으로 바뀌어야 한다. 

import React, { useState } from 'react';
import styled from 'styled-components';
import AirPlainTap from './AirPlainTap';
import CarTap from './CarTap';
import SleepTap from './SleepTap';
import ShopTap from './ShopTap';
import CafeTap from './CafeTap';

const AirModal = () => {

//currentId의 현재값은 1이다.
  const [currentId, setCurrentId] = useState(1);

//해당 메뉴를 클릭하면 currentId를 바꿔주는 함수이다.
  const clickHandler = id => {
    setCurrentId(id);
  };
  return (
    <>
      <UlDiv>
        <IconUl>
        //메뉴 카테고리를 배열로 만들어 map을 돌리고 배열의 Index값을 이용하였다.
          {CATEGORY_ARR.map((cate, idx) => {
            return (
              <IconLi
                key={cate + idx}
                className={cate}
                //클릭하면 해당 index값에 +1을 한 값이 currentId 들어가게 된다.
                onClick={() => clickHandler(idx + 1)}
              >
              	//메뉴 탭의 아이콘도 배열로 담았는데 CATEGORY_ARR의 index값을 이용하여
                //알맞은 아이콘을 보여주게했다.
                {ICON_ARR[idx]}
              </IconLi>
            );
          })}
        </IconUl>
      </UlDiv>
      //MAPPING_OBJ는 컴포넌트를 객체로 만들어 준 것인데 위의 클릭이벤트에 의해 currentId가 바뀌며
      //알맞은 tap을 불러준다.
      <div>{MAPPING_OBJ[currentId]}</div>
    </>
  );
};

//각각 컴포넌트화하여 상단에서 import로 불러와여 사용했다.
const MAPPING_OBJ = {
  1: <AirPlainTap />,
  2: <CarTap />,
  3: <SleepTap />,
  4: <ShopTap />,
  5: <CafeTap />,
};

//map을 돌려 구현하기 위해 만들어준 CATEGORY_ARR배열
const CATEGORY_ARR = [
  'AirPlainTap',
  'CarTap',
  'SleepTap',
  'ShopTap',
  'CafeTap',
];

//아이콘 배열
const ICON_ARR = [
  <i className="fa-solid fa-jet-fighter-up" />,
  <i className="fa-solid fa-car" />,
  <i className="fa-solid fa-bed" />,
  <i className="fa-solid fa-tag" />,
  <i className="fa-solid fa-mug-saucer" />,
];

//아래는 styled-component이다.
const UlDiv = styled.div`
  background-color: #f8f8f8;
  padding-top: 50px;
`;

const IconUl = styled.ul`
  display: flex;
  justify-content: center;
  padding-bottom: 17px;
`;

const IconLi = styled.li`
  text-align: center;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #fff;
  margin: 8px 6px;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  i {
    font-size: 30px;
    color: #63a1ff;
  }
`;

 

위의 코드에 주석으로 설명해놓았다 : )

 

 

이렇게 하면 아래처럼 구현된다. 

각 탭을 눌렀을 시 해당 탭에 효과를 주는 기능은 아직 구현하지 못했다. (곧 구현할 것이다 : ))

또한 이번 프로젝트에서는 항공 탭만 구현하기로 했기에

항공탭만 작업할 예정이다.

나머지 탭들은 간단하게 '준비 중입니다.'의 멘트를 띄워놓을 예정이다.

자동차 / 숙박을 선택했을 때

---

< 2. 항공 탭에서 -> 도착, 출발, 탑승일, 인원 및 좌석등급 menu tap 구현하기 >

출발을 누르면 출발지 검색 및 선택,

도착을 누르면 도착지 검색 및 선택,

탑승일을 누르면 캘린더 라이브러리가 켜지며 날짜 선택,

인원 및 좌석등급을 누르면 인원 및 좌석등급을 선택할 수 있는 탭이 나온다.

실제 제주패스와 매우 비슷하게 구현했다!

각 도착, 출발, 탑승일, 인원 및 좌석등급 탭의 기능적인 부분은 따로 정리하여 블로그에 써 놓을 것이고

이 글에는 탭 기능 구현에만 초점을 맞췄다.

const ModalFilterBar = () => {
 
 const [currentId, setCurrentId] = useState(1);
 
 const clickHandler = id => {
    setCurrentId(id);
  };
 
 const MAPPING_OBJ = {
    1: (
      <Arrive
        data="출발지"
      />
    ),
    2: (
      <Arrive
        data="도착지"
      />
    ),
    3: (
      <Dep />
    ),
    4: (
      <People />
    ),
  };

 return (
    <>
      <InnerBar>
        <FlightInner primary={currentId === 1 || currentId === 2}>
       	  // 클릭하면 출발 탭으로 변경되는 코드
          <Panel width="180px" onClick={() => clickHandler(1)}>
            <Text>출발</Text>
            <Button>
              <Text>
                {departure}
                <span>{departureToEn}</span>
              </Text>
            </Button>
          </Panel>
           // 클릭하면 출발 탭으로 변경되는 코드
          <Panel width="180px" onClick={() => clickHandler(2)}>
            <Text>도착</Text>
            <Button>
              <Text>
                {destination}
                <span>{destinationToEn}</span>
              </Text>
            </Button>
          </Panel>
        </FlightInner>
        <FlightInner primary={currentId === 3}>
         // 클릭하면 출발 탭으로 변경되는 코드
          <Panel width="215px" onClick={() => clickHandler(3)}>
            <Text>탑승일</Text>
            <Button>
              {boardStartDay === boardEndDay || !boardEndDay
                ? boardStartDay
                : boardEndDay && `${boardStartDay}~${boardEndDay}`}
            </Button>
          </Panel>
        </FlightInner>
        <FlightInner primary={currentId === 4}>
         // 클릭하면 출발 탭으로 변경되는 코드
          <Panel width="190px" onClick={() => clickHandler(4)}>
            <Text>인원 및 좌석등급 </Text>
            <Button>
              <Text>
                {adultCount} {childCount} {babyCount} {rating}
              </Text>
            </Button>
          </Panel>
        </FlightInner>
        <Search>{searchSort}</Search>
      </InnerBar>
      // currentId가 변하며 해당 탭으로 이동된다!!
      <div>{MAPPING_OBJ[currentId]}</div>
    </>
  );
};

tap에 관련된 코드만 데려왔다.

예를 들어 출발 panel을 클릭 시 currentId가 1로 바뀌며

{MAPPING_OBJ[1]}가 되고 

MAPPING_OBJ 객체의 1번인 Arrive 탭으로 이동하게 되는 것이다.

---

이번 프로젝트를 하면서 menu tap을 처음 시도해봤다.

처음에는 어떻게 구현할 수 있을까 하고 막막한 감이 있었는데

구글링 하고 위코드에서 배운 것들을 활용하니 금방 구현할 수 있었다.

이번에 menu tap기능을 확실히 내 기술로 만든 것 같아 너무 뿌듯하다!