react cart

UI에 대한 이야기입니다.
상품 일람 페이지의 각 상품에 대한 설명 페이지(Proiducts.js)와 이 설명 페이지를 눌렀을 때의 상세 페이지(상세 자료.js), 마우스가 멈췄을 때 나타나는 단추를 눌렀을 때의 모드(Modals.js)에 대해 설명합니다.


상품 설명을 클릭한 후 나타나는 버튼을 통해 상품 이미지의 패턴을 표시합니다.
react-phone-e-commerce-project/src/components/Products.js

| import React, { Component } from "react"; |
|:--|
| import styled from "styled-components"; |
| import { Link } from "react-router-dom"; |
| import { ProductConsumer } from "../context"; |
| export default class Product extends Component { |
|   render() { |
|     const { id, title, img, price, inCart } = this.props.product; |

state와props의 차이점
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

|     return ( |
|       <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3"> |
|         <div className="card"> |
|           <ProductConsumer> |
|             {value => { |
|               return ( |
|                 <div |
|                   className="img-container p-5" |
|                   onClick={() => value.handleDetail(id)} |
|                 > |
|                   <Link to="/details"> |
|                     <img src={img} alt="" className="card-img-top" /> |
|                   </Link> |
|                   <button |
|                     className="cart-btn" |
|                     disabled={inCart ? true : false} |
|                     onClick={() => { |
|                       value.addToCart(id); |
|                       value.openModal(id); |
|                     }} |
|                   > |
|                     {inCart ? ( |
|                       <p className="text-capitalize mb-0" disabled> |
|                         in cart |
|                       </p> |
|                     ) : ( |
|                       <i className="fas fa-cart-plus" /> |
|                     )} |
|                   </button> |
|                 </div> |
|               ); |
|             }} |
|           </ProductConsumer> |
|           <div className="card-footer d-flex justify-content-between"> |
|             <p className="align-self-center mb-0">{title}</p> |
|             <h5 className="text-blue font-italic mb-0"> |
|               <span className="mr-1">$</span> |
|               {price} |
|             </h5> |
|           </div> |
|         </div> |
|       </ProductWrapper> |
|     ); |
|   } |
| } |
|  |
| const ProductWrapper = styled.div` |
|   .card { |
|     border-color: transparent; |
|     transition: all 1s linear; |
|   } |
|   .card-footer { |
|     background: transparent; |
|     border-top: transparent; |
|     transition: all 1s linear; |
|   } |
|   &:hover { |
|     .card { |
|       border: 0.04rem solid rgba(0, 0, 0, 0.2); |
|       box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2); |
|     } |
|     .card-footer { |
|       background: rgba(247, 247, 247); |
|     } |
|   } |
|   .img-container { |
|     position: relative; |
|     overflow: hidden; |
|   } |
|   .card-img-top { |
|     transition: all 1s linear; |
|   } |
|   .img-container:hover .card-img-top { |
|     transform: scale(1.2); |
|   } |
|   .cart-btn { |
|     position: absolute; |
|     bottom: 0; |
|     right: 0; |
|     padding: 0.2rem 0.4rem; |
|     background: var(--lightBlue); |
|     border: none; |
|     color: var(--mainWhite); |
|     font-size: 1.4rem; |
|     border-radius: 0.5rem 0 0 0; |
|     transform: translate(100%, 100%); |
|     transition: all 1s ease-in-out; |
|   } |
|   .img-container:hover .cart-btn { |
|     transform: translate(0, 0); |
|   } |
|   .cart-btn:hover { |
|     color: var(--mainBlue); |
|     cursor: pointer; |
|   } |
| `; |

react-phone-e-commerce-project/src/components/Modals.js에서

| import React, { Component } from "react"; |
|:--|
| import { ProductConsumer } from "../context"; |
| import { ButtonContainer } from "./Button"; |
| import { Link } from "react-router-dom"; |
| export default class Details extends Component { |
|   render() { |
|     return ( |
|       <ProductConsumer> |
|         {value => { |
|           const { |
|             id, |
|             company, |
|             img, |
|             info, |
|             price, |
|             title, |
|             inCart |
|           } = value.detailProduct; |

데이터를 저장하다.

|           return ( |
|             <div className="container py-5"> |
|               {/* title */} |
|               <div className="row"> |
|                 <div className="col-10 mx-auto text-center text-slanted text-blue my-5"> |
|                   <h1>{title}</h1> |
|                 </div> |
|               </div> |
|               {/* end of title */} |
|               <div className="row"> |
|                 <div className="col-10 mx-auto col-md-6 my-3"> |
|                   <img src={img} className="img-fluid" alt="" /> |
|                 </div> |
|                 {/* prdoduct info */} |
|                 <div className="col-10 mx-auto col-md-6 my-3 text-capitalize"> |
|                   <h1>model : {title}</h1> |
|                   <h4 className="text-title text-uppercase text-muted mt-3 mb-2"> |
|                     made by : <span className="text-uppercase">{company}</span> |
|                   </h4> |
|                   <h4 className="text-blue"> |
|                     <strong> |
|                       price : <span>$</span> |
|                       {price} |
|                     </strong> |
|                   </h4> |
|                   <p className="text-capitalize font-weight-bold mt-3 mb-0"> |
|                     some info about product : |
|                   </p> |
|                   <p className="text-muted lead">{info}</p> |
|                   {/* buttons */} |
|                   <div> |
|                     <Link to="/"> |
|                       <ButtonContainer>back to products</ButtonContainer> |
|                     </Link> |
|                     <ButtonContainer |
|                       cart |
|                       disabled={inCart ? true : false} |
|                       onClick={() => { |
|                         value.addToCart(id); |
|                         value.openModal(id); |
|                       }} |
|                     > |
|                       {inCart ? "in cart" : "add to cart"} |

{inCart ? "in cart": "add to cart"}
만약 쇼핑 카트 안에 있다면, 그에게 "in cart"쇼핑 카트 안에 있다고 말해라
쇼핑카트에 없으면'add to cart'가 있다고 전해주세요.

|                     </ButtonContainer> |
|                   </div> |
|                 </div> |
|               </div> |
|             </div> |
|           ); |
|         }} |
|       </ProductConsumer> |
|     ); |
|   } |
| } |

이 파일 종료
다음은 모드.
react-phone-e-commerce-project/src/components/Modal.js

| import React, { Component } from "react"; |
|:--|
| import styled from "styled-components"; |

이 styled-components.
https://qiita.com/taneba/items/4547830b461d11a69a20
인용하다

| import { ProductConsumer } from "../context"; |
| import { ButtonContainer } from "./Button"; |
| import { Link } from "react-router-dom"; |
| export default class Modal extends Component { |
|   render() { |
|     return ( |
|       <ProductConsumer> |

src/context입니다.js에서 호출되지만 src/context.단지 js에게 내용을 선언했을 뿐이다.
불러내서 고기를 붙이다.
이런 인상.

|         {value => { |
|           const { modalOpen, closeModal } = value; |
|           const { img, title, price } = value.modalProduct; |
|           if (!modalOpen) { |
|             return null; |
|           } else { |
|             return ( |
|               <ModalContainer> |
|                 <div className="container"> |
|                   <div className="row"> |
|                     <div |
|                       className="col-8 mx-auto col-md-6 col-lg-4 p-5 text-center text-capitalize" |
|                       id="modal" |
|                     > |
|                       <h5>item added to cart</h5> |
|                       <img src={img} className="img-fluid" alt="" /> |
|                       <h5>{title}</h5> |
|                       <h5 className="text-muted">price : ${price}</h5> |
|                       <Link to="/"> |
|                         <ButtonContainer |
|                           onClick={() => { |
|                             closeModal(); |
|                           }} |
|                         > |
|                           Continue Shopping |
|                         </ButtonContainer> |
|                       </Link> |
|                       <Link to="/cart"> |
|                         <ButtonContainer |
|                           cart |
|                           onClick={() => { |
|                             closeModal(); |
|                           }} |
|                         > |

쇼핑 카트 정보의 페이지에 나타나든 상품 페이지에 머무르든 모두 모드를 한 번 닫아야 한다.

|                           Go To Cart |
|                         </ButtonContainer> |
|                       </Link> |
|                     </div> |
|                   </div> |
|                 </div> |
|               </ModalContainer> |
|             ); |
|           } |
|         }} |
|       </ProductConsumer> |
|     ); |
|   } |
| } |
|  |

| const ModalContainer = styled.div` |
|   position: fixed; |
|   top: 0; |
|   left: 0; |
|   right: 0; |
|   bottom: 0; |
|   background: rgba(0, 0, 0, 0.3); |
|   display: flex; |
|   align-items: center; |
|   justify-content: center; |
|   #modal { |
|     background: var(--mainWhite); |
|   } |
| `; 
Modalのcss設計