성능 최적화를 위한 리액트 쿼리 캐시정책 설정 및 불필요한 fetch하지 않기 (#626)

* chore: (#619) 리액트 쿼리 캐싱 확인을 위한 세팅

* feat: (#619) 마감된 게시물 상세정보 1시간 캐싱하기

* design: 에러 메세지 컴포넌트 어절 단위로 개행 및 상하 마진 수정

* feat: (#619) 통계 서버데이터 형식을 사용처가 아닌 불러오는 곳에서 형식 변경

* feat: (#619) 통계 페이지 리액트 쿼리로 수정 및 서스펜스, 에러바운더리 적용

* fix: 통계 api msw에서 실서버로 요청 전환

* fix: thead, tbody가 없어서 발생하는 에러 해결

* fix: (#627) 개발서버 오리진 url 수정 (#628)

* style: (#622) 선택지가 왼쪽으로 움직이는 버그 수정

* fix: (#629) https 로컬호스트 오리진 url 추가 (#630)

* feat: (#602) 본문 이미지를 붙여넣기 이벤트로 이미지를 첨부할 수 있도록 구현

* refactor: (#602) 선택지 작성에서 중복되는 업로드 이미지 코드를 리팩터링한 것을 적용

* refactor: (#602) 사용하지 않는 async 제거, 부자연스러운 함수명 변경

* refactor: (#619) 불분명한 변수명 수정

* feat: 열정유저 테이블 내 2개의 api 중 하나라도 로딩/에러 시 테이블 폴백처리

* refactor: (#619) 사용하지 않는 useFetch 삭제

* feat: (#619) 통계 페이지 에러바운더리/ 서스펜스 범위 수정

- 기존: 글 전체 통계에 서스펜스와 에러바운더리 적용, post api에는 에러바운더리만 적용
- 수정: 글 전체 통계와 post Api 한번에 감싸는 서스펜스와 에러바운더리 적용

* refactor: (#619) 서스펜스, 에러바운더리 감싸는 순서를 기존 코드와 통일

- 에러바운더리 안에 서스펜스, 그 안에 api 호출하는 컴포넌트

* feat: 리액트 쿼리 데브 툴 설정

---------

Co-authored-by: lookh <[email protected]>
Co-authored-by: Gilpop8663 <[email protected]>

frontend/package.json

@@ -46,6 +46,7 @@
     "@storybook/react": "^7.0.26",
     "@storybook/react-webpack5": "^7.0.26",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ThemeProvider } from 'styled-components';
 
 import { AuthProvider } from '@hooks/context/auth';
@@ -37,8 +38,10 @@ const App = () => (
           </AuthProvider>
         </PostOptionProvider>
       </ThemeProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </ErrorBoundaryForTopClass>
+
 );
 
 export default App;

frontend/src/api/voteResult.ts

@@ -1,11 +1,14 @@
-import { VoteResultResponse } from '@components/VoteStatistics/type';
+import { VoteResult, VoteResultResponse } from '@components/VoteStatistics/type';
+import { transVoteStatisticsFormat } from '@components/VoteStatistics/util';
 
 import { getFetch } from '@utils/fetch';
 
 const BASE_URL = process.env.VOTOGETHER_BASE_URL;
 
-export const getPostStatistics = async (postId: number): Promise<VoteResultResponse> => {
-  return await getFetch<VoteResultResponse>(`${BASE_URL}/posts/${postId}/options`);
+export const getPostStatistics = async (postId: number): Promise<VoteResult> => {
+  const data = await getFetch<VoteResultResponse>(`${BASE_URL}/posts/${postId}/options`);
+
+  return transVoteStatisticsFormat(data);
 };
 
 export const getOptionStatistics = async ({
@@ -14,6 +17,10 @@ export const getOptionStatistics = async ({
 }: {
   postId: number;
   optionId: number;
-}): Promise<VoteResultResponse> => {
-  return await getFetch<VoteResultResponse>(`${BASE_URL}/posts/${postId}/options/${optionId}`);
+}): Promise<VoteResult> => {
+  const data = await getFetch<VoteResultResponse>(
+    `${BASE_URL}/posts/${postId}/options/${optionId}`
+  );
+
+  return transVoteStatisticsFormat(data);
 };

frontend/src/components/VoteStatistics/VoteStatistics.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { MOCK_VOTE_RESULT } from '@mocks/mockData/voteResult';
 
+import { transVoteStatisticsFormat } from './util';
+
 import VoteStatistics from '.';
 
 const meta: Meta<typeof VoteStatistics> = {
@@ -12,13 +14,19 @@ export default meta;
 type Story = StoryObj<typeof VoteStatistics>;
 
 export const SizeSm: Story = {
-  render: () => <VoteStatistics size="sm" voteResultResponse={MOCK_VOTE_RESULT} />,
+  render: () => (
+    <VoteStatistics size="sm" voteResult={transVoteStatisticsFormat(MOCK_VOTE_RESULT)} />
+  ),
 };
 
 export const SizeMd: Story = {
-  render: () => <VoteStatistics size="md" voteResultResponse={MOCK_VOTE_RESULT} />,
+  render: () => (
+    <VoteStatistics size="md" voteResult={transVoteStatisticsFormat(MOCK_VOTE_RESULT)} />
+  ),
 };
 
 export const SizeLg: Story = {
-  render: () => <VoteStatistics size="lg" voteResultResponse={MOCK_VOTE_RESULT} />,
+  render: () => (
+    <VoteStatistics size="lg" voteResult={transVoteStatisticsFormat(MOCK_VOTE_RESULT)} />
+  ),
 };

frontend/src/components/VoteStatistics/index.tsx

@@ -5,16 +5,15 @@ import { Size } from '@type/style';
 import OneLineGraph from './OneLineGraph';
 import * as S from './style';
 import TwoLineGraph from './TwoLineGraph';
-import { VoteResultResponse } from './type';
-import { transVoteStatisticsFormat } from './util';
+import { VoteResult } from './type';
 
 interface RadioMode {
   all: string;
   gender: string;
 }
 
 export interface VoteStatisticsProps {
-  voteResultResponse: VoteResultResponse;
+  voteResult: VoteResult;
   size: Size;
 }
 
@@ -25,13 +24,11 @@ const radioMode: RadioMode = {
 
 type RadioCategory = keyof RadioMode;
 
-export default function VoteStatistics({ voteResultResponse, size }: VoteStatisticsProps) {
+export default function VoteStatistics({ voteResult, size }: VoteStatisticsProps) {
   const [currentRadioMode, setCurrentRadioMode] = useState<RadioCategory>('all');
 
   const radioModeKey = Object.keys(radioMode) as RadioCategory[];
 
-  const voteResult = transVoteStatisticsFormat(voteResultResponse);
-
   const changeMode = (e: MouseEvent<HTMLInputElement>) => {
     const target = e.target as HTMLInputElement;
     const targetCategory = target.value as RadioCategory;