return (
<div className="App">
<Navbar bg="dark" data-bs-theme="dark">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={()=>{navigate('/cart')}}>Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
<Routes>
<Route path='/' element={
<>
<div className="main-bg" style={{ backgroundImage : 'url('+ bg +')'}}></div>
<div className="container">
<div className="row">
{ shoes.map((a, i)=>{
return <Modal shoes={shoes[i]} i={i}></Modal>
})}
</div>
</div>
<button onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((결과)=>{
let copy = [...shoes, ...결과.data]
setShoes(copy)
})
.catch(()=>{
console.log('실패');
})
}}>버튼</button>
</>
}/>
<Route path='/detail/:id' element={<Detail shoes={shoes}/>}/>
<Route path='/Cart' element={<Cart/>} />
</Routes>
</div>
);
}
function Modal(props) {
return(
<div className='col-md-4'>
< img src={"https://codingapple1.github.io/shop/shoes" + (props.i+1) + ".jpg" } width="80%"/>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.price}</p>
</div>)
}
export default App;
