구현된 화면

코드

App.js

import './App.css';
import { Navbar, Container, Nav, Button } from 'react-bootstrap';
import { useState } from 'react';
import Data from './data';
import { Link, Route, Switch } from 'react-router-dom';
import Detail from './Detail'


function App() {

  let [shoes, shoes변경] = useState(Data);

  return (
    <div className="App">
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand>ShoeShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link><Link to="/" className="text">Home</Link></Nav.Link>
            <Nav.Link><Link to="/detail" className="text">Detail</Link></Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      
      <Switch>

        <Route exact path="/">
          <div className="jumbotron">
            <h1>20% Season OFF</h1>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident maiores doloribus, quos similique perferendis fugit et accusantium,
              <br/>iusto dolor labore suscipit laboriosam ullam unde eum voluptatum debitis, rem voluptate ipsa.
            </p>
            <p>
            <Button variant="primary">Learn more</Button>{' '}
            </p>
          </div>
          <div className="container">
            <div className="row">
            
              {
                shoes.map((el, i)=>{
                  return <Card shoes = { shoes[i] } i = { i } key = { i } />
                })
              }

              {/* <Card shoes = { shoes[0] } />
              <Card shoes = { shoes[1] } />
              <Card shoes = { shoes[2] } /> */}
            </div>
          </div>
        </Route>

        <Route path="/detail/:id">
          <Detail shoes = { shoes } />
        </Route>
        
      </Switch>
    </div>
  );
}




function Card(props) {

  return (
    <div className="col-md-4" key={props.key}>
      <img src={ 'https://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg' } width="100%" />
      <h4> { props.shoes.title } </h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
    </div>
  )

}



export default App;

Detail.js

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';


function Detail(props) {

  let { id } = useParams();
  let history = useHistory();
  let 찾은상품 = props.shoes.find(function(상품){  return 상품.id == id  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={"https://codingapple1.github.io/shop/shoes" + [Number(id) + 1] + ".jpg"} width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{ 찾은상품.title }</h4>
          <p>{ 찾은상품.content }</p>
          <p>{ 찾은상품.price }</p>
          <button className="btn btn-danger">주문하기</button> 
          <button className="btn btn-danger" onClick={()=>{ 
            history.goBack();
          }}>뒤로가기</button>
        </div>
      </div>
    </div> 
  );
}

export default Detail;

Data.js

export default [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
]