[FE] refactor after merge #643, #642

frontend/src/apis/new/index.ts

@@ -2,3 +2,6 @@ import { TopicCardProps } from '../../types/Topic';
 import { http } from './http';
 
 export const getTopics = (url: string) => http.get<TopicCardProps[]>(url);
+
+export const getProfile = () =>
+  http.get<TopicCardProps[] | null>('/members/my/topics');

frontend/src/components/TopicCardList/index.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
+
 import useGetTopics from '../../apiHooks/new/useGetTopics';
 import Button from '../common/Button';
 import Flex from '../common/Flex';
 import Grid from '../common/Grid';
 import Space from '../common/Space';
 import Text from '../common/Text';
 import TopicCard from '../TopicCard';
-import useProfileList from '../../hooks/queries/useProfileList';
 
 interface TopicCardListProps {
   url: string;

frontend/src/constants/index.ts

@@ -5,9 +5,9 @@ export const SIDEBAR = '372px';
 export const LAYOUT_PADDING = '40px';
 
 export const DEFAULT_TOPIC_IMAGE =
-  'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/topic_defaultImage.svg';
+  'https://velog.velcdn.com/images/semnil5202/post/37f3bcb9-0b07-4100-85f6-f1d5ad037c14/image.svg';
 export const DEFAULT_PROFILE_IMAGE =
-  'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg';
+  'https://avatars.githubusercontent.com/u/103165859?v=4';
 
 export const DEFAULT_PROD_URL =
   process.env.APP_URL || 'https://mapbefine.com/api';

frontend/src/hooks/queries/useProfileList.ts

@@ -1,5 +1,6 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { getProfile } from '../../apis/Patrick';
+
+import { getProfile } from '../../apis/new';
 
 const useProfileList = () => {
   const { data, refetch } = useSuspenseQuery({

frontend/src/index.tsx

@@ -2,7 +2,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ReactDOM from 'react-dom/client';
 import ReactGA from 'react-ga4';
 import { ThemeProvider } from 'styled-components';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import App from './App';
 import ErrorBoundary from './components/ErrorBoundary';
@@ -25,8 +24,6 @@ const rootElement = document.getElementById('root');
 if (!rootElement) throw new Error('Failed to find the root element');
 const root = ReactDOM.createRoot(rootElement);
 
-const queryClient = new QueryClient();
-
 // if (process.env.NODE_ENV === 'development') {
 //   const { worker } = require('./mocks/browser');
 //   worker.start({ quiet: true });

frontend/src/pages/Profile.tsx

@@ -16,14 +16,10 @@ import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 const TopicCardList = lazy(() => import('../components/TopicCardList'));
 
 function Profile() {
-  const { routePage } = useNavigator();
+  const { routingHandlers } = useNavigator();
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('profile');
 
-  const goToNewTopic = () => {
-    routePage('/new-topic');
-  };
-
   return (
     <Wrapper>
       <MyInfoWrapper $justifyContent="center" $alignItems="center">
@@ -56,10 +52,9 @@ function Profile() {
       <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
           url="/members/my/topics"
-          errorMessage="로그인 후 이용해주세요."
           commentWhenEmpty="추가하기 버튼을 눌러 지도를 추가해보세요."
-          pageCommentWhenEmpty="지도 만들러 가기"
-          routePage={goToNewTopic}
+          routePageName="메인 페이지로 가기"
+          routePage={routingHandlers.home}
         />
       </Suspense>
 

frontend/src/router.tsx

@@ -7,7 +7,6 @@ import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 import RootPage from './pages/RootPage';
 import Search from './pages/Search';
-import TopicListSkeleton from './components/Skeletons/TopicListSkeleton';
 
 const SelectedTopic = lazy(() => import('./pages/SelectedTopic'));
 const NewPin = lazy(() => import('./pages/NewPin'));