feat: prefetch를 적용해요 (#323) (#324)

createhb21 · web-flow · commit ad6c1477734b · 2025-02-23T16:33:10.000+09:00
* feat: prefetch를 적용해요 (#323) * chore: type err fix (#323)
diff --git a/services/ahhachul.com/src/apis/request/complaint.ts b/services/ahhachul.com/src/apis/request/complaint.ts
@@ -23,7 +23,6 @@ export const fetchComplaintList = async (req: ComplaintListParams) => {
 };
 
 export const createComplaint = async (req: ComplaintForm) => {
-  console.log('req:', req);
   const formData = new FormData();
   const formDataWithoutImages = extractFormData(req, 'images');
   const jsonBlob = createJsonBlob(formDataWithoutImages);
diff --git a/services/ahhachul.com/src/apis/request/subway.ts b/services/ahhachul.com/src/apis/request/subway.ts
@@ -1,10 +1,19 @@
 import axiosInstance from '@/apis/fetcher';
-import { ITrain, WithSubwayLineId, WithSubwayStationId, type ApiResponse } from '@/types';
+import {
+  ITrain,
+  SubwayLineServerModel,
+  WithSubwayLineId,
+  WithSubwayStationId,
+  type ApiResponse,
+} from '@/types';
 
 interface APITrainInfoParams extends WithSubwayLineId, WithSubwayStationId {}
 interface APITrainInfoResponse {
   trainRealTimes: ITrain[];
 }
 
+export const fetchSubwayLines = async () =>
+  await axiosInstance.get<ApiResponse<SubwayLineServerModel>>('/subway-lines');
+
 export const fetchTrainInfo = (params: APITrainInfoParams) =>
   axiosInstance.get<ApiResponse<APITrainInfoResponse>>('/trains/real-times', { params });
diff --git a/services/ahhachul.com/src/apis/request/user.ts b/services/ahhachul.com/src/apis/request/user.ts
@@ -1,12 +1,33 @@
+import axios from 'axios';
+
 import axiosInstance from '@/apis/fetcher';
 import type { ApiResponse, UserProfileResponseDto } from '@/types';
+import { getAccessTokenInLocalStorage } from '@/utils/localStorage';
+
+import { BASE_URL } from '../baseUrl';
+import { API_PREFIX } from '../endpointPrefix';
 
 export const fetchUserProfile = async () => {
   const { data } = await axiosInstance.get<ApiResponse<UserProfileResponseDto>>('/members');
 
   return data;
 };
 
+export const prefetchUserProfile = async () => {
+  const accessToken = getAccessTokenInLocalStorage();
+
+  const { data } = await axios.get<ApiResponse<UserProfileResponseDto>>(
+    `${BASE_URL.SERVER}${API_PREFIX}/members`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+
+  return data;
+};
+
 export const fetchUserFavoriteStations = async () => {
   const { data } = await axiosInstance.get<ApiResponse<{ id: 'hello' }>>(
     '/members/bookmarks/stations',
diff --git a/services/ahhachul.com/src/components/common/editor/plugins/hooks/useReport.ts b/services/ahhachul.com/src/components/common/editor/plugins/hooks/useReport.ts
@@ -43,7 +43,6 @@ export function useReport(): (arg0: string) => ReturnType<typeof setTimeout> {
   return useCallback(
     content => {
       // eslint-disable-next-line no-console
-      console.log(content);
       const element = getElement();
       if (timer.current !== null) {
         clearTimeout(timer.current);
diff --git a/services/ahhachul.com/src/components/domain/complaint/searchResults/searchedList/SearchedList.component.tsx b/services/ahhachul.com/src/components/domain/complaint/searchResults/searchedList/SearchedList.component.tsx
@@ -23,7 +23,7 @@ const ComplaintSearchedList = ({
     subwayLineId,
   });
 
-  const lostArticles = extractInfinitePageData(data);
+  const complaintArticles = extractInfinitePageData(data);
 
   const throttledFetchNextPage = useThrottle(() => {
     if (!isFetchingNextPage) {
@@ -35,11 +35,11 @@ const ComplaintSearchedList = ({
     callback: throttledFetchNextPage,
   });
 
-  if (!lostArticles.length) return <UiComponent.EmptyList />;
+  if (!complaintArticles.length) return <UiComponent.EmptyList />;
 
   return (
     <S.Section isScale={isScale}>
-      {lostArticles.map((post, idx) => (
+      {complaintArticles.map((post, idx) => (
         <StackFlow.Link
           key={`${post.id}${idx}`}
           activityName="ComplaintDetailPage"
diff --git a/services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx b/services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx
@@ -18,8 +18,6 @@ interface LostFoundDetailProps {
 const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
   const { data: post } = useFetchLostFoundDetail(id);
 
-  console.log('post', post);
-
   const images = post.isFromLost112
     ? [
         {
diff --git a/services/ahhachul.com/src/contexts/tanstack-query.tsx b/services/ahhachul.com/src/contexts/tanstack-query.tsx
@@ -2,7 +2,7 @@ import React, { type PropsWithChildren } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-const queryClient = new QueryClient({
+export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
diff --git a/services/ahhachul.com/src/hooks/domain/my/useUser.ts b/services/ahhachul.com/src/hooks/domain/my/useUser.ts
@@ -5,7 +5,7 @@ import { ApiResponse, UserProfileResponseDto } from '@/types';
 
 const useUser = () => {
   const queryClient = useQueryClient();
-  const data = queryClient.getQueryData<ApiResponse<UserProfileResponseDto>>(userKeys.infos());
+  const data = queryClient.getQueryData<ApiResponse<UserProfileResponseDto>>(userKeys.info());
 
   return { user: data?.result ?? null };
 };
diff --git a/services/ahhachul.com/src/main.tsx b/services/ahhachul.com/src/main.tsx
@@ -1,10 +1,35 @@
-import { Suspense } from 'react';
-import { createRoot } from 'react-dom/client';
+import { prefetchUserProfile } from './apis/request';
+import { fetchSubwayLines } from './apis/request/subway';
+import { queryClient } from './contexts/tanstack-query';
+import { subwayKeys } from './services/subway';
+import { userKeys } from './services/user';
+import { getAccessTokenInLocalStorage } from './utils/localStorage';
 
-import App from './App';
+async function init() {
+  await queryClient.prefetchQuery({
+    queryKey: subwayKeys.subwayLine(),
+    queryFn: fetchSubwayLines,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
 
-createRoot(document.getElementById('root')!).render(
-  <Suspense fallback={null}>
-    <App />
-  </Suspense>,
-);
+  const accessToken = getAccessTokenInLocalStorage();
+
+  if (accessToken) {
+    try {
+      await queryClient.prefetchQuery({
+        queryKey: userKeys.info(),
+        queryFn: prefetchUserProfile,
+        retry: false,
+      });
+    } catch (error) {
+      console.log('Failed to prefetch user profile, continuing...');
+    }
+  }
+
+  const { render } = await import('./render');
+
+  render();
+}
+
+init();
diff --git a/services/ahhachul.com/src/pages/my/page.tsx b/services/ahhachul.com/src/pages/my/page.tsx
@@ -4,10 +4,16 @@ import type { ActivityComponentType } from '@stackflow/react';
 
 import { ChevronIcon } from '@/assets/icons/system';
 import { HeaderComponent, LayoutComponent } from '@/components';
+import { useFetchSubwayLines } from '@/services/subway';
+import { useFetchUserProfile } from '@/services/user';
 import { useFlow } from '@/stackflow';
 
 const MyPage: ActivityComponentType = () => {
   const { push } = useFlow();
+  const { data } = useFetchSubwayLines();
+  const { data: userInfo } = useFetchUserProfile();
+  console.log('useFetchSubwayLines data :', data);
+  console.log('userInfo data :', userInfo);
 
   return (
     <LayoutComponent.Base
diff --git a/services/ahhachul.com/src/pages/my/setting.tsx b/services/ahhachul.com/src/pages/my/setting.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type React from 'react';
 import { useState, useTransition } from 'react';
 
@@ -9,10 +7,11 @@ import type { ActivityComponentType } from '@stackflow/react';
 
 import { CloseIcon, SearchIcon } from '@/assets/icons/system';
 import { LayoutComponent } from '@/components';
-import { DEFAULT_STATIONS, subwayLineHexColors, subwayLineOptions } from '@/constants';
+import { subwayLineHexColors, subwayLineOptions } from '@/constants';
+import { useFetchSubwayLines } from '@/services/subway';
 import { useFlow } from '@/stackflow';
 import { useUserStationStore } from '@/stores/subway';
-import type { SubwayLineType, UserStationList } from '@/types';
+import type { Stations, SubwayLineType, UserStationList } from '@/types';
 import { applyHighlight } from '@/utils/text';
 
 interface StationLabel {
@@ -29,14 +28,15 @@ const LABEL_OPTIONS = [
 
 const SettingPage: ActivityComponentType = () => {
   const { pop } = useFlow();
+  const { data: DEFAULT_STATIONS } = useFetchSubwayLines();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
   const [labeledStations, setLabeledStations] = useState<StationLabel[]>([]);
   const [isPending, startTransition] = useTransition();
 
   const setUserStations = useUserStationStore(state => state.setUserStations);
 
-  const allStations = Object.keys(DEFAULT_STATIONS);
+  const allStations = Object.keys(DEFAULT_STATIONS as Stations);
 
   const displayStations = searchTerm
     ? allStations.filter(name => name.toLowerCase().includes(searchTerm.toLowerCase()))
@@ -45,12 +45,12 @@ const SettingPage: ActivityComponentType = () => {
   const renderLineNumbers = (stationName: string) => {
     return (
       <LineNumberContainer>
-        {DEFAULT_STATIONS[stationName as keyof typeof DEFAULT_STATIONS].map(station => (
+        {DEFAULT_STATIONS?.[stationName as keyof typeof DEFAULT_STATIONS].map((station, idx) => (
           <LineNumber
-            key={`${stationName}-${station.parentLineId}`}
+            key={`${stationName}_${station.parentLineId}_${idx}`}
             lineNumber={station.parentLineId}
           >
-            {subwayLineOptions[String(station.parentLineId) as SubwayLineType].slice(0, 1)}
+            {subwayLineOptions[String(station.parentLineId) as SubwayLineType]?.slice(0, 1)}
           </LineNumber>
         ))}
       </LineNumberContainer>
@@ -105,8 +105,8 @@ const SettingPage: ActivityComponentType = () => {
         </SearchWrapper>
 
         <SearchResults $isPending={isPending}>
-          {displayStations.map(name => (
-            <StationContainer key={name}>
+          {displayStations.map((name, idx) => (
+            <StationContainer key={`${name}_${idx}`}>
               <SearchResultItem onClick={() => handleStationSelect(name)}>
                 {renderLineNumbers(name)}
                 {applyHighlight(searchTerm, name)}
@@ -119,14 +119,14 @@ const SettingPage: ActivityComponentType = () => {
 
               {selectedStation === name && (
                 <LabelOptions>
-                  {LABEL_OPTIONS.map(option => {
+                  {LABEL_OPTIONS.map((option, idx) => {
                     const isDisabled =
                       option.id !== getStationLabel(name) &&
                       labeledStations.some(s => s.label === option.id);
 
                     return (
                       <LabelButton
-                        key={option.id}
+                        key={`${option.id}_${idx}`}
                         onClick={() => {
                           if (getStationLabel(name) === option.id) {
                             setLabeledStations(labeledStations.filter(s => s.stationName !== name));
@@ -165,9 +165,9 @@ const SettingPage: ActivityComponentType = () => {
               }
             `}
           >
-            {labeledStations.map(item => (
+            {labeledStations.map((item, idx) => (
               <LabelButton
-                key={item.label}
+                key={`${item.label}_${idx}`}
                 css={css`
                   background-color: #242424;
                   color: #ffffff;
@@ -207,7 +207,7 @@ const SettingPage: ActivityComponentType = () => {
                 name: station.stationName,
                 label: LABEL_OPTIONS.find(l => l.id === station.label)?.text || '',
                 stationInfos:
-                  DEFAULT_STATIONS[station.stationName as keyof typeof DEFAULT_STATIONS],
+                  DEFAULT_STATIONS?.[station.stationName as keyof typeof DEFAULT_STATIONS],
               }));
 
               setUserStations(formattedStations as unknown as UserStationList);
diff --git a/services/ahhachul.com/src/render.tsx b/services/ahhachul.com/src/render.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+function render() {
+  const root = createRoot(document.getElementById('root')!);
+
+  root.render(
+    <Suspense fallback={null}>
+      <App />
+    </Suspense>,
+  );
+}
+
+export { render };
diff --git a/services/ahhachul.com/src/services/complaint.ts b/services/ahhachul.com/src/services/complaint.ts
@@ -13,6 +13,7 @@ import { useFlow } from '@/stackflow';
 import { SubwayLineFilterOptions } from '@/types';
 import type { ComplaintForm, ComplaintListParams } from '@/types/complaint';
 import { formatSubwayFilterOption } from '@/utils';
+import { extractTextFromLexical } from '@/utils/lexical';
 
 export const complaintKeys = {
   all: ['complaint'] as const,
@@ -44,6 +45,15 @@ export const useFetchComplaintList = (filters: ComplaintListParams<SubwayLineFil
         ...(pageParam && { pageToken: pageParam }),
       }),
     getNextPageParam: lastPage => lastPage.result.pageToken,
+    select: res => {
+      res.pages[res.pages.length - 1].result.data = res.pages[res.pages.length - 1].result.data.map(
+        v => ({
+          ...v,
+          title: extractTextFromLexical(v.content, v.complaintType).slice(0, 20),
+        }),
+      );
+      return res;
+    },
   });
 };
 
@@ -78,7 +88,15 @@ export const useFetchComplaintDetail = (id: number) =>
     queryKey: complaintKeys.detail(id),
     queryFn: () => api.fetchComplaintDetail(id),
     staleTime: 5 * TIMESTAMP.MINUTE, // 5분
-    select: res => res.data.result,
+    select: res => {
+      return {
+        ...res.data.result,
+        title: extractTextFromLexical(res.data.result.content, res.data.result.complaintType).slice(
+          0,
+          20,
+        ),
+      };
+    },
   });
 
 export const useFetchComplaintCommentList = (id: number) =>
diff --git a/services/ahhachul.com/src/services/subway.ts b/services/ahhachul.com/src/services/subway.ts
@@ -1,19 +1,33 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchTrainInfo } from '@/apis/request/subway';
+import { fetchSubwayLines, fetchTrainInfo } from '@/apis/request/subway';
 import { APITrainInfoParams } from '@/types';
+import { formatSubwayLineInfo } from '@/utils';
 
 export const subwayKeys = {
   all: ['subway'] as const,
-  lists: () => [...subwayKeys.all, 'list'] as const,
-  list: (filters: (string | number)[]) => [...subwayKeys.lists(), ...filters] as const,
-  details: () => [...subwayKeys.all, 'detail'] as const,
-  detail: (id: number) => [...subwayKeys.details(), id] as const,
+  subwayLine: () => [...subwayKeys.all, 'subway-line'] as const,
+  trains: () => [...subwayKeys.all, 'list'] as const,
+  train: (filters: (string | number)[]) => [...subwayKeys.trains(), ...filters] as const,
 };
 
+export const useFetchSubwayLines = () =>
+  useQuery({
+    queryKey: subwayKeys.subwayLine(),
+    queryFn: fetchSubwayLines,
+    gcTime: Infinity,
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    select: res => {
+      return formatSubwayLineInfo(res.data.result);
+    },
+  });
+
 export const useFetchTrainInfo = (params: APITrainInfoParams) =>
   useQuery({
-    queryKey: subwayKeys.list(Object.values(params)),
+    queryKey: subwayKeys.train(Object.values(params)),
     queryFn: () => fetchTrainInfo(params),
     select: res => {
       return res.data.result;
diff --git a/services/ahhachul.com/src/services/user.ts b/services/ahhachul.com/src/services/user.ts
diff --git a/services/ahhachul.com/src/types/subway.ts b/services/ahhachul.com/src/types/subway.ts
diff --git a/services/ahhachul.com/src/utils/format.ts b/services/ahhachul.com/src/utils/format.ts
diff --git a/services/ahhachul.com/src/utils/lexical.ts b/services/ahhachul.com/src/utils/lexical.ts
diff --git a/services/ahhachul.com/src/utils/localStorage.ts b/services/ahhachul.com/src/utils/localStorage.ts
diff --git a/services/ahhachul.com/src/vite-env.d.ts b/services/ahhachul.com/src/vite-env.d.ts

Original file line number	Diff line number	Diff line change
`@@ -18,8 +18,6 @@ interface LostFoundDetailProps {`
`18`	`18`	`const LostFoundDetail = ({ id }: LostFoundDetailProps) => {`
`19`	`19`	`const { data: post } = useFetchLostFoundDetail(id);`
`20`	`20`
`21`		`- console.log('post', post);`
`22`		`-`
`23`	`21`	`const images = post.isFromLost112`
`24`	`22`	`? [`
`25`	`23`	`{`