바로구매 버튼 클릭 시 localStorage에 저장 후 구매 페이지에서 정보 불러오기

개인적으로 이번 프로젝트의 중요 기능 중 하나는 바로구매라고 생각한다. 재미를 소비하기 위해 오는 end user의 입장을 생각했을 때 여러 물건을 사기보단 배송료를 지불하더라도 하나만 살 가능성이 높다고 생각해서 넣은 기능이었다.

 

하지만.. 우리는 바로구매 로직에 제대로 생각하지 못했고 마감 이틀 전 바로구매에 대해 백-프론트 연결고리가 없다는것을 알게 되었다.

그리고 마감 전날 멘토님께 바로구매 로직의 경우 프론트가 진행하는 것이라는 얘기를 듣게 되었다..

뒤늦게 다른 홈페이지의 바로구매 버튼을 눌러보니 item이 localstorage에 저장되는 것을 볼 수 있었다.

그렇게 급하게 진행했던 기능이었고 아이디 저장을 localstorage에 했어서 이것 또한 쉬울거라고 생각했는데

아이디저장과 다르게 불러오는게 조금 까다로웠다 그 과정을 아래에서 설명하겠다.

 

우리가 구현해야 할 기능은 아래와 같다.

1. 버튼을 누르면 아이템의 이름, 갯수, 가격을 로컬스토리지에 저장한다.

2. 저장과 동시에 구매 페이지로 넘어간다.

3. 구매페이지에서 로컬 스토리지에 있는 아이템 정보를 가져온다.

4. 이 때 장바구니에 아이템이 있어도 로컬 스토리지에 값이 저장되어있으면 로컬 값을 가져와야한다.

---

버튼을 누르면 아이템의 이름, 갯수, 가격을 로컬스토리지에 저장하고 구매페이지로 넘어가기

사실 이건 어렵지 않았다. 다만, 아이템 정보를 객체로 보내줄 것이기 때문에 JSON.stringify()로 감싸서 변환을 해준다.

아이디저장을 할 땐 값이 string이라서 상관이 없었는데 값이 객체, 배열, number일 경우엔 감싸주는게 좋은 것 같다.

객체가 아닌 각자 하나씩 보내줄때도 number로 넘겼지만 string으로 받았다.

그걸 Number()를 사용해 number로 변경해주려고 했으나 안됐다..

  const goToBuy = () => {
    localStorage.setItem(
      'item',
      JSON.stringify({
        name: product.productName,
        number: number,
        price: product.productPrice,
      })
    );
    navigate('/purchase');
  };

그리고 만들어둔 함수를 button에 연결해준다.

           <button
              className="buyBtn"
              disabled={noItem}
              style={{ opacity: noItem ? 0.5 : 1 }}
              onClick={() => {
                goToBuy();
              }}
            >
              바로 구매하기
            </button>

 

구매페이지에서 로컬 스토리지에 있는 아이템 정보 불러오기

저장해둔 아이템정보들이 있는 객체를 변수로 처리해 가져오고

JSON.stringify()을 사용해 JSON화 한 걸 JSON.parse를 통해 다시 javascript 문법으로 변환해준다.

const getItemInfo = localStorage.getItem('item');
const parsedA = JSON.parse(getItemInfo);

이 때 장바구니에 아이템이 있어도 로컬 스토리지에 값이 저장되어있으면 로컬 값을 가져올 수 있도록 조건을 만들어준다.

로컬 스토리지에 값이 없는데 getItem을 해오는 경우 null을 반환한다기에 null일 경우를 true로 조건을 만들어주었다.

  const conditon = getItemInfo === null;

그리고 이 조건을 가격을 계산하는 곳과 jsx 렌더링 되는 부분에서 사용했다.

조건이 true면 로컬에 값이 없기 때문에 장바구니 아이템들을 백엔드를 통해 받아올 것이고

false면 로컬 값이 있어서 로컬 값을 가져올 것이다.

const beforePrice = conditon
    ? Number(lastPrice()).toLocaleString()
    : (parsedA.price * parsedA.number).toLocaleString();
  const payPrice = conditon
    ? (Number(lastPrice()) + 3000).toLocaleString()
    : (parsedA.price * parsedA.number + 3000).toLocaleString();

 {conditon ? (
            productDatas.map(productData => {
              const { productId, productName, productCount } = productData;
              return (
                <div className="purchaseProduct" key={productId}>
                  <p>{conditon ? productName : parsedA.name}</p>
                  <p>{conditon ? productCount : parsedA.number}개</p>
                </div>
              );
            })
          ) : (
            <div className="purchaseProduct">
              <p>{parsedA.name}</p>
              <p>{parsedA.number}개</p>
            </div>
          )}

 

결제하기 버튼을 누르면 로컬에 있는 데이터 삭제

우리팀의 경우는 post api가 없어서 결제 버튼을 누르면 결제가됩니다 모달을 띄워주는 것으로 마무리했다.

const goToPay = () => {
    localStorage.removeItem('item');
    setIsModalOpen(true);
  };

---

N사의 바로구매 기능의 경우 아이템 정보를 바로 저장하지 않고 다 암호화해서 저장을 하고 있었고 객체가 아닌 개별로 관리하고 있었다.

암호화는 생각지도 못했고 페이지를 벗어나면 데이터를 삭제하는 기능도 구현하지 못해서 아쉬웠다.

리팩토링을 하면서 좀 더 기능을 고도화해보아야겠다.