React로 상세페이지 만들기 (1) - 상세이미지 보여주기

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고

* react -> node.js로 이미지 및 정보 저장하기

* mongoDB에 저장하는 것까지 확인

 

 

 

[1. 상세정보를 담을 페이지 작성(ShowDetailData.js)]

 

[Client]

ShowDetailData.js

 

import React, { useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

function ShowDetailData() {
  const { dataId } = useParams();

  useEffect(() => {
    axios.get(`/api/data/data_id?id=${dataId}&type=single`).then((response) => {
      if (response.data.success) {
        console.log(response.data);
      } else {
        alert("상세 정보 가져오기를 실패했습니다.");
      }
    });
  }, []);

  return <div>ShowDetailData</div>;
}

export default ShowDetailData;

 

 

[Client]

ShowDetailData.js를 연결할 App.js

 

import { BrowserRouter, Routes, Route } from "react-router-dom";

import DataUpload from "./components/views/Review/DataUpload";
import ShowAllData from "./components/views/Review/ShowAllData";
import ShowDetailData from "./components/views/Review/ShowDetailData";

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        {/* 복습 */}
        <Route path="/review/data" element={Auth(DataUpload, true)} />
        <Route path="/review" element={Auth(ShowAllData, null)} />
        <Route
          path="/reveiw/data/:dataId"
          element={Auth(ShowDetailData, null)}
        />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

 

 

[Client]

ShowAllData.js -> ShowDetailData.js로 가기 위한 링크 생성(ShowAllData.js)

 

 const renderCard = Datas.map((data, index) => {
    return (
      <div style={{ display: "Grid", placeItems: "center" }}>
        <Col lg={4} md={6} xs={16} key={index}>
          <Card
            style={{
              width: "350px",
              height: "20%",
              position: "relative",
              right: "50%",
            }}
           //추가
            cover={
              <a href={`/reveiw/data/${data._id}`}>
                <ImageSlider images={data.images} />
              </a>
            }
          >
            <Meta title={data.title} description={`$${data.price}`}></Meta>
          </Card>
        </Col>
      </div>
    );
  });

 

 

[Server]

data.js

 

// axios.get(`api/data/dataId?id`)
router.get("/data_id", (req, res) => {
  let type = req.query.type;
  let dataId = req.query.id;

  Data.find({ _id: dataId })
    .populate("title")
    .exec((err, data) => {
      if (err) return res.status(400).send(err);
      return res.status(200).send({ success: true, data });
    });
});

 

 

* 결과

 

 

 

[2. ShowDetailData.js에 이미지슬라이더 역할 넣기(DataImages.js)]

 

* 사전 작업 : npm install react-image-gallery 설치

 

*  react-image-gallery 예시

* 출처 : https://www.npmjs.com/package/react-image-gallery

 

[Client]

ShowDetailData.js

 

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

import DataImages from "./Sections/DataImages"; //추가
import { Row, Col } from "antd";

function ShowDetailData() {
  const { dataId } = useParams();

  //콘솔에서 확인한 정보 넣기
  const [Data, setData] = useState({});

  useEffect(() => {
    axios.get(`/api/data/data_id?id=${dataId}&type=single`).then((response) => {
      if (response.data.success) {
        console.log(response.data);
        setData(response.data.data[0]);
      } else {
        alert("상세 정보 가져오기를 실패했습니다.");
      }
    });
  }, []);

  return (
    <div>
      <div style={{ width: "100%", padding: "3rem 4rem" }}>
        <br />
        <div stye={{ display: "flex", justifyContent: "center" }}>
          <h1>{Data.title}</h1>
        </div>
        <br />
        <Row gutter={[16, 16]}>
          <Col lg={12} sm={24}>
            {/* DataImages */}
            <DataImages detailData={Data} /> //추가
          </Col>

          <Col lg={12} sm={24}>
            {/* DataInfo */}
          </Col>
        </Row>
      </div>
    </div>
  );
}

export default ShowDetailData;

 

 

 

[Client]

DataImages.js

 

import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery";

function DataImages(props) {
  //detailData 통해 데이터 전달

  const [Images, setImages] = useState([]);

  useEffect(() => {
    //이미지가 존재하고 이미지의 길이가 0보다 크면
    if (props.detailData.images && props.detailData.images.length > 0) {
      let images = [];
      props.detailData.images.map((item) => {
        images.push({
          original: `http://localhost:5000/${item}`,
          thumbnail: `http://localhost:5000/${item}`,
        });
      });
      setImages(images);
    }
  }, [props.detailData]);

  return (
    <div>
      <ImageGallery items={Images} />
    </div>
  );
}

export default DataImages;

 

 

* 결과