[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (5)

계획:
1. ShopPage.js 를 만들어서 모든 상품이 보이게 하기
2. 각각의 카테고리별 서브페이지 컴포넌트 만들어서
각 페이지 누를 때마다 그에 맞는 상품이 보이게 하기

+ 추가한 계획:
useParams 사용하기

상품데이터들 안엔 id : 0 과 같은 영구번호 추가해줘서

/:id 자리에 입력한 값과 영구번호가 같은 상품을 찾게끔 하기. 


계획을 추가한 이유: 
자료의 순서가 변경되면 상세페이지도 고장나는 문제가 생기기 때문.

---

참고한 글

리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 (tistory.com)

리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기

---

App.js 에 라우팅 해준 것

import { useState } from "react";
import "./style/main.scss";
import {
  Routes,
  Route,
  Link,
  useNavigate,
  Outlet,
  Navigate,
} from "react-router-dom";
import MainPage from "./pages/MainPage";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <Routes>
      <Route
        path="/"
        element={
          <MainPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
          />
        }
      />
      <Route path="/shop" element={<Navigate to="/shop/fingers" replace />} />
      <Route path="/shop/fingers" element={<div>Fingers Products</div>} />
      <Route path="/shop/hair" element={<div>Hair Products</div>} />
      <Route path="/shop/neck" element={<div>Neck Products</div>} />
    </Routes>
  );
}

export default App;

우선 Route 를 통해서 메인페이지 하나 만들어주고,

nested routes 사용해서 상품페이지  생성

<< 404 페이지는 나중에 추가해줄 예정 >>

---

서브페이지 코드
컴포넌트로 만들기

이런 서브페이지 코드를 갖고와줘야한다.

메인페이지 컴포넌트와 유사하니까 그대로 갖고와줌.

여기서 * 중앙 메인 콘텐츠 * 부분을 채워줘야 한다.

함수 이름을 바꿔줌.

MainPage => FingerPage

따로 컴포넌트는 만들어주지 않고, 저 부분을 채워줄 코드를 만들어줘야 함.

---

Pages 코드 짜기

이렇게 하단에 코드를 짜서 9개씩 보여줄 생각.

만드는 방법 참고

[CSS] 페이지 제작하기 (tistory.com)

[CSS] 페이지 제작하기

---

Pages 컴포넌트 생성하기

  <!-- 페이지 수 넣어주기 -->
          <div class="pages">
            <a href="#"><i class="fas fa-angle-left"></i> </a>
            <ol>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
            </ol>
            <a href="#"> <i class="fas fa-angle-right"></i></a>
          </div>

기존 자바스크립트 코드로 짜줬던 html 코드를 리액트로 옮겨줘야 함.

참고하기

[리액트] Font Awesome 라이브러리 사용하기 (tistory.com)

[리액트] Font Awesome 라이브러리 사용하기

이렇게 바꿔줌.

FingerPage.js 코드로 들어가서

import Header from "../components/Header";
import LeftSidebar from "../components/LeftSidebar";
import RightSidebar from "../components/RightSidebar";
import SearchOverlay from "../components/SearchOverlay";
import Pages from "../components/Pages";
import Footer from "../components/Footer";
import { Link } from "react-router-dom";

function FingerPage(props) {
  return (
    <div className="wrapper">
      {/* 검색창 */}
      {props.Search === true ? (
        <SearchOverlay setSearch={props.setSearch} />
      ) : null}

      {/* 헤더 */}
      <Header />

      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={props.setSearch}
          setIsShopHovered={props.setIsShopHovered}
          isShopHovered={props.isShopHovered}
          setIsBoardHovered={props.setIsBoardHovered}
          isBoardHovered={props.isBoardHovered}
        />

        {/* 중앙 메인 콘텐츠 */}
        <main>
          <div className="image-container">
            <Link to="/">
              <img
                src="https://kku-git.github.io/nff_product/logo.svg"
                alt="로고"
                className="logo-image"
              />
            </Link>
          </div>
          <div className="image-container">
            <img
              src="https://kku-git.github.io/nff_product/nff_bg.svg"
              alt="배경"
              className="bg-image"
            />
          </div>{" "}
          {/* pages */}
          <Pages />
          {/* Footer */}
          <Footer />
        </main>

        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default FingerPage;

페이지 컴포넌트로 돌아가서 

코드를 옮겨주고 Pages 컴포넌트도 넣어줌. 

App.js 에서 라우트 수정 ( props 추가 )

import { useState } from "react";
import "./style/main.scss";
import {
  Routes,
  Route,
  Link,
  useNavigate,
  Outlet,
  Navigate,
} from "react-router-dom";
import MainPage from "./pages/MainPage";
import FingerPage from "./pages/FingerPage";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <Routes>
      <Route
        path="/"
        element={
          <MainPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
          />
        }
      />
      <Route path="/shop" element={<Navigate to="/shop/fingers" replace />} />
      <Route
        path="/shop/fingers"
        element={
          <FingerPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
          />
        }
      />
      <Route path="/shop/hair" element={<div>Hair Products</div>} />
      <Route path="/shop/neck" element={<div>Neck Products</div>} />
    </Routes>
  );
}

export default App;