Drop Down 구현

• CountSelection.jsx

import React from "react";
import styled from "styled-components";

const DropdownContainer = styled.div`
    border-radius: 4px;
    background-color: white;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 6px, rgb(0 0 0 / 7%) 0px 0px 0px 1px;
    padding: 16px;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 2;
    top: 64px;
`;

const SelectionBox = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
`;

const SelectionText = styled.div`
    flex-grow: 2;
`;

const MinusButton = styled.button`
    display: inline-flex;
    border: 1px solid ${(props) => props.theme.lightGrey};
    border-radius: 50%;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    color: ${(props) => props.theme.lightBlack};
`;

const PlusButton = styled(MinusButton)``;

const CountNumber = styled.div``;

export default function CountSelection({
    adultCount,
    addAdultCount,
    removeAdultCount,
    addChildrenCount,
    childrenCount,
    removeChildrenCount,
}) {
    return (
        <DropdownContainer>
            <SelectionBox>
                <SelectionText>성인</SelectionText>
                <MinusButton onClick={removeAdultCount}>-</MinusButton>
                <CountNumber>{adultCount}</CountNumber>
                <PlusButton onClick={addAdultCount}>+</PlusButton>
            </SelectionBox>
            <SelectionBox>
                <SelectionText>아동</SelectionText>
                <MinusButton onClick={removeChildrenCount}>-</MinusButton>
                <CountNumber>{childrenCount}</CountNumber>
                <PlusButton onClick={addChildrenCount}>+</PlusButton>
            </SelectionBox>
        </DropdownContainer>
    );
}

• DetailedProduct.jsx

export default function DetailedProduct() {

    const [ModalOpen, setModalOpen] = useState(false);
    const onSelectModal = () => {
        setModalOpen(!ModalOpen);
    };

		const [adultCount, setAdultCount] = useState(0);
    const [childrenCount, setChildrenCount] = useState(0);

    const addAdultCount = () => {
        adultCount >= 0 && setAdultCount(adultCount + 1);
    };

    const removeAdultCount = () => {
        adultCount && setAdultCount(adultCount - 1);
    };

    const addChildrenCount = () => {
        childrenCount >= 0 && setChildrenCount(childrenCount + 1);
    };

    const removeChildrenCount = () => {
        childrenCount && setChildrenCount(childrenCount - 1);
    };

	return (
		<PersonSelection>
            <FixedText onClick={onSelectModal}>
            	인원 선택
                   <DependentText>
                   {" "}
                   성인 {adultCount}, 아동 {childrenCount}
                   </DependentText>
                   {ModalOpen ? ( //Modal창이 열렸으면?
                      <DropdownMark>
                          <IoIosArrowUp />
                      </DropdownMark>
                      ) : ( //닫혔으면?
                      <DropdownMark>
                          <IoIosArrowDown />
                       </DropdownMark>
                    )}
             </FixedText>
             {ModalOpen ? ( //Modal창이 열렸으면?
                 <CountSelection 
                   onToggle={onSelectModal}
                   adultCount={adultCount}
                   removeAdultCount={removeAdultCount}
                   addAdultCount={addAdultCount}
                   childrenCount={childrenCount}
                   addChildrenCount={addChildrenCount}
                   removeChildrenCount={removeChildrenCount}
                  />
                 ) : null} //닫혔으면? 안보이게 해
      </PersonSelection>
	)