네비게이션바 만들기 feat.에어비앤비

프로젝트를 진행중 디자이너님에게 생전 처음 보는 내비게이션바를 만들어 달라는 미션을 받았다
딱보니 쉽지 안겠구나라는걸 느끼고 라이브러리가 있나 찾아 봤지만 영 원하는 ui를 찾기 못했고
레퍼런스가 필요했는데 에어비앤비에 비슷한게 있었다.

결과물

저렇게 레이아웃 되면서 클릭하면 선택할 수 있는 모달이 내려 온다.

처음에는 어렵게 생각했지만 div박스안에 div박스를 만들어 클릭 했을때만 저 알약 같은 박스만
레이아웃 되게 하면 되는거 였음

 const handleBoxClick = (index: number) => {
        setSelectedBox(index);
        setIsWhele(false);
        setIsDate(false);
        setIsTime(false);
        
        if (index === 0) {
          setIsWhele(true);
        } else if (index === 1) {
          setIsDate(true);
        } else if (index === 2) {
          setIsTime(true);
        }
      };

총 3개의 박스가 있으니 조건을 걸어 둔다.

    <NavigationBoxRayout>
            <NavRayout>
            <InnerBox
            onClick={() => {handleBoxClick(0); setIsWhele(true);}} highlighted={selectedBox === 0}>
                    <TextBox>
                        <TextContent>여행 카테고리</TextContent>
                        <TextContent2>{selectedCountry ? selectedCountry : "여행지를 선택해주세요."}</TextContent2>
                    </TextBox>
                </InnerBox>

                <InnerBox
                onClick={() => {handleBoxClick(1); setIsDate(true);}} highlighted={selectedBox === 1}>
                <TextBox>
                        <TextContent>날짜</TextContent>
                        <TextContent2>{formattedDate ? formattedDate : "날짜를 선택해주세요."}</TextContent2>
                    </TextBox>
                </InnerBox>
                <InnerBox onClick={() =>{handleBoxClick(2); setIsTime(true);}} highlighted={selectedBox === 2}>
                <TextBox>
                        <TextContent>시간</TextContent>
                        <TextContent2>시간을 선택해주세요.</TextContent2>
                    </TextBox>
                </InnerBox>
            </NavRayout>
        </NavigationBoxRayout>


        {/* 모달 부분 */}
        <ModalRayout>
            {isWhele && (
            <SelectCountry id={param} onClick={setSelectedCountry} />
            )}
            {isDate && (
           <CustomCalendar setFormattedDate={setFormattedDate} /> 
            )}
            {isTime && (
             <Clock value={selectedTime} onChange={setSelectedTime} />
            )}
        </ModalRayout>

이러게 온클릭이벤트를 걸어주고 프롭스를 내려준다.

const InnerBox = styled.div<InnerBoxProps>`
    width: 331px;
    height: 84px;
    display: flex;
    padding: 20.4px 140px 20.4px 38px;
  ${({ highlighted }) => highlighted && `
    width: 331px;
    height: 84px;
    display: flex;
    padding: 20.4px 140px 20.4px 38px;
    border-radius: 58.7px;
    box-shadow: 1.3px 0 16.6px 0 rgba(0, 0, 0, 0.25);
    border: solid 1px #2bde97;
    background-color: #fff;
  `}
`;

마무리는 이렇게 효과전과 효과후를 만들어 주면 끝!