🩺🍪 Dr.Tart - 1차 프로젝트 1st Sprint 회고

Dr.Tart 프로젝트는 닥터자르트 홈페이지를 클론코딩하는 프로젝트이다.
다만 화장품이 아닌 디저트가 나오도록...

프로젝트 시작

11월 29일 월요일부터 프로젝트가 시작되었다.

우리팀은 닥터자르트 홈페이지를 클론코딩할 예정이었고,

그리고 오늘 2주간의 1차 프로젝트중에서 벌써 1주가 지나버렸다.

컴포넌트 기반의 개발

닥터타르트 프론트엔드팀의 핵심적인 키워드는 바로 컴포넌트 기반의 개발이었다.

프론트엔트팀 각자 페이지를 하나씩 맏되, 컴포넌트를 하나의 기능 단위로 잡아 점진적으로 페이지를 완성 할 수 있도록 하였고, 반복되는 컴포넌트의 재사용성을 높일려고 노력하였다.

---

내 구현 사항

Nav.js

왼쪽 측면에 붙어있는 nav에 해당하는 컴포넌트이다.

ProductList.js

제품 페이지에 해당하는 페이지이다.

직접 구현한 이미지 슬라이드가 들어가 있으며, 제품 컴포넌트가 제품마다 반복되는 것을 확인할 수 있다.

react-router-dom를 이용하여 동적라우팅을 구현하였고, useParams()를 이용하여 url을 parameter로 받아와 그걸 기반으로 제품군을 분류할 수 있도록 하였다.

• Product.js

제품 페이지에서 계속해서 재사용되는 Product.js는 다음과 같이 코드를 짰다.

css 애니메이션 부분에서 계속해서 반복되는 부분이 있어 리팩토링이 필요할 듯 싶다.

import React, { useState } from 'react';
import './Product.scss';

const Product = ({ productName, productPrice, productImage }) => {
  const [isProductHover, setIsProductHover] = useState(false);

  return (
    <div
      className="product"
      onMouseOver={() => setIsProductHover(true)}
      onMouseOut={() => setIsProductHover(false)}
    >
      <div className="productContainer">
        <div className="productImageWrapper">
          <img
            className="productImage"
            alt="example"
            src="/images/tartexam.jpg"
          />
        </div>
        <div className="productName">{productName}</div>
        <div className="productPrice">{Math.round(productPrice)}원</div>
      </div>
      {isProductHover && (
        <div
          className={`productEffectContainer ${
            isProductHover ? 'mountAnimation' : ''
          }`}
        >
          <div className="effectContents">
            <div className="productButtonContainer">
              <button className="productBuyButton">구매하기</button>
              <button className="productCartButton">
                <i className="fas fa-shopping-cart" />
              </button>
              <button className="productLikeButton">
                <i className="far fa-heart" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Product;

• ImageSlide.js

  

---

2nd Sprint에서 해야할 일

일단 아직 완성되지 못한 장바구니, 결제 페이지의 완성이 필요하다.

또한 아직 백엔드와의 접합이 완벽하지 않은 상태이므로 좀 더 완성도를 높일 필요가 있을 것 같다.