7. 기본 UI 만들기(7) - [ 버튼 누르면, 양옆으로 하이라이트가 부드럽게 움직이는 셀렉터, 만들기]

컴포넌트

const FoodsList = () => {

    const [selected, setSelected] = useState<string>("탄수화물");
    const [foodsData, setFoodsData] = useState<FoodType[]>([
    {
        id: 1,
                ...
        price: 1000,
    },
    {
        id: 2,
                ...
    }
    ]);

    let selected_style = styles.selected_hydro;     // 초기 하이라이트 백그라운드 조건
    let text_highlight_hydro = "";                  // 초기 텍스트 조건
    let text_highlight_protein = "";                // 초기 텍스트 조건
    let text_highlight_fat = "";                    // 초기 텍스트 조건

    if (selected === "탄수화물") {
        selected_style = styles.selected_hydro;                 // 선택시 클래스 변경 (하나의 div 좌우로 움직임)
        text_highlight_hydro = styles.selected_text_hydro;      // 선택시 해당 클래스 이름 생성 ( 각각이 선택되면 각각에서 따로 켜짐 )
    }
    if (selected === "단백질") {
        selected_style = styles.selected_protein;
        text_highlight_protein = styles.selected_text_protein;
    }
    if (selected === "지방") {
        selected_style = styles.selected_fat;
        text_highlight_fat = styles.selected_text_fat;
    }
    return (
        <div className={styles.main_div}>
            <ul className={styles.select_category}>

                <div className={selected_style}></div>                  // 움직이는 백그라운드 div 

                <li onClick={() => setSelected("탄수화물")}>
                    <p className={text_highlight_hydro}>탄수화물</p>    // 선택되면 적절한 className 이 켜진다.
                </li>
                <li onClick={() => setSelected("단백질")}>
                    <p className={text_highlight_protein}>단백질</p>
                </li>
                <li onClick={() => setSelected("지방")}>
                    <p className={text_highlight_fat}>지방</p>
                </li>
            </ul>

CSS

/* 하이라이트 Div 조건1 - 탄수화물  */
    .selected_hydro {
        position: absolute;
        width: 8rem;
        height: 2.5rem;
        z-index: 1;
        background-color: white;
        margin-right: 18rem;
        border-radius: 5px;
        transition: all 400ms ease-out;
        box-shadow: 1px 1px 4px black;
    }

/* 하이라이트 Text 조건1 - 탄수화물  */
    .selected_text_hydro {
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 600ms ease-out;
    }

/* 하이라이트 Div 조건2 - 단백질  */
    .selected_protein {
        position: absolute;
        width: 8rem;
        height: 2.5rem;
        z-index: 1;
        background-color: white;
        border-radius: 5px;
        transition: all 400ms ease-out;
        box-shadow: 1px 1px 4px black;
    }

/* 하이라이트 Text 조건2 - 단백질  */
    .selected_text_protein {
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 600ms ease-out;
    }

/* 하이라이트 Div 조건3 - 지방  */
    .selected_fat {
        position: absolute;
        width: 8rem;
        height: 2.5rem;
        z-index: 1;
        background-color: white;
        margin-left: 18rem;
        border-radius: 5px;
        transition: all 400ms ease-out;
        box-shadow: 1px 1px 4px black;
    }

/* 하이라이트 Text 조건3 - 지방  */
    .selected_text_fat {
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 600ms ease-out;
    }