[FE] Refactor/#642: 북마크 및 전체보기 페이지 API 로직 수정 및 React-Query 적용

frontend/src/apiHooks/new/useGetAllTopics.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getAllTopics } from '../../apis/new';
+
+const useGetAllTopics = () => {
+  const { isLoading, data: allTopics } = useQuery({
+    queryKey: ['GetAllTopics'],
+    queryFn: getAllTopics,
+  });
+
+  return { isLoading, allTopics };
+};
+
+export default useGetAllTopics;

frontend/src/apiHooks/new/useGetBestTopics.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBestTopics } from '../../apis/new';
+
+const useGetBestTopics = () => {
+  const { isLoading, data: bestTopics } = useQuery({
+    queryKey: ['GetBestTopics'],
+    queryFn: getBestTopics,
+  });
+
+  return { isLoading, bestTopics };
+};
+
+export default useGetBestTopics;

frontend/src/apiHooks/new/useGetBookmarks.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBookmarks } from '../../apis/new';
+
+const useGetBookmarks = () => {
+  const { isLoading, data: bookmarks } = useQuery({
+    queryKey: ['GetBookmarks'],
+    queryFn: getBookmarks,
+  });
+
+  return { isLoading, bookmarks };
+};
+
+export default useGetBookmarks;

frontend/src/apiHooks/new/useGetNewestTopics.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getNewestTopics } from '../../apis/new';
+
+const useGetNewestTopics = () => {
+  const { isLoading, data: newestTopics } = useQuery({
+    queryKey: ['GetNewestTopics'],
+    queryFn: getNewestTopics,
+  });
+
+  return { isLoading, newestTopics };
+};
+
+export default useGetNewestTopics;

frontend/src/apis/new/http.ts

@@ -0,0 +1,98 @@
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+} from 'axios';
+
+const API_POSTFIX = 'api';
+const BASE_URL = process.env.APP_URL || `https://mapbefine.com/${API_POSTFIX}`;
+const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: { Authorization: `Bearer ${localStorage.getItem('userToken')}` },
+});
+
+let refreshResponse: Promise<Response> | null = null;
+
+export interface HttpClient extends AxiosInstance {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  post<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  patch<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  put<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+}
+
+export const http: HttpClient = axiosInstance;
+
+http.interceptors.response.use((res) => res.data);
+http.interceptors.request.use(
+  async (config) => {
+    const userToken = localStorage.getItem('userToken');
+
+    if (userToken && isTokenExpired(userToken)) {
+      await updateToken(config.headers);
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+const isTokenExpired = (token: string) => {
+  const decodedPayloadObject = decodeToken(token);
+  return decodedPayloadObject.exp * 1000 < Date.now();
+};
+
+const decodeToken = (token: string) => {
+  const tokenParts = token.split('.');
+
+  if (tokenParts.length !== 3) {
+    throw new Error('토큰이 잘못되었습니다.');
+  }
+
+  const decodedPayloadString = atob(tokenParts[1]);
+
+  return JSON.parse(decodedPayloadString);
+};
+
+async function updateToken(headers: AxiosRequestHeaders) {
+  const response = await refreshToken(headers);
+  const responseCloned = response.clone();
+  const newToken = await responseCloned.json();
+
+  localStorage.setItem('userToken', newToken.accessToken);
+}
+
+async function refreshToken(headers: AxiosRequestHeaders): Promise<Response> {
+  if (refreshResponse !== null) {
+    return refreshResponse;
+  }
+
+  const accessToken = localStorage.getItem('userToken');
+  refreshResponse = fetch(`${BASE_URL}/refresh-token`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      accessToken,
+    }),
+  });
+
+  const responseData = await refreshResponse;
+  refreshResponse = null;
+
+  if (!responseData.ok) {
+    throw new Error('Failed to refresh access token.');
+  }
+
+  return responseData;
+}

frontend/src/apis/new/index.ts

@@ -0,0 +1,12 @@
+import { TopicCardProps } from '../../types/Topic';
+import { http } from './http';
+
+export const getBookmarks = () =>
+  http.get<TopicCardProps[]>('/members/my/bookmarks');
+
+export const getNewestTopics = () =>
+  http.get<TopicCardProps[]>('/topics/newest');
+
+export const getAllTopics = () => http.get<TopicCardProps[]>('/topics');
+
+export const getBestTopics = () => http.get<TopicCardProps[]>('/topics/bests');

frontend/src/components/Skeletons/TopicCardSkeleton.tsx

@@ -1,53 +1,21 @@
 import { keyframes, styled } from 'styled-components';
 
-import Flex from '../common/Flex';
+import Box from '../common/Box';
 import Space from '../common/Space';
+import SkeletonBox from './common/SkeletonBox';
 
 function TopicCardSkeleton() {
   return (
-    <Flex $flexDirection="row">
-      <SkeletonImg />
-      <Space size={2} />
-      <Flex $flexDirection="column">
-        <SkeletonTitle />
-        <Space size={5} />
-        <SkeletonDescription />
-      </Flex>
-    </Flex>
+    <Box>
+      <SkeletonBox width="100%" $maxWidth={212} ratio="1.6 / 1" />
+      <Space size={1} />
+      <SkeletonBox width={212} height={25} />
+      <Space size={5} />
+      <SkeletonBox width={100} height={25} />
+      <Space size={1} />
+      <SkeletonBox width={212} height={46} />
+    </Box>
   );
 }
 
-const skeletonAnimation = keyframes`
-    from {
-    opacity: 0.1;
-    }
-    to {
-    opacity: 1;
-    }
-`;
-
-const SkeletonImg = styled.div`
-  width: 138px;
-  height: 138px;
-
-  border-radius: 8px;
-
-  background: ${({ theme }) => theme.color.lightGray};
-  animation: ${skeletonAnimation} 1s infinite;
-`;
-
-const SkeletonTitle = styled.div`
-  width: 172px;
-  height: 32px;
-
-  border-radius: 8px;
-
-  background: ${({ theme }) => theme.color.lightGray};
-  animation: ${skeletonAnimation} 1s infinite;
-`;
-
-const SkeletonDescription = styled(SkeletonTitle)`
-  height: 80px;
-`;
-
 export default TopicCardSkeleton;

frontend/src/components/Skeletons/TopicListSkeleton.tsx

@@ -1,26 +1,35 @@
 import { styled } from 'styled-components';
 
+import Space from '../common/Space';
 import TopicCardSkeleton from './TopicCardSkeleton';
 
-function TopicCardContainerSkeleton() {
+function TopicListSkeleton() {
   return (
-    <Wrapper>
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-    </Wrapper>
+    <>
+      <TopicCardWrapper>
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+      </TopicCardWrapper>
+      <Space size={4} />
+      <TopicCardWrapper>
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+      </TopicCardWrapper>
+    </>
   );
 }
 
-const Wrapper = styled.section`
+const TopicCardWrapper = styled.section`
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  width: 1036px;
-  height: 300px;
+  width: 1140px;
 `;
 
-export default TopicCardContainerSkeleton;
+export default TopicListSkeleton;

frontend/src/components/Skeletons/common/SkeletonBox.ts

@@ -0,0 +1,38 @@
+import styled, { keyframes } from 'styled-components';
+
+import { convertCSS } from '../../../utils/convertCSS';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  $maxWidth?: number | string;
+  $maxHeight?: number | string;
+  ratio?: string;
+  radius?: number | string;
+}
+
+const skeletonAnimation = keyframes`
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const SkeletonBox = styled.div<Props>`
+  width: ${({ width }) => width && convertCSS(width)};
+  height: ${({ height }) => height && convertCSS(height)};
+  max-width: ${({ $maxWidth }) => $maxWidth && convertCSS($maxWidth)};
+  max-height: ${({ $maxHeight }) => $maxHeight && convertCSS($maxHeight)};
+  aspect-ratio: ${({ ratio }) => ratio};
+  border-radius: ${({ radius, theme }) =>
+    (radius && convertCSS(radius)) || theme.radius.small};
+  background: ${({ theme }) => theme.color.lightGray};
+  animation: ${skeletonAnimation} 1s infinite;
+`;
+
+export default SkeletonBox;