From 645fbf205217c895b169da00f69a4d2e6b7226e2 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 18 Jan 2024 02:04:43 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=2001.17=20=ED=9A=8C=EC=9D=98=EB=A5=BC?= =?UTF-8?q?=20=ED=86=B5=ED=95=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * TopicCardList 컴포넌트를 이전처럼 활용하도록 한다. 전체보기 및 즐겨찾기는 거의 동일한 형태이며 중복코드가 다량 발생하여 위와 같이 수정한다. * url을 넘겨받음에 따라서 리액트 쿼리 훅, API 요청 로직 또한 하나의 훅으로 재사용한다. --- frontend/src/apiHooks/new/useGetAllTopics.ts | 14 ---- frontend/src/apiHooks/new/useGetBestTopics.ts | 14 ---- frontend/src/apiHooks/new/useGetBookmarks.ts | 14 ---- .../src/apiHooks/new/useGetNewestTopics.ts | 14 ---- frontend/src/apiHooks/new/useGetTopics.ts | 14 ++++ frontend/src/apis/new/index.ts | 10 +-- .../Skeletons/TopicListSkeleton.tsx | 15 +--- .../src/components/TopicCardList/index.tsx | 74 ++++++++++++++++--- frontend/src/pages/Bookmark.tsx | 69 ++++------------- frontend/src/pages/SeeAllAllTopics.tsx | 54 ++++---------- frontend/src/pages/SeeAllBestTopics.tsx | 61 +++++---------- frontend/src/pages/SeeAllNewestTopics.tsx | 62 +++++----------- 12 files changed, 142 insertions(+), 273 deletions(-) delete mode 100644 frontend/src/apiHooks/new/useGetAllTopics.ts delete mode 100644 frontend/src/apiHooks/new/useGetBestTopics.ts delete mode 100644 frontend/src/apiHooks/new/useGetBookmarks.ts delete mode 100644 frontend/src/apiHooks/new/useGetNewestTopics.ts create mode 100644 frontend/src/apiHooks/new/useGetTopics.ts diff --git a/frontend/src/apiHooks/new/useGetAllTopics.ts b/frontend/src/apiHooks/new/useGetAllTopics.ts deleted file mode 100644 index 489ed8366..000000000 --- a/frontend/src/apiHooks/new/useGetAllTopics.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; - -import { getAllTopics } from '../../apis/new'; - -const useGetAllTopics = () => { - const { data: allTopics } = useSuspenseQuery({ - queryKey: ['GetAllTopics'], - queryFn: getAllTopics, - }); - - return { allTopics }; -}; - -export default useGetAllTopics; diff --git a/frontend/src/apiHooks/new/useGetBestTopics.ts b/frontend/src/apiHooks/new/useGetBestTopics.ts deleted file mode 100644 index 8fbdc9b7f..000000000 --- a/frontend/src/apiHooks/new/useGetBestTopics.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; - -import { getBestTopics } from '../../apis/new'; - -const useGetBestTopics = () => { - const { data: bestTopics } = useSuspenseQuery({ - queryKey: ['GetBestTopics'], - queryFn: getBestTopics, - }); - - return { bestTopics }; -}; - -export default useGetBestTopics; diff --git a/frontend/src/apiHooks/new/useGetBookmarks.ts b/frontend/src/apiHooks/new/useGetBookmarks.ts deleted file mode 100644 index d6486d078..000000000 --- a/frontend/src/apiHooks/new/useGetBookmarks.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; - -import { getBookmarks } from '../../apis/new'; - -const useGetBookmarks = () => { - const { data: bookmarks } = useSuspenseQuery({ - queryKey: ['GetBookmarks'], - queryFn: getBookmarks, - }); - - return { bookmarks }; -}; - -export default useGetBookmarks; diff --git a/frontend/src/apiHooks/new/useGetNewestTopics.ts b/frontend/src/apiHooks/new/useGetNewestTopics.ts deleted file mode 100644 index 8a8cf1a9c..000000000 --- a/frontend/src/apiHooks/new/useGetNewestTopics.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; - -import { getNewestTopics } from '../../apis/new'; - -const useGetNewestTopics = () => { - const { data: newestTopics } = useSuspenseQuery({ - queryKey: ['GetNewestTopics'], - queryFn: getNewestTopics, - }); - - return { newestTopics }; -}; - -export default useGetNewestTopics; diff --git a/frontend/src/apiHooks/new/useGetTopics.ts b/frontend/src/apiHooks/new/useGetTopics.ts new file mode 100644 index 000000000..ffb65693b --- /dev/null +++ b/frontend/src/apiHooks/new/useGetTopics.ts @@ -0,0 +1,14 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { getTopics } from '../../apis/new'; + +const useGetTopics = (url: string) => { + const { data: topics, refetch } = useSuspenseQuery({ + queryKey: ['topics', url], + queryFn: () => getTopics(url), + }); + + return { topics, refetch }; +}; + +export default useGetTopics; diff --git a/frontend/src/apis/new/index.ts b/frontend/src/apis/new/index.ts index 422ef9214..a5f81fec0 100644 --- a/frontend/src/apis/new/index.ts +++ b/frontend/src/apis/new/index.ts @@ -1,12 +1,4 @@ import { TopicCardProps } from '../../types/Topic'; import { http } from './http'; -export const getBookmarks = () => - http.get('/members/my/bookmarks'); - -export const getNewestTopics = () => - http.get('/topics/newest'); - -export const getAllTopics = () => http.get('/topics'); - -export const getBestTopics = () => http.get('/topics/bests'); +export const getTopics = (url: string) => http.get(url); diff --git a/frontend/src/components/Skeletons/TopicListSkeleton.tsx b/frontend/src/components/Skeletons/TopicListSkeleton.tsx index d505af472..e5ba5620c 100644 --- a/frontend/src/components/Skeletons/TopicListSkeleton.tsx +++ b/frontend/src/components/Skeletons/TopicListSkeleton.tsx @@ -1,13 +1,12 @@ import { styled } from 'styled-components'; -import Box from '../common/Box'; import Space from '../common/Space'; import SkeletonBox from './common/SkeletonBox'; import TopicCardSkeleton from './TopicCardSkeleton'; function TopicListSkeleton() { return ( - + <> @@ -27,20 +26,10 @@ function TopicListSkeleton() { - + ); } -const Wrapper = styled(Box)` - width: 1140px; - margin: 0 auto; - position: relative; - - @media (max-width: 1180px) { - width: 100%; - } -`; - const TopicCardWrapper = styled.section` display: flex; flex-wrap: wrap; diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index 45e419ae3..7e21b22ad 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -1,8 +1,6 @@ -import { Fragment, useEffect, useState } from 'react'; -import { styled } from 'styled-components'; +import { ReactNode } from 'react'; -import useGet from '../../apiHooks/useGet'; -import { TopicCardProps } from '../../types/Topic'; +import useGetTopics from '../../apiHooks/new/useGetTopics'; import Button from '../common/Button'; import Flex from '../common/Flex'; import Grid from '../common/Grid'; @@ -12,20 +10,74 @@ import TopicCard from '../TopicCard'; interface TopicCardListProps { url: string; - errorMessage: string; commentWhenEmpty: string; - pageCommentWhenEmpty: string; + routePageName: string; routePage: () => void; - children?: React.ReactNode; + svgElementWhenEmpty?: ReactNode; } function TopicCardList({ url, - errorMessage, commentWhenEmpty, - pageCommentWhenEmpty, + routePageName, routePage, - children, -}: TopicCardListProps) {} + svgElementWhenEmpty, +}: TopicCardListProps) { + const { topics, refetch } = useGetTopics(url); + + if (topics.length === 0) { + return ( + + + {svgElementWhenEmpty} + + + {commentWhenEmpty} + + + + + + + ); + } + + return ( + + + {topics.map((topic) => ( +
    + +
+ ))} + + + ); +} export default TopicCardList; diff --git a/frontend/src/pages/Bookmark.tsx b/frontend/src/pages/Bookmark.tsx index f5ffeda18..7efd8d309 100644 --- a/frontend/src/pages/Bookmark.tsx +++ b/frontend/src/pages/Bookmark.tsx @@ -1,17 +1,14 @@ +import { Suspense } from 'react'; import { styled } from 'styled-components'; -import useGetBookmarks from '../apiHooks/new/useGetBookmarks'; -import { getBookmarks } from '../apis/new'; import FavoriteNotFilledSVG from '../assets/favoriteBtn_notFilled.svg'; import Box from '../components/common/Box'; -import Button from '../components/common/Button'; import Flex from '../components/common/Flex'; -import Grid from '../components/common/Grid'; import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; -import Text from '../components/common/Text'; import MediaText from '../components/common/Text/MediaText'; -import TopicCard from '../components/TopicCard'; +import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton'; +import TopicCardList from '../components/TopicCardList'; import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; @@ -22,7 +19,6 @@ function Bookmark() { useSetNavbarHighlight('favorite'); const { routingHandlers } = useNavigator(); - const { bookmarks: topics } = useGetBookmarks(); return ( @@ -48,55 +44,16 @@ function Bookmark() { - {topics ? ( - - - {topics.map((topic) => ( -
    - -
- ))} - - - ) : ( - - - - - - 버튼으로 지도를 즐겨찾기에 담아보세요. - - - - - - - )} + }> + } + /> + + ); diff --git a/frontend/src/pages/SeeAllAllTopics.tsx b/frontend/src/pages/SeeAllAllTopics.tsx index 47db7fc8f..0d2bb3985 100644 --- a/frontend/src/pages/SeeAllAllTopics.tsx +++ b/frontend/src/pages/SeeAllAllTopics.tsx @@ -1,15 +1,14 @@ +import { Suspense } from 'react'; import { styled } from 'styled-components'; -import useGetAllTopics from '../apiHooks/new/useGetAllTopics'; -import { getAllTopics } from '../apis/new'; import Box from '../components/common/Box'; -import Flex from '../components/common/Flex'; -import Grid from '../components/common/Grid'; import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; -import TopicCard from '../components/TopicCard'; +import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton'; +import TopicCardList from '../components/TopicCardList'; import { ARIA_FOCUS, FULLSCREEN } from '../constants'; +import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -17,7 +16,7 @@ function SeeAllAllTopics() { useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); - const { allTopics: topics } = useGetAllTopics(); + const { routingHandlers } = useNavigator(); return ( @@ -35,40 +34,15 @@ function SeeAllAllTopics() { - {topics && ( - - - {topics.map((topic) => ( -
    - -
- ))} - - - )} + }> + + + ); diff --git a/frontend/src/pages/SeeAllBestTopics.tsx b/frontend/src/pages/SeeAllBestTopics.tsx index bd82560a9..0412968d6 100644 --- a/frontend/src/pages/SeeAllBestTopics.tsx +++ b/frontend/src/pages/SeeAllBestTopics.tsx @@ -1,23 +1,22 @@ +import { Suspense } from 'react'; import { styled } from 'styled-components'; -import useGetBestTopics from '../apiHooks/new/useGetBestTopics'; -import { getBestTopics } from '../apis/new'; import Box from '../components/common/Box'; -import Flex from '../components/common/Flex'; -import Grid from '../components/common/Grid'; import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; -import TopicCard from '../components/TopicCard'; +import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton'; +import TopicCardList from '../components/TopicCardList'; import { ARIA_FOCUS, FULLSCREEN } from '../constants'; +import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -function SeeAllBestTopics() { +function SeeAllAllTopics() { useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); - const { bestTopics: topics } = useGetBestTopics(); + const { routingHandlers } = useNavigator(); return ( @@ -28,47 +27,21 @@ function SeeAllBestTopics() { $fontSize="extraLarge" $fontWeight="bold" tabIndex={ARIA_FOCUS} - aria-label="인기 급상승할 지도 전체보기 페이지 입니다." + aria-label="모두일 지도 전체보기 페이지 입니다." > - 인기 급상승할 지도? + 새로울 지도? - {topics && ( - - - {topics.map((topic) => ( -
    - -
- ))} - - - )} + }> + + @@ -85,4 +58,4 @@ const Wrapper = styled(Box)` } `; -export default SeeAllBestTopics; +export default SeeAllAllTopics; diff --git a/frontend/src/pages/SeeAllNewestTopics.tsx b/frontend/src/pages/SeeAllNewestTopics.tsx index a18d91e57..afe2c0efc 100644 --- a/frontend/src/pages/SeeAllNewestTopics.tsx +++ b/frontend/src/pages/SeeAllNewestTopics.tsx @@ -1,23 +1,22 @@ +import { Suspense } from 'react'; import { styled } from 'styled-components'; -import useGetNewestTopics from '../apiHooks/new/useGetNewestTopics'; -import { getNewestTopics } from '../apis/new'; import Box from '../components/common/Box'; -import Flex from '../components/common/Flex'; -import Grid from '../components/common/Grid'; import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; -import TopicCard from '../components/TopicCard'; +import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton'; +import TopicCardList from '../components/TopicCardList'; import { ARIA_FOCUS, FULLSCREEN } from '../constants'; +import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -function SeeAllNewestTopics() { +function SeeAllAllTopics() { useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); - const { newestTopics: topics } = useGetNewestTopics(); + const { routingHandlers } = useNavigator(); return ( @@ -28,47 +27,22 @@ function SeeAllNewestTopics() { $fontSize="extraLarge" $fontWeight="bold" tabIndex={ARIA_FOCUS} - aria-label="새로울 지도 전체보기 페이지 입니다." + aria-label="모두일 지도 전체보기 페이지 입니다." > - 새로울 지도? + 인기 급상승할 지도? - {topics && ( - - - {topics.map((topic) => ( -
    - -
- ))} - - - )} + }> + + + ); @@ -84,4 +58,4 @@ const Wrapper = styled(Box)` } `; -export default SeeAllNewestTopics; +export default SeeAllAllTopics;