팀 여백 전체 프로젝트 보기

Order

⚡️ FUNCTION

• 회원만 주문할 수 있는 access_token 여부검사
• cart 에서 선택한 제품 data -> orderInfo 컴포넌트(front)
• 회원가입 때 저장되었던 userInfo -> shippingInfo 컴포넌트(back)
• 다음주소API를 이용한 주소검색 Modal
• 결제하기를 누르면 userInfo -> 주문완료 페이지로 이동

💭 PART OVERVIEW & TIL

product detail -> cart -> order 는 뗄 수 없는 관계이고, 데이터를 보내고 받을 때마다 백은 물론 프론트끼리도 계속 소통해야 하는 부분이었다!

처음에는 cart 에 담긴 상품데이터들도 서버 데이터에 한 번 저장 되었다가, 다시 GET으로 받아야하지 않을까? 생각하여 희원님께 물어보았다. Order 부분은 Cart와 달리 유저가 상품을 보관하고 싶은것이 아닌, 주문하지 않으면 끝! 인 휘발성적인 특징상 굳이 주문하기 데이터를 서버에 저장할 필요가 없는 것이다. 이건 웹페이지의 특징을 잘 생각하면 되는 부분이었다..! ( ³⌓³)....!

그래서 카트에서 최종 선택된 제품 설명들은 cart 에서 넘겨주는 프론트 데이터들을 이용해서 나타내었고, shippingInfo 부분의 유저이름과 핸드폰번호는 회원가입당시 저장되어있던 백의 데이터들을 각각 받아오는 (흥미로운) 작업을 했다. 결제하기 부분은 현재 우리가 결제 시스템까지 구현할 수 없기에...! 무통장 입금만 받는 설정으로 하여 재밌게 넘어갔던 기억도 난다.

카카오주소API 이용하기

어떤 데이터가 들어오는지 console.log에 찍어보면 이런 결과가!
일단 다음에서 제공하는 포스트코드 라이브러리를 설치한 후 import 해준다

import React, { Component } from 'react';
import DaumPostCode from 'react-daum-postcode';
import './AddressModal.scss';

class AddressModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zoneCode: '',
      fullAddress: '',
      detailAddress: '',
      isDaumPost: false,
    };
  }

  handleOpenPost = () => {
    this.setState({
      isDaumPost: true,
    });
  };

  handleAddress = data => {
    let allAddress = data.address;
    let extraAddress = '';
    let zoneCodes = data.zonecode;

    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddress +=
          extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      allAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
    }
    this.setState({
      fullAddress: allAddress,
      zoneCode: zoneCodes,
    });
    localStorage.setItem('postCode', data.zonecode);
    localStorage.setItem('mainAddress', data.address);
  };

  getDetailAddress = address => {
    this.setState({ detailAddress: address });
    localStorage.setItem('detailAddress', address);
  };
  render() {
    const { isDaumPost, fullAddress, zoneCode } = this.state;
    const { handleOpenPost, handleAddress, getDetailAddress } = this;

    const width = 595;
    const height = 450;
    const modalStyle = {
      position: 'absolute',
      top: 350,
      left: 400,
      zIndex: '100',
      border: '1px solid #000000',
      overflow: 'hidden',
    };
    return (
      <div className="modalRow">
        <div className="modalCell cellTit">
          <div></div>
        </div>
        <div className="modalCell">
          <div className="cellFirst">
            <div className="zipCode">{zoneCode}</div>
            <div className="address">{fullAddress}</div>
            <div className="addressBox">
              <input
                type="text"
                placeholder="상세주소를 입력해주세요."
                onChange={e => getDetailAddress(e.target.value)}
              />
              <button type="button" onClick={handleOpenPost}>
                <span>우편번호 찾기</span>
              </button>
            </div>
          </div>
        </div>
        {isDaumPost ? (
          <DaumPostCode
            onComplete={handleAddress}
            autoClose
            width={width}
            height={height}
            style={modalStyle}
            isDaumPost={isDaumPost}
          />
        ) : null}
      </div>
    );
  }
}

export default AddressModal;

나같은 경우는 주소 검색으로 나타난 zoneCode와 fullAddress와 더불어 Input 태그에 입력되는 detailAddress까지 백 서버로 넘어줘야했기에 함수 하나를 더 추가하였다.

우편번호 찾기 버튼을 눌렀을 때, handleOpenPost 함수가 실행되어 isDaumPost 가 ture가 되고 조건부렌더링으로 우편번호 입력할 수 있는 DawmPostCode 컴포넌트가 실행된다.

onComplete는 데이터를 업데이트할 handleAddress 함수로 실행시켜 setState를 해준다. width이나 height, position 까지 커스텀하면 끝!