[ 항해99 실전프로젝트 ] 아바타샵 포인트 차감 로직

유저의 기존 아바타 정보와 다른 개수만큼 포인트를 곱하면 되는 것인데...

 

가장 깔끔한 방법은, 최종 포인트를 합산해서 서버로 넘겨줄 때 계산을 해서 포인트가 음수일 경우 알럿을 띄워주면서 초기포인트값으로 다시 돌리는 방법인 것 같은데 if문이 순서대로 작동하지않아 문제가 된다.

 

 

 

초기에 생각한 포인트 차감 로직은 다음과 같다.

 

  const discountPoint = () => {
    if (userSelect?.Eye !== initialuserSelect?.Eye) {
      console.log(userSelect?.Eye !== initialuserSelect?.Eye);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Mouth !== initialuserSelect?.Mouth) {
      console.log(userSelect?.Mouth !== initialuserSelect?.Mouth);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Back !== initialuserSelect?.Back) {
      console.log(userSelect?.Back !== initialuserSelect?.Back);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Hair !== initialuserSelect?.Hair) {
      console.log(userSelect?.Hair !== initialuserSelect?.Hair);
      setPoint((prev) => prev - 300);
    }

    return point;
  };

 

 

 

그냥 진짜 간단하게 생각해서, 기존의 유저가 가진 아바타 정보와 틀린 개수만큼 300포인트를 차감해주면 된다고 생각하였다. 그리고 바뀐 아바타와 차감되고 남은 유저의 포인트를 서버로 넘겨주는 로직을 생각했기에, 금방 될 줄 알았는 데 함수실행순서에서 항상 api호출이 먼저 되어 차감된포인트가 넘어가지않는 상황이 발생했다.

 

그래서 결국 진행되어야 하는 순서는 다음과 같다.

• 점수가 차감되는 조건문이 돌고나서, point가 api를 호출하는 함수로 넘어가야 한다.

 

 

 

따라서 아래와 같이 함수를 바꿔주었다.

  const discountPoint = () => {
    if (userSelect?.Eye !== initialuserSelect?.Eye) {
      console.log(userSelect?.Eye !== initialuserSelect?.Eye);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Mouth !== initialuserSelect?.Mouth) {
      console.log(userSelect?.Mouth !== initialuserSelect?.Mouth);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Back !== initialuserSelect?.Back) {
      console.log(userSelect?.Back !== initialuserSelect?.Back);
      setPoint((prev) => prev - 300);
    }
    if (userSelect?.Hair !== initialuserSelect?.Hair) {
      console.log(userSelect?.Hair !== initialuserSelect?.Hair);
      setPoint((prev) => prev - 300);
    }

//변경된 포인트를 보내는 api호출함수
    return postAvatar(point);
  };

 

 

 

 

맨 마지막 리턴하는 곳에 api함수를 넣어보았다. 그런데 신기하게도 API의 페이로드에는 변경되지않은 포인트가 찍히고 있었다. 그렇게 보완해서 완성된 함수는 아래와 같다.

 

 

 

  const discountPoint = () => {
  //밖에서 변수를 가져오지 않고, 함수 내에서 변수 선언
    let point = initialpoint;
    if (userSelect?.Eye !== initialuserSelect?.Eye) {
      point -= 300;
    }
    if (userSelect?.Mouth !== initialuserSelect?.Mouth) {
      point -= 300;
    }
    if (userSelect?.Back !== initialuserSelect?.Back) {
      point -= 300;
    }
    if (userSelect?.Hair !== initialuserSelect?.Hair) {
      point -= 300;
    }
    setPoint(point);
    
    //변경된 변수를 매개변수로 API함수에 넘겨줌.
    return postAvatar(point);
  };

 

결국 중요한 부분은 함수 내부에서 변수를 선언한 점인 것 같다. 아마도?? 이렇게 해서, 무언가를 사고 팔때, 차감하는 로직을 완성할 수 있었다. 조건문을 연속해서 썻지만, 생각보다 가독성도 좋고 간단한 함수여서 맘에 든다.

 

 

 

 

포인트 차감 영상

 

 

 

 

무야호

런칭 내일인데, 해야될 게 산더미이다.