리액트 기초(상품페이지)

import { useState } from "react";
import "./shop.css";
function App() {
  const [productList, setProductList] = useState([
    {
      productNo: 1,
      productName: "놀부모자",
      img: "/image/product1.jpeg",
      productPrice: 19900,
      star: 4,
      likes: 1,
    },
    {
      productNo: 2,
      productName: "해바라기모자",
      img: "/image/product2.jpeg",
      productPrice: 25600,
      star: 3,
      likes: 0,
    },
    {
      productNo: 3,
      productName: "파라오모자",
      img: "/image/product3.jpeg",
      productPrice: 23800,
      star: 5,
      likes: 1,
    },
    {
      productNo: 4,
      productName: "붕어빵모자",
      img: "/image/product4.jpeg",
      productPrice: 15600,
      star: 2,
      likes: 0,
    },
  ]);

  return (
    <div className="App">
      <div className="wrap">
        <div className="wrap">
          <div className="header">
            <div>모자팜</div>
          </div>
          <div className="content">
            <div className="title">
              <span class="material-icons">local_fire_department</span>
              <span class="material-icons">local_fire_department</span>
              <span>인기상품</span>
              <span class="material-icons">local_fire_department</span>
              <span class="material-icons">local_fire_department</span>
            </div>
            <div className="product-list">
              <div className="product">
                <div className="product-img">
                  <img src={productList[0].img}></img>
                </div>
                <div className="like">
                  <span
                    onClick={() => {
                      const changelike = item.likes === 0 ? 1 : 0;
                      const newlike = [...productList];
                      newlike[index].likes = changelike;
                      setProductList(newlike);
                    }}
                    {item.productList === "0" ? <span class="material-icons">
                    favorite_border
                    </span>: <span class="material-icons">
                    favorite
                    </span>}
                  ></span>
                </div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[0].productName}
                  </div>
                  <div className="product-price">
                    {productList[0].productPrice} 원
                  </div>
                  <div className="star-rate">
                    <ul>
                      {productList.map((item, index) => {
                        for (let i = 0; i < item.star; i++) {
                          return (
                            <span
                              key={"productList" + index}
                              class="material-icons"
                            >
                              star
                            </span>
                          );
                        }
                      })}
                    </ul>
                  </div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[1].img}></img>
                </div>
                <div className="like">{productList[0].likes}</div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[1].productName}
                  </div>
                  <div className="product-price">
                    {productList[1].productPrice} 원
                  </div>
                  <div className="star-rate">
                    <ul>
                      {productList.map((item, index) => {
                        for (let i = 0; i < item.star; i++) {
                          return (
                            <span
                              key={"productList" + index}
                              class="material-icons"
                            >
                              star
                            </span>
                          );
                        }
                      })}
                    </ul>
                  </div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[2].img}></img>
                </div>
                <div className="like">{productList[0].likes}</div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[2].productName}
                  </div>
                  <div className="product-price">
                    {productList[2].productPrice} 원
                  </div>
                  <div className="star-rate">
                    <ul>
                      {productList.map((item, index) => {
                        for (let i = 0; i < item.star; i++) {
                          return (
                            <span
                              key={"productList" + index}
                              class="material-icons"
                            >
                              star
                            </span>
                          );
                        }
                      })}
                    </ul>
                  </div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[3].img}></img>
                </div>
                <div className="like">{productList[0].likes}</div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[3].productName}
                  </div>
                  <div className="product-price">
                    {productList[3].productPrice} 원
                  </div>
                  <div className="star-rate">
                    <ul>
                      {productList.map((item, index) => {
                        for (let i = 0; i < item.star; i++) {
                          return (
                            <span
                              key={"productList" + index}
                              class="material-icons"
                            >
                              star
                            </span>
                          );
                        }
                      })}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="footer">
            <div>여기는 footer</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

import { useState } from "react";
import "./shop.css";
function App() {
  const [productList, setProductList] = useState([
    {
      productNo: 1,
      productName: "놀부모자",
      img: "/image/product1.jpeg",
      productPrice: 19900,
      star: 4,
      likes: 1,
    },
    {
      productNo: 2,
      productName: "해바라기모자",
      img: "/image/product2.jpeg",
      productPrice: 25600,
      star: 3,
      likes: 0,
    },
    {
      productNo: 3,
      productName: "파라오모자",
      img: "/image/product3.jpeg",
      productPrice: 23800,
      star: 5,
      likes: 1,
    },
    {
      productNo: 4,
      productName: "붕어빵모자",
      img: "/image/product4.jpeg",
      productPrice: 15600,
      star: 2,
      likes: 0,
    },
  ]);
  return (
    <div className="App">
{
<div className="wrap">
        <div className="wrap">
          <div className="header">
            <div>모자팜</div>
          </div>
          <div className="content">
            <div className="title">
              <span class="material-icons">local_fire_department</span>
              <span class="material-icons">local_fire_department</span>
              <span>인기상품</span>
              <span class="material-icons">local_fire_department</span>
              <span class="material-icons">local_fire_department</span>
            </div>
            <div className="product-list">
              <div className="product">
                <div className="product-img">
                  <img src={productList[0].img}></img>
                </div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[0].productName}
                  </div>
                  <div className="product-price">
                    {productList[0].productPrice} 원
                  </div>
                  <div className="star-rate">{productList[0].star}</div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[1].img}></img>
                </div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[1].productName}
                  </div>
                  <div className="product-price">
                    {productList[1].productPrice} 원
                  </div>
                  <div className="star-rate">{productList[1].star}</div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[2].img}></img>
                </div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[2].productName}
                  </div>
                  <div className="product-price">
                    {productList[2].productPrice} 원
                  </div>
                  <div className="star-rate">{productList[2].star}</div>
                </div>
              </div>
              <div className="product">
                <div className="product-img">
                  <img src={productList[3].img}></img>
                </div>
                <div className="product-info">
                  <div className="product-title">
                    {productList[3].productName}
                  </div>
                  <div className="product-price">
                    {productList[3].productPrice} 원
                  </div>
                  <div className="star-rate">{productList[3].star}</div>
                </div>
              </div>
            </div>
          </div>
          <div className="footer">
            <div>여기는 footer</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* footer 하단 고정을 위한 css */
}
.wrap > div {
  width: 100%;
  box-sizing: border-box;
}
.header {
  background: #c21500; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ffc500,
    #c21500
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffc500,
    #c21500
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 25px;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
}
.footer {
  background-color: #eee;
  padding: 30px;
}
.footer > div {
  width: 1200px;
  margin: 0 auto;
}

.content {
  flex: 1;
  padding: 50px;
  /* footer 하단 고정을 위한 css */
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0px;
  /* 상하패딩:50px 좌우패딩0px*/
}
.title > span {
  font-size: 1.5em;
}
.title > span.material-icons {
  color: #ff6a00;
}
.title > span:not(.material-icons) {
  font-weight: bold;
}
.product-list {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 5px;
}
.product {
  padding: 20px;
  float: left;
  box-sizing: border-box;
  width: calc(100% / 4);
  cursor: pointer;
}
.product:hover {
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
}
.product-img > img {
  width: 100%;
}
.product-info > div {
  padding: 10px;
}
.product-title {
  font-weight: bold;
  font-size: 24px;
}
.product-price {
  font-weight: bold;
  font-size: 20px;
  color: #ee0979;
}