[레거시] data fetching 방식 통일

[eonseok-jeon]

Summary

close #394

• main page -> 방문자 수 data
• recruit page -> 프로젝트 sample data
• about page -> 회장단 data

useFetch hook으로 data 받아오는 방식에서 tanstack query로 받아오는 방식으로 변경했습니다.

폴더 구조는 hooks > queries > useGetSomething.ts 로 잡았습니다. 이유는 다른 곳 보니까 이런 식으로 진행되고 있더라고요?

const getSomething = async () => {
  const data = await api.someAPI.getSomething();

  return data;
};

export default function useGetSomething() {
  const { data, isLoading } = useQuery({
    queryKey: ['something'],
    queryFn: getSomething,
  });

  return { data, isLoading };
}

이런 식의 구조가 반복되어서 하나의 hook으로 빼려 했으나, 복잡한 로직도 아니고, hook으로 빼는 과정에서 추가 리소스 드는 거 같아 빼진 않았습니다.

---

default error 처리는 하지 않았습니다. 에러 뜨면 자동으로 404, 500 page로 이동할테니 말이죠?

[height[bot]]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

좋습니다 일관성 작업 하시느라 수고 많으셨어요! 👍

폴더구조 관련해서 의견 내자면, 원래 ~Page > hooks > queries > 파일 이렇게 구조가 잡혀있던 것이 맞지만, 해당 방식은 useQuery와 useFetch 방식이 혼용되고 있었기 때문이라고 생각합니다. useQuery로 데이터패칭 방식이 통일되었기 때문에, 모든 디렉토리의 hooks > queries는 불필요하게 계층이 깊어지는 것이라고 생각해요! 따라서 queries로 분리할 필요 없이 hooks 디렉토리 내에 바로 쿼리 파일들 위치시켜도 된다고 생각하는데, 언석님 의견은 어떠실까요?!

음 fetch 관련해서만 custom hook이 있는 것은 아니어서 그냥 custom hook과 query 관련 hook을 구분해 주기 위해 폴더를 나누었다고 생각해요! 실제로 무한 스크롤 시키는 useInfiniteScroll hook도 있고요! 하나, 현재 custom hook의 수가 그리 많지 않아서 구분하지 않았다고 해서 헷갈일 일은 없을 거 같기도 하고, 또 계층이 깊어지는 거 같아 안 좋을 거 같으시다면 일단은 분리하지 않고 사용하다가 추후에 hook의 수가 많아져서 분리가 필요하다고 판단이 되면 그떄 다시 분리해도 좋을 거 같네요~ 수정해 놓겠습니다 :)

[lydiacho]

아하 그렇군요! 좋은 것 같습니다. 감사합니다 ㅎㅎ