[myCart] 상품페이지 생성 (사이드 바/ 상품 목록)

 

ProductsPage.jsx

import "./ProductsPage.css";

const ProductsPage = () => {

  return (

    <section className="products_page">

      {/* 왼쪽 카테고리 */}

      {/* 상품목록 */}

    </section>

  );

};

export default ProductsPage;

 

 

ProductsPage.css

.products_page {

  display: grid;

  grid-template-columns: 1fr 4fr;

  padding: 20px;

}

  grid-template-columns:   1:4

 

상품페이지의 공간을 분리해준다. 

 

 

App.jsx에 홈페이지 말고 ProductsPage 보이게 한다.

import "./App.css";

import HomePage from "./components/Home/HomePage";

import Navbar from "./components/Navbar/Navbar";

import ProductsPage from "./components/Products/ProductsPage";

function App() {

  return (

    <div className="app">

      <nav>

        <Navbar />

      </nav>

      <main>

        {/* <HomePage /> */}

        <ProductsPage />

      </main>

    </div>

  );

}

export default App;

 

 

상품페이지의 왼쪽 카테고리에 해당하는 ProductsSidebar.jsx 를 생성한다. 

ProductsSidebar.jsx

import "./ProductsSidebar.css";

import rocket from "../../assets/rocket.png";

import LinkWithIcon from "../Navbar/LinkWithIcon";

const ProductsSidebar = () => {

  return (

    <aside className="products_sidebar">

      <h2>카테고리</h2>

      <div className="category_links">

        <LinkWithIcon

          title="전자제품"

          link="products?category=electronics"

          emoji={rocket}

          sidebar={true}

        />

      </div>

    </aside>

  );

};

export default ProductsSidebar;

 

ProductsSidebar.css

.products_sidebar {

  padding: 10px 20px;

  border-radius: 5px;

  background-color: #fff;

}

.products_sidebar h2 {

  font-size: 26px;

  margin-bottom: 10px;

}

 

 

 

ProductsList.jsx

import ProductCard from "./ProductCard";

import "./ProductsList.css";

const ProductsList = () => {

  return (

    <section className="products_list_section">

      <header className="align_center products_list_header">

        <h2>상품목록</h2>

        <select name="sort" id="" className="products_sorting">

          <option value="">정렬방법</option>

          <option value="price desc">가격높은순</option>

          <option value="price asc">가격낮은순</option>

          <option value="rate desc">평점높은순</option>

          <option value="rate asc">평점낮은순</option>

        </select>

      </header>

      <div className="products_list">

        <ProductCard />

        <ProductCard />

        <ProductCard />

        <ProductCard />

        <ProductCard />

        <ProductCard />

        <ProductCard />

        <ProductCard />

      </div>

    </section>

  );

};

export default ProductsList;

 

ProductsList.cs

.products_list_section {

  padding: 10px;

  padding-left: 30px;

}

.products_list_header {

  justify-content: space-between;

}

.products_list_header h2 {

  font-size: 26px;

}

.products_sorting {

  font-size: 18px;

  font-weight: 500;

  font-family: inherit;

  height: 35px;

  padding: 0 5px;

  border: none;

  outline: none;

  border-radius: 5px;

}

.products_list {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

}

 

 

ProductsPage.jsx 에 만들어놓은 사이드바랑 상품 리스트를 추가한다. 

import ProductsList from "./ProductsList";

import "./ProductsPage.css";

import ProductsSidebar from "./ProductsSidebar";

const ProductsPage = () => {

  return (

    <section className="products_page">

      <ProductsSidebar />

      <ProductsList />

    </section>

  );

};

export default ProductsPage;