[React] 1차 프로젝트 결제 페이지

이제 1차 프로젝트에 관한 마지막 글이며 2차 프로젝트 들어가기 하루 전 이다. 작성했던 코드를 글로 정리하면서 몰랐던 부분도 많이 알게 됐고 정리되지 않았던 생각도 많이 정리되는 시간이였다.

1. 배송지 설정

• 결제 페이지로 이동했을 때 서버의 배송지 데이터를 기본 배송지로 설정합니다.
• 체크박스를 통해 기본 배송지와 새로운 배송지를 설정할 수 있도록 합니다.

2. 구매목록

• 장바구니 페이지에서 선택한 제품들을 구매목록으로 보여줍니다.

3. 구매약관 및 결제 버튼

• 배송지 정보가 없거나 보유 포인트가 부족할 시 구매약관 버튼이 비활성화됩니다.(구매약관이 활성화된 상태이면 배송지 수정이 불가합니다.)
• 결제 시 보유포인트를 서버에 전송하고 구매완료를 나타내는 알림창을 표시합니다.

중요하다고 생각한 점

새로운 배송지 입력시 기존 배송지가 업데이트되는데 다시 초기 배송지가 필요 할 때 어떻게 해야할까?

기본 배송지, 구매목록, 구매약관 및 결제 버튼

1. 기본 배송지

 const handleUserSame = event => {
      if (event.target.checked) {
        	setIsCheckedCheckboxSame(true);
        	setPaymentProduct([
          		{
            		...paymentProduct[0],
            		firstName: deliveryDataIni.current[0].firstName,
                    // 나머지 코드 생략
          		},
        	]);
      } else {
        	setIsCheckedCheckboxSame(false);
        	setPaymentProduct([
          		{
            	...paymentProduct[0],
            	firstName: '',
                // 나머지 코드 생략
          		},
          	]);
      }};
          
 const handleAddressInput = event => {
    const { name, value } = event.target;
    setPaymentProduct([{ ...paymentProduct[0], [name]: value }]);
 };

기본 배송지 버튼을 선택하면 서버에 저장되어 있는 정보를 입력값으로 넣고 버튼을 해제하면 빈 문자열을 넣어서 입력값을 초기화합니다.
기존 배송지를 사용하지 않으면 새로운 배송지를 입력해서 사용합니다.
서버에서 업데이트가 되면 기존 배송지가 사라지네...?

2. 구매목록

   <section className="payment-list">
          <div className="payment-list-title">구매 목록</div>
          <ul>
            {paymentProduct[0]?.food.map(item => (
              <PaymentProduct key={item.id} item={item} />
            ))}
          </ul>
   </section>

장바구니 페이지에서 선택한 목록을 보여줍니다.
여기는 문제없어... 장바구니에서 넘겨줄 때 데이터가 정상적으로 안넘어온다...

3. 구매약관 및 결제 버튼

const showOrderComplete = () => {
    fetch(PAYMENT_API, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify({
        point: foodPriceSum + DELIVERY_FEE,
        firstName: paymentProduct[0].firstName,
		// 나머지 코드 생략
      }),
   })
   .then(response => {
       if (response.status === 200) {
          setModalOpen(true);
       }
   });
};

결제 후 남은 포인트와 보내려는 배송지 정보를 서버에 전달해서 업데이트하고 정상적으로 전달되면 완료 모달창을 보여줍니다.

프로젝트에 대한 전체적인 느낌점

2차 프로젝트 시작하기 전에 썼던 블로그가 기업협업 2주차에 마무리가 되었다. 시간이 많이 지나서 사실 기억이 잘 안난다... 이래서 멘토님들이 바로바로 작성하라고 한거구나... 그래도 코드를 다시 보니 아직 부족한 내가 봐도 고쳐야 할 점이 많아보였고 정상작동하지 않은 부분을 어떻게 고쳐야하는지 감이 잡히는 것 같다. 얼른 리팩토링하고 다시 블로그를 쓰고싶다.