TIL 02.08 - 최종 프로젝트 1주차

카테고리 만들기

const menulist = [
    {
        id: 1,
        title: "아이스아메리카노",
        name: "americano",
        price: "3,200원",
    },
    {
        id: 2,
        title: "핫아메리카노",
        name: "americano",
        price: "3,500원",
    },
    {
        id: 3,
        title: "아이스초코",
        name: "choco",
        price: "3,000원",
    },
    {
        id: 4,
        title: "핫초코",
        name: "choco",
        price: "4,000원",
    },
    {
        id: 5,
        title: "카모마일",
        name: "tea",
        price: "3,900원",
    }
]

export { menulist }

import { useState } from "react";
import { menulist } from "../api/menu";
import Coffeelist from "./Coffeelist";
import Menulist from "./Menulist";


const Starbucks = () => {
    const [data, setData] = useState(menulist);
    const [menu, setMenu] = useState([
        {name: "all"},
        {name: "americano"},
        {name: "choco"},
        {name: "tea"}
    ])

    const onMenu = (name) => {
        if (name === "all") {
            setData(menulist)
        } else {
            setData(menulist.filter(item => item.name === name))
        }
    };

    return (
        <div>
            <h1>스타벅스 메뉴</h1>
            <Menulist menu={menu} onMenu={onMenu} />
            <Coffeelist data={data} />
        </div>
    );
};

export default Starbucks;

 

menulist.filter(item => item.name === name)

 

클릭 시 menulist의 있는 name과 menu에 있는 name이 같은 부분만 보여준다.

 

 

****

디자이너님의 개인일정으로 UI작업을 아직 시작하지 못 하였다. 우선 구현할 기능을 테스트 해보는 시간을 가졌다.