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

전에 쓴 글과 연결

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

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

---

컴포넌트 구조화 수정

src/
│
├── components/
│   ├── Header.js
│   ├── SearchOverlay.js
│   ├── MainContent.js
│   ├── Footer.js
│   ├── LeftSidebar.js
│   └── RightSidebar.js
│
├── App.js
└── index.js

- Sidebar 을 분리해줬다.

( Right / Left )

따로 파일 추가하고 분리시킴.

---

우측 사이드 바 컴포넌트

function RightSidebar() {
  return (
    <aside className="sidebar">
      <ul className="category">
        <li>
          <a href="#">LOGIN</a>
        </li>
        <li>
          <a href="#">CART</a>
        </li>
        <li>
          <a href="#">ORDER</a>
        </li>
        <li>
          <a href="#">MY PAGE</a>
        </li>
      </ul>
    </aside>
  );
}

export default RightSidebar;

- props 를 할 필요가 없어서 그냥 컴포넌트만 만들어줌.

우측 sidebar 가 있었던 위치에 컴포넌트 꽂아주기.

---

Footer 컴포넌트 

function Footer() {
  return (
    <footer>
      <p>JY CEO.kwon jae yeon</p>
      <p>Business License.</p>
      <p>[777-23-01151] On-Line Register.</p>
      <p>2022-서울 용산-1407[사업자정보확인]</p>
      <p>04316 46-10,</p>
      <p>Wonhyo-ro 1-ga, Yongsan-gu, Seoul 6 Floor</p>
      <p>kakaotalk ID : nff</p>
      <p>11AM-17PM</p>
      <p>jy.nff.official@gmail.com</p>
      <p>개인정보관리책임자 kwon jae yeon</p>
      <p>기업은행 025-136582-04-018 kwon jaeyeon</p>
    </footer>
  );
}

export default Footer;

- props 를 할 필요가 없음

---

MainContent 컴포넌트

import { Link } from "react-router-dom";
function MainContent() {
  return (
    <div className="mainContent">
      <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>
    </div>
  );
}

export default MainContent;

이미지 2개만 달랑 있어서

div 태그로 묶어줬다.

 

그리고 Link 태그를 써줬기 때문에 꼭 import 해줘야 함.

SCSS

    .mainContent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

div 태그로 이미지를 묶어줬기 때문에, 클래스 추가해주고 중앙에 올 수 있도록 스타일링 수정해줌.

---

SearchOverlay 컴포넌트

 

Search 부분 확인하기 

 {/* <!-- 검색창 만들기 --> */}
      {Search == true ? (
        <div className="search-container">
          <div
            className="search-overlay"
            onClick={function () {
              setSearch(false);
            }}
          ></div>
          {/* <!-- 검색창 --> */}
          <div className="search">
            <input
              type="text"
              className="search-box"
              placeholder="Press Enter to Search"
            />
          </div>
        </div>
      ) : null}

true 일 때 나타나는 html 부분을 컴포넌트로 갖고온다.

function SearchOverlay() {
  return (
    <div className="search-container">
      <div
        className="search-overlay"
        onClick={function () {
          setSearch(false);
        }}
      ></div>
      {/* <!-- 검색창 --> */}
      <div className="search">
        <input
          type="text"
          className="search-box"
          placeholder="Press Enter to Search"
        />
      </div>
    </div>
  );
}

export default SearchOverlay;

갖고와주고 props 를 넣어줘야한다.

props 추가하기

function SearchOverlay(props) {
  return (
    <div className="search-container">
      <div
        className="search-overlay"
        onClick={function () {
          props.setSearch(false);
        }}
      ></div>
      {/* <!-- 검색창 --> */}
      <div className="search">
        <input
          type="text"
          className="search-box"
          placeholder="Press Enter to Search"
        />
      </div>
    </div>
  );
}

export default SearchOverlay;

App.js 에 있는 setSearch 스테이트를 쓸 거니까 props 해줌.

App.js 로 돌아가서

      {Search == true ? <SearchOverlay setSearch={setSearch} /> : null}

이렇게 삼항연산자 자리에 컴퍼넌트도 넣어주고

props 할 스테이트도 옆에 적어준다.

1) 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
2) 자식컴포넌트 만드는 function 으로 가서  props 라는 파라미터 등록
3) { props.작명 }으로 적어서 사용

---

컴포넌트 넣어준 코드

import { useState } from "react";
import "./style/main.scss";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Header from "./components/Header";
import LeftSidebar from "./components/LeftSidebar";
import RightSidebar from "./components/RightSidebar";
import Footer from "./components/Footer";
import MainContent from "./components/MainContent";
import SearchOverlay from "./components/SearchOverlay";

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

  return (
    <div className="wrapper">
      <Routes>
        <Route path="/detail" element={<div>상세페이지임</div>} />
        <Route path="/about" element={<div>어바웃페이지임</div>} />
      </Routes>
      {/* <!-- 검색창 만들기 --> */}
      {Search == true ? <SearchOverlay setSearch={setSearch} /> : null}
      {/* 헤더 */}
      <Header />
      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={setSearch}
          setIsShopHovered={setIsShopHovered}
          isShopHovered={isShopHovered}
          setIsBoardHovered={setIsBoardHovered}
          isBoardHovered={isBoardHovered}
        />
        {/* 중앙 메인 콘텐트 */}
        <main>
          <MainContent />
          {/* Footer */}
          <Footer />
        </main>
        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default App;

---

MainContent 컴포넌트 수정

import { Link } from "react-router-dom";
import Footer from "./Footer";
function MainContent() {
  return (
    <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>{" "}
      {/* Footer */}
      <Footer />
    </main>
  );
}

export default MainContent;

그냥 따로 div 태그 새로 생성하지 말고,

footer 컴포넌트 import 하고 footer 을 넣어줬다.

    .mainContent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

새로 만든 이 CSS 코드도 그냥 삭제시켜줌.

---

최종 App.js

import { useState } from "react";
import "./style/main.scss";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Header from "./components/Header";
import LeftSidebar from "./components/LeftSidebar";
import RightSidebar from "./components/RightSidebar";
import Footer from "./components/Footer";
import MainContent from "./components/MainContent";
import SearchOverlay from "./components/SearchOverlay";

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

  return (
    <div className="wrapper">
      <Routes>
        <Route path="/detail" element={<div>상세페이지임</div>} />
        <Route path="/about" element={<div>어바웃페이지임</div>} />
      </Routes>
      {/* <!-- 검색창 만들기 --> */}
      {Search == true ? <SearchOverlay setSearch={setSearch} /> : null}
      {/* 헤더 */}
      <Header />
      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={setSearch}
          setIsShopHovered={setIsShopHovered}
          isShopHovered={isShopHovered}
          setIsBoardHovered={setIsBoardHovered}
          isBoardHovered={isBoardHovered}
        />
        {/* 중앙 메인 콘텐트 */}
        <MainContent />
        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default App;