DiaryAnalysisModal

if (res.status === 200) {
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userState.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
    });
}
throw new Error("error");

DiaryCreateModal

if (res.status === 201) {
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userState.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      createDiary({ diaryData, accessToken: data.accessToken });
    });
}
throw new Error("error");

DiaryReadModal

if (res.status === 204) {
  return res;
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${data.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      deleteDiary({
        diaryUuid: diaryState.diaryUuid,
        accessToken: data.accessToken,
      });
    });
}
throw new Error("error");

DiaryUpdateModal

if (res.status === 204) {
  refetch();
  setDiaryState((prev) => ({
    ...prev,
    isRead: true,
  }));
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${data.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      updateDiary({
        diaryData: diaryData,
        accessToken: data.accessToken,
      });
    });
}
throw new Error("error");

PurchaseModal

if (res.status === 200) {
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userState.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
    });
}
throw new Error("error");

MainPage

if (res.status === 200) {
  setLoaded(true);
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userState.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
    });
}
throw new Error("error");

if (res.status === 200) {
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userState.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
    });
}
throw new Error("error");

StarPage

if (res.status === 204) {
  refetch();
  pointsRefetch();
  setStarState((prev) => ({
    ...prev,
    selected: null,
  }));
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${data.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      updateDiary({
        accessToken: data.accessToken,
        diaryData,
      });
    });
}
throw new Error("error");

if (res.status === 201) {
  return res.json();
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${data.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      createLine({
        uuid1: selected.uuid,
        uuid2: uuid,
        accessToken: data.accessToken,
      });
    });
}
throw new Error("error");

if (res.status === 204) {
  return res;
}
if (res.status === 403) {
  setDiaryState((prev) => ({
    ...prev,
    isRedirect: true,
  }));
}
if (res.status === 401) {
  return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${data.accessToken}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (localStorage.getItem("accessToken")) {
        localStorage.setItem("accessToken", data.accessToken);
      }
      if (sessionStorage.getItem("accessToken")) {
        sessionStorage.setItem("accessToken", data.accessToken);
      }
      setUserState((prev) => ({
        ...prev,
        accessToken: data.accessToken,
      }));
      deleteLine({
        id,
        accessToken: data.accessToken,
      });
    });
}
throw new Error("error");

→ 보라색으로 칠한 부분들이 공통되지 않은 부분이다. 해당 부분을 변경점으로 잡고 함수 인자로 전달한다.

→ recoil의 hook까지 전달해야 하는 이슈가 존재, 이를 해결하기 위해 recoil state 다루는 부분까지 합쳐서 callback으로 설정