에러부터 처리_2(Meju_Refac)

src/pages/Mypage/LikeListPage.tsx
  Line 131:9:   'totalPages' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 172:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars
  Line 199:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars

src/pages/Mypage/OrderListPage.tsx
  Line 143:23:  'setTotalLength' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 150:9:   'totalPages' is assigned a value but never used      @typescript-eslint/no-unused-vars
  Line 195:14:  'res' is defined but never used                      @typescript-eslint/no-unused-vars
  Line 212:53:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any
  Line 212:61:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any

src/pages/Place.tsx
  Line 75:9:  'location' is assigned a value but never used  @typescript-eslint/no-unused-vars

어제에 이어 남은 것들을 리팩토링하는 과정을 적을 예정이다.
never used는 그냥 안쓰니까 지워버려서 코드를 간결하게 만들고,
타입정의를 먼저 하겠다.

LikeListPage에서

const [totalLength, setTotalLength] = useState<number>(0);  
const LikeGetHandle = () => {
    const access_token = Bearer ${authToken};
    axios
      .get(${process.env.REACT_APP_API_URL}/members/favorite, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        setLikelist(res.data.data);
        setTotalLength(res.data.data.length);
      })
      .catch((err) => console.error(err));
  };

이 코드를

const LikeGetHandle = () => {
  const access_token = `Bearer ${authToken}`;
  axios
    .get(`${process.env.REACT_APP_API_URL}/members/favorite`, {
      headers: {
        "Content-Type": "application/json",
        Authorization: access_token,
        "ngrok-skip-browser-warning": "69420",
      },
    })
    .then((res) => {
      setLikelist(res.data.data);
    })
    .catch((err) => console.error(err));
};

이런식으로 사용하지 않으면 그냥 삭제해버리고, 추후에 필요하다면 추가하려 한다.
그리고 OrderListPage에서

    const authToken = localStorage.getItem("authToken");
    const access_token = Bearer ${authToken};
    axios
      .get(${process.env.REACT_APP_API_URL}/members/orders, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        const data = res.data.data.slice().sort((a: any, b: any) => +new Date(b.orderedAt) - +new Date(a.orderedAt));
        const newData = [];
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].itemOrders.length; j++) {
            const singleData = data[i].itemOrders[j];
            singleData["orderedAt"] = data[i].orderedAt;
            singleData["orderStatus"] = data[i].orderStatus;
            singleData["pickupDate"] = data[i].pickupDate;
            singleData["orderId"] = data[i].orderId;
            newData.push(singleData);
          }
        }

Axios 요청의 any 타입을

interface Orderitem {
  orderId: number;
  orderStatus: string;
  orderedAt: string;
  pickupDate: string;
  titleKor: string;
  quantity: number;
  itemId: number;
}
interface Order {
  orderedAt: string;
  orderStatus: string;
  pickupDate: string;
  orderId: number;
  itemOrders: Orderitem[];
}
const access_token = `Bearer ${authToken}`;
    axios
      .get(`${process.env.REACT_APP_API_URL}/members/orders`, {
        headers: {
Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        const data = res.data.data
          .slice()
          .sort((a: Order, b: Order) => +new Date(b.orderedAt) - +new Date(a.orderedAt));
        const newData = [];
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].itemOrders.length; j++) {
            const singleData = data[i].itemOrders[j];
            singleData["orderedAt"] = data[i].orderedAt;
            singleData["orderStatus"] = data[i].orderStatus;
            singleData["pickupDate"] = data[i].pickupDate;
            singleData["orderId"] = data[i].orderId;
            newData.push(singleData);
          }
        }
        setOrderlist(newData);
        setFilterlist(newData);
      })
      .catch((err) => console.error(err));

interface로 명시해서 수정했다.
여기까지 에러부터 처리하고 보니,
AxiosInstance 및 공통 컴포넌트들을 만들어서 겹치는 코드통합부터 하려고 한다.
에러 처리는 거의 다 했으니 내일부턴 공통 컴포넌트들을 만드려고 한다.