아마존 E-commerce 클론 -4) 상품 디테일 페이지 만들기

 

 

 

우선 리액트 라우터 돔을 만들어서 상품 클릭하면 페이지 이동할 수 있게 만들어 준다. 

 

frontend-> npm install react-router-dom 해주고 

App.js파트로 가서 return <BrowserRouter>로 감싸준다. 

import React from 'react';
import data from './data';
import Product from './components/Product'
import  {BrowserRouter,Route} from 'react-router-dom'

function App() {
  return (
    <BrowserRouter >
   ...
          <main>
          //라우트 생성해준다. 
              <Route path="/" component={HomeScreen} exact></Route>
              <Route path="/product/:id" component={ProductScreen} exact></Route>
              <div className="row center">
                {
                  data.products.map(product=>(
                    <Product key={product._id}  product = {product}/>
                    
                  ))
                }
              </div>
          </main>
         
         ...
    </BrowserRouter>
  );
}

export default App;

 

src>screens>HomeScreen, ProductScreen.js 파일을 만들어준다. 

 

이제 App.js안의 메인에 있는 내용들을 각각의 스크린에 옮겨준다. 

 

HomeScree.js

import React from 'react'
import data from '../data';
import Product from '../components/Product'

function HomeScreen() {
    return (
        <div>
            <div className="row center">
                {data.products.map(product=>(
                    <Product key={product._id}  product = {product}/> 
                  ))}
              </div>
        </div>
    )
}

export default HomeScreen

 

Product 디테일 페이지를 만들어보자. 

 

여기서 product디테일 페이지는 3가지의 column으로 나뉘고 

2영역 1영역, 1영역의 크기 차이를 나타낸다. 

첫번째 영역에는 사진만넣고 

두번째 col영역에는 아이템에대한 정보(이름, 가격, 점수, 설명),

3번째 영역에는 가격과 재고 상태 등을 나타낸다. 

 

import React from 'react'
import Rating from '../components/Rating'
import data from '../data'

function ProductScreen(props) {
    const product = data.products.find(x=>x._id===props.match.params.id)
    if(!product){
        return <div>Product Not Found</div>
    }
    return (
        <div>
            <div className="row ">
                <div className="col-2">
                    <img className="large"src={product.image} alt={product.name} />
                </div>
                <div className="col-1">
                    <ul>
                        <li>
                            <h1>{product.name}</h1>
                        </li>
                        <li>
                            <Rating rating={product.rating} numReviews={product.numReviews}/>
                        </li>
                        <li>
                            Price : ${product.price}
                        </li>
                        <li>
                            Description: <p>{product.description}</p>
                        </li>
                    </ul>
                </div>
                <div className="col-1">
                    <div className="card card-body">
                        <ul>
                            <li>
                                <div className="row">
                                    <div>Price</div>
                                    <div className="price">${product.price}</div>
                                </div>
                            </li>
                            <li>
                                <div className="row">
                                    <div>Status</div>
                                    <div className="status">{product.countInStock>0?( <span className="success">In Stock</span>) : (<span className="error">Unavailable</span>) }</div>
                                </div>
                            </li>
                            <li>
                                <button className="primary block">
                                    Add to Cart
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    )
}

export default ProductScreen

 

 

 

 

여기서 내부 정보들위치배정을 위해서 제일 위쪽의 row를 row top으로 변경해주고 index.css정보를 변경해주자. 

    }
    return (
        <div>
            <div className="row top">
                <div className="col-2">
                    <img className="large"src={

 

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.row.center {
  justify-content: center;
}

.row.top{
  align-items: flex-start;
}

 

 

 

디테일 페이지에 back to result버튼을 추가해주자. 

import React from 'react'
import Rating from '../components/Rating'
import data from '../data'
import {Link} from 'react-router-dom';

function ProductScreen(props) {
    const product = data.products.find(x=>x._id===props.match.params.id)
    if(!product){
        return <div>Product Not Found</div>
    }
    return (
        <div>
            <Link to ="/">Back to result</Link>

 

 

 

이제 디테일 페이지 디자인을 추가해보자. 

 

index.css

a {
  text-decoration: none;
}
a:hover {
  color: #ff8000;
}

ul{
  padding:0;
  margin:0;
  list-style-type: none;
}

li{
  margin-top: 1rem;
}
button{
  padding:1rem;
  border-radius: 0.5rem;
  border:0.1rem #a4a4a4 solid;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f8f8;
  cursor:pointer
}
button:hover{
  border: 0.1rem #404040 solid;
}


button.primary{
  background-color: #f0c040;
}
button.block{
  width:100%;
}

....

.row.center {
  justify-content: center;
}

.row.top{
  align-items: flex-start;
}

.col-1{
  flex:1 1 25rem;
}
.col-2{
  flex:2 1 50rem;
}
/* Image */
img {
  border-radius: 0.5rem;
}
img.medium {
  max-width: 29rem;
  width: 100%;
}
img.large{
  width:100%;
}

...


/* Alert */
.success{
  color:#20a020;
}
.error{
  color:#202020;
}