6. 기본 UI 만들기(6) - [ Redux-toolkit, Typescript, CSS ] ,자동으로 정렬되는 Food Card 만들기

1. FoodCard 작성

import styles from "./food-previewcard.module.css";

const FoodPreview: React.FC<{    		// 받아올 값들, 타입 지정
  id: number;
  img: string;
  category: string;
  title: string;
  majorNutri: string;
  nutri: string;
  price: number;
}> = (props) => {
  const { id, img, category, title, majorNutri, nutri, price } = props;		// 받아올 값들

  return (
    <div className={styles.main_div}>
      <section className={styles.img_section}>
        <img src={img} />		 		// 이미지
        <div className={styles.img_section_category}> {category}</div>		// 카테고리
      </section>
      <section className={styles.info_section}>
        <div className={styles.info_section_title}>
          <p> {title}</p>				// 타이틀
        </div>
        <div className={styles.info_section_info_detail}>
          <div className={styles.info_section_info_detail_category}>
            {majorNutri} +				// 메이저뉴트리
          </div>
          <div className={styles.info_section_info_detail_nutri_price}>
            <p> {nutri}</p>
            <p> {price}원</p>			// 가격
          </div>
        </div>
      </section>
    </div>
  );
};

export default FoodPreview;

 

 

2. ListData 넘기기 ( 추후 데이터베이스 이용하여 가져올 것)

< components / 4.find-foods / 1.Foods-List.tsx >

    import FoodPreview from "../UI/foodsCard/food-previewcard";
    import { useState } from "react";

    interface FoodType {        // 넘겨줄 FoodType 지정
        id: number;
        img:string;
        category: string;
        title: string;
        majorNutri: string;
        nutri: string;
        price: number;
    }

    const FoodsList = () => {        // 추후 FireBase DB 에서 fetch 해서 가져오도록 하자. 일단 샘플 데이터 두개
                                    // 또한, 자동 Grid 를 통해, 자동 Grid 조정을 하게 만든다. (블로그참조)

    const [foodsData, setFoodsData] = useState<FoodType[]>([        // "타입 지정 후" 일단 더미데이터 두개만 집어넣었다.
        {
            id: 1,
            category: "다이어트",
            img:"/4.foods/claudio-schwarz-4qJlXK4mYzU-unsplash.jpg",
            title: "최고의 단백질 보충제 닭가슴살",
            majorNutri: "단백질+",
            nutri: "Protein 22g",
            price: 1000,
        },
        {
            id: 2,
            category: "벌크업",
            img:"/4.foods/claudio-schwarz-4qJlXK4mYzU-unsplash.jpg",
            title: "최고의 지방 보충제 아보카도",
            majorNutri: "지방+",
            nutri: "Fat 15g",
            price: 2000,
        },
        ]);

        return (
            <div>
                {foodsData.map((food) => (          // Array.map() 을 통해, 모든 데이터를 한번에 넘기도록 한다.
                    <FoodPreview
                        key={food.id}
                        id={food.id}
                        img={food.img}
                        category={food.category}
                        title={food.title}
                        majorNutri={food.majorNutri}
                        nutri={food.nutri}
                        price={food.price}
                    />
                ))}
            </div>
        );
    };
    export default FoodsList;

 

3) 자동 Grid CSS

.main_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
}

 

추가적인 DIV 위치 조절시 calc 를 이용

.select_category {
    margin-left: calc(100% - 27rem);

* 그냥 65% 따위로 하면, div 의 width 때문에, 줄이면 넘어간다.