24.09.25 day71 작업 일지

결제 페이지의 데이터가 더미로 되어있어 데이터를 수정하고 결제 성공/실패시 이동될 페이지를 간단히 구현했다.

각 부분의 데이터를 가져오기 위해 axios를 중첩으로 써 데이터들을 끌어 모았다.

    const paymentData: PaymentData = {
      pg: "uplus", // PG사
      pay_method: "card", // 결제수단
      merchant_uid: `mid_${new Date().getTime()}`, // 주문 고유 ID
      amount: totalPrice, // 결제 금액
      name: `${cartList[0].item.item_name}${
        cartList.length > 1 ? ` 외 ${cartList.length - 1}개` : ""
      }`, // 주문명
      buyer_name: selectAddress.name,
      buyer_tel: selectAddress.tel,
      buyer_email: email,
      buyer_addr: `${selectAddress.addr} ${selectAddress.addr_detail}`,
      buyer_postcode: selectAddress.zip,
      quantity: cartList.length,
    };

결제할 유저의 정보를 담아 결제모듈 api쪽으로 쏴주고 리다이렉션할 부분을 페이지에서 받아 서버에 요청하면 해당 데이터를 반환받는다. 그러면 결제 정보를 받고 어딘가로 이동해야 하는데, 그 부분을 페이지로 따로 만들어 결제정보만 확인하고 넘어갈 수 있게 해놨다.

결제가 정상적으로 완료되면 

결제 정보 페이지가 뜨며 버튼을 누르면 마이페이지의 주문내역페이지로 이동한다. 만약 결제를 실패하면 화면에 데이터는 담기지 않고 장바구니로 다시 이동하라는 버튼이 뜬다.

 

 

그리고 장바구니로 처음 접근할 때 제품의 체크값이 해제되어 있어 체크를 해야만 제품을 담을 수 있다. 보통 이 부분은 체크가 미리 되어있고 해제할 수있게 해야 하기 때문에 기본값을 체크로 변경했다.

가능하면 하단의 전체 제품 체크를 연결하려고 했는데, 이 부분에서 기존에 작성된 로직을 변경했어야 했어서 무수한 에러때문에 제품 전체 체크를 없앴다. 장바구니의 경우 보통 안 살 물건을 체크 해제하지 살 물건을 전체 체크하진 않아서 괜찮을 것 같았다. 

현재 대부분의 api는 끝났고 부수적인 부분을 수정해주는 단계인데 오히려 이 부분에서 초반에 작성한 로직을 뜯어 고쳤어야 했기 때문에 너무 힘들었다. 버그난 부분은 루틴 추가 페이지의 2페이지에서 1페이지에 있는 grade를 변경할 때 루틴 제품 데이터를 추가하는 부분에서 grade의 개수에 맞지 않는 버그가 있었다. 이 부분은 매우 중요한 부분이여서 수정을 했는데 막혀있던 부분은 제품을 가져오는 부분이였다. 제품의 경우 데이터를 가져오려면 검색을 통해 해당 아이템을 클릭해야 값이 담기는 구조였는데, grade의 값을 감소시킬 때 기존에 있던 데이터를 가져오려면 제품의 검색을 상호작용했어야 했기 때문이다. 현재 로직에서 구현하려면 몇몇 코드를 뜯어고쳐야 했어서 다른 잔버그가 계속 생겼다. 계속 지피티에 물어보고 한 결과 차라리 grade값이 변동되면 해당 부분을 리덕스 코드에서 수정하기로 했다. 

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

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

interface RoutineItem {
  step_number: number;
  step_name: string;
  description: string;
  item_key: string;
  item_name: string;
}

interface addRoutineState {
  title: string;
  gender: string[];
  skin: number;
  age: number;
  problem: number[];
  grade: number;
  routineItem: RoutineItem[];
  tag: string[];
  totalPrice: number;
  itemList: itemData[];
}

const initialState: addRoutineState = {
  title: "",
  gender: [],
  skin: 0,
  age: 0,
  problem: [],
  grade: 1,
  routineItem: new Array(1).fill({
    step_number: 1,
    step_name: "",
    description: "",
    item_key: "",
    item_name: "",
  }),
  tag: [],
  itemList: [],
  totalPrice: 0,
};

const addRoutineSlice = createSlice({
  name: "addRoutine",
  initialState,
  reducers: {
    setTitle: (state, action: PayloadAction<string>) => {
      state.title = action.payload;
    },
    setGender: (state, action: PayloadAction<string[]>) => {
      state.gender = action.payload;
    },
    setSkin: (state, action: PayloadAction<number>) => {
      state.skin = action.payload;
    },
    setAge: (state, action: PayloadAction<number>) => {
      state.age = action.payload;
    },
    setProblem: (state, action: PayloadAction<number[]>) => {
      state.problem = action.payload;
    },
    setGrade: (state, action: PayloadAction<number>) => {
      const newGrade = action.payload;
      state.grade = action.payload;

      if (newGrade < state.routineItem.length) {
        state.routineItem = state.routineItem.slice(0, newGrade);
      } else {
        for (let i = state.routineItem.length; i < newGrade; i++) {
          state.routineItem.push({
            step_number: i + 1,
            step_name: "",
            description: "",
            item_key: "",
            item_name: "",
          });
        }
      }

      if (newGrade < state.itemList.length) {
        state.itemList = state.itemList.slice(0, newGrade);
      } else {
        for (let i = state.itemList.length; i < newGrade; i++) {
          state.itemList.push({
            item_key: 0,
            item_name: "",
            item_price: 0,
            volume: 0,
            average_rating: 0,
            brand_name: "",
            category: "",
            description: "",
          });
        }
      }
    },
    setRoutineItem: (
      state,
      action: PayloadAction<{ index: number; item: RoutineItem }>
    ) => {
      state.routineItem[action.payload.index] = action.payload.item;
    },
    setTag: (state, action: PayloadAction<string[]>) => {
      state.tag = action.payload;
    },
    setItemList: (state, action: PayloadAction<itemData[]>) => {
      state.itemList = action.payload;

      state.totalPrice = state.itemList.reduce(
        (acc, item) => acc + item.item_price,
        0
      );
    },
    clearSelectedItems: (state) => {
      state.itemList = [];
    },
    setTotalPrice: (state, action: PayloadAction<number>) => {
      state.totalPrice = action.payload;
    },
    resetAddRoutine(state) {
      return initialState;
    },
  },
});

export const {
  setTitle,
  setGender,
  setSkin,
  setAge,
  setProblem,
  setGrade,
  setRoutineItem,
  setTag,
  setItemList,
  setTotalPrice,
  resetAddRoutine,
} = addRoutineSlice.actions;
export default addRoutineSlice.reducer;

grade값이 수정될 때 현재 리덕스에 저장되어있는 루틴제품 데이터를 수정헀는데, 만약 grade가 늘어난다면 해당 값만큼 빈 객체를 만들어서 입력데이터를 추가하는 방식이고 반대로 줄어든다면 slice로 맨 뒤의 값을 자르는 방식으로 진행했다. 이랬을 때 데이터가 바로 반영이 되어 루틴 단계는 제대로 수정이 됐는데 총액 부분에서 문제가 생겼다.

총액도 각 제품들을 체크하거나 해제할 때의 값을 관리해줘야 했기 때문에 기존에 있는 제품 리스트의 각각의 값을 더해 출력하는 방식이였다. 근데 이러한 로직에서 막혀버렸다. grade값의 감소로 단계를 삭제해도 제품의 데이터는 그대로 남아있어 총액이 변하질 않았다.

이러한 문제를 위해 제품리스트를 리덕스로 추가해 첫 제품 데이터를 저장하고 루틴단계와 비슷하게 해당 리스트를 단계에 맞게 수정하여 똑같이 관리해줬다. 거기에 총액을 위해선 아이템리스트를 돌며 값을 더해야 해서 리덕스로 총액을 추가해 데이터를 관리해주었다. 매번 느끼지만 기획을 꼼꼼하게 하는게 너무 중요한 것 같다.

 

그리고 메인페이지 TOP10부분을 별점순으로 정렬시키되 같은 값이 있으면 댓글 수에 따라 정렬되게 수정했다.

이 부분을 수정하면서 찾은 버그가 하나 있는데 댓글을 작성했을 때 재렌더링되면서 해당 리뷰평점에 맞는 루틴의 평점이 수정되야 하는데 해당 계산을 해주는 부분이 로직이 이상해서 적용이 바로바로 안되는 버그가 있었다. 기존의 작업 리스트를 완료하면 바로 수정할 계획이다.