react - toy

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CardList from "./CardList";
import CardDetail from "./CardDetail";
import Main from "./Main"
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Main />} />
        {/* <Route path="/" element={<CardList />} /> */}
        <Route path="/card/:id" element={<CardDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

// Main.js
import React from "react";
import { Link } from "react-router-dom";
import cardsData from "./data";

function Main() {
  return (
    <div>
      <h1>Welcome to the Card App!</h1>
      <div className="card-container">
        {cardsData.map((card) => (
          <Link to={`/card/${card.id}`} key={card.id}>
            <div className="card">
              <img   style={{ width: "200px", height: "auto" }} src={card.imageUrl} alt={card.name} />
              <h2>{card.name}</h2>
              <p>Price: {card.price}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default Main;

// Card.js
import React from "react";
import "./Card.css"

function Card({ cardData }) {
  return (
    <div className="card">
      <img className="card-image" src={cardData.imageUrl} alt={cardData.name} />
      <h2>{cardData.name}</h2>
      <p>Price: {cardData.price}</p>
    </div>
  );
}

export default Card;

import React from "react";
import { useParams } from "react-router-dom";
import cardsData from "./data"; // 카드 데이터 가져오기

function CardDetail() {
  const { id } = useParams(); // URL 파라미터에서 id 추출

  // id를 사용하여 해당 카드 데이터 찾기
  const cardDataItem = cardsData.find((card) => card.id === parseInt(id));

  // 만약 카드 데이터를 찾을 수 없다면 오류 메시지 표시
  if (!cardDataItem) {
    return <div>Card not found</div>;
  }

  return (
    <div className="card-detail">
      <img src={cardDataItem.imageUrl} alt={cardDataItem.name} />
      <h2>{cardDataItem.name}</h2>
      <p>Price: {cardDataItem.price}</p>
      <h3>This Is Detail Page</h3>
    </div>
  );
}

export default CardDetail;