질문있습니다. 선생님, 쇼핑몰만들기에서

[방종훈]

상품명, 상품내용, 상품가격등은 바인딩이 잘되어지는대요. 이미지는 변경이 안되네요.
 메인화면하단의 3개상품이미지 클릭시  이미지도 바인딩될수있는 방법 없을까요?

<detail.js>
function Detail(props){
    let {id} =useParams();
    let [num,setNum] = useState(0);
    return(
        <div className="container">
        <div className="row">
            <div className="col-md-6">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg">
           
            </div>
            <div className="col-md-6">
            <h4 className="pt-5">{props.shoes[id].title}</h4>
            <p>{props.shoes[id].content}</p>
            <p>{props.shoes[id].price}</p>
            <button className="btn btn-danger">주문하기</button>
            </div>
        </div>
        </div>
    )
}

app.js

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {Navbar,Container,Nav} from 'react-bootstrap'
import { useState } from 'react';
import Data from './data'
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'
import Detail from './Detail'
import { useParams } from "react-router-dom";

function App() {
  let [shoes] = useState(Data);
  let navigate =useNavigate();
  let {id} =useParams();
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link onClick={()=>{navigate("/")}}>Home</Nav.Link>
          <Nav.Link onClick={()=>{navigate("/detail")}}>상세페이지</Nav.Link>
          <Nav.Link onClick={()=>{navigate("/about")}}>어바웃페이지</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
     

      <Routes>
        <Route path="/" element={<Main shoes={shoes} />} />
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path="/about" element={<About/>}>
            <Route path="member" element={<div>멤버페이지 입니다</div>}/>
            <Route path="location" element={<div>위치확인 입니다</div>}/>
        </Route>

        <Route path="*" element={<div>없는 페이지 입니다.</div>} />
      </Routes>
    </div>
  );
}

function Main(props){
  return(
    <div>
    <div className="main-bg"></div>
      <div className="container">
        <div className="row">

           {
             props.shoes.map(function(a,i){
             return(
               <Card shoes={props.shoes[i]} i={i}></Card>
             )
             })
           }

        </div>
         </div>
         </div>
  )
}

function Card(props){
  return(
          <div className="col-md-4">
             <Nav.Link href={'detail/'+props.i} style={{display:'inline-block'}}>
            
            </Nav.Link>
            <h4>{props.shoes.title}</h4>
            <p>{props.shoes.content}</p>
          </div>
  )
}

function About(){
  return(
    <>
      <div>어바웃 페이지 입니다.</div>
    <Outlet/>
    </>
  
  )
}

export default App;

[codingapple]

img의 src를 "shoes현재누른상품번호.jpg" 로 바꾸면 될듯요

[글쓴이]

글