5. Code Review

2) Product Detail 주요 코드

Cart Component

: 장바구니 컴포넌트로 OverView라는 최상위 부모 컴포넌트의 자식으로 존재한다. 하지만 독특한점은 모달창 때문에 이녀석만큼은 OverView보다 더 높은 위치로 이벤트를 올려보낸다.

: 사진에서처럼 모달창이 존재한다. 이것도 서드파티 라이브러리를 사용하지 않고 태그로 만들었다.

import React, { Component } from 'react';
import Overview from './Overview/Overview';
import Modal from '../../component/Modal/Modal';

class ProductDetail extends Component {
  constructor() {
    super();
    this.state = {
      modalSwitch: false,
    };
  }

  handleModalSwitch = () => {
    this.setState({ modalSwitch: !this.state.modalSwitch });
  };

  render() {
    const { handleModalSwitch } = this;
    return (
      <div>
        {this.state.modalSwitch ? (
          <Modal takeModalEvent={handleModalSwitch} />
        ) : null}
        <div className='ProductDetail'>
          <Overview takeModalEvent={handleModalSwitch} />
        </div>
      </div>
    );
  }
}

export default ProductDetail;

• 그렇다. 위의 코드에서처럼 사실 OverView 위에 부모가 한개 더 있었다.
  별 특별한 기능이 없는 부모이지만 모달창 때문에 기능이 생겨버렸다ㅠㅠ 자식에게서는 모달창이 그 해당 부위에만 반투명한 부분이 생겨버려서 강제로 맨 위로 끌어올렸다.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './Modal.scss';

class Modal extends Component {
  goCart = () => {
    this.props.history.push('/cart');
  };

  render() {
    const { goCart } = this;
    const { takeModalEvent } = this.props;
    return (
      <div className='showMonalPage'>
        <div className='cartButtonBox'>
          <p className='notificationPhrase'>장바구니에 상품을 담았습니다</p>
          <button className='moveCartButton' onClick={goCart}>
            장바구니 보러가기
          </button>
          <button className='cancleButton' onClick={takeModalEvent}>
            확인
          </button>
        </div>
      </div>
    );
  }
}

export default withRouter(Modal);

• 위는 모달창의 코드로 장바구니로 이동시켜주는 기능만 존재한다.
• 확인창은 모달 스위치가 ProductDetail에 있기 때문에 프롭스로 전달해서 보내버렸다.

• 장바구니는 간단한 코드이므로 생략하겠다.
• 자동으로 계산되는 함수만 아래 적어본다.

export default function calcuration(targetList, saleRate, multiplication) {
  if (targetList.length) {
    return (
      targetList
        .map(
          (ele) =>
            (ele.options.reduce(
              (accumulator, currentValue) =>
                accumulator + parseInt(currentValue.price * currentValue.count),
              0
            ) /
              saleRate) *
            multiplication
        )
        .reduce((acc, val) => acc + val)
        .toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '원'
    );
  }
}

• calcuration 라는 함수로 하나 만들어서 장바구니에서 계속 사용하고 있다.
• 파라미터를 3개로 두어 할인율이 존재할때와 할인을 제외한 금액을 계산할때 모두 가능하게 만들어 두었다.

• 마지막으로 스크랩북(북마크)기능 스샷 한방!!
• 마이페이지는 다른 팀원이 만들었지만.... 북마크 잘 들어간것만 한장 남긴다ㅎㅎ

6. 후기

• 상품 옵션을 선택하는 셀렉트 메뉴를 라이브러리 없이 직접 구현하였다. 처음부터 재활용이 불가능하게 짜여진 코드였고 컴포넌트 간의 구조가 복잡해질 수록 코드를 새로 다 작성해야 하는 상황이 발생하였다.
  이전까지는 다른 팀원이 보기 편한 코드를 만들기 위해 예쁘게 짜곤 했다면 이 프로젝트를 기점으로 코드의 확장성까지 미리 고민한 이후 개발에 착수하는 습관이 생겼다.
• PM으로써 프로젝트를 완벽하게 성공하고 싶은 마음과 팀원들의 부족한 시간 사이에서 고민이 많았다.
  결국 두마리 토끼를 모두 잡기 위해 내 수면시간을 투자해 부족한 시간을 채워보려 했으나 프로젝트가 끝난 후 아주 큰 번 아웃이 찾아왔다.
  안정적인 일정 관리에 대한 큰 깨달음을 얻었다.
  소고기 먹자 얘들아