22/08/03 [모각코] 5일차

오늘은 Like 페이지를 구현해봤습니다.

아직 서버가 만들어지지않아 data.json 을 임의로 설정해줍니다.

// data.json
{
  "beer_list": [
    {
      "id": "1",
      "image_url": "/img/example.png",
      "beer_name": "곰표밀맥주",
      "total_point": 4.5,
      "information": "좋은맥주입니다."
    },
    {
      "id": "2",
      "image_url": null,
      "beer_name": "필스너우르켈",
      "total_point": 4.0,
      "information": "너무 맛있는 맥주입니다."
    },
    {
      "id": "3",
      "image_url": null,
      "beer_name": "필스너우르켈dsdd",
      "total_point": 5.0,
      "information": "너무 맛있는 맥주입니다.dfsdf"
    },{
        "id": "4",
      "image_url": null,
      "beer_name": "안녕하세요",
      "total_point": 3.0,
      "information": "좋아요 좋아요"
    
    },
    {        "id": "5",
    "image_url": "/img/example.png",
    "beer_name": "안녕하세요",
    "total_point": 1.0,
    "information": "별로별로"
    },
    {        "id": "6",
    "image_url": "/img/example.png",
    "beer_name": "안녕하세요",
    "total_point": 3.0,
    "information": "별로별ㅇㅇㅇㅇ로"
    },
    {        "id": "7",
    "image_url": "/img/example.png",
    "beer_name": "안녕하세요",
    "total_point": 2.0,
    "information": "별로별ㅃㅃㅃㅂ로"
    }
  ]
}

이후에 map 함수로 하위컴포넌트에게 props로 정보를 전달해 줍니다.

import React from "react";
import styles from "./likeBox.module.css";
import BeerBox from "../beerBox/beerBox";

const LikeBox = (props) => {
  return (
    <>
      <div className={styles.mainBox}>
        {props.data.beer_list.map((i) => (
          <BeerBox
            key={i.id}
            image={i.image_url}
            title={i.beer_name}
            description={i.information}
          />
        ))}
      </div>
    </>
  );
};

export default LikeBox;

 

이후 like 페이지를 보면 정상적으로 나오는 모습을 볼 수 있습니다.

아직 서버가 만들어지지않아서 json 파일로 대신했지만 나중에 서버가 만들어지면 axios로 data.json을 받아올 예정입니다.

아직 별점은 css가 만들어지지 않은 관계로 다음에 해보도록 하겠습니다.

 

앞으로 해야할 것

1. 회원가입 중복 text 구현

2. lazy loading (시간이 난다면)