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

backend/src/main/java/com/votogether/global/config/WebMvcConfig.java

@@ -12,7 +12,8 @@
 public class WebMvcConfig implements WebMvcConfigurer {
 
  private static final String LOCALHOST_FRONTEND = "http://localhost:3000";
- private static final String DEV_SERVER = "http://dev.votogether.com";
+ private static final String HTTPS_LOCALHOST_FRONTEND = "https://localhost:3000";
+ private static final String DEV_SERVER = "https://dev.votogether.com";
  private static final String PROD_SERVER = "https://votogether.com";
 
  private final JwtAuthorizationArgumentResolver jwtAuthorizationArgumentResolver;
@@ -30,7 +31,7 @@ public void addArgumentResolvers(final List<HandlerMethodArgumentResolver> resol
  public void addCorsMappings(final CorsRegistry registry) {
  registry.addMapping("/**")
  .allowedHeaders("*")
- .allowedOrigins(LOCALHOST_FRONTEND, DEV_SERVER, PROD_SERVER)
+ .allowedOrigins(HTTPS_LOCALHOST_FRONTEND, LOCALHOST_FRONTEND, DEV_SERVER, PROD_SERVER)
  .allowedMethods("*")
  .allowCredentials(true)
  .exposedHeaders(HttpHeaders.LOCATION, HttpHeaders.SET_COOKIE);

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/PostForm/index.tsx

@@ -67,6 +67,8 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  const contentImageHook = useContentImage(
  serverImageUrl && convertImageUrlToServerUrl(serverImageUrl)
  );
+ const { handlePasteImage } = contentImageHook;
+
  const writingOptionHook = useWritingOption(
  serverVoteInfo?.options.map(option => ({
  ...option,
@@ -233,6 +235,7 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  placeholder={CONTENT_PLACEHOLDER}
  maxLength={POST_CONTENT.MAX_LENGTH}
  minLength={POST_CONTENT.MIN_LENGTH}
+ onPaste={handlePasteImage}
  required
  />
  <S.ContentLinkButtonWrapper>

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)} />
+ ),
 };