corou 버그 수정

재희님이 배포 수정 중 화면에서 발생한 에러가 좀 있다고 해서 오랜만에 corou를 만지러 갔다.

알려준 에러들을 레포 이슈에 등록했는데, 쭉 훑어보니 그 외에도 빠진 부분이 좀 보이더라.

그리고 지금 보니까 UI가 너무 밋밋한 부분이 많아서 이후에 UI도 어느정도 수정을 하려고 이슈에 추가해놨다.

 

배송지 선택 에러

 

  const handleAddressPage = () => {
    navigate("/mypage/setAddress");
  };

{!selectAddress ? (
          <NotAddress>
            <span>배송지가 설정되지 않았습니다.</span>
            <span>마이페이지로 이동하시겠습니까?</span>
            <button onClick={handleAddressPage}>이동</button>
          </NotAddress>
        ) : (
          <AddressBox>
            <AddressBoxTitle>
              <h3>{selectAddress?.address_name}</h3>
              <span onClick={handleAddressModalOpen}>배송지 변경</span>
            </AddressBoxTitle>
            <AddressBoxContent>
              <span>{selectAddress?.name}</span>
              <span>
                {selectAddress?.addr}({selectAddress?.zip})
              </span>
              <span>{selectAddress?.addr_detail}</span>
              <span>{selectAddress?.tel}</span>
              <span>{selectAddress?.request}</span>
              {selectAddress?.is_default === "Y" && (
                <DefaultAddr>기본 배송지</DefaultAddr>
              )}
            </AddressBoxContent>
          </AddressBox>
        )}

배송지가 아무것도 없을 때 UI가 있을때와 같은 UI로 출력되어 버튼 클릭 시 에러가 발생했었다. 해당 에러는 배송지 등록이 한 개도 안되어있으면 배송지 페이지로 갈 수 있게 navigate 버튼을 추가해서 예외처리를 해주었다.

 

 

배송지가 없을 때 결제 버튼 막기

  const handlePayment = async () => {
    if (!selectAddress) {
      alert("배송지가 설정되지 않았습니다. 배송지 페이지로 이동합니다.");
      navigate("/mypage/setAddress");
      return;
    }
}

<BuyBtnWrapper>
  <button onClick={handlePayment}>
    {totalPrice.toLocaleString()}원 구매하기
  </button>
</BuyBtnWrapper>

배송지를 예외처리는 해놨지만 결제 버튼은 그대로 활성화가 되어있어서, 결제 버튼을 누르면 배송지 데이터가 없기 때문에 에러가 발생했다. 그래서 배송지가 한 개라도 없을 때 버튼을 누르면 alert창을 띄우며 배송지 페이지로 이동하도록 예외처리를 했다.

 

 

메인 페이지 검색 결과 선택 시 이동

const handleRoutineClick = (routineKey: number) => {
  navigate(`/routine/${routineKey}`);
};

<SearchResults>
  {routineData.map((item) => (
    <div
      key={item.routine_key}
        onClick={() => handleRoutineClick(item.routine_key)}
    >
       <h3>{item.routine_name}</h3>
       <span>{item.user.username}님의 루틴</span>
       <span>₩{item.price_total}</span>
       <span>루틴 단계 : {item.steps}단계</span>
    </div>
   ))}
</SearchResults>

이 부분은 이슈엔 에러라고 써놨지만 기능 추가를 못했다. 해당 div 클릭 시 클릭이벤트를 잘못 설정해놨기 때문에 이동이 안되던건데, 클릭 이벤트로 선택한 검색결과의 key값을 가져와 navigate로 해당 루틴의 상세 페이지로 이동하게 수정했다.

 

메인 페이지 제품 데이터 수정

import "../../../scss/main/item.scss";

interface ItemProps {
  average_rating: number;
  category: string;
  description: string;
  item_key: number;
  item_name: string;
  item_price: number;
  brand_name: string;
  volume: number;
}

interface ItemComponentProps {
  item: ItemProps;
  rank?: number;
  onClick?: () => void;
}

const Item: React.FC<ItemComponentProps> = ({ item, rank, onClick }) => {
  console.log(item);

  return (
    <>
      <div className="itemWrapper" onClick={onClick}>
        <div className="num">{rank}</div>
        <div className="itemImg">
          <img
            src={`/assets/item/${item?.item_key}.jpg`}
            alt={`Routine ${item?.item_key}`}
          />
        </div>
        <div className="itemInfo">
          <p>{item?.brand_name}</p>
          <p>
            {item?.item_name} & {item?.volume}ml
          </p>
          <p>₩ {item?.item_price.toLocaleString()}</p>
        </div>
      </div>
    </>
  );
};
export default Item;

해당 이슈는 데이터를 추가하지 않은 사소한 일이였는데, corou 프로젝트에서 가장 먼저 작업한게 메인 페이지였어서 api로 연동하기 전에 더미 값을 추가해놨었다. 근데 본인이 데이터를 가져오면서 값을 화면에 출력하지 않고 더미 데이터가 그대로 유지되서 모든 제품의 브랜드와 용량이 더미값으로 고정되었기 때문에 이 부분을 가져온 데이터로 추가하여 동적으로 변경해주었다.