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

FingerPage.js 수정하기

- 안에 콘텐트 내용 오른쪽 사진과 같이 수정해야 한다.

< 목표 >
1) 안에 콘텐트 내용들을 컴포넌트로 빼기.
2) FingerPage.js 에 끼워넣기
3) 페이지 함수 만들기 ( 화살표 누르면 앞으로 가기 뒤로 가기 ) - 나중으로 미룸

---

js 파일에서 만들었던 html 코드를 리액트로 옮겨주기

js 파일에서 만든 코드

  <div class="item-container">
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_1.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_2.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_3.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_4.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_5.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_6.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_7.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_8.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_9.jpg" />
            </div>
          </div>

이 코드를 리액트로 옮겨주기

---

Items.js 파일 생성해서 컴포넌트 만들어주기

function ItemContainer() {
  return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_1.jpg" alt="ring 1" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_2.jpg" alt="ring 2" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_3.jpg" alt="ring 3" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_4.jpg" alt="ring 4" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_5.jpg" alt="ring 5" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_6.jpg" alt="ring 6" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_7.jpg" alt="ring 7" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_8.jpg" alt="ring 8" />
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="img/ring_9.jpg" alt="ring 9" />
      </div>
    </div>
  );
}

export default ItemContainer;

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";
import ItemContainer from "../components/Items";

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>
          {/* items */}
          <ItemContainer />
          {/* pages */}
          <Pages />
          {/* Footer */}
          <Footer />
        </main>

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

export default FingerPage;

import 필수

잘 뜨는거 확인

근데 이미지의 경로가 달라서 안뜨는 중

---

리액트에서의 이미지 경로 확인하기

현재 이미지가 여기에 저장돼있음

- src폴더 - img폴더

 

---

 

리액트 프로젝트에서 이미지를 사용할 때 public 폴더와 src 폴더에서의 이미지 경로 지정 방식이 다릅니다.

 

이미지 파일 위치에 따른 경로 지정 방법:

1. 이미지를 public 폴더에 저장한 경우:
   • public 폴더 안에 있는 파일은 프로젝트의 루트 경로를 기준으로 접근할 수 있습니다.
   • 예를 들어, public/img/ring_1.jpg에 이미지가 있다면, <img src="/img/ring_1.jpg" alt="ring 1" />로 작성해야 합니다.
2. 이미지를 src 폴더 안에 저장한 경우:
   • src 폴더 안의 파일은 JavaScript로 처리되어야 하므로 import 구문을 사용해야 합니다.

두 가지 방식의 사용 예:

1. 이미지를 public/img 폴더에 저장한 경우:

function ItemContainer() {
  return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="/img/ring_1.jpg" alt="ring 1" /> {/* public 폴더 경로 */}
      </div>
      {/* 나머지 이미지들도 동일하게 수정 */}
    </div>
  );
}

2. 이미지를 src/img 폴더에 저장한 경우 (import 방식):

import ring1 from './img/ring_1.jpg'; // src/img 폴더에서 이미지 불러오기
import ring2 from './img/ring_2.jpg'; // 예시로 다른 이미지도 불러옴

function ItemContainer() {
  return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src={ring1} alt="ring 1" /> {/* import한 이미지 사용 */}
      </div>
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src={ring2} alt="ring 2" />
      </div>
      {/* 나머지 이미지들도 같은 방식으로 처리 */}
    </div>
  );
}

정리:

• public 폴더에 저장: 경로를 /img/ring_1.jpg처럼 절대 경로로 사용.
• src 폴더에 저장: import를 사용하여 이미지를 모듈처럼 불러와 사용.

이미지가 src/img에 있다면 import 방식으로 해결하시면 됩니다!

---

img 폴더를 public 폴더에 옮겨주기로 결정

- 일일이 import 하기 귀찮음

옮겨주고 필요없는 svg 폴더는 지워줌.

 

public 폴더로 옮기면 따로 상단에 import 는 필요없음.

---

페이지 함수 만들기
- 화살표에 기능 넣기

이전에 만들었던 페이지 컴포넌트 갖고오기

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

function Pages() {
  return (
    <div className="pages">
      {" "}
      {/* class -> className */}
      <a href="#">
        <FontAwesomeIcon icon={faAngleLeft} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
      <ol>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
      </ol>
      <a href="#">
        <FontAwesomeIcon icon={faAngleRight} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
    </div>
  );
}

export default Pages;

---

나중으로 미룸. 

- 우선 데이터 개수만큼 컴포넌트 생성하게끔 map 함수 만들어줄 예정.