미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품상세페이지에서 잘 안됩니다.
보시는것과 같이 이렇게 뜹니다
혹시 몰라 제가 입력한 코드도 함께 보여드립니다
보시고 틀린 부분은 꼭 가르쳐주세요!
상품 상세 페이지구현 2에서 헤더와 바디, 푸터 외에는 css는 아직 하지 않았습니다.
App.js
import './App.css';
import MainPageComponent from "./main/index.js";
import {Switch, Route} from "react-router-dom";
import UploadPage from './upload';
import ProductPage from './product';
function App() {
return (
<div>
<div id="header">
<div id="header-area">
<img src="/images/icons/logo.png" />
</div>
</div>
<div id="body">
<Switch>
<Route exact={true} path="/">
<MainPageComponent />
</Route>
<Route exact={true} path="/products/:id">
<ProductPage />
</Route>
<Route exact={true} path="/upload">
<UploadPage />
</Route>
</Switch>
</div>
<div id="footer"></div>
</div>
);
}
export default App;
product/index.js
import {useParams} from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
function ProductPage(){
const {id} = useParams();
const [product, setProduct] = useState(null);
useEffect(function(){
axios.get(`https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/${id}`)
.then(function(result){
setProduct(result.data);
}).catch(function(error){
console.error(error);
})
},[])
if(product===null){
return <h1>상품 정보를 받고 있습니다...</h1>
}
return (
<div>
<div id="image-box">
<img src={"/" + product.imageUrl} />
</div>
<div id="profile-box">
<img src="/images/icons/avatar.png" />
<span>{product.seller}</span>
</div>
</div>
);
}
export default ProductPage;
main/index.js
import React from "react";
import "./index.css";
import axios from "axios";
import {Link} from "react-router-dom";
function MainPage(){
const [products, setProducts] = React.useState([]);
React.useEffect(
function(){
axios.get( "https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products").then(function(result){
console.log(result)
const products = result.data.products;
setProducts(products);
}).catch(function(error){
console.error("에러발생 : ", error)
})
},[])
return (
<div>
<div id="banner">
<img src="images/banners/banner1.png" />
</div>
<h1>판매되는 상품들</h1>
<div id="product-list">
{products.map(function(product, index){
return(
<div className="product-card">
<Link className="product-link" to={`/products/${product.id}`}>
<div>
<img className="product-img" src={product.imageUrl} />
</div>
<div className="product-contents">
<span className="product-name">
{product.name}
</span>
<span className="product-price">
{product.price}원
</span>
<div className="product-seller">
<img className="product-avatar" src="images/icons/avatar.png" />
<span>{product.seller}</span>
</div>
</div>
</Link>
</div>
)
})
}
</div>
</div>);
}
export default MainPage;
