From 4f381b9ed34c99cb9052b7f0e0329b3e465b1247 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Tue, 13 Jun 2023 01:50:48 +0900 Subject: [PATCH 01/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20-=20components/common=20->=20common/compon?= =?UTF-8?q?ents=20-=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=A9=B4=EC=84=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=83=9D?= =?UTF-8?q?=EA=B8=B4=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hooks/common/useEllipsis.stories.tsx | 2 +- src/application/hooks/common/useToast.ts | 4 +- src/application/hooks/domain/auth/useAuth.ts | 2 +- .../components}/ActionSheet/ActionSheet.tsx | 0 .../components}/ActionSheet/index.ts | 0 .../components}/Button/Button.stories.tsx | 2 +- .../components}/Button/Button.tsx | 0 .../components}/Button/index.ts | 0 .../components}/Chip/Chip.stories.tsx | 2 +- .../components}/Chip/Chip.tsx | 0 .../components}/Chip/index.ts | 0 .../components}/Drawer/Drawer.tsx | 2 +- .../components}/Drawer/context.tsx | 2 +- .../components}/Drawer/index.ts | 0 .../components}/DropDown/DropDown.tsx | 2 +- .../components}/DropDown/index.ts | 0 .../components}/Error/GlobalError.tsx | 2 +- .../components}/Error/index.ts | 0 .../ErrorBoundary/QueryErrorBoundary.tsx | 2 +- .../components}/ErrorBoundary/index.ts | 0 .../components}/Icon/Icon.stories.tsx | 0 .../components}/Icon/assets.ts | 0 .../components}/Icon/index.tsx | 0 .../components}/Input/Input.stories.tsx | 0 .../components}/Input/index.tsx | 0 .../components}/Layout/Layout.tsx | 0 .../components}/Layout/ServiceGuide.tsx | 0 .../components}/Layout/index.ts | 0 .../components}/Masonry/Masonry.stories.tsx | 0 .../components}/Masonry/Masonry.tsx | 0 .../components}/Masonry/index.ts | 0 .../components}/Modal/Modal.stories.tsx | 0 .../components}/Modal/Modal.tsx | 3 +- .../components}/Modal/SignOutModal.tsx | 2 +- .../Modal/SignUpModal/SignUpModal.tsx | 6 +- .../components}/Modal/SignUpModal/context.tsx | 0 .../components}/Modal/SignUpModal/index.ts | 0 .../components}/Modal/index.ts | 1 - .../components}/Modal/types.ts | 0 .../Navigation/BackButton/BackButton.tsx | 3 +- .../Navigation/BackButton/index.ts | 0 .../Navigation/BackButtonNavigation.tsx | 0 .../Navigation/CloseButton/CloseButton.tsx | 2 +- .../Navigation/CloseButton/index.ts | 0 .../Navigation/ExplorePageNavigation.tsx | 5 +- .../Navigation/IntroPageNavigation.tsx | 3 +- .../components}/Navigation/Logo/Logo.tsx | 2 +- .../components}/Navigation/Logo/index.ts | 0 .../Navigation/MyPageNavigation.tsx | 0 .../Navigation/Navigation.stories.tsx | 0 .../components}/Navigation/Navigation.tsx | 0 .../Navigation/SearchHeader/SearchHeader.tsx | 3 +- .../Navigation/SearchHeader/index.ts | 0 .../Navigation/SearchPageNavigation.tsx | 3 +- .../SideBar/LoginSideBarContent.tsx | 6 +- .../SideBar/LogoutSideBarContent.tsx | 4 +- .../Navigation/SideBar/SideBar.stories.tsx | 10 +++ .../Navigation/SideBar/SideBar.tsx | 4 +- .../components}/Navigation/SideBar/index.ts | 0 .../components}/Navigation/index.ts | 0 .../components}/NextSeo/NextSeo.tsx | 0 .../components}/NextSeo/index.ts | 0 .../components}/NextSeo/types.ts | 0 .../components}/Photo/Photo.stories.tsx | 2 +- .../components}/Photo/Photo.tsx | 0 .../components}/Photo/index.ts | 0 .../components}/Portal/Portal.tsx | 0 .../components}/Portal/index.ts | 0 .../PullToRefresh/PullToRefresh.tsx | 0 .../PullToRefresh/RefreshContent.tsx | 0 .../components}/PullToRefresh/index.ts | 0 .../components}/PullToRefresh/refresh.json | 0 .../components}/PullToRefresh/utils.ts | 0 .../RandomImge/RandomImage.stories.tsx | 0 .../components}/RandomImge/RandomImage.tsx | 0 .../components}/RandomImge/index.ts | 0 .../components}/Skeleton/MemeListSkeleton.tsx | 0 .../components}/Skeleton/Skeleton.stories.tsx | 0 .../components}/Skeleton/Skeleton.tsx | 0 .../components}/Skeleton/index.ts | 0 .../components}/Suspense/SSRSuspense.tsx | 0 .../components}/Suspense/index.ts | 0 .../components}/Toast/Toast.stories.tsx | 2 +- .../components}/Toast/Toast.tsx | 2 +- .../components}/Toast/ToastContainer.tsx | 4 +- .../components}/Toast/context.tsx | 0 .../components}/Toast/index.ts | 0 .../components}/Toast/style.ts | 0 .../components}/Toast/types.ts | 3 +- src/components/common/Modal/ProfileModal.tsx | 64 ------------------- .../Navigation/SideBar/SideBar.stories.tsx | 10 --- src/components/common/PostList/PostItem.tsx | 17 ----- .../common/PostList/PostList.stories.tsx | 29 --------- src/components/common/PostList/PostList.tsx | 58 ----------------- .../explore/EmptyMemesView/EmptyMemesView.tsx | 4 +- .../explore/Thumbnail/Thumbnail.tsx | 2 +- .../DropDown/MemeSortDropDown.tsx | 4 +- .../MemeListContainer/MemeListContainer.tsx | 4 +- src/components/home/Skeleton/SkeletonMeme.tsx | 2 +- .../home/Skeleton/SkeletonTagList.tsx | 2 +- .../home/UserSharedMeme/SharedMemeItem.tsx | 6 +- .../home/UserSharedMeme/SharedMemeTagList.tsx | 2 +- .../UserSharedMeme/UserSharedMemeList.tsx | 2 +- .../meme/ActionSheet/MemeActionSheet.tsx | 2 +- .../InfiniteMemeList/InfiniteMemeList.tsx | 4 +- .../MemeInfo/Button/ClipboardCopyButton.tsx | 4 +- .../MemeInfo/Button/CollectionSaveButton.tsx | 4 +- .../meme/MemeInfo/Button/KakaoShareButton.tsx | 4 +- .../MemeInfo/Button/NativeShareButton.tsx | 4 +- .../meme/MemeInfo/DropDown/MemeExport.tsx | 4 +- src/components/meme/MemeInfo/MemeCTAList.tsx | 4 +- src/components/meme/MemeInfo/MemeDetail.tsx | 4 +- .../meme/MemeInfo/Modal/MemeShareModal.tsx | 4 +- .../MemeInfo/Skeleton/SkeletonMemeDetail.tsx | 2 +- .../MemeInfo/Skeleton/SkeletonMemeTagList.tsx | 2 +- src/components/meme/MemeItem/MemeItem.tsx | 4 +- .../SummarizedCollection.tsx | 2 +- .../search/SearchInput/SearchInput.tsx | 4 +- .../search/SearchItem/searchItem.stories.tsx | 2 +- .../SearchPopular/SearchPopularItem.tsx | 2 +- .../search/SearchRecent/SearchRecent.tsx | 2 +- .../search/SearchResult/SearchResultList.tsx | 2 +- .../search/Skeleton/SkeletonTagList.tsx | 2 +- .../tags/TagCategory/CategoryContent.tsx | 4 +- .../tags/TagCategory/FavoriteCategory.tsx | 4 +- .../tags/TagCategory/TagCategory.tsx | 6 +- .../TagFavoriteButton/TagBookmarkButton.tsx | 4 +- src/pages/_app.tsx | 8 +-- src/pages/_error.tsx | 2 +- src/pages/collect/index.tsx | 6 +- src/pages/explore/keywords/index.tsx | 12 ++-- src/pages/explore/tags/[tagId].tsx | 6 +- src/pages/index.tsx | 8 +-- src/pages/memes/[id].tsx | 8 +-- src/pages/mypage/index.tsx | 10 +-- src/pages/search/index.tsx | 8 +-- src/pages/setting/index.tsx | 8 +-- src/pages/share/index.tsx | 6 +- 138 files changed, 145 insertions(+), 315 deletions(-) rename src/{components/common => common/components}/ActionSheet/ActionSheet.tsx (100%) rename src/{components/common => common/components}/ActionSheet/index.ts (100%) rename src/{components/common => common/components}/Button/Button.stories.tsx (92%) rename src/{components/common => common/components}/Button/Button.tsx (100%) rename src/{components/common => common/components}/Button/index.ts (100%) rename src/{components/common => common/components}/Chip/Chip.stories.tsx (94%) rename src/{components/common => common/components}/Chip/Chip.tsx (100%) rename src/{components/common => common/components}/Chip/index.ts (100%) rename src/{components/common => common/components}/Drawer/Drawer.tsx (98%) rename src/{components/common => common/components}/Drawer/context.tsx (93%) rename src/{components/common => common/components}/Drawer/index.ts (100%) rename src/{components/common => common/components}/DropDown/DropDown.tsx (98%) rename src/{components/common => common/components}/DropDown/index.ts (100%) rename src/{components/common => common/components}/Error/GlobalError.tsx (86%) rename src/{components/common => common/components}/Error/index.ts (100%) rename src/{components/common => common/components}/ErrorBoundary/QueryErrorBoundary.tsx (89%) rename src/{components/common => common/components}/ErrorBoundary/index.ts (100%) rename src/{components/common => common/components}/Icon/Icon.stories.tsx (100%) rename src/{components/common => common/components}/Icon/assets.ts (100%) rename src/{components/common => common/components}/Icon/index.tsx (100%) rename src/{components/common => common/components}/Input/Input.stories.tsx (100%) rename src/{components/common => common/components}/Input/index.tsx (100%) rename src/{components/common => common/components}/Layout/Layout.tsx (100%) rename src/{components/common => common/components}/Layout/ServiceGuide.tsx (100%) rename src/{components/common => common/components}/Layout/index.ts (100%) rename src/{components/common => common/components}/Masonry/Masonry.stories.tsx (100%) rename src/{components/common => common/components}/Masonry/Masonry.tsx (100%) rename src/{components/common => common/components}/Masonry/index.ts (100%) rename src/{components/common => common/components}/Modal/Modal.stories.tsx (100%) rename src/{components/common => common/components}/Modal/Modal.tsx (98%) rename src/{components/common => common/components}/Modal/SignOutModal.tsx (96%) rename src/{components/common => common/components}/Modal/SignUpModal/SignUpModal.tsx (91%) rename src/{components/common => common/components}/Modal/SignUpModal/context.tsx (100%) rename src/{components/common => common/components}/Modal/SignUpModal/index.ts (100%) rename src/{components/common => common/components}/Modal/index.ts (77%) rename src/{components/common => common/components}/Modal/types.ts (100%) rename src/{components/common => common/components}/Navigation/BackButton/BackButton.tsx (89%) rename src/{components/common => common/components}/Navigation/BackButton/index.ts (100%) rename src/{components/common => common/components}/Navigation/BackButtonNavigation.tsx (100%) rename src/{components/common => common/components}/Navigation/CloseButton/CloseButton.tsx (82%) rename src/{components/common => common/components}/Navigation/CloseButton/index.ts (100%) rename src/{components/common => common/components}/Navigation/ExplorePageNavigation.tsx (76%) rename src/{components/common => common/components}/Navigation/IntroPageNavigation.tsx (84%) rename src/{components/common => common/components}/Navigation/Logo/Logo.tsx (86%) rename src/{components/common => common/components}/Navigation/Logo/index.ts (100%) rename src/{components/common => common/components}/Navigation/MyPageNavigation.tsx (100%) rename src/{components/common => common/components}/Navigation/Navigation.stories.tsx (100%) rename src/{components/common => common/components}/Navigation/Navigation.tsx (100%) rename src/{components/common => common/components}/Navigation/SearchHeader/SearchHeader.tsx (95%) rename src/{components/common => common/components}/Navigation/SearchHeader/index.ts (100%) rename src/{components/common => common/components}/Navigation/SearchPageNavigation.tsx (84%) rename src/{components/common => common/components}/Navigation/SideBar/LoginSideBarContent.tsx (93%) rename src/{components/common => common/components}/Navigation/SideBar/LogoutSideBarContent.tsx (94%) create mode 100644 src/common/components/Navigation/SideBar/SideBar.stories.tsx rename src/{components/common => common/components}/Navigation/SideBar/SideBar.tsx (93%) rename src/{components/common => common/components}/Navigation/SideBar/index.ts (100%) rename src/{components/common => common/components}/Navigation/index.ts (100%) rename src/{components/common => common/components}/NextSeo/NextSeo.tsx (100%) rename src/{components/common => common/components}/NextSeo/index.ts (100%) rename src/{components/common => common/components}/NextSeo/types.ts (100%) rename src/{components/common => common/components}/Photo/Photo.stories.tsx (92%) rename src/{components/common => common/components}/Photo/Photo.tsx (100%) rename src/{components/common => common/components}/Photo/index.ts (100%) rename src/{components/common => common/components}/Portal/Portal.tsx (100%) rename src/{components/common => common/components}/Portal/index.ts (100%) rename src/{components/common => common/components}/PullToRefresh/PullToRefresh.tsx (100%) rename src/{components/common => common/components}/PullToRefresh/RefreshContent.tsx (100%) rename src/{components/common => common/components}/PullToRefresh/index.ts (100%) rename src/{components/common => common/components}/PullToRefresh/refresh.json (100%) rename src/{components/common => common/components}/PullToRefresh/utils.ts (100%) rename src/{components/common => common/components}/RandomImge/RandomImage.stories.tsx (100%) rename src/{components/common => common/components}/RandomImge/RandomImage.tsx (100%) rename src/{components/common => common/components}/RandomImge/index.ts (100%) rename src/{components/common => common/components}/Skeleton/MemeListSkeleton.tsx (100%) rename src/{components/common => common/components}/Skeleton/Skeleton.stories.tsx (100%) rename src/{components/common => common/components}/Skeleton/Skeleton.tsx (100%) rename src/{components/common => common/components}/Skeleton/index.ts (100%) rename src/{components/common => common/components}/Suspense/SSRSuspense.tsx (100%) rename src/{components/common => common/components}/Suspense/index.ts (100%) rename src/{components/common => common/components}/Toast/Toast.stories.tsx (93%) rename src/{components/common => common/components}/Toast/Toast.tsx (92%) rename src/{components/common => common/components}/Toast/ToastContainer.tsx (92%) rename src/{components/common => common/components}/Toast/context.tsx (100%) rename src/{components/common => common/components}/Toast/index.ts (100%) rename src/{components/common => common/components}/Toast/style.ts (100%) rename src/{components/common => common/components}/Toast/types.ts (90%) delete mode 100644 src/components/common/Modal/ProfileModal.tsx delete mode 100644 src/components/common/Navigation/SideBar/SideBar.stories.tsx delete mode 100644 src/components/common/PostList/PostItem.tsx delete mode 100644 src/components/common/PostList/PostList.stories.tsx delete mode 100644 src/components/common/PostList/PostList.tsx diff --git a/src/application/hooks/common/useEllipsis.stories.tsx b/src/application/hooks/common/useEllipsis.stories.tsx index 1b24202c..39cce9e5 100644 --- a/src/application/hooks/common/useEllipsis.stories.tsx +++ b/src/application/hooks/common/useEllipsis.stories.tsx @@ -1,5 +1,5 @@ import { useEllipsis } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; +import { Button } from "@/common/components/Button"; export default { title: "hooks/common/useEllipsis", diff --git a/src/application/hooks/common/useToast.ts b/src/application/hooks/common/useToast.ts index afc9f00f..5d52e42e 100644 --- a/src/application/hooks/common/useToast.ts +++ b/src/application/hooks/common/useToast.ts @@ -1,8 +1,8 @@ import { useCallback } from "react"; import { delay } from "@/application/util"; -import { useSetToastContext } from "@/components/common/Toast"; -import type { Toast, ToastOption, ToastType } from "@/components/common/Toast/types"; +import { useSetToastContext } from "@/common/components/Toast"; +import type { Toast, ToastOption, ToastType } from "@/common/components/Toast/types"; const DEFAULT_TOAST_DELAY = 1000; const ANIMATION_EXPIRE_DELAY = 1000; diff --git a/src/application/hooks/domain/auth/useAuth.ts b/src/application/hooks/domain/auth/useAuth.ts index 73ad1fa2..39944659 100644 --- a/src/application/hooks/domain/auth/useAuth.ts +++ b/src/application/hooks/domain/auth/useAuth.ts @@ -1,7 +1,7 @@ import { useCallback } from "react"; import { useGetMyAccount, useLogout } from "@/application/hooks"; -import { useSignUpModalContext } from "@/components/common/Modal"; +import { useSignUpModalContext } from "@/common/components/Modal"; import { api } from "@/infra/api"; type Handler = (...args: any[]) => unknown; diff --git a/src/components/common/ActionSheet/ActionSheet.tsx b/src/common/components/ActionSheet/ActionSheet.tsx similarity index 100% rename from src/components/common/ActionSheet/ActionSheet.tsx rename to src/common/components/ActionSheet/ActionSheet.tsx diff --git a/src/components/common/ActionSheet/index.ts b/src/common/components/ActionSheet/index.ts similarity index 100% rename from src/components/common/ActionSheet/index.ts rename to src/common/components/ActionSheet/index.ts diff --git a/src/components/common/Button/Button.stories.tsx b/src/common/components/Button/Button.stories.tsx similarity index 92% rename from src/components/common/Button/Button.stories.tsx rename to src/common/components/Button/Button.stories.tsx index d984975b..7e760f4e 100644 --- a/src/components/common/Button/Button.stories.tsx +++ b/src/common/components/Button/Button.stories.tsx @@ -1,7 +1,7 @@ import type { ComponentMeta, ComponentStory } from "@storybook/react"; import React from "react"; -import { Button } from "@/components/common/Button/Button"; +import { Button } from "./Button"; export default { title: "components/common/Button", diff --git a/src/components/common/Button/Button.tsx b/src/common/components/Button/Button.tsx similarity index 100% rename from src/components/common/Button/Button.tsx rename to src/common/components/Button/Button.tsx diff --git a/src/components/common/Button/index.ts b/src/common/components/Button/index.ts similarity index 100% rename from src/components/common/Button/index.ts rename to src/common/components/Button/index.ts diff --git a/src/components/common/Chip/Chip.stories.tsx b/src/common/components/Chip/Chip.stories.tsx similarity index 94% rename from src/components/common/Chip/Chip.stories.tsx rename to src/common/components/Chip/Chip.stories.tsx index 0d245a8f..b635d70f 100644 --- a/src/components/common/Chip/Chip.stories.tsx +++ b/src/common/components/Chip/Chip.stories.tsx @@ -1,6 +1,6 @@ import type { ComponentMeta, ComponentStory } from "@storybook/react"; -import { Chip } from "."; +import { Chip } from "./Chip"; export default { title: "components/common/Chip", diff --git a/src/components/common/Chip/Chip.tsx b/src/common/components/Chip/Chip.tsx similarity index 100% rename from src/components/common/Chip/Chip.tsx rename to src/common/components/Chip/Chip.tsx diff --git a/src/components/common/Chip/index.ts b/src/common/components/Chip/index.ts similarity index 100% rename from src/components/common/Chip/index.ts rename to src/common/components/Chip/index.ts diff --git a/src/components/common/Drawer/Drawer.tsx b/src/common/components/Drawer/Drawer.tsx similarity index 98% rename from src/components/common/Drawer/Drawer.tsx rename to src/common/components/Drawer/Drawer.tsx index df08d350..6ae20eee 100644 --- a/src/components/common/Drawer/Drawer.tsx +++ b/src/common/components/Drawer/Drawer.tsx @@ -2,8 +2,8 @@ import type { PropsWithChildren, ReactNode } from "react"; import { css } from "twin.macro"; import { useScrollLocker } from "@/application/hooks"; -import { Portal } from "@/components/common/Portal"; +import { Portal } from "../Portal"; import { DrawerContextProvider, useDrawerContext, useSetDrawerContext } from "./context"; interface DrawerProps { diff --git a/src/components/common/Drawer/context.tsx b/src/common/components/Drawer/context.tsx similarity index 93% rename from src/components/common/Drawer/context.tsx rename to src/common/components/Drawer/context.tsx index ad4a57d2..49e55d2c 100644 --- a/src/components/common/Drawer/context.tsx +++ b/src/common/components/Drawer/context.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren } from "react"; -import { createContext, useCallback, useContext, useEffect, useState } from "react"; +import { createContext, useCallback, useContext, useState } from "react"; const DrawerContext = createContext(false); const DrawerSetContext = createContext<(state: boolean) => void>(() => null); diff --git a/src/components/common/Drawer/index.ts b/src/common/components/Drawer/index.ts similarity index 100% rename from src/components/common/Drawer/index.ts rename to src/common/components/Drawer/index.ts diff --git a/src/components/common/DropDown/DropDown.tsx b/src/common/components/DropDown/DropDown.tsx similarity index 98% rename from src/components/common/DropDown/DropDown.tsx rename to src/common/components/DropDown/DropDown.tsx index b23db7a1..1f36b165 100644 --- a/src/components/common/DropDown/DropDown.tsx +++ b/src/common/components/DropDown/DropDown.tsx @@ -7,7 +7,7 @@ import type { SetStateAction, } from "react"; import { createContext, useContext, useState } from "react"; -import { css, theme } from "twin.macro"; +import { css } from "twin.macro"; import { useClickOutside } from "@/application/hooks"; import { withDelay } from "@/application/util/delay"; diff --git a/src/components/common/DropDown/index.ts b/src/common/components/DropDown/index.ts similarity index 100% rename from src/components/common/DropDown/index.ts rename to src/common/components/DropDown/index.ts diff --git a/src/components/common/Error/GlobalError.tsx b/src/common/components/Error/GlobalError.tsx similarity index 86% rename from src/components/common/Error/GlobalError.tsx rename to src/common/components/Error/GlobalError.tsx index 07ee4478..e0ff1232 100644 --- a/src/components/common/Error/GlobalError.tsx +++ b/src/common/components/Error/GlobalError.tsx @@ -1,4 +1,4 @@ -import { Navigation } from "@/components/common/Navigation"; +import { Navigation } from "../Navigation"; export const GlobalError = () => { return ( diff --git a/src/components/common/Error/index.ts b/src/common/components/Error/index.ts similarity index 100% rename from src/components/common/Error/index.ts rename to src/common/components/Error/index.ts diff --git a/src/components/common/ErrorBoundary/QueryErrorBoundary.tsx b/src/common/components/ErrorBoundary/QueryErrorBoundary.tsx similarity index 89% rename from src/components/common/ErrorBoundary/QueryErrorBoundary.tsx rename to src/common/components/ErrorBoundary/QueryErrorBoundary.tsx index 25623ac0..f32d3775 100644 --- a/src/components/common/ErrorBoundary/QueryErrorBoundary.tsx +++ b/src/common/components/ErrorBoundary/QueryErrorBoundary.tsx @@ -2,7 +2,7 @@ import { QueryErrorResetBoundary } from "@tanstack/react-query"; import type { PropsWithChildren } from "react"; import { ErrorBoundary } from "react-error-boundary"; -import { GlobalError } from "@/components/common/Error"; +import { GlobalError } from "../Error/GlobalError"; export const QueryErrorBoundary = ({ children }: PropsWithChildren) => { return ( diff --git a/src/components/common/ErrorBoundary/index.ts b/src/common/components/ErrorBoundary/index.ts similarity index 100% rename from src/components/common/ErrorBoundary/index.ts rename to src/common/components/ErrorBoundary/index.ts diff --git a/src/components/common/Icon/Icon.stories.tsx b/src/common/components/Icon/Icon.stories.tsx similarity index 100% rename from src/components/common/Icon/Icon.stories.tsx rename to src/common/components/Icon/Icon.stories.tsx diff --git a/src/components/common/Icon/assets.ts b/src/common/components/Icon/assets.ts similarity index 100% rename from src/components/common/Icon/assets.ts rename to src/common/components/Icon/assets.ts diff --git a/src/components/common/Icon/index.tsx b/src/common/components/Icon/index.tsx similarity index 100% rename from src/components/common/Icon/index.tsx rename to src/common/components/Icon/index.tsx diff --git a/src/components/common/Input/Input.stories.tsx b/src/common/components/Input/Input.stories.tsx similarity index 100% rename from src/components/common/Input/Input.stories.tsx rename to src/common/components/Input/Input.stories.tsx diff --git a/src/components/common/Input/index.tsx b/src/common/components/Input/index.tsx similarity index 100% rename from src/components/common/Input/index.tsx rename to src/common/components/Input/index.tsx diff --git a/src/components/common/Layout/Layout.tsx b/src/common/components/Layout/Layout.tsx similarity index 100% rename from src/components/common/Layout/Layout.tsx rename to src/common/components/Layout/Layout.tsx diff --git a/src/components/common/Layout/ServiceGuide.tsx b/src/common/components/Layout/ServiceGuide.tsx similarity index 100% rename from src/components/common/Layout/ServiceGuide.tsx rename to src/common/components/Layout/ServiceGuide.tsx diff --git a/src/components/common/Layout/index.ts b/src/common/components/Layout/index.ts similarity index 100% rename from src/components/common/Layout/index.ts rename to src/common/components/Layout/index.ts diff --git a/src/components/common/Masonry/Masonry.stories.tsx b/src/common/components/Masonry/Masonry.stories.tsx similarity index 100% rename from src/components/common/Masonry/Masonry.stories.tsx rename to src/common/components/Masonry/Masonry.stories.tsx diff --git a/src/components/common/Masonry/Masonry.tsx b/src/common/components/Masonry/Masonry.tsx similarity index 100% rename from src/components/common/Masonry/Masonry.tsx rename to src/common/components/Masonry/Masonry.tsx diff --git a/src/components/common/Masonry/index.ts b/src/common/components/Masonry/index.ts similarity index 100% rename from src/components/common/Masonry/index.ts rename to src/common/components/Masonry/index.ts diff --git a/src/components/common/Modal/Modal.stories.tsx b/src/common/components/Modal/Modal.stories.tsx similarity index 100% rename from src/components/common/Modal/Modal.stories.tsx rename to src/common/components/Modal/Modal.stories.tsx diff --git a/src/components/common/Modal/Modal.tsx b/src/common/components/Modal/Modal.tsx similarity index 98% rename from src/components/common/Modal/Modal.tsx rename to src/common/components/Modal/Modal.tsx index 729c81ad..88091254 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/common/components/Modal/Modal.tsx @@ -3,7 +3,8 @@ import { Children, createContext, isValidElement, useContext } from "react"; import { useClickOutside } from "@/application/hooks"; import { fadeInOut } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; + +import { Icon } from "../Icon"; interface ModalProps { open: boolean; diff --git a/src/components/common/Modal/SignOutModal.tsx b/src/common/components/Modal/SignOutModal.tsx similarity index 96% rename from src/components/common/Modal/SignOutModal.tsx rename to src/common/components/Modal/SignOutModal.tsx index e96bf2c6..9e3f4f17 100644 --- a/src/components/common/Modal/SignOutModal.tsx +++ b/src/common/components/Modal/SignOutModal.tsx @@ -2,8 +2,8 @@ import { useRouter } from "next/router"; import { useAuth, useToast } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { RandomImage } from "@/components/common/RandomImge"; +import { RandomImage } from "../RandomImge"; import { Modal } from "./Modal"; import type { ModalProps } from "./types"; diff --git a/src/components/common/Modal/SignUpModal/SignUpModal.tsx b/src/common/components/Modal/SignUpModal/SignUpModal.tsx similarity index 91% rename from src/components/common/Modal/SignUpModal/SignUpModal.tsx rename to src/common/components/Modal/SignUpModal/SignUpModal.tsx index eb12f13b..9901929c 100644 --- a/src/components/common/Modal/SignUpModal/SignUpModal.tsx +++ b/src/common/components/Modal/SignUpModal/SignUpModal.tsx @@ -1,8 +1,8 @@ import { IS_CSR } from "@/application/util"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; -import { RandomImage } from "@/components/common/RandomImge"; +import { Button } from "../../Button"; +import { Icon } from "../../Icon"; +import { RandomImage } from "../../RandomImge"; import { Modal } from "../Modal"; import { useSignUpModalContext } from "./context"; diff --git a/src/components/common/Modal/SignUpModal/context.tsx b/src/common/components/Modal/SignUpModal/context.tsx similarity index 100% rename from src/components/common/Modal/SignUpModal/context.tsx rename to src/common/components/Modal/SignUpModal/context.tsx diff --git a/src/components/common/Modal/SignUpModal/index.ts b/src/common/components/Modal/SignUpModal/index.ts similarity index 100% rename from src/components/common/Modal/SignUpModal/index.ts rename to src/common/components/Modal/SignUpModal/index.ts diff --git a/src/components/common/Modal/index.ts b/src/common/components/Modal/index.ts similarity index 77% rename from src/components/common/Modal/index.ts rename to src/common/components/Modal/index.ts index a8acafd9..6661f64b 100644 --- a/src/components/common/Modal/index.ts +++ b/src/common/components/Modal/index.ts @@ -1,5 +1,4 @@ export * from "./Modal"; -export * from "./ProfileModal"; export * from "./SignOutModal"; export * from "./SignUpModal"; export * from "./types"; diff --git a/src/components/common/Modal/types.ts b/src/common/components/Modal/types.ts similarity index 100% rename from src/components/common/Modal/types.ts rename to src/common/components/Modal/types.ts diff --git a/src/components/common/Navigation/BackButton/BackButton.tsx b/src/common/components/Navigation/BackButton/BackButton.tsx similarity index 89% rename from src/components/common/Navigation/BackButton/BackButton.tsx rename to src/common/components/Navigation/BackButton/BackButton.tsx index 17726f18..1a8a183b 100644 --- a/src/components/common/Navigation/BackButton/BackButton.tsx +++ b/src/common/components/Navigation/BackButton/BackButton.tsx @@ -2,7 +2,8 @@ import { useRouter } from "next/router"; import type { ComponentProps } from "react"; import { useRouteTracking } from "@/application/hooks"; -import { Icon } from "@/components/common/Icon"; + +import { Icon } from "../../Icon"; export const BackButton = (props: ComponentProps<"button">) => { const router = useRouter(); diff --git a/src/components/common/Navigation/BackButton/index.ts b/src/common/components/Navigation/BackButton/index.ts similarity index 100% rename from src/components/common/Navigation/BackButton/index.ts rename to src/common/components/Navigation/BackButton/index.ts diff --git a/src/components/common/Navigation/BackButtonNavigation.tsx b/src/common/components/Navigation/BackButtonNavigation.tsx similarity index 100% rename from src/components/common/Navigation/BackButtonNavigation.tsx rename to src/common/components/Navigation/BackButtonNavigation.tsx diff --git a/src/components/common/Navigation/CloseButton/CloseButton.tsx b/src/common/components/Navigation/CloseButton/CloseButton.tsx similarity index 82% rename from src/components/common/Navigation/CloseButton/CloseButton.tsx rename to src/common/components/Navigation/CloseButton/CloseButton.tsx index 24d7f04f..29cb2c84 100644 --- a/src/components/common/Navigation/CloseButton/CloseButton.tsx +++ b/src/common/components/Navigation/CloseButton/CloseButton.tsx @@ -1,6 +1,6 @@ import { useRouter } from "next/router"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "../../Icon"; export const CloseButton = () => { const router = useRouter(); diff --git a/src/components/common/Navigation/CloseButton/index.ts b/src/common/components/Navigation/CloseButton/index.ts similarity index 100% rename from src/components/common/Navigation/CloseButton/index.ts rename to src/common/components/Navigation/CloseButton/index.ts diff --git a/src/components/common/Navigation/ExplorePageNavigation.tsx b/src/common/components/Navigation/ExplorePageNavigation.tsx similarity index 76% rename from src/components/common/Navigation/ExplorePageNavigation.tsx rename to src/common/components/Navigation/ExplorePageNavigation.tsx index a89e4d3d..bb8db618 100644 --- a/src/components/common/Navigation/ExplorePageNavigation.tsx +++ b/src/common/components/Navigation/ExplorePageNavigation.tsx @@ -1,7 +1,6 @@ -import { Logo } from "@/components/common/Navigation/Logo"; -import { SearchHeader } from "@/components/common/Navigation/SearchHeader"; - +import { Logo } from "./Logo"; import { Navigation } from "./Navigation"; +import { SearchHeader } from "./SearchHeader"; import { SideBar } from "./SideBar"; interface Props { diff --git a/src/components/common/Navigation/IntroPageNavigation.tsx b/src/common/components/Navigation/IntroPageNavigation.tsx similarity index 84% rename from src/components/common/Navigation/IntroPageNavigation.tsx rename to src/common/components/Navigation/IntroPageNavigation.tsx index 26b4ef5e..65e2d7b9 100644 --- a/src/components/common/Navigation/IntroPageNavigation.tsx +++ b/src/common/components/Navigation/IntroPageNavigation.tsx @@ -1,7 +1,6 @@ -import { SearchHeader } from "@/components/common/Navigation/SearchHeader"; - import { Logo } from "./Logo"; import { Navigation } from "./Navigation"; +import { SearchHeader } from "./SearchHeader"; import { SideBar } from "./SideBar"; export const IntroPageNavigation = () => { diff --git a/src/components/common/Navigation/Logo/Logo.tsx b/src/common/components/Navigation/Logo/Logo.tsx similarity index 86% rename from src/components/common/Navigation/Logo/Logo.tsx rename to src/common/components/Navigation/Logo/Logo.tsx index 848e6892..7a4b4331 100644 --- a/src/components/common/Navigation/Logo/Logo.tsx +++ b/src/common/components/Navigation/Logo/Logo.tsx @@ -1,6 +1,6 @@ import { useRouter } from "next/router"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "../../Icon"; export const Logo = () => { const router = useRouter(); diff --git a/src/components/common/Navigation/Logo/index.ts b/src/common/components/Navigation/Logo/index.ts similarity index 100% rename from src/components/common/Navigation/Logo/index.ts rename to src/common/components/Navigation/Logo/index.ts diff --git a/src/components/common/Navigation/MyPageNavigation.tsx b/src/common/components/Navigation/MyPageNavigation.tsx similarity index 100% rename from src/components/common/Navigation/MyPageNavigation.tsx rename to src/common/components/Navigation/MyPageNavigation.tsx diff --git a/src/components/common/Navigation/Navigation.stories.tsx b/src/common/components/Navigation/Navigation.stories.tsx similarity index 100% rename from src/components/common/Navigation/Navigation.stories.tsx rename to src/common/components/Navigation/Navigation.stories.tsx diff --git a/src/components/common/Navigation/Navigation.tsx b/src/common/components/Navigation/Navigation.tsx similarity index 100% rename from src/components/common/Navigation/Navigation.tsx rename to src/common/components/Navigation/Navigation.tsx diff --git a/src/components/common/Navigation/SearchHeader/SearchHeader.tsx b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx similarity index 95% rename from src/components/common/Navigation/SearchHeader/SearchHeader.tsx rename to src/common/components/Navigation/SearchHeader/SearchHeader.tsx index f2781c3a..48f7b485 100644 --- a/src/components/common/Navigation/SearchHeader/SearchHeader.tsx +++ b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx @@ -3,10 +3,11 @@ import { CSSTransition } from "react-transition-group"; import { css } from "twin.macro"; import { useScrollDirection } from "@/application/hooks"; -import { BackButton } from "@/components/common/Navigation/BackButton"; import { SearchInput } from "@/components/search"; import { TagCategory } from "@/components/tags"; +import { BackButton } from "../BackButton"; + const DELAY = 300; interface Props { diff --git a/src/components/common/Navigation/SearchHeader/index.ts b/src/common/components/Navigation/SearchHeader/index.ts similarity index 100% rename from src/components/common/Navigation/SearchHeader/index.ts rename to src/common/components/Navigation/SearchHeader/index.ts diff --git a/src/components/common/Navigation/SearchPageNavigation.tsx b/src/common/components/Navigation/SearchPageNavigation.tsx similarity index 84% rename from src/components/common/Navigation/SearchPageNavigation.tsx rename to src/common/components/Navigation/SearchPageNavigation.tsx index 153413bf..9efbf964 100644 --- a/src/components/common/Navigation/SearchPageNavigation.tsx +++ b/src/common/components/Navigation/SearchPageNavigation.tsx @@ -1,6 +1,5 @@ -import { Logo } from "@/components/common/Navigation/Logo"; - import { CloseButton } from "./CloseButton"; +import { Logo } from "./Logo"; import { Navigation } from "./Navigation"; export const SearchPageNavigation = () => { diff --git a/src/components/common/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx similarity index 93% rename from src/components/common/Navigation/SideBar/LoginSideBarContent.tsx rename to src/common/components/Navigation/SideBar/LoginSideBarContent.tsx index bf9180db..20338af4 100644 --- a/src/components/common/Navigation/SideBar/LoginSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx @@ -3,9 +3,9 @@ import Link from "next/link"; import type { useAuth } from "@/application/hooks"; import { useModal } from "@/application/hooks"; import { channelUrl } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; -import { SignOutModal } from "@/components/common/Modal"; -import { Photo } from "@/components/common/Photo"; +import { Icon } from "@/common/components/Icon"; +import { SignOutModal } from "@/common/components/Modal"; +import { Photo } from "@/common/components/Photo"; type LoginSideBarContentProps = ReturnType; diff --git a/src/components/common/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx similarity index 94% rename from src/components/common/Navigation/SideBar/LogoutSideBarContent.tsx rename to src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx index c1b9bbfa..192bc836 100644 --- a/src/components/common/Navigation/SideBar/LogoutSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx @@ -1,7 +1,7 @@ import type { useAuth } from "@/application/hooks"; import { channelUrl } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; -import { Photo } from "@/components/common/Photo"; +import { Icon } from "@/common/components/Icon"; +import { Photo } from "@/common/components/Photo"; const defaultAvatarUrl = "/img/default-avatar.png"; const defaultName = "로그인하기"; diff --git a/src/common/components/Navigation/SideBar/SideBar.stories.tsx b/src/common/components/Navigation/SideBar/SideBar.stories.tsx new file mode 100644 index 00000000..055dd7f6 --- /dev/null +++ b/src/common/components/Navigation/SideBar/SideBar.stories.tsx @@ -0,0 +1,10 @@ +import type { ComponentMeta, ComponentStory } from "@storybook/react"; + +import { SideBar } from "./SideBar"; + +export default { + title: "components/common/Navigation/SideBar", + component: SideBar, +} as ComponentMeta; + +export const _SideBar: ComponentStory = () => ; diff --git a/src/components/common/Navigation/SideBar/SideBar.tsx b/src/common/components/Navigation/SideBar/SideBar.tsx similarity index 93% rename from src/components/common/Navigation/SideBar/SideBar.tsx rename to src/common/components/Navigation/SideBar/SideBar.tsx index 142aa862..3990b43e 100644 --- a/src/components/common/Navigation/SideBar/SideBar.tsx +++ b/src/common/components/Navigation/SideBar/SideBar.tsx @@ -1,9 +1,9 @@ import { useAuth } from "@/application/hooks"; import { instagramUrl, twitterUrl } from "@/application/util"; -import { Drawer } from "@/components/common/Drawer"; -import { Icon } from "@/components/common/Icon"; import { useTagCategoryContext } from "@/components/tags"; +import { Drawer } from "../../Drawer"; +import { Icon } from "../../Icon"; import { LoginSideBarContent } from "./LoginSideBarContent"; import { LogoutSideBarContent } from "./LogoutSideBarContent"; diff --git a/src/components/common/Navigation/SideBar/index.ts b/src/common/components/Navigation/SideBar/index.ts similarity index 100% rename from src/components/common/Navigation/SideBar/index.ts rename to src/common/components/Navigation/SideBar/index.ts diff --git a/src/components/common/Navigation/index.ts b/src/common/components/Navigation/index.ts similarity index 100% rename from src/components/common/Navigation/index.ts rename to src/common/components/Navigation/index.ts diff --git a/src/components/common/NextSeo/NextSeo.tsx b/src/common/components/NextSeo/NextSeo.tsx similarity index 100% rename from src/components/common/NextSeo/NextSeo.tsx rename to src/common/components/NextSeo/NextSeo.tsx diff --git a/src/components/common/NextSeo/index.ts b/src/common/components/NextSeo/index.ts similarity index 100% rename from src/components/common/NextSeo/index.ts rename to src/common/components/NextSeo/index.ts diff --git a/src/components/common/NextSeo/types.ts b/src/common/components/NextSeo/types.ts similarity index 100% rename from src/components/common/NextSeo/types.ts rename to src/common/components/NextSeo/types.ts diff --git a/src/components/common/Photo/Photo.stories.tsx b/src/common/components/Photo/Photo.stories.tsx similarity index 92% rename from src/components/common/Photo/Photo.stories.tsx rename to src/common/components/Photo/Photo.stories.tsx index b4c2508a..cdd17998 100644 --- a/src/components/common/Photo/Photo.stories.tsx +++ b/src/common/components/Photo/Photo.stories.tsx @@ -1,6 +1,6 @@ import type { ComponentMeta } from "@storybook/react"; -import { Photo } from "@/components/common/Photo"; +import { Photo } from "./Photo"; export default { title: "components/common/Photo", diff --git a/src/components/common/Photo/Photo.tsx b/src/common/components/Photo/Photo.tsx similarity index 100% rename from src/components/common/Photo/Photo.tsx rename to src/common/components/Photo/Photo.tsx diff --git a/src/components/common/Photo/index.ts b/src/common/components/Photo/index.ts similarity index 100% rename from src/components/common/Photo/index.ts rename to src/common/components/Photo/index.ts diff --git a/src/components/common/Portal/Portal.tsx b/src/common/components/Portal/Portal.tsx similarity index 100% rename from src/components/common/Portal/Portal.tsx rename to src/common/components/Portal/Portal.tsx diff --git a/src/components/common/Portal/index.ts b/src/common/components/Portal/index.ts similarity index 100% rename from src/components/common/Portal/index.ts rename to src/common/components/Portal/index.ts diff --git a/src/components/common/PullToRefresh/PullToRefresh.tsx b/src/common/components/PullToRefresh/PullToRefresh.tsx similarity index 100% rename from src/components/common/PullToRefresh/PullToRefresh.tsx rename to src/common/components/PullToRefresh/PullToRefresh.tsx diff --git a/src/components/common/PullToRefresh/RefreshContent.tsx b/src/common/components/PullToRefresh/RefreshContent.tsx similarity index 100% rename from src/components/common/PullToRefresh/RefreshContent.tsx rename to src/common/components/PullToRefresh/RefreshContent.tsx diff --git a/src/components/common/PullToRefresh/index.ts b/src/common/components/PullToRefresh/index.ts similarity index 100% rename from src/components/common/PullToRefresh/index.ts rename to src/common/components/PullToRefresh/index.ts diff --git a/src/components/common/PullToRefresh/refresh.json b/src/common/components/PullToRefresh/refresh.json similarity index 100% rename from src/components/common/PullToRefresh/refresh.json rename to src/common/components/PullToRefresh/refresh.json diff --git a/src/components/common/PullToRefresh/utils.ts b/src/common/components/PullToRefresh/utils.ts similarity index 100% rename from src/components/common/PullToRefresh/utils.ts rename to src/common/components/PullToRefresh/utils.ts diff --git a/src/components/common/RandomImge/RandomImage.stories.tsx b/src/common/components/RandomImge/RandomImage.stories.tsx similarity index 100% rename from src/components/common/RandomImge/RandomImage.stories.tsx rename to src/common/components/RandomImge/RandomImage.stories.tsx diff --git a/src/components/common/RandomImge/RandomImage.tsx b/src/common/components/RandomImge/RandomImage.tsx similarity index 100% rename from src/components/common/RandomImge/RandomImage.tsx rename to src/common/components/RandomImge/RandomImage.tsx diff --git a/src/components/common/RandomImge/index.ts b/src/common/components/RandomImge/index.ts similarity index 100% rename from src/components/common/RandomImge/index.ts rename to src/common/components/RandomImge/index.ts diff --git a/src/components/common/Skeleton/MemeListSkeleton.tsx b/src/common/components/Skeleton/MemeListSkeleton.tsx similarity index 100% rename from src/components/common/Skeleton/MemeListSkeleton.tsx rename to src/common/components/Skeleton/MemeListSkeleton.tsx diff --git a/src/components/common/Skeleton/Skeleton.stories.tsx b/src/common/components/Skeleton/Skeleton.stories.tsx similarity index 100% rename from src/components/common/Skeleton/Skeleton.stories.tsx rename to src/common/components/Skeleton/Skeleton.stories.tsx diff --git a/src/components/common/Skeleton/Skeleton.tsx b/src/common/components/Skeleton/Skeleton.tsx similarity index 100% rename from src/components/common/Skeleton/Skeleton.tsx rename to src/common/components/Skeleton/Skeleton.tsx diff --git a/src/components/common/Skeleton/index.ts b/src/common/components/Skeleton/index.ts similarity index 100% rename from src/components/common/Skeleton/index.ts rename to src/common/components/Skeleton/index.ts diff --git a/src/components/common/Suspense/SSRSuspense.tsx b/src/common/components/Suspense/SSRSuspense.tsx similarity index 100% rename from src/components/common/Suspense/SSRSuspense.tsx rename to src/common/components/Suspense/SSRSuspense.tsx diff --git a/src/components/common/Suspense/index.ts b/src/common/components/Suspense/index.ts similarity index 100% rename from src/components/common/Suspense/index.ts rename to src/common/components/Suspense/index.ts diff --git a/src/components/common/Toast/Toast.stories.tsx b/src/common/components/Toast/Toast.stories.tsx similarity index 93% rename from src/components/common/Toast/Toast.stories.tsx rename to src/common/components/Toast/Toast.stories.tsx index f0c6ba6f..039a679f 100644 --- a/src/components/common/Toast/Toast.stories.tsx +++ b/src/common/components/Toast/Toast.stories.tsx @@ -1,6 +1,6 @@ import { useToast } from "@/application/hooks/common"; -import { Button } from "@/components/common/Button"; +import { Button } from "../Button"; import type { Toast } from "./types"; export default { diff --git a/src/components/common/Toast/Toast.tsx b/src/common/components/Toast/Toast.tsx similarity index 92% rename from src/components/common/Toast/Toast.tsx rename to src/common/components/Toast/Toast.tsx index b29a08e6..5349af60 100644 --- a/src/components/common/Toast/Toast.tsx +++ b/src/common/components/Toast/Toast.tsx @@ -1,6 +1,6 @@ import { slideUpDown } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "../Icon"; import { defaultToastStyle, toastColors, toastIconColors } from "./style"; import type { Toast as Props } from "./types"; diff --git a/src/components/common/Toast/ToastContainer.tsx b/src/common/components/Toast/ToastContainer.tsx similarity index 92% rename from src/components/common/Toast/ToastContainer.tsx rename to src/common/components/Toast/ToastContainer.tsx index 4673f50c..92d877b4 100644 --- a/src/components/common/Toast/ToastContainer.tsx +++ b/src/common/components/Toast/ToastContainer.tsx @@ -1,10 +1,10 @@ import { useRef } from "react"; import { useIsomorphicLayoutEffect } from "@/application/hooks"; -import { Portal } from "@/components/common/Portal"; -import { Toast } from "@/components/common/Toast/Toast"; +import { Portal } from "../Portal"; import { useToastContext } from "./context"; +import { Toast } from "./Toast"; let prevHeight = 0; const EXPAND_DELAY = 200; diff --git a/src/components/common/Toast/context.tsx b/src/common/components/Toast/context.tsx similarity index 100% rename from src/components/common/Toast/context.tsx rename to src/common/components/Toast/context.tsx diff --git a/src/components/common/Toast/index.ts b/src/common/components/Toast/index.ts similarity index 100% rename from src/components/common/Toast/index.ts rename to src/common/components/Toast/index.ts diff --git a/src/components/common/Toast/style.ts b/src/common/components/Toast/style.ts similarity index 100% rename from src/components/common/Toast/style.ts rename to src/common/components/Toast/style.ts diff --git a/src/components/common/Toast/types.ts b/src/common/components/Toast/types.ts similarity index 90% rename from src/components/common/Toast/types.ts rename to src/common/components/Toast/types.ts index cafe3f54..213fccf3 100644 --- a/src/components/common/Toast/types.ts +++ b/src/common/components/Toast/types.ts @@ -1,8 +1,7 @@ import type { CSSInterpolation } from "@emotion/serialize"; import type { ReactElement } from "react"; -import type { IconName } from "@/components/common/Icon"; - +import type { IconName } from "../Icon"; import type { toastColors } from "./style"; export type ToastType = "success" | "custom"; diff --git a/src/components/common/Modal/ProfileModal.tsx b/src/components/common/Modal/ProfileModal.tsx deleted file mode 100644 index 401443eb..00000000 --- a/src/components/common/Modal/ProfileModal.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import Link from "next/link"; -import { useRouter } from "next/router"; - -import { useAuth, useToast } from "@/application/hooks"; -import { PATH } from "@/application/util"; - -import { DropDown } from "../DropDown"; -import { Icon } from "../Icon"; -import { Photo } from "../Photo"; - -export const ProfileModal = () => { - const { user, logout } = useAuth(); - const { show } = useToast(); - const { push } = useRouter(); - - const handleLogout = () => { - logout(undefined, { - onSuccess: () => push(PATH.getMainPage), - onError: () => show("오류가 발생하였습니다"), - }); - }; - - return ( - <> - - -
- -
-
- - - -
- - {user?.name} -
- - -
- -
- {user?.shareCount} - share -
-
- {user?.saveCount} - collect -
-
- - 로그아웃 - -
-
- - ); -}; diff --git a/src/components/common/Navigation/SideBar/SideBar.stories.tsx b/src/components/common/Navigation/SideBar/SideBar.stories.tsx deleted file mode 100644 index fbec0bc4..00000000 --- a/src/components/common/Navigation/SideBar/SideBar.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { ComponentMeta, ComponentStory } from "@storybook/react"; - -import { SideBar as _SideBar } from "@/components/common/Navigation/SideBar/SideBar"; - -export default { - title: "components/common/Navigation/SideBar", - component: _SideBar, -} as ComponentMeta; - -export const SideBar: ComponentStory = () => <_SideBar />; diff --git a/src/components/common/PostList/PostItem.tsx b/src/components/common/PostList/PostItem.tsx deleted file mode 100644 index caa5c8ee..00000000 --- a/src/components/common/PostList/PostItem.tsx +++ /dev/null @@ -1,17 +0,0 @@ -interface Post { - id: number; - userId: number; - title: string; - body: string; -} -interface PostItemProps { - post: Post; -} -export const PostItem = ({ post }: PostItemProps) => { - return ( -
  • -

    {post.title}

    -

    {post.body}

    -
  • - ); -}; diff --git a/src/components/common/PostList/PostList.stories.tsx b/src/components/common/PostList/PostList.stories.tsx deleted file mode 100644 index 0fe650d8..00000000 --- a/src/components/common/PostList/PostList.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { ComponentMeta, ComponentStory } from "@storybook/react"; -import { rest } from "msw"; -import React from "react"; - -import { PostList } from "./PostList"; - -export default { - title: "Example/PostList", - component: PostList, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: "color" }, - }, -} as ComponentMeta; - -const MockTemplate: ComponentStory = () => ; - -export const MockedSuccess = MockTemplate.bind({}); - -export const MockedError = MockTemplate.bind({}); -MockedError.parameters = { - msw: { - handlers: [ - rest.get("https://jsonplaceholder.typicode.com/posts", (req, res, ctx) => { - return res(ctx.delay(800), ctx.status(403)); - }), - ], - }, -}; diff --git a/src/components/common/PostList/PostList.tsx b/src/components/common/PostList/PostList.tsx deleted file mode 100644 index 31dde204..00000000 --- a/src/components/common/PostList/PostList.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useEffect, useState } from "react"; - -import { PostItem } from "./PostItem"; - -interface Post { - id: number; - userId: number; - title: string; - body: string; -} -function useFetchPostList() { - const [status, setStatus] = useState("idle"); - const [data, setData] = useState([]); - - useEffect(() => { - setStatus("loading"); - - fetch("https://jsonplaceholder.typicode.com/posts") - .then((res) => { - if (!res.ok) { - throw new Error(res.statusText); - } - return res; - }) - .then((res) => res.json()) - .then((data) => { - setStatus("success"); - setData(data); - }) - .catch(() => { - setStatus("error"); - }); - }, []); - - return { - status, - data, - }; -} - -export const PostList = () => { - const { status, data: posts } = useFetchPostList(); - - if (status === "loading") { - return

    Fetching Star Wars data...

    ; - } - - if (status === "error") { - return

    Could not fetch Star Wars data

    ; - } - return ( -
      - {posts.map((post) => ( - - ))} -
    - ); -}; diff --git a/src/components/explore/EmptyMemesView/EmptyMemesView.tsx b/src/components/explore/EmptyMemesView/EmptyMemesView.tsx index 0173ea25..5574ae39 100644 --- a/src/components/explore/EmptyMemesView/EmptyMemesView.tsx +++ b/src/components/explore/EmptyMemesView/EmptyMemesView.tsx @@ -1,6 +1,6 @@ import { channelUrl } from "@/application/util"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; export const EmptyMemesView = () => { return ( diff --git a/src/components/explore/Thumbnail/Thumbnail.tsx b/src/components/explore/Thumbnail/Thumbnail.tsx index 406479d3..d630a253 100644 --- a/src/components/explore/Thumbnail/Thumbnail.tsx +++ b/src/components/explore/Thumbnail/Thumbnail.tsx @@ -2,7 +2,7 @@ import { useRouter } from "next/router"; import { useClipboard, useGetMemesByTag, useToast } from "@/application/hooks"; import { DOMAIN } from "@/application/util"; -import { Photo } from "@/components/common/Photo"; +import { Photo } from "@/common/components/Photo"; interface Props { tag: string; diff --git a/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx b/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx index bb8da01b..6d08b412 100644 --- a/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx +++ b/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx @@ -2,8 +2,8 @@ import type { Dispatch, SetStateAction } from "react"; import { startTransition, useCallback } from "react"; import { css } from "twin.macro"; -import { DropDown } from "@/components/common/DropDown"; -import { Icon } from "@/components/common/Icon"; +import { DropDown } from "@/common/components/DropDown"; +import { Icon } from "@/common/components/Icon"; import type { MemeListType } from "../type"; diff --git a/src/components/home/MemeListContainer/MemeListContainer.tsx b/src/components/home/MemeListContainer/MemeListContainer.tsx index 609d7cc4..d82de229 100644 --- a/src/components/home/MemeListContainer/MemeListContainer.tsx +++ b/src/components/home/MemeListContainer/MemeListContainer.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; -import { MemeListSkeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { MemeListSkeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { MemeSortDropDown } from "./DropDown"; import { CommonMemeList } from "./MemeList"; diff --git a/src/components/home/Skeleton/SkeletonMeme.tsx b/src/components/home/Skeleton/SkeletonMeme.tsx index da59cfe9..f9a0d77f 100644 --- a/src/components/home/Skeleton/SkeletonMeme.tsx +++ b/src/components/home/Skeleton/SkeletonMeme.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "@/components/common/Skeleton"; +import { Skeleton } from "@/common/components/Skeleton"; import { SkeletonTagList } from "./SkeletonTagList"; diff --git a/src/components/home/Skeleton/SkeletonTagList.tsx b/src/components/home/Skeleton/SkeletonTagList.tsx index f2466b12..f01af79e 100644 --- a/src/components/home/Skeleton/SkeletonTagList.tsx +++ b/src/components/home/Skeleton/SkeletonTagList.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "@/components/common/Skeleton"; +import { Skeleton } from "@/common/components/Skeleton"; export const SkeletonTagList = ({ count }: { count: number }) => { return ( diff --git a/src/components/home/UserSharedMeme/SharedMemeItem.tsx b/src/components/home/UserSharedMeme/SharedMemeItem.tsx index 6bdc1f34..0c11a735 100644 --- a/src/components/home/UserSharedMeme/SharedMemeItem.tsx +++ b/src/components/home/UserSharedMeme/SharedMemeItem.tsx @@ -1,8 +1,8 @@ import Link from "next/link"; -import { Icon } from "@/components/common/Icon"; -import { Photo } from "@/components/common/Photo"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { Icon } from "@/common/components/Icon"; +import { Photo } from "@/common/components/Photo"; +import { SSRSuspense } from "@/common/components/Suspense"; import type { Meme } from "@/types"; import { SkeletonTagList } from "../Skeleton"; diff --git a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx b/src/components/home/UserSharedMeme/SharedMemeTagList.tsx index 2bf0bc2b..5188d841 100644 --- a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx +++ b/src/components/home/UserSharedMeme/SharedMemeTagList.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { useGetMemeTagsById } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { Chip } from "@/components/common/Chip"; +import { Chip } from "@/common/components/Chip"; interface Props { id: string; diff --git a/src/components/home/UserSharedMeme/UserSharedMemeList.tsx b/src/components/home/UserSharedMeme/UserSharedMemeList.tsx index d8a6b3ee..86cd5b23 100644 --- a/src/components/home/UserSharedMeme/UserSharedMemeList.tsx +++ b/src/components/home/UserSharedMeme/UserSharedMemeList.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { css } from "twin.macro"; import { useGetMemesByCollectionId } from "@/application/hooks"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "@/common/components/Icon"; import { SharedMemeItem } from "./SharedMemeItem"; diff --git a/src/components/meme/ActionSheet/MemeActionSheet.tsx b/src/components/meme/ActionSheet/MemeActionSheet.tsx index 78155db3..759a427c 100644 --- a/src/components/meme/ActionSheet/MemeActionSheet.tsx +++ b/src/components/meme/ActionSheet/MemeActionSheet.tsx @@ -3,7 +3,7 @@ import tw from "twin.macro"; import { useAuth, useCollection, useOverlay } from "@/application/hooks"; import { channelUrl } from "@/application/util"; -import { ActionSheet } from "@/components/common/ActionSheet"; +import { ActionSheet } from "@/common/components/ActionSheet"; import type { Meme } from "@/types"; import { MemeShareModal } from "../MemeInfo/Modal"; diff --git a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx b/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx index 73aebde4..f84e3bcc 100644 --- a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx +++ b/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx @@ -5,8 +5,8 @@ import { useCallback, useMemo } from "react"; import { prefetchCollectionCheck, useIntersect } from "@/application/hooks"; import { CORE_QUERY_KEY } from "@/application/hooks/api/core/queryKey"; import { QUERY_KEYS } from "@/application/hooks/api/meme/queryKey"; -import { Masonry } from "@/components/common/Masonry"; -import { renderMemeItemSkeletons } from "@/components/common/Skeleton"; +import { Masonry } from "@/common/components/Masonry"; +import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; import { MemeItem } from "@/components/meme/MemeItem"; import type { GetMemesResponse, Meme } from "@/types"; diff --git a/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx b/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx index d07e32df..3816438d 100644 --- a/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx +++ b/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx @@ -1,6 +1,6 @@ import { useClipboard } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; interface Props { target: string; diff --git a/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx b/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx index a6825692..e4c7f308 100644 --- a/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx +++ b/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx @@ -1,6 +1,6 @@ import { useAuth, useCollection } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/Button/KakaoShareButton.tsx b/src/components/meme/MemeInfo/Button/KakaoShareButton.tsx index 0b07bf49..b5cf560d 100644 --- a/src/components/meme/MemeInfo/Button/KakaoShareButton.tsx +++ b/src/components/meme/MemeInfo/Button/KakaoShareButton.tsx @@ -1,7 +1,7 @@ import type { KakaoShareOptions } from "@/application/hooks/domain/share"; import { useKakaoShare } from "@/application/hooks/domain/share"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; interface Props { resource: Omit; diff --git a/src/components/meme/MemeInfo/Button/NativeShareButton.tsx b/src/components/meme/MemeInfo/Button/NativeShareButton.tsx index 76917b03..5bf0e335 100644 --- a/src/components/meme/MemeInfo/Button/NativeShareButton.tsx +++ b/src/components/meme/MemeInfo/Button/NativeShareButton.tsx @@ -1,5 +1,5 @@ -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; interface Props { title: string; diff --git a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx index ad365aed..1fa7d743 100644 --- a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx +++ b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx @@ -8,8 +8,8 @@ import { useToast, } from "@/application/hooks"; import { DOMAIN, PATH } from "@/application/util"; -import { DropDown } from "@/components/common/DropDown"; -import { Icon } from "@/components/common/Icon"; +import { DropDown } from "@/common/components/DropDown"; +import { Icon } from "@/common/components/Icon"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/MemeCTAList.tsx b/src/components/meme/MemeInfo/MemeCTAList.tsx index 44aa52ae..34c19712 100644 --- a/src/components/meme/MemeInfo/MemeCTAList.tsx +++ b/src/components/meme/MemeInfo/MemeCTAList.tsx @@ -1,8 +1,8 @@ import { Suspense } from "react"; import { useOverlay } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; import { MemeShareModal } from "@/components/meme/MemeInfo/Modal"; import { CollectionSaveButton } from "./Button"; diff --git a/src/components/meme/MemeInfo/MemeDetail.tsx b/src/components/meme/MemeInfo/MemeDetail.tsx index a75cb715..ebb8e43c 100644 --- a/src/components/meme/MemeInfo/MemeDetail.tsx +++ b/src/components/meme/MemeInfo/MemeDetail.tsx @@ -1,8 +1,8 @@ import { css } from "twin.macro"; import { useMemeDetailById } from "@/application/hooks"; -import { Photo } from "@/components/common/Photo"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { Photo } from "@/common/components/Photo"; +import { SSRSuspense } from "@/common/components/Suspense"; import { MemeExport } from "@/components/meme/MemeInfo/DropDown/MemeExport"; interface Props { diff --git a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx index 32625fdd..c2bdfda9 100644 --- a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx +++ b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx @@ -1,8 +1,8 @@ import { useAuth, useMemeDetailById, useToast } from "@/application/hooks"; import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; import { DOMAIN, PATH } from "@/application/util"; -import { Modal } from "@/components/common/Modal"; -import { Photo } from "@/components/common/Photo"; +import { Modal } from "@/common/components/Modal"; +import { Photo } from "@/common/components/Photo"; import { ClipboardCopyButton, KakaoShareButton, diff --git a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx b/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx index 1e20912c..2efb23fb 100644 --- a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx +++ b/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "@/components/common/Skeleton"; +import { Skeleton } from "@/common/components/Skeleton"; import { SkeletonMemeTagList } from "@/components/meme"; export const SkeletonMemeDetail = () => { diff --git a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx b/src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx index cf6b567b..1163296c 100644 --- a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx +++ b/src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "@/components/common/Skeleton"; +import { Skeleton } from "@/common/components/Skeleton"; import { SkeletonTagList } from "@/components/home/Skeleton"; export const SkeletonMemeTagList = () => { diff --git a/src/components/meme/MemeItem/MemeItem.tsx b/src/components/meme/MemeItem/MemeItem.tsx index 5aa67b5e..28f19c9a 100644 --- a/src/components/meme/MemeItem/MemeItem.tsx +++ b/src/components/meme/MemeItem/MemeItem.tsx @@ -2,8 +2,8 @@ import { memo } from "react"; import { useMoveMemeDetail, useOverlay } from "@/application/hooks"; import { isEncodingError } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; -import { Photo } from "@/components/common/Photo"; +import { Icon } from "@/common/components/Icon"; +import { Photo } from "@/common/components/Photo"; import type { Meme } from "@/types"; import { MemeActionSheet } from "../ActionSheet"; diff --git a/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx b/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx index 2689e8de..88b5c77f 100644 --- a/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx +++ b/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx @@ -1,5 +1,5 @@ import { useGetMemesByCollectionId } from "@/application/hooks"; -import { Masonry } from "@/components/common/Masonry"; +import { Masonry } from "@/common/components/Masonry"; import { MemeItem } from "@/components/meme/MemeItem"; interface Props { diff --git a/src/components/search/SearchInput/SearchInput.tsx b/src/components/search/SearchInput/SearchInput.tsx index 7813023d..cde405b2 100644 --- a/src/components/search/SearchInput/SearchInput.tsx +++ b/src/components/search/SearchInput/SearchInput.tsx @@ -1,7 +1,7 @@ import type { InputHTMLAttributes } from "react"; -import { Icon } from "@/components/common/Icon"; -import { InputBase } from "@/components/common/Input"; +import { Icon } from "@/common/components/Icon"; +import { InputBase } from "@/common/components/Input"; interface Props extends InputHTMLAttributes { onReset?: () => void; diff --git a/src/components/search/SearchItem/searchItem.stories.tsx b/src/components/search/SearchItem/searchItem.stories.tsx index 28083090..5011c92c 100644 --- a/src/components/search/SearchItem/searchItem.stories.tsx +++ b/src/components/search/SearchItem/searchItem.stories.tsx @@ -1,6 +1,6 @@ import type { ComponentMeta } from "@storybook/react"; -import { Chip } from "@/components/common/Chip"; +import { Chip } from "@/common/components/Chip"; import { SearchItem } from "./SearchItem"; diff --git a/src/components/search/SearchPopular/SearchPopularItem.tsx b/src/components/search/SearchPopular/SearchPopularItem.tsx index 8a65ad0f..3fe7808f 100644 --- a/src/components/search/SearchPopular/SearchPopularItem.tsx +++ b/src/components/search/SearchPopular/SearchPopularItem.tsx @@ -1,6 +1,6 @@ import type { HTMLAttributes } from "react"; -import { Photo } from "@/components/common/Photo"; +import { Photo } from "@/common/components/Photo"; interface Props extends HTMLAttributes { name: string; diff --git a/src/components/search/SearchRecent/SearchRecent.tsx b/src/components/search/SearchRecent/SearchRecent.tsx index bd5b4078..71a4186c 100644 --- a/src/components/search/SearchRecent/SearchRecent.tsx +++ b/src/components/search/SearchRecent/SearchRecent.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/router"; import type { RecentSearch } from "@/application/hooks"; import { isTagType } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "@/common/components/Icon"; import { SearchItem } from "../SearchItem"; diff --git a/src/components/search/SearchResult/SearchResultList.tsx b/src/components/search/SearchResult/SearchResultList.tsx index 00f07d3d..0432a604 100644 --- a/src/components/search/SearchResult/SearchResultList.tsx +++ b/src/components/search/SearchResult/SearchResultList.tsx @@ -3,7 +3,7 @@ import Link from "next/link"; import type { RecentSearch } from "@/application/hooks"; import { useGetTagSearch } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; +import { Icon } from "@/common/components/Icon"; import { SearchItem } from "@/components/search"; interface Prop { diff --git a/src/components/search/Skeleton/SkeletonTagList.tsx b/src/components/search/Skeleton/SkeletonTagList.tsx index 57dfb3d5..8b16184b 100644 --- a/src/components/search/Skeleton/SkeletonTagList.tsx +++ b/src/components/search/Skeleton/SkeletonTagList.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "@/components/common/Skeleton"; +import { Skeleton } from "@/common/components/Skeleton"; export const SkeletonTagList = () => { return ( diff --git a/src/components/tags/TagCategory/CategoryContent.tsx b/src/components/tags/TagCategory/CategoryContent.tsx index 34b3a059..652e8a65 100644 --- a/src/components/tags/TagCategory/CategoryContent.tsx +++ b/src/components/tags/TagCategory/CategoryContent.tsx @@ -4,8 +4,8 @@ import React, { Fragment } from "react"; import { useGetCategoryWithTag } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; -import { Photo } from "@/components/common/Photo"; +import { Icon } from "@/common/components/Icon"; +import { Photo } from "@/common/components/Photo"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/components/tags/TagCategory/FavoriteCategory.tsx b/src/components/tags/TagCategory/FavoriteCategory.tsx index 726e342c..1d072cf3 100644 --- a/src/components/tags/TagCategory/FavoriteCategory.tsx +++ b/src/components/tags/TagCategory/FavoriteCategory.tsx @@ -3,8 +3,8 @@ import { useRouter } from "next/router"; import { useAuth, useDeleteFavoriteTag, useGetFavoriteTags, useToast } from "@/application/hooks"; import { PATH } from "@/application/util"; -import { Icon } from "@/components/common/Icon"; -import { Photo } from "@/components/common/Photo"; +import { Icon } from "@/common/components/Icon"; +import { Photo } from "@/common/components/Photo"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/components/tags/TagCategory/TagCategory.tsx b/src/components/tags/TagCategory/TagCategory.tsx index 690d7c04..678a3d4b 100644 --- a/src/components/tags/TagCategory/TagCategory.tsx +++ b/src/components/tags/TagCategory/TagCategory.tsx @@ -1,8 +1,8 @@ import { css } from "twin.macro"; -import { Drawer } from "@/components/common/Drawer"; -import { Icon } from "@/components/common/Icon"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { Drawer } from "@/common/components/Drawer"; +import { Icon } from "@/common/components/Icon"; +import { SSRSuspense } from "@/common/components/Suspense"; import { CategoryContent } from "./CategoryContent"; import { useTagCategoryContext } from "./context"; diff --git a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx b/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx index 17e2dde2..ab072661 100644 --- a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx +++ b/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx @@ -5,8 +5,8 @@ import { usePostFavoriteTag, useToast, } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; -import { Icon } from "@/components/common/Icon"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; import { useTagCategoryContext } from "../TagCategory"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c1ff7e0a..184abbef 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -7,10 +7,10 @@ import { useEffect } from "react"; import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/application/hooks"; import { QueryClientProvider } from "@/application/queryClient"; -import { QueryErrorBoundary } from "@/components/common/ErrorBoundary"; -import { Layout } from "@/components/common/Layout"; -import { SignUpModal, SignUpModalProvider } from "@/components/common/Modal"; -import { ToastContainer, ToastProvider } from "@/components/common/Toast"; +import { QueryErrorBoundary } from "@/common/components/ErrorBoundary"; +import { Layout } from "@/common/components/Layout"; +import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; +import { ToastContainer, ToastProvider } from "@/common/components/Toast"; import { TagCategoryProvider } from "@/components/tags"; import { GoogleTagManagerScript, GTagScript } from "@/infra/sdk"; import type { DefaultPageProps } from "@/types"; diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 4df9477b..0b75efb9 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -1,7 +1,7 @@ import { captureException } from "@sentry/nextjs"; import type { NextPageContext } from "next"; -import { Navigation } from "@/components/common/Navigation"; +import { Navigation } from "@/common/components/Navigation"; interface Props { statusCode: number; diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index b691b6af..9b6d7df4 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -1,10 +1,10 @@ import { useDeferredValue } from "react"; import { useAuth, useDebounce, useInput } from "@/application/hooks"; +import { BackButtonNavigation } from "@/common/components/Navigation"; +import { MemeListSkeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { Collection, SearchedCollection } from "@/components/collect"; -import { BackButtonNavigation } from "@/components/common/Navigation"; -import { MemeListSkeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; import { withAuth } from "@/components/hocs"; import { SearchInput } from "@/components/search"; diff --git a/src/pages/explore/keywords/index.tsx b/src/pages/explore/keywords/index.tsx index 6d7a9cd0..23abadc5 100644 --- a/src/pages/explore/keywords/index.tsx +++ b/src/pages/explore/keywords/index.tsx @@ -1,12 +1,12 @@ import type { GetServerSideProps, NextPage } from "next"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; -import { ExplorePageNavigation } from "@/components/common/Navigation"; -import type { NextSeoProps } from "@/components/common/NextSeo"; -import { NextSeo } from "@/components/common/NextSeo"; -import { PullToRefresh } from "@/components/common/PullToRefresh"; -import { MemeListSkeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { ExplorePageNavigation } from "@/common/components/Navigation"; +import type { NextSeoProps } from "@/common/components/NextSeo"; +import { NextSeo } from "@/common/components/NextSeo"; +import { PullToRefresh } from "@/common/components/PullToRefresh"; +import { MemeListSkeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { MemesByKeyword } from "@/components/explore"; interface Props { diff --git a/src/pages/explore/tags/[tagId].tsx b/src/pages/explore/tags/[tagId].tsx index 653a34af..5674e0e6 100644 --- a/src/pages/explore/tags/[tagId].tsx +++ b/src/pages/explore/tags/[tagId].tsx @@ -3,9 +3,9 @@ import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { fetchTagInfo, prefetchMemesByTag } from "@/application/hooks"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; -import { ExplorePageNavigation } from "@/components/common/Navigation"; -import { NextSeo } from "@/components/common/NextSeo"; -import { PullToRefresh } from "@/components/common/PullToRefresh"; +import { ExplorePageNavigation } from "@/common/components/Navigation"; +import { NextSeo } from "@/common/components/NextSeo"; +import { PullToRefresh } from "@/common/components/PullToRefresh"; import { MemesByTag, Thumbnail } from "@/components/explore"; import { TagBookmarkButton } from "@/components/tags"; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 41311072..7916cc69 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,10 @@ import type { NextPage } from "next"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; -import { IntroPageNavigation } from "@/components/common/Navigation"; -import type { NextSeoProps } from "@/components/common/NextSeo"; -import { NextSeo } from "@/components/common/NextSeo"; -import { PullToRefresh } from "@/components/common/PullToRefresh"; +import { IntroPageNavigation } from "@/common/components/Navigation"; +import type { NextSeoProps } from "@/common/components/NextSeo"; +import { NextSeo } from "@/common/components/NextSeo"; +import { PullToRefresh } from "@/common/components/PullToRefresh"; import { MemeListContainer } from "@/components/home"; const HomePage: NextPage = () => { diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index 17d3711a..cd978b97 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -4,10 +4,10 @@ import { Suspense } from "react"; import { fetchMemeDetailById, fetchMemeTagsById, useMoveMemeDetail } from "@/application/hooks"; import { SITE_NAME } from "@/application/util"; -import { ExplorePageNavigation } from "@/components/common/Navigation"; -import { NextSeo } from "@/components/common/NextSeo"; -import { MemeListSkeleton, Skeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { ExplorePageNavigation } from "@/common/components/Navigation"; +import { NextSeo } from "@/common/components/NextSeo"; +import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { MemeCTAList, MemeDetail, diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 606c17cc..99383d27 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -2,11 +2,11 @@ import Link from "next/link"; import { css } from "twin.macro"; import { useAuth, useChannelIO } from "@/application/hooks"; -import { Icon } from "@/components/common/Icon"; -import { MyPageNavigation } from "@/components/common/Navigation"; -import { Photo } from "@/components/common/Photo"; -import { MemeListSkeleton, Skeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { Icon } from "@/common/components/Icon"; +import { MyPageNavigation } from "@/common/components/Navigation"; +import { Photo } from "@/common/components/Photo"; +import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { withAuth } from "@/components/hocs"; import { SummarizedCollection } from "@/components/mypage"; diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 0af014f6..b947017a 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -4,10 +4,10 @@ import { Suspense } from "react"; import { useDebounce, useInput, useRecentSearch } from "@/application/hooks"; import { DEFAULT_DESCRIPTION, PATH, SITE_NAME } from "@/application/util"; -import { SearchPageNavigation } from "@/components/common/Navigation"; -import type { NextSeoProps } from "@/components/common/NextSeo"; -import { NextSeo } from "@/components/common/NextSeo"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { SearchPageNavigation } from "@/common/components/Navigation"; +import type { NextSeoProps } from "@/common/components/NextSeo"; +import { NextSeo } from "@/common/components/NextSeo"; +import { SSRSuspense } from "@/common/components/Suspense"; import { SearchInput, SearchPopularList, diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index b10225ec..634f5eb8 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -1,8 +1,8 @@ import { useAuth, useChannelIO, useModal } from "@/application/hooks"; -import { Button } from "@/components/common/Button"; -import { SignOutModal } from "@/components/common/Modal"; -import { BackButtonNavigation } from "@/components/common/Navigation"; -import { Photo } from "@/components/common/Photo"; +import { Button } from "@/common/components/Button"; +import { SignOutModal } from "@/common/components/Modal"; +import { BackButtonNavigation } from "@/common/components/Navigation"; +import { Photo } from "@/common/components/Photo"; import { withAuth } from "@/components/hocs"; const SettingPage = () => { diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index 0e45d561..c66c6cc6 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -1,9 +1,9 @@ import type { NextPage } from "next"; import { useAuth } from "@/application/hooks"; -import { BackButtonNavigation } from "@/components/common/Navigation"; -import { MemeListSkeleton } from "@/components/common/Skeleton"; -import { SSRSuspense } from "@/components/common/Suspense"; +import { BackButtonNavigation } from "@/common/components/Navigation"; +import { MemeListSkeleton } from "@/common/components/Skeleton"; +import { SSRSuspense } from "@/common/components/Suspense"; import { withAuth } from "@/components/hocs"; import { SharedMemeList } from "@/components/share"; From c40a014a1e79a2ea268d45ff9ca57abfb5b3e540 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Tue, 13 Jun 2023 02:33:14 +0900 Subject: [PATCH 02/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20hook=20=EC=9D=B4=EB=8F=99=20-=20applicatio?= =?UTF-8?q?n/hooks/common=20->=20common/hooks=20-=20=EA=B3=B5=ED=86=B5=20h?= =?UTF-8?q?ook=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=A9=B4=EC=84=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=83=9D=EA=B8=B4=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/api/search/index.ts | 2 +- src/application/hooks/domain/collection/useCollection.tsx | 2 +- .../hooks/domain/search/useRecentSearch/useRecentSearch.ts | 2 +- src/application/hooks/index.ts | 2 +- src/common/components/Drawer/Drawer.tsx | 2 +- src/common/components/DropDown/DropDown.tsx | 2 +- src/common/components/Modal/Modal.tsx | 2 +- src/common/components/Modal/SignOutModal.tsx | 3 ++- src/common/components/Modal/SignUpModal/context.tsx | 2 +- src/common/components/Modal/types.ts | 2 +- src/common/components/Navigation/SearchHeader/SearchHeader.tsx | 2 +- .../components/Navigation/SideBar/LoginSideBarContent.tsx | 2 +- src/common/components/Portal/Portal.tsx | 2 +- src/common/components/Suspense/SSRSuspense.tsx | 2 +- src/common/components/Toast/Toast.stories.tsx | 2 +- src/common/components/Toast/ToastContainer.tsx | 2 +- src/{application/hooks/common => common/hooks}/index.ts | 0 src/{application/hooks/common => common/hooks}/useAnalytics.ts | 0 .../hooks/common => common/hooks}/useClickOutside.ts | 0 src/{application/hooks/common => common/hooks}/useClipboard.ts | 0 .../hooks/common => common/hooks}/useColoredText.tsx | 0 src/{application/hooks/common => common/hooks}/useDebounce.ts | 0 .../hooks/common => common/hooks}/useEllipsis.stories.tsx | 3 ++- src/{application/hooks/common => common/hooks}/useEllipsis.ts | 0 src/{application/hooks/common => common/hooks}/useInput.ts | 0 src/{application/hooks/common => common/hooks}/useIntersect.ts | 0 src/{application/hooks/common => common/hooks}/useIsMount.ts | 0 .../hooks/common => common/hooks}/useIsomorphicLayoutEffect.ts | 0 .../hooks/common => common/hooks}/useLocalStorage.ts | 0 .../hooks/common => common/hooks}/useLongPress/index.ts | 0 .../hooks/common => common/hooks}/useLongPress/types.ts | 0 .../hooks/common => common/hooks}/useLongPress/utils.ts | 0 src/{application/hooks/common => common/hooks}/useModal.ts | 0 .../common => common/hooks}/useOverlay/OverlayController.tsx | 0 .../common => common/hooks}/useOverlay/OverlayProvider.tsx | 0 .../hooks/common => common/hooks}/useOverlay/index.ts | 0 .../hooks/common => common/hooks}/useOverlay/types.ts | 0 .../hooks/common => common/hooks}/useOverlay/useOverlay.tsx | 0 .../hooks}/useRouteTracking/RouteTrackingProvider.tsx | 3 ++- .../hooks/common => common/hooks}/useRouteTracking/index.ts | 0 .../hooks}/useRouteTracking/useRouteTracking.ts | 0 .../hooks/common => common/hooks}/useScrollDirection.ts | 0 .../hooks/common => common/hooks}/useScrollLocker.ts | 0 .../hooks/common => common/hooks}/useSessionStorage.ts | 0 src/{application/hooks/common => common/hooks}/useToast.ts | 0 .../hooks/common => common/hooks}/useValidation.ts | 0 src/components/explore/Thumbnail/Thumbnail.tsx | 3 ++- src/components/hocs/withAuth/withAuth.tsx | 3 ++- src/components/meme/ActionSheet/MemeActionSheet.tsx | 3 ++- src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx | 3 ++- src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx | 2 +- src/components/meme/MemeInfo/DropDown/MemeExport.tsx | 2 +- src/components/meme/MemeInfo/MemeCTAList.tsx | 2 +- src/components/meme/MemeInfo/Modal/MemeShareModal.tsx | 3 ++- src/components/meme/MemeItem/MemeItem.tsx | 3 ++- src/components/search/SearchItem/SearchItem.tsx | 2 +- src/components/tags/TagCategory/FavoriteCategory.tsx | 3 ++- src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx | 2 +- src/pages/_app.tsx | 3 ++- src/pages/collect/index.tsx | 3 ++- src/pages/search/index.tsx | 3 ++- src/pages/setting/index.tsx | 3 ++- 62 files changed, 48 insertions(+), 34 deletions(-) rename src/{application/hooks/common => common/hooks}/index.ts (100%) rename src/{application/hooks/common => common/hooks}/useAnalytics.ts (100%) rename src/{application/hooks/common => common/hooks}/useClickOutside.ts (100%) rename src/{application/hooks/common => common/hooks}/useClipboard.ts (100%) rename src/{application/hooks/common => common/hooks}/useColoredText.tsx (100%) rename src/{application/hooks/common => common/hooks}/useDebounce.ts (100%) rename src/{application/hooks/common => common/hooks}/useEllipsis.stories.tsx (92%) rename src/{application/hooks/common => common/hooks}/useEllipsis.ts (100%) rename src/{application/hooks/common => common/hooks}/useInput.ts (100%) rename src/{application/hooks/common => common/hooks}/useIntersect.ts (100%) rename src/{application/hooks/common => common/hooks}/useIsMount.ts (100%) rename src/{application/hooks/common => common/hooks}/useIsomorphicLayoutEffect.ts (100%) rename src/{application/hooks/common => common/hooks}/useLocalStorage.ts (100%) rename src/{application/hooks/common => common/hooks}/useLongPress/index.ts (100%) rename src/{application/hooks/common => common/hooks}/useLongPress/types.ts (100%) rename src/{application/hooks/common => common/hooks}/useLongPress/utils.ts (100%) rename src/{application/hooks/common => common/hooks}/useModal.ts (100%) rename src/{application/hooks/common => common/hooks}/useOverlay/OverlayController.tsx (100%) rename src/{application/hooks/common => common/hooks}/useOverlay/OverlayProvider.tsx (100%) rename src/{application/hooks/common => common/hooks}/useOverlay/index.ts (100%) rename src/{application/hooks/common => common/hooks}/useOverlay/types.ts (100%) rename src/{application/hooks/common => common/hooks}/useOverlay/useOverlay.tsx (100%) rename src/{application/hooks/common => common/hooks}/useRouteTracking/RouteTrackingProvider.tsx (89%) rename src/{application/hooks/common => common/hooks}/useRouteTracking/index.ts (100%) rename src/{application/hooks/common => common/hooks}/useRouteTracking/useRouteTracking.ts (100%) rename src/{application/hooks/common => common/hooks}/useScrollDirection.ts (100%) rename src/{application/hooks/common => common/hooks}/useScrollLocker.ts (100%) rename src/{application/hooks/common => common/hooks}/useSessionStorage.ts (100%) rename src/{application/hooks/common => common/hooks}/useToast.ts (100%) rename src/{application/hooks/common => common/hooks}/useValidation.ts (100%) diff --git a/src/application/hooks/api/search/index.ts b/src/application/hooks/api/search/index.ts index 054ea2b8..0ffdbb8b 100644 --- a/src/application/hooks/api/search/index.ts +++ b/src/application/hooks/api/search/index.ts @@ -3,7 +3,7 @@ import { useInfiniteQuery } from "@tanstack/react-query"; import { useEffect, useRef } from "react"; import type { RecentSearch } from "@/application/hooks"; -import { useLocalStorage } from "@/application/hooks"; +import { useLocalStorage } from "@/common/hooks"; import { api } from "@/infra/api"; import { useCoreInfiniteQuery } from "../core/useCoreInfiniteQuery"; diff --git a/src/application/hooks/domain/collection/useCollection.tsx b/src/application/hooks/domain/collection/useCollection.tsx index 1e7e08fa..1937a07d 100644 --- a/src/application/hooks/domain/collection/useCollection.tsx +++ b/src/application/hooks/domain/collection/useCollection.tsx @@ -4,8 +4,8 @@ import { useDeleteMemeFromCollection, useGetCollectionCheck, usePostMemeToCollection, - useToast, } from "@/application/hooks"; +import { useToast } from "@/common/hooks"; const TAG_DELETE_DELAY = 3000; diff --git a/src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts b/src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts index c24475f4..bf1fdddb 100644 --- a/src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts +++ b/src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts @@ -1,4 +1,4 @@ -import { useLocalStorage } from "@/application/hooks/common"; +import { useLocalStorage } from "@/common/hooks"; import type { RecentSearch } from "./types"; diff --git a/src/application/hooks/index.ts b/src/application/hooks/index.ts index d48f913b..0fda58f5 100644 --- a/src/application/hooks/index.ts +++ b/src/application/hooks/index.ts @@ -1,3 +1,3 @@ +export * from "../../common/hooks"; export * from "./api"; -export * from "./common"; export * from "./domain"; diff --git a/src/common/components/Drawer/Drawer.tsx b/src/common/components/Drawer/Drawer.tsx index 6ae20eee..659d64dd 100644 --- a/src/common/components/Drawer/Drawer.tsx +++ b/src/common/components/Drawer/Drawer.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren, ReactNode } from "react"; import { css } from "twin.macro"; -import { useScrollLocker } from "@/application/hooks"; +import { useScrollLocker } from "@/common/hooks"; import { Portal } from "../Portal"; import { DrawerContextProvider, useDrawerContext, useSetDrawerContext } from "./context"; diff --git a/src/common/components/DropDown/DropDown.tsx b/src/common/components/DropDown/DropDown.tsx index 1f36b165..c34c13ac 100644 --- a/src/common/components/DropDown/DropDown.tsx +++ b/src/common/components/DropDown/DropDown.tsx @@ -9,8 +9,8 @@ import type { import { createContext, useContext, useState } from "react"; import { css } from "twin.macro"; -import { useClickOutside } from "@/application/hooks"; import { withDelay } from "@/application/util/delay"; +import { useClickOutside } from "@/common/hooks"; const DropDownContext = createContext(false); const DropDownSetContext = createContext>>(() => null); diff --git a/src/common/components/Modal/Modal.tsx b/src/common/components/Modal/Modal.tsx index 88091254..1bda69a2 100644 --- a/src/common/components/Modal/Modal.tsx +++ b/src/common/components/Modal/Modal.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from "react"; import { Children, createContext, isValidElement, useContext } from "react"; -import { useClickOutside } from "@/application/hooks"; import { fadeInOut } from "@/application/util"; +import { useClickOutside } from "@/common/hooks"; import { Icon } from "../Icon"; diff --git a/src/common/components/Modal/SignOutModal.tsx b/src/common/components/Modal/SignOutModal.tsx index 9e3f4f17..c6c00e9b 100644 --- a/src/common/components/Modal/SignOutModal.tsx +++ b/src/common/components/Modal/SignOutModal.tsx @@ -1,7 +1,8 @@ import { useRouter } from "next/router"; -import { useAuth, useToast } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { PATH } from "@/application/util"; +import { useToast } from "@/common/hooks"; import { RandomImage } from "../RandomImge"; import { Modal } from "./Modal"; diff --git a/src/common/components/Modal/SignUpModal/context.tsx b/src/common/components/Modal/SignUpModal/context.tsx index 259d33d7..0d268176 100644 --- a/src/common/components/Modal/SignUpModal/context.tsx +++ b/src/common/components/Modal/SignUpModal/context.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren } from "react"; import { createContext, useContext } from "react"; -import { useModal } from "@/application/hooks"; +import { useModal } from "@/common/hooks"; import type { ModalProps } from "../types"; diff --git a/src/common/components/Modal/types.ts b/src/common/components/Modal/types.ts index 693e0255..92b4c266 100644 --- a/src/common/components/Modal/types.ts +++ b/src/common/components/Modal/types.ts @@ -1,3 +1,3 @@ -import type { useModal } from "@/application/hooks"; +import type { useModal } from "@/common/hooks"; export type ModalProps = ReturnType; diff --git a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx index 48f7b485..7b6e313a 100644 --- a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx +++ b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx @@ -2,7 +2,7 @@ import { useRouter } from "next/router"; import { CSSTransition } from "react-transition-group"; import { css } from "twin.macro"; -import { useScrollDirection } from "@/application/hooks"; +import { useScrollDirection } from "@/common/hooks"; import { SearchInput } from "@/components/search"; import { TagCategory } from "@/components/tags"; diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx index 20338af4..0a1a2e53 100644 --- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx @@ -1,11 +1,11 @@ import Link from "next/link"; import type { useAuth } from "@/application/hooks"; -import { useModal } from "@/application/hooks"; import { channelUrl } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { SignOutModal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; +import { useModal } from "@/common/hooks"; type LoginSideBarContentProps = ReturnType; diff --git a/src/common/components/Portal/Portal.tsx b/src/common/components/Portal/Portal.tsx index a93d384a..b18fd72c 100644 --- a/src/common/components/Portal/Portal.tsx +++ b/src/common/components/Portal/Portal.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from "react"; import { useEffect, useRef } from "react"; import { createPortal } from "react-dom"; -import { useIsMount } from "@/application/hooks"; +import { useIsMount } from "@/common/hooks"; import { pretendard, suit } from "@/styles/fonts"; interface Props { diff --git a/src/common/components/Suspense/SSRSuspense.tsx b/src/common/components/Suspense/SSRSuspense.tsx index a50c093f..0191c976 100644 --- a/src/common/components/Suspense/SSRSuspense.tsx +++ b/src/common/components/Suspense/SSRSuspense.tsx @@ -1,7 +1,7 @@ import type { ComponentProps } from "react"; import { Suspense } from "react"; -import { useIsMount } from "@/application/hooks"; +import { useIsMount } from "@/common/hooks"; type Props = ComponentProps; diff --git a/src/common/components/Toast/Toast.stories.tsx b/src/common/components/Toast/Toast.stories.tsx index 039a679f..517d4e07 100644 --- a/src/common/components/Toast/Toast.stories.tsx +++ b/src/common/components/Toast/Toast.stories.tsx @@ -1,4 +1,4 @@ -import { useToast } from "@/application/hooks/common"; +import { useToast } from "@/common/hooks"; import { Button } from "../Button"; import type { Toast } from "./types"; diff --git a/src/common/components/Toast/ToastContainer.tsx b/src/common/components/Toast/ToastContainer.tsx index 92d877b4..b949ceac 100644 --- a/src/common/components/Toast/ToastContainer.tsx +++ b/src/common/components/Toast/ToastContainer.tsx @@ -1,6 +1,6 @@ import { useRef } from "react"; -import { useIsomorphicLayoutEffect } from "@/application/hooks"; +import { useIsomorphicLayoutEffect } from "@/common/hooks"; import { Portal } from "../Portal"; import { useToastContext } from "./context"; diff --git a/src/application/hooks/common/index.ts b/src/common/hooks/index.ts similarity index 100% rename from src/application/hooks/common/index.ts rename to src/common/hooks/index.ts diff --git a/src/application/hooks/common/useAnalytics.ts b/src/common/hooks/useAnalytics.ts similarity index 100% rename from src/application/hooks/common/useAnalytics.ts rename to src/common/hooks/useAnalytics.ts diff --git a/src/application/hooks/common/useClickOutside.ts b/src/common/hooks/useClickOutside.ts similarity index 100% rename from src/application/hooks/common/useClickOutside.ts rename to src/common/hooks/useClickOutside.ts diff --git a/src/application/hooks/common/useClipboard.ts b/src/common/hooks/useClipboard.ts similarity index 100% rename from src/application/hooks/common/useClipboard.ts rename to src/common/hooks/useClipboard.ts diff --git a/src/application/hooks/common/useColoredText.tsx b/src/common/hooks/useColoredText.tsx similarity index 100% rename from src/application/hooks/common/useColoredText.tsx rename to src/common/hooks/useColoredText.tsx diff --git a/src/application/hooks/common/useDebounce.ts b/src/common/hooks/useDebounce.ts similarity index 100% rename from src/application/hooks/common/useDebounce.ts rename to src/common/hooks/useDebounce.ts diff --git a/src/application/hooks/common/useEllipsis.stories.tsx b/src/common/hooks/useEllipsis.stories.tsx similarity index 92% rename from src/application/hooks/common/useEllipsis.stories.tsx rename to src/common/hooks/useEllipsis.stories.tsx index 39cce9e5..f325c38e 100644 --- a/src/application/hooks/common/useEllipsis.stories.tsx +++ b/src/common/hooks/useEllipsis.stories.tsx @@ -1,6 +1,7 @@ -import { useEllipsis } from "@/application/hooks"; import { Button } from "@/common/components/Button"; +import { useEllipsis } from "./useEllipsis"; + export default { title: "hooks/common/useEllipsis", component: null, diff --git a/src/application/hooks/common/useEllipsis.ts b/src/common/hooks/useEllipsis.ts similarity index 100% rename from src/application/hooks/common/useEllipsis.ts rename to src/common/hooks/useEllipsis.ts diff --git a/src/application/hooks/common/useInput.ts b/src/common/hooks/useInput.ts similarity index 100% rename from src/application/hooks/common/useInput.ts rename to src/common/hooks/useInput.ts diff --git a/src/application/hooks/common/useIntersect.ts b/src/common/hooks/useIntersect.ts similarity index 100% rename from src/application/hooks/common/useIntersect.ts rename to src/common/hooks/useIntersect.ts diff --git a/src/application/hooks/common/useIsMount.ts b/src/common/hooks/useIsMount.ts similarity index 100% rename from src/application/hooks/common/useIsMount.ts rename to src/common/hooks/useIsMount.ts diff --git a/src/application/hooks/common/useIsomorphicLayoutEffect.ts b/src/common/hooks/useIsomorphicLayoutEffect.ts similarity index 100% rename from src/application/hooks/common/useIsomorphicLayoutEffect.ts rename to src/common/hooks/useIsomorphicLayoutEffect.ts diff --git a/src/application/hooks/common/useLocalStorage.ts b/src/common/hooks/useLocalStorage.ts similarity index 100% rename from src/application/hooks/common/useLocalStorage.ts rename to src/common/hooks/useLocalStorage.ts diff --git a/src/application/hooks/common/useLongPress/index.ts b/src/common/hooks/useLongPress/index.ts similarity index 100% rename from src/application/hooks/common/useLongPress/index.ts rename to src/common/hooks/useLongPress/index.ts diff --git a/src/application/hooks/common/useLongPress/types.ts b/src/common/hooks/useLongPress/types.ts similarity index 100% rename from src/application/hooks/common/useLongPress/types.ts rename to src/common/hooks/useLongPress/types.ts diff --git a/src/application/hooks/common/useLongPress/utils.ts b/src/common/hooks/useLongPress/utils.ts similarity index 100% rename from src/application/hooks/common/useLongPress/utils.ts rename to src/common/hooks/useLongPress/utils.ts diff --git a/src/application/hooks/common/useModal.ts b/src/common/hooks/useModal.ts similarity index 100% rename from src/application/hooks/common/useModal.ts rename to src/common/hooks/useModal.ts diff --git a/src/application/hooks/common/useOverlay/OverlayController.tsx b/src/common/hooks/useOverlay/OverlayController.tsx similarity index 100% rename from src/application/hooks/common/useOverlay/OverlayController.tsx rename to src/common/hooks/useOverlay/OverlayController.tsx diff --git a/src/application/hooks/common/useOverlay/OverlayProvider.tsx b/src/common/hooks/useOverlay/OverlayProvider.tsx similarity index 100% rename from src/application/hooks/common/useOverlay/OverlayProvider.tsx rename to src/common/hooks/useOverlay/OverlayProvider.tsx diff --git a/src/application/hooks/common/useOverlay/index.ts b/src/common/hooks/useOverlay/index.ts similarity index 100% rename from src/application/hooks/common/useOverlay/index.ts rename to src/common/hooks/useOverlay/index.ts diff --git a/src/application/hooks/common/useOverlay/types.ts b/src/common/hooks/useOverlay/types.ts similarity index 100% rename from src/application/hooks/common/useOverlay/types.ts rename to src/common/hooks/useOverlay/types.ts diff --git a/src/application/hooks/common/useOverlay/useOverlay.tsx b/src/common/hooks/useOverlay/useOverlay.tsx similarity index 100% rename from src/application/hooks/common/useOverlay/useOverlay.tsx rename to src/common/hooks/useOverlay/useOverlay.tsx diff --git a/src/application/hooks/common/useRouteTracking/RouteTrackingProvider.tsx b/src/common/hooks/useRouteTracking/RouteTrackingProvider.tsx similarity index 89% rename from src/application/hooks/common/useRouteTracking/RouteTrackingProvider.tsx rename to src/common/hooks/useRouteTracking/RouteTrackingProvider.tsx index e3be8959..7a463729 100644 --- a/src/application/hooks/common/useRouteTracking/RouteTrackingProvider.tsx +++ b/src/common/hooks/useRouteTracking/RouteTrackingProvider.tsx @@ -2,7 +2,8 @@ import { useRouter } from "next/router"; import type { PropsWithChildren } from "react"; import { createContext, useEffect } from "react"; -import { useIsMount, useSessionStorage } from "@/application/hooks"; +import { useIsMount } from "../useIsMount"; +import { useSessionStorage } from "../useSessionStorage"; const defaultValue: string[] = []; diff --git a/src/application/hooks/common/useRouteTracking/index.ts b/src/common/hooks/useRouteTracking/index.ts similarity index 100% rename from src/application/hooks/common/useRouteTracking/index.ts rename to src/common/hooks/useRouteTracking/index.ts diff --git a/src/application/hooks/common/useRouteTracking/useRouteTracking.ts b/src/common/hooks/useRouteTracking/useRouteTracking.ts similarity index 100% rename from src/application/hooks/common/useRouteTracking/useRouteTracking.ts rename to src/common/hooks/useRouteTracking/useRouteTracking.ts diff --git a/src/application/hooks/common/useScrollDirection.ts b/src/common/hooks/useScrollDirection.ts similarity index 100% rename from src/application/hooks/common/useScrollDirection.ts rename to src/common/hooks/useScrollDirection.ts diff --git a/src/application/hooks/common/useScrollLocker.ts b/src/common/hooks/useScrollLocker.ts similarity index 100% rename from src/application/hooks/common/useScrollLocker.ts rename to src/common/hooks/useScrollLocker.ts diff --git a/src/application/hooks/common/useSessionStorage.ts b/src/common/hooks/useSessionStorage.ts similarity index 100% rename from src/application/hooks/common/useSessionStorage.ts rename to src/common/hooks/useSessionStorage.ts diff --git a/src/application/hooks/common/useToast.ts b/src/common/hooks/useToast.ts similarity index 100% rename from src/application/hooks/common/useToast.ts rename to src/common/hooks/useToast.ts diff --git a/src/application/hooks/common/useValidation.ts b/src/common/hooks/useValidation.ts similarity index 100% rename from src/application/hooks/common/useValidation.ts rename to src/common/hooks/useValidation.ts diff --git a/src/components/explore/Thumbnail/Thumbnail.tsx b/src/components/explore/Thumbnail/Thumbnail.tsx index d630a253..1f4058c3 100644 --- a/src/components/explore/Thumbnail/Thumbnail.tsx +++ b/src/components/explore/Thumbnail/Thumbnail.tsx @@ -1,8 +1,9 @@ import { useRouter } from "next/router"; -import { useClipboard, useGetMemesByTag, useToast } from "@/application/hooks"; +import { useGetMemesByTag } from "@/application/hooks"; import { DOMAIN } from "@/application/util"; import { Photo } from "@/common/components/Photo"; +import { useClipboard, useToast } from "@/common/hooks"; interface Props { tag: string; diff --git a/src/components/hocs/withAuth/withAuth.tsx b/src/components/hocs/withAuth/withAuth.tsx index 5573b614..09dad2d3 100644 --- a/src/components/hocs/withAuth/withAuth.tsx +++ b/src/components/hocs/withAuth/withAuth.tsx @@ -2,7 +2,8 @@ import { useRouter } from "next/router"; import type { ComponentType } from "react"; import { useEffect } from "react"; -import { useAuth, useToast } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; +import { useToast } from "@/common/hooks"; export const withAuth = (WrappedComponent: ComponentType) => { const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component"; diff --git a/src/components/meme/ActionSheet/MemeActionSheet.tsx b/src/components/meme/ActionSheet/MemeActionSheet.tsx index 759a427c..83ce1cba 100644 --- a/src/components/meme/ActionSheet/MemeActionSheet.tsx +++ b/src/components/meme/ActionSheet/MemeActionSheet.tsx @@ -1,9 +1,10 @@ import { Suspense } from "react"; import tw from "twin.macro"; -import { useAuth, useCollection, useOverlay } from "@/application/hooks"; +import { useAuth, useCollection } from "@/application/hooks"; import { channelUrl } from "@/application/util"; import { ActionSheet } from "@/common/components/ActionSheet"; +import { useOverlay } from "@/common/hooks"; import type { Meme } from "@/types"; import { MemeShareModal } from "../MemeInfo/Modal"; diff --git a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx b/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx index f84e3bcc..82ae3dc5 100644 --- a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx +++ b/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx @@ -2,11 +2,12 @@ import type { UseInfiniteQueryResult } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query"; import { useCallback, useMemo } from "react"; -import { prefetchCollectionCheck, useIntersect } from "@/application/hooks"; +import { prefetchCollectionCheck } from "@/application/hooks"; import { CORE_QUERY_KEY } from "@/application/hooks/api/core/queryKey"; import { QUERY_KEYS } from "@/application/hooks/api/meme/queryKey"; import { Masonry } from "@/common/components/Masonry"; import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; +import { useIntersect } from "@/common/hooks"; import { MemeItem } from "@/components/meme/MemeItem"; import type { GetMemesResponse, Meme } from "@/types"; diff --git a/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx b/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx index 3816438d..315e7bda 100644 --- a/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx +++ b/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx @@ -1,6 +1,6 @@ -import { useClipboard } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; +import { useClipboard } from "@/common/hooks"; interface Props { target: string; diff --git a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx index 1fa7d743..02928bb8 100644 --- a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx +++ b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx @@ -5,11 +5,11 @@ import { useCollection, useMemeDetailById, usePostMemeToSharedCollection, - useToast, } from "@/application/hooks"; import { DOMAIN, PATH } from "@/application/util"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; +import { useToast } from "@/common/hooks"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/MemeCTAList.tsx b/src/components/meme/MemeInfo/MemeCTAList.tsx index 34c19712..6dbe72fe 100644 --- a/src/components/meme/MemeInfo/MemeCTAList.tsx +++ b/src/components/meme/MemeInfo/MemeCTAList.tsx @@ -1,8 +1,8 @@ import { Suspense } from "react"; -import { useOverlay } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; +import { useOverlay } from "@/common/hooks"; import { MemeShareModal } from "@/components/meme/MemeInfo/Modal"; import { CollectionSaveButton } from "./Button"; diff --git a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx index c2bdfda9..78ae2201 100644 --- a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx +++ b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx @@ -1,8 +1,9 @@ -import { useAuth, useMemeDetailById, useToast } from "@/application/hooks"; +import { useAuth, useMemeDetailById } from "@/application/hooks"; import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; import { DOMAIN, PATH } from "@/application/util"; import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; +import { useToast } from "@/common/hooks"; import { ClipboardCopyButton, KakaoShareButton, diff --git a/src/components/meme/MemeItem/MemeItem.tsx b/src/components/meme/MemeItem/MemeItem.tsx index 28f19c9a..cf0787ba 100644 --- a/src/components/meme/MemeItem/MemeItem.tsx +++ b/src/components/meme/MemeItem/MemeItem.tsx @@ -1,9 +1,10 @@ import { memo } from "react"; -import { useMoveMemeDetail, useOverlay } from "@/application/hooks"; +import { useMoveMemeDetail } from "@/application/hooks"; import { isEncodingError } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; +import { useOverlay } from "@/common/hooks"; import type { Meme } from "@/types"; import { MemeActionSheet } from "../ActionSheet"; diff --git a/src/components/search/SearchItem/SearchItem.tsx b/src/components/search/SearchItem/SearchItem.tsx index 62290abe..fc1c3911 100644 --- a/src/components/search/SearchItem/SearchItem.tsx +++ b/src/components/search/SearchItem/SearchItem.tsx @@ -1,6 +1,6 @@ import type { HTMLAttributes, ReactNode } from "react"; -import { useColoredText } from "@/application/hooks"; +import { useColoredText } from "@/common/hooks"; interface SearchItemProps extends HTMLAttributes { searchText?: string; diff --git a/src/components/tags/TagCategory/FavoriteCategory.tsx b/src/components/tags/TagCategory/FavoriteCategory.tsx index 1d072cf3..e4033824 100644 --- a/src/components/tags/TagCategory/FavoriteCategory.tsx +++ b/src/components/tags/TagCategory/FavoriteCategory.tsx @@ -1,10 +1,11 @@ import { Content, Header, Item, Trigger } from "@radix-ui/react-accordion"; import { useRouter } from "next/router"; -import { useAuth, useDeleteFavoriteTag, useGetFavoriteTags, useToast } from "@/application/hooks"; +import { useAuth, useDeleteFavoriteTag, useGetFavoriteTags } from "@/application/hooks"; import { PATH } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; +import { useToast } from "@/common/hooks"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx b/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx index ab072661..af614468 100644 --- a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx +++ b/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx @@ -3,10 +3,10 @@ import { useDeleteFavoriteTag, useGetTagInfo, usePostFavoriteTag, - useToast, } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; +import { useToast } from "@/common/hooks"; import { useTagCategoryContext } from "../TagCategory"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 184abbef..c5b6ccfd 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,12 +5,13 @@ import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/application/hooks"; +import { OverlayProvider, RouteTrackingProvider } from "@/application/hooks"; import { QueryClientProvider } from "@/application/queryClient"; import { QueryErrorBoundary } from "@/common/components/ErrorBoundary"; import { Layout } from "@/common/components/Layout"; import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; import { ToastContainer, ToastProvider } from "@/common/components/Toast"; +import { useAnalytics } from "@/common/hooks"; import { TagCategoryProvider } from "@/components/tags"; import { GoogleTagManagerScript, GTagScript } from "@/infra/sdk"; import type { DefaultPageProps } from "@/types"; diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index 9b6d7df4..0f1ea567 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -1,9 +1,10 @@ import { useDeferredValue } from "react"; -import { useAuth, useDebounce, useInput } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; +import { useDebounce, useInput } from "@/common/hooks"; import { Collection, SearchedCollection } from "@/components/collect"; import { withAuth } from "@/components/hocs"; import { SearchInput } from "@/components/search"; diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index b947017a..26c20af2 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -2,12 +2,13 @@ import type { NextPage } from "next"; import { useRouter } from "next/router"; import { Suspense } from "react"; -import { useDebounce, useInput, useRecentSearch } from "@/application/hooks"; +import { useRecentSearch } from "@/application/hooks"; import { DEFAULT_DESCRIPTION, PATH, SITE_NAME } from "@/application/util"; import { SearchPageNavigation } from "@/common/components/Navigation"; import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; import { SSRSuspense } from "@/common/components/Suspense"; +import { useDebounce, useInput } from "@/common/hooks"; import { SearchInput, SearchPopularList, diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index 634f5eb8..a3e3aa6c 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -1,8 +1,9 @@ -import { useAuth, useChannelIO, useModal } from "@/application/hooks"; +import { useAuth, useChannelIO } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { SignOutModal } from "@/common/components/Modal"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; +import { useModal } from "@/common/hooks"; import { withAuth } from "@/components/hocs"; const SettingPage = () => { From 02418ff472a5b633695f6667a2234abc7a95c499 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Tue, 13 Jun 2023 02:47:08 +0900 Subject: [PATCH 03/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=9C=A0=ED=8B=B8=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?-=20application/util=20->=20common/utils=20-=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=EC=9C=BC=EB=A1=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EC=A0=81=EC=9D=B8=20=EB=B3=80=EA=B2=BD=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/api/tags/index.ts | 2 +- src/application/hooks/domain/meme/useMoveMemeDetail.ts | 2 +- src/common/components/DropDown/DropDown.tsx | 2 +- src/common/components/Layout/ServiceGuide.tsx | 2 +- src/common/components/Modal/Modal.tsx | 2 +- src/common/components/Modal/SignOutModal.tsx | 2 +- src/common/components/Modal/SignUpModal/SignUpModal.tsx | 2 +- .../components/Navigation/SideBar/LoginSideBarContent.tsx | 2 +- .../components/Navigation/SideBar/LogoutSideBarContent.tsx | 2 +- src/common/components/Navigation/SideBar/SideBar.tsx | 2 +- src/common/components/PullToRefresh/PullToRefresh.tsx | 2 +- src/common/components/PullToRefresh/utils.ts | 2 +- src/common/components/Toast/Toast.tsx | 2 +- src/common/hooks/useAnalytics.ts | 2 +- src/common/hooks/useLocalStorage.ts | 2 +- src/common/hooks/useScrollDirection.ts | 2 +- src/common/hooks/useToast.ts | 2 +- src/{application/util => common/utils}/animation.ts | 0 src/{application/util => common/utils}/constant.ts | 0 src/{application/util => common/utils}/delay.ts | 0 src/{application/util => common/utils}/device.ts | 0 src/{application/util => common/utils}/gtag.ts | 0 src/{application/util => common/utils}/image-util.ts | 0 src/{application/util => common/utils}/index.ts | 0 src/{application/util => common/utils}/path.ts | 0 src/{application/util => common/utils}/storage.ts | 0 src/{application/util => common/utils}/throttle.ts | 0 src/components/explore/EmptyMemesView/EmptyMemesView.tsx | 2 +- src/components/explore/Thumbnail/Thumbnail.tsx | 2 +- src/components/home/UserSharedMeme/SharedMemeTagList.tsx | 2 +- src/components/meme/ActionSheet/MemeActionSheet.tsx | 2 +- src/components/meme/MemeInfo/DropDown/MemeExport.tsx | 2 +- src/components/meme/MemeInfo/MemeTagList.tsx | 2 +- src/components/meme/MemeInfo/Modal/MemeShareModal.tsx | 2 +- src/components/meme/MemeItem/MemeItem.tsx | 2 +- src/components/search/SearchPopular/SearchPopularList.tsx | 2 +- src/components/search/SearchRecent/SearchRecent.tsx | 2 +- src/components/search/SearchResult/SearchResultList.tsx | 2 +- src/components/tags/TagCategory/CategoryContent.tsx | 2 +- src/components/tags/TagCategory/FavoriteCategory.tsx | 2 +- src/infra/api/auth/index.ts | 2 +- src/infra/sdk/channelIO.ts | 2 +- src/infra/sdk/google.tsx | 2 +- src/pages/explore/keywords/index.tsx | 2 +- src/pages/explore/tags/[tagId].tsx | 2 +- src/pages/index.tsx | 2 +- src/pages/memes/[id].tsx | 2 +- src/pages/search/index.tsx | 2 +- 48 files changed, 38 insertions(+), 38 deletions(-) rename src/{application/util => common/utils}/animation.ts (100%) rename src/{application/util => common/utils}/constant.ts (100%) rename src/{application/util => common/utils}/delay.ts (100%) rename src/{application/util => common/utils}/device.ts (100%) rename src/{application/util => common/utils}/gtag.ts (100%) rename src/{application/util => common/utils}/image-util.ts (100%) rename src/{application/util => common/utils}/index.ts (100%) rename src/{application/util => common/utils}/path.ts (100%) rename src/{application/util => common/utils}/storage.ts (100%) rename src/{application/util => common/utils}/throttle.ts (100%) diff --git a/src/application/hooks/api/tags/index.ts b/src/application/hooks/api/tags/index.ts index 80614d16..f921c145 100644 --- a/src/application/hooks/api/tags/index.ts +++ b/src/application/hooks/api/tags/index.ts @@ -3,7 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useSuspendedQuery } from "@/application/hooks/api/core"; import type { QuerySelectOption } from "@/application/hooks/api/core/types"; -import { delay } from "@/application/util"; +import { delay } from "@/common/utils"; import { api } from "@/infra/api"; import type { GetFavoriteTagsResponse, diff --git a/src/application/hooks/domain/meme/useMoveMemeDetail.ts b/src/application/hooks/domain/meme/useMoveMemeDetail.ts index 2a5a8be1..d502c06a 100644 --- a/src/application/hooks/domain/meme/useMoveMemeDetail.ts +++ b/src/application/hooks/domain/meme/useMoveMemeDetail.ts @@ -1,6 +1,6 @@ import { useRouter } from "next/router"; -import { PATH } from "@/application/util"; +import { PATH } from "@/common/utils"; export const useMoveMemeDetail = () => { const router = useRouter(); diff --git a/src/common/components/DropDown/DropDown.tsx b/src/common/components/DropDown/DropDown.tsx index c34c13ac..5d382f75 100644 --- a/src/common/components/DropDown/DropDown.tsx +++ b/src/common/components/DropDown/DropDown.tsx @@ -9,8 +9,8 @@ import type { import { createContext, useContext, useState } from "react"; import { css } from "twin.macro"; -import { withDelay } from "@/application/util/delay"; import { useClickOutside } from "@/common/hooks"; +import { withDelay } from "@/common/utils"; const DropDownContext = createContext(false); const DropDownSetContext = createContext>>(() => null); diff --git a/src/common/components/Layout/ServiceGuide.tsx b/src/common/components/Layout/ServiceGuide.tsx index b344fdea..676a6d88 100644 --- a/src/common/components/Layout/ServiceGuide.tsx +++ b/src/common/components/Layout/ServiceGuide.tsx @@ -1,6 +1,6 @@ import Image from "next/image"; -import { thismemeGuideUrl } from "@/application/util"; +import { thismemeGuideUrl } from "@/common/utils"; import { Button } from "../Button"; diff --git a/src/common/components/Modal/Modal.tsx b/src/common/components/Modal/Modal.tsx index 1bda69a2..1b0ebea3 100644 --- a/src/common/components/Modal/Modal.tsx +++ b/src/common/components/Modal/Modal.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from "react"; import { Children, createContext, isValidElement, useContext } from "react"; -import { fadeInOut } from "@/application/util"; import { useClickOutside } from "@/common/hooks"; +import { fadeInOut } from "@/common/utils"; import { Icon } from "../Icon"; diff --git a/src/common/components/Modal/SignOutModal.tsx b/src/common/components/Modal/SignOutModal.tsx index c6c00e9b..d502972f 100644 --- a/src/common/components/Modal/SignOutModal.tsx +++ b/src/common/components/Modal/SignOutModal.tsx @@ -1,8 +1,8 @@ import { useRouter } from "next/router"; import { useAuth } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { useToast } from "@/common/hooks"; +import { PATH } from "@/common/utils"; import { RandomImage } from "../RandomImge"; import { Modal } from "./Modal"; diff --git a/src/common/components/Modal/SignUpModal/SignUpModal.tsx b/src/common/components/Modal/SignUpModal/SignUpModal.tsx index 9901929c..59be1f49 100644 --- a/src/common/components/Modal/SignUpModal/SignUpModal.tsx +++ b/src/common/components/Modal/SignUpModal/SignUpModal.tsx @@ -1,4 +1,4 @@ -import { IS_CSR } from "@/application/util"; +import { IS_CSR } from "@/common/utils"; import { Button } from "../../Button"; import { Icon } from "../../Icon"; diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx index 0a1a2e53..62fe875c 100644 --- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx @@ -1,11 +1,11 @@ import Link from "next/link"; import type { useAuth } from "@/application/hooks"; -import { channelUrl } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { SignOutModal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useModal } from "@/common/hooks"; +import { channelUrl } from "@/common/utils"; type LoginSideBarContentProps = ReturnType; diff --git a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx index 192bc836..99105605 100644 --- a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx @@ -1,7 +1,7 @@ import type { useAuth } from "@/application/hooks"; -import { channelUrl } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; +import { channelUrl } from "@/common/utils"; const defaultAvatarUrl = "/img/default-avatar.png"; const defaultName = "로그인하기"; diff --git a/src/common/components/Navigation/SideBar/SideBar.tsx b/src/common/components/Navigation/SideBar/SideBar.tsx index 3990b43e..9cbfb8fa 100644 --- a/src/common/components/Navigation/SideBar/SideBar.tsx +++ b/src/common/components/Navigation/SideBar/SideBar.tsx @@ -1,5 +1,5 @@ import { useAuth } from "@/application/hooks"; -import { instagramUrl, twitterUrl } from "@/application/util"; +import { instagramUrl, twitterUrl } from "@/common/utils"; import { useTagCategoryContext } from "@/components/tags"; import { Drawer } from "../../Drawer"; diff --git a/src/common/components/PullToRefresh/PullToRefresh.tsx b/src/common/components/PullToRefresh/PullToRefresh.tsx index 754882bb..2faa459f 100644 --- a/src/common/components/PullToRefresh/PullToRefresh.tsx +++ b/src/common/components/PullToRefresh/PullToRefresh.tsx @@ -3,7 +3,7 @@ import type { PropsWithChildren } from "react"; import { useRef, useState } from "react"; import { css } from "twin.macro"; -import { delay } from "@/application/util"; +import { delay } from "@/common/utils"; import { RefreshContent } from "./RefreshContent"; import { getScrollParent, getScrollTop } from "./utils"; diff --git a/src/common/components/PullToRefresh/utils.ts b/src/common/components/PullToRefresh/utils.ts index 068de749..f4ce9f39 100644 --- a/src/common/components/PullToRefresh/utils.ts +++ b/src/common/components/PullToRefresh/utils.ts @@ -1,4 +1,4 @@ -import { IS_CSR } from "@/application/util"; +import { IS_CSR } from "@/common/utils"; type ScrollElement = HTMLElement | Window; const defaultRoot = IS_CSR ? window : null; diff --git a/src/common/components/Toast/Toast.tsx b/src/common/components/Toast/Toast.tsx index 5349af60..6673fe53 100644 --- a/src/common/components/Toast/Toast.tsx +++ b/src/common/components/Toast/Toast.tsx @@ -1,4 +1,4 @@ -import { slideUpDown } from "@/application/util"; +import { slideUpDown } from "@/common/utils"; import { Icon } from "../Icon"; import { defaultToastStyle, toastColors, toastIconColors } from "./style"; diff --git a/src/common/hooks/useAnalytics.ts b/src/common/hooks/useAnalytics.ts index 843b3267..c2c51476 100644 --- a/src/common/hooks/useAnalytics.ts +++ b/src/common/hooks/useAnalytics.ts @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; -import * as gtag from "@/application/util"; +import * as gtag from "@/common/utils"; export const useAnalytics = () => { const router = useRouter(); diff --git a/src/common/hooks/useLocalStorage.ts b/src/common/hooks/useLocalStorage.ts index bc83bc8a..4f2f34db 100644 --- a/src/common/hooks/useLocalStorage.ts +++ b/src/common/hooks/useLocalStorage.ts @@ -1,7 +1,7 @@ import type { SetStateAction } from "react"; import { useCallback, useEffect, useState } from "react"; -import { safeLocalStorage } from "@/application/util"; +import { safeLocalStorage } from "@/common/utils"; type Serializable = T extends string | number | boolean | unknown[] | Record ? T diff --git a/src/common/hooks/useScrollDirection.ts b/src/common/hooks/useScrollDirection.ts index dc4b697e..ad5b88b1 100644 --- a/src/common/hooks/useScrollDirection.ts +++ b/src/common/hooks/useScrollDirection.ts @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; -import { throttle } from "@/application/util"; +import { throttle } from "@/common/utils"; const SCROLL_DIRECTION = { up: "UP", diff --git a/src/common/hooks/useToast.ts b/src/common/hooks/useToast.ts index 5d52e42e..9492cef1 100644 --- a/src/common/hooks/useToast.ts +++ b/src/common/hooks/useToast.ts @@ -1,8 +1,8 @@ import { useCallback } from "react"; -import { delay } from "@/application/util"; import { useSetToastContext } from "@/common/components/Toast"; import type { Toast, ToastOption, ToastType } from "@/common/components/Toast/types"; +import { delay } from "@/common/utils"; const DEFAULT_TOAST_DELAY = 1000; const ANIMATION_EXPIRE_DELAY = 1000; diff --git a/src/application/util/animation.ts b/src/common/utils/animation.ts similarity index 100% rename from src/application/util/animation.ts rename to src/common/utils/animation.ts diff --git a/src/application/util/constant.ts b/src/common/utils/constant.ts similarity index 100% rename from src/application/util/constant.ts rename to src/common/utils/constant.ts diff --git a/src/application/util/delay.ts b/src/common/utils/delay.ts similarity index 100% rename from src/application/util/delay.ts rename to src/common/utils/delay.ts diff --git a/src/application/util/device.ts b/src/common/utils/device.ts similarity index 100% rename from src/application/util/device.ts rename to src/common/utils/device.ts diff --git a/src/application/util/gtag.ts b/src/common/utils/gtag.ts similarity index 100% rename from src/application/util/gtag.ts rename to src/common/utils/gtag.ts diff --git a/src/application/util/image-util.ts b/src/common/utils/image-util.ts similarity index 100% rename from src/application/util/image-util.ts rename to src/common/utils/image-util.ts diff --git a/src/application/util/index.ts b/src/common/utils/index.ts similarity index 100% rename from src/application/util/index.ts rename to src/common/utils/index.ts diff --git a/src/application/util/path.ts b/src/common/utils/path.ts similarity index 100% rename from src/application/util/path.ts rename to src/common/utils/path.ts diff --git a/src/application/util/storage.ts b/src/common/utils/storage.ts similarity index 100% rename from src/application/util/storage.ts rename to src/common/utils/storage.ts diff --git a/src/application/util/throttle.ts b/src/common/utils/throttle.ts similarity index 100% rename from src/application/util/throttle.ts rename to src/common/utils/throttle.ts diff --git a/src/components/explore/EmptyMemesView/EmptyMemesView.tsx b/src/components/explore/EmptyMemesView/EmptyMemesView.tsx index 5574ae39..c7b449e6 100644 --- a/src/components/explore/EmptyMemesView/EmptyMemesView.tsx +++ b/src/components/explore/EmptyMemesView/EmptyMemesView.tsx @@ -1,6 +1,6 @@ -import { channelUrl } from "@/application/util"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; +import { channelUrl } from "@/common/utils"; export const EmptyMemesView = () => { return ( diff --git a/src/components/explore/Thumbnail/Thumbnail.tsx b/src/components/explore/Thumbnail/Thumbnail.tsx index 1f4058c3..51ce9bd6 100644 --- a/src/components/explore/Thumbnail/Thumbnail.tsx +++ b/src/components/explore/Thumbnail/Thumbnail.tsx @@ -1,9 +1,9 @@ import { useRouter } from "next/router"; import { useGetMemesByTag } from "@/application/hooks"; -import { DOMAIN } from "@/application/util"; import { Photo } from "@/common/components/Photo"; import { useClipboard, useToast } from "@/common/hooks"; +import { DOMAIN } from "@/common/utils"; interface Props { tag: string; diff --git a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx b/src/components/home/UserSharedMeme/SharedMemeTagList.tsx index 5188d841..1b939540 100644 --- a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx +++ b/src/components/home/UserSharedMeme/SharedMemeTagList.tsx @@ -1,8 +1,8 @@ import Link from "next/link"; import { useGetMemeTagsById } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { Chip } from "@/common/components/Chip"; +import { PATH } from "@/common/utils"; interface Props { id: string; diff --git a/src/components/meme/ActionSheet/MemeActionSheet.tsx b/src/components/meme/ActionSheet/MemeActionSheet.tsx index 83ce1cba..297c9277 100644 --- a/src/components/meme/ActionSheet/MemeActionSheet.tsx +++ b/src/components/meme/ActionSheet/MemeActionSheet.tsx @@ -2,9 +2,9 @@ import { Suspense } from "react"; import tw from "twin.macro"; import { useAuth, useCollection } from "@/application/hooks"; -import { channelUrl } from "@/application/util"; import { ActionSheet } from "@/common/components/ActionSheet"; import { useOverlay } from "@/common/hooks"; +import { channelUrl } from "@/common/utils"; import type { Meme } from "@/types"; import { MemeShareModal } from "../MemeInfo/Modal"; diff --git a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx index 02928bb8..8621a182 100644 --- a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx +++ b/src/components/meme/MemeInfo/DropDown/MemeExport.tsx @@ -6,10 +6,10 @@ import { useMemeDetailById, usePostMemeToSharedCollection, } from "@/application/hooks"; -import { DOMAIN, PATH } from "@/application/util"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; +import { DOMAIN, PATH } from "@/common/utils"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/MemeTagList.tsx b/src/components/meme/MemeInfo/MemeTagList.tsx index 0b425ac2..4a23f147 100644 --- a/src/components/meme/MemeInfo/MemeTagList.tsx +++ b/src/components/meme/MemeInfo/MemeTagList.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import { useGetMemeTagsById } from "@/application/hooks"; -import { PATH } from "@/application/util"; +import { PATH } from "@/common/utils"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx index 78ae2201..33af98c5 100644 --- a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx +++ b/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx @@ -1,9 +1,9 @@ import { useAuth, useMemeDetailById } from "@/application/hooks"; import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; -import { DOMAIN, PATH } from "@/application/util"; import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; +import { DOMAIN, PATH } from "@/common/utils"; import { ClipboardCopyButton, KakaoShareButton, diff --git a/src/components/meme/MemeItem/MemeItem.tsx b/src/components/meme/MemeItem/MemeItem.tsx index cf0787ba..5db5b14d 100644 --- a/src/components/meme/MemeItem/MemeItem.tsx +++ b/src/components/meme/MemeItem/MemeItem.tsx @@ -1,10 +1,10 @@ import { memo } from "react"; import { useMoveMemeDetail } from "@/application/hooks"; -import { isEncodingError } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useOverlay } from "@/common/hooks"; +import { isEncodingError } from "@/common/utils"; import type { Meme } from "@/types"; import { MemeActionSheet } from "../ActionSheet"; diff --git a/src/components/search/SearchPopular/SearchPopularList.tsx b/src/components/search/SearchPopular/SearchPopularList.tsx index bf07867c..3016af7e 100644 --- a/src/components/search/SearchPopular/SearchPopularList.tsx +++ b/src/components/search/SearchPopular/SearchPopularList.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import type { RecentSearch } from "@/application/hooks"; import { useGetPopularTags } from "@/application/hooks"; -import { PATH } from "@/application/util"; +import { PATH } from "@/common/utils"; import { SearchPopularItem } from "./SearchPopularItem"; diff --git a/src/components/search/SearchRecent/SearchRecent.tsx b/src/components/search/SearchRecent/SearchRecent.tsx index 71a4186c..c037c98c 100644 --- a/src/components/search/SearchRecent/SearchRecent.tsx +++ b/src/components/search/SearchRecent/SearchRecent.tsx @@ -2,8 +2,8 @@ import { useRouter } from "next/router"; import type { RecentSearch } from "@/application/hooks"; import { isTagType } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { Icon } from "@/common/components/Icon"; +import { PATH } from "@/common/utils"; import { SearchItem } from "../SearchItem"; diff --git a/src/components/search/SearchResult/SearchResultList.tsx b/src/components/search/SearchResult/SearchResultList.tsx index 0432a604..c1a4e4c7 100644 --- a/src/components/search/SearchResult/SearchResultList.tsx +++ b/src/components/search/SearchResult/SearchResultList.tsx @@ -2,8 +2,8 @@ import Link from "next/link"; import type { RecentSearch } from "@/application/hooks"; import { useGetTagSearch } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { Icon } from "@/common/components/Icon"; +import { PATH } from "@/common/utils"; import { SearchItem } from "@/components/search"; interface Prop { diff --git a/src/components/tags/TagCategory/CategoryContent.tsx b/src/components/tags/TagCategory/CategoryContent.tsx index 652e8a65..253a3b54 100644 --- a/src/components/tags/TagCategory/CategoryContent.tsx +++ b/src/components/tags/TagCategory/CategoryContent.tsx @@ -3,9 +3,9 @@ import { useRouter } from "next/router"; import React, { Fragment } from "react"; import { useGetCategoryWithTag } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; +import { PATH } from "@/common/utils"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/components/tags/TagCategory/FavoriteCategory.tsx b/src/components/tags/TagCategory/FavoriteCategory.tsx index e4033824..1c1ae8c1 100644 --- a/src/components/tags/TagCategory/FavoriteCategory.tsx +++ b/src/components/tags/TagCategory/FavoriteCategory.tsx @@ -2,10 +2,10 @@ import { Content, Header, Item, Trigger } from "@radix-ui/react-accordion"; import { useRouter } from "next/router"; import { useAuth, useDeleteFavoriteTag, useGetFavoriteTags } from "@/application/hooks"; -import { PATH } from "@/application/util"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; +import { PATH } from "@/common/utils"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/infra/api/auth/index.ts b/src/infra/api/auth/index.ts index b7557fdd..6e4db499 100644 --- a/src/infra/api/auth/index.ts +++ b/src/infra/api/auth/index.ts @@ -1,7 +1,7 @@ import type { AxiosInstance, AxiosRequestConfig } from "axios"; import { isAxiosError } from "axios"; -import { IS_CSR } from "@/application/util"; +import { IS_CSR } from "@/common/utils"; import type { RefreshResponse } from "@/infra/api/auth/types"; export class AuthApi { diff --git a/src/infra/sdk/channelIO.ts b/src/infra/sdk/channelIO.ts index 6b2d90e6..1e0826e7 100644 --- a/src/infra/sdk/channelIO.ts +++ b/src/infra/sdk/channelIO.ts @@ -1,4 +1,4 @@ -import { IS_CSR } from "@/application/util"; +import { IS_CSR } from "@/common/utils"; export class ChannelService { private static sdk: ChannelService; diff --git a/src/infra/sdk/google.tsx b/src/infra/sdk/google.tsx index 5a4580e8..bee210ec 100644 --- a/src/infra/sdk/google.tsx +++ b/src/infra/sdk/google.tsx @@ -1,6 +1,6 @@ import Script from "next/script"; -import * as gtag from "@/application/util"; +import * as gtag from "@/common/utils"; export const GTagScript = () => { return ( diff --git a/src/pages/explore/keywords/index.tsx b/src/pages/explore/keywords/index.tsx index 23abadc5..a1264038 100644 --- a/src/pages/explore/keywords/index.tsx +++ b/src/pages/explore/keywords/index.tsx @@ -1,12 +1,12 @@ import type { GetServerSideProps, NextPage } from "next"; -import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; +import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; import { MemesByKeyword } from "@/components/explore"; interface Props { diff --git a/src/pages/explore/tags/[tagId].tsx b/src/pages/explore/tags/[tagId].tsx index 5674e0e6..d65794f4 100644 --- a/src/pages/explore/tags/[tagId].tsx +++ b/src/pages/explore/tags/[tagId].tsx @@ -2,10 +2,10 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { fetchTagInfo, prefetchMemesByTag } from "@/application/hooks"; -import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; +import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; import { MemesByTag, Thumbnail } from "@/components/explore"; import { TagBookmarkButton } from "@/components/tags"; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7916cc69..679d7179 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,10 @@ import type { NextPage } from "next"; -import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/application/util"; import { IntroPageNavigation } from "@/common/components/Navigation"; import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; +import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; import { MemeListContainer } from "@/components/home"; const HomePage: NextPage = () => { diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index cd978b97..58c5250b 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -3,11 +3,11 @@ import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { Suspense } from "react"; import { fetchMemeDetailById, fetchMemeTagsById, useMoveMemeDetail } from "@/application/hooks"; -import { SITE_NAME } from "@/application/util"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; +import { SITE_NAME } from "@/common/utils"; import { MemeCTAList, MemeDetail, diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 26c20af2..dfe47f4d 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -3,12 +3,12 @@ import { useRouter } from "next/router"; import { Suspense } from "react"; import { useRecentSearch } from "@/application/hooks"; -import { DEFAULT_DESCRIPTION, PATH, SITE_NAME } from "@/application/util"; import { SearchPageNavigation } from "@/common/components/Navigation"; import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; import { SSRSuspense } from "@/common/components/Suspense"; import { useDebounce, useInput } from "@/common/hooks"; +import { DEFAULT_DESCRIPTION, PATH, SITE_NAME } from "@/common/utils"; import { SearchInput, SearchPopularList, From ef5be12b196979b30e4adaca07dce7d168142636 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Tue, 13 Jun 2023 02:48:26 +0900 Subject: [PATCH 04/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/index.ts | 1 - src/common/components/Navigation/BackButton/BackButton.tsx | 2 +- src/pages/_app.tsx | 3 +-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/application/hooks/index.ts b/src/application/hooks/index.ts index 0fda58f5..d68bbb1a 100644 --- a/src/application/hooks/index.ts +++ b/src/application/hooks/index.ts @@ -1,3 +1,2 @@ -export * from "../../common/hooks"; export * from "./api"; export * from "./domain"; diff --git a/src/common/components/Navigation/BackButton/BackButton.tsx b/src/common/components/Navigation/BackButton/BackButton.tsx index 1a8a183b..60ab9298 100644 --- a/src/common/components/Navigation/BackButton/BackButton.tsx +++ b/src/common/components/Navigation/BackButton/BackButton.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import type { ComponentProps } from "react"; -import { useRouteTracking } from "@/application/hooks"; +import { useRouteTracking } from "@/common/hooks"; import { Icon } from "../../Icon"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c5b6ccfd..31448c7e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,13 +5,12 @@ import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { OverlayProvider, RouteTrackingProvider } from "@/application/hooks"; import { QueryClientProvider } from "@/application/queryClient"; import { QueryErrorBoundary } from "@/common/components/ErrorBoundary"; import { Layout } from "@/common/components/Layout"; import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; import { ToastContainer, ToastProvider } from "@/common/components/Toast"; -import { useAnalytics } from "@/common/hooks"; +import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/common/hooks"; import { TagCategoryProvider } from "@/components/tags"; import { GoogleTagManagerScript, GTagScript } from "@/infra/sdk"; import type { DefaultPageProps } from "@/types"; From 80079a4c4513fb7077148823a20f6340665f40d4 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Tue, 13 Jun 2023 02:52:18 +0900 Subject: [PATCH 05/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EC=84=9C=EB=93=9C=ED=8C=8C=ED=8B=B0=EB=9D=BC=EC=9D=B4=EB=B8=8C?= =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?-=20infra/sdk=20->=20common/libs=20-=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=A0=81=EC=9D=B8=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/domain/channel/useChannelIO.ts | 2 +- src/application/hooks/domain/share/useKakaoShare.ts | 2 +- src/{infra/sdk => common/libs}/channelIO.ts | 0 src/{infra/sdk => common/libs}/google.tsx | 0 src/{infra/sdk => common/libs}/index.ts | 0 src/{infra/sdk => common/libs}/kakao.ts | 0 src/pages/_app.tsx | 2 +- 7 files changed, 3 insertions(+), 3 deletions(-) rename src/{infra/sdk => common/libs}/channelIO.ts (100%) rename src/{infra/sdk => common/libs}/google.tsx (100%) rename src/{infra/sdk => common/libs}/index.ts (100%) rename src/{infra/sdk => common/libs}/kakao.ts (100%) diff --git a/src/application/hooks/domain/channel/useChannelIO.ts b/src/application/hooks/domain/channel/useChannelIO.ts index 642f37e8..31de5210 100644 --- a/src/application/hooks/domain/channel/useChannelIO.ts +++ b/src/application/hooks/domain/channel/useChannelIO.ts @@ -1,6 +1,6 @@ import { useEffect } from "react"; -import { ChannelService } from "@/infra/sdk"; +import { ChannelService } from "@/common/libs"; import type { User } from "@/types"; interface Props { diff --git a/src/application/hooks/domain/share/useKakaoShare.ts b/src/application/hooks/domain/share/useKakaoShare.ts index cedd4272..cbb1a676 100644 --- a/src/application/hooks/domain/share/useKakaoShare.ts +++ b/src/application/hooks/domain/share/useKakaoShare.ts @@ -1,6 +1,6 @@ import { useCallback } from "react"; -import { KakaoSDK } from "@/infra/sdk"; +import { KakaoSDK } from "@/common/libs"; export interface KakaoShareOptions { title: string; diff --git a/src/infra/sdk/channelIO.ts b/src/common/libs/channelIO.ts similarity index 100% rename from src/infra/sdk/channelIO.ts rename to src/common/libs/channelIO.ts diff --git a/src/infra/sdk/google.tsx b/src/common/libs/google.tsx similarity index 100% rename from src/infra/sdk/google.tsx rename to src/common/libs/google.tsx diff --git a/src/infra/sdk/index.ts b/src/common/libs/index.ts similarity index 100% rename from src/infra/sdk/index.ts rename to src/common/libs/index.ts diff --git a/src/infra/sdk/kakao.ts b/src/common/libs/kakao.ts similarity index 100% rename from src/infra/sdk/kakao.ts rename to src/common/libs/kakao.ts diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 31448c7e..b55da103 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -11,8 +11,8 @@ import { Layout } from "@/common/components/Layout"; import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; import { ToastContainer, ToastProvider } from "@/common/components/Toast"; import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/common/hooks"; +import { GoogleTagManagerScript, GTagScript } from "@/common/libs"; import { TagCategoryProvider } from "@/components/tags"; -import { GoogleTagManagerScript, GTagScript } from "@/infra/sdk"; import type { DefaultPageProps } from "@/types"; if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { From 9570210eff3aa8e521d7abe930830116e4a66d22 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Sun, 18 Jun 2023 17:02:52 +0900 Subject: [PATCH 06/32] =?UTF-8?q?=F0=9F=94=A7=20update(tailwind.config.js)?= =?UTF-8?q?:=20content=20=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 4bce28a1..eb585931 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,14 @@ const PX0_50 = { ...Array.from(Array(51)).map((_, i) => `${i / 10}rem`) }; module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx}", + "./src/features/**/*.{js,ts,jsx,tsx}", + "./src/common/**/*.{js,ts,jsx,tsx}", + + /** + * ################################ + * 리팩터링 이후 아래 content는 제거될 예정입니다. + * @deprecated + */ "./src/components/**/*.{js,ts,jsx,tsx}", "./src/application/**/*.{js,ts,jsx,tsx}", ], From cf204143f43f07ed218f7b89610393c576b5298b Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Sun, 18 Jun 2023 17:04:20 +0900 Subject: [PATCH 07/32] =?UTF-8?q?=F0=9F=90=9B=20fix(next.config.js):=20?= =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?-=20twin.macro=20=EB=A5=BC=20import=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=AA=A9=EB=A1=9D=EC=9D=84=20src=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EB=82=B4=EC=97=90=20=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EB=AA=A8=EB=93=A0=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20https://github.com/ben-rogerson/twin.examples/b?= =?UTF-8?q?lob/master/next-emotion/withTwin.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/next.config.js b/next.config.js index efef2d23..8b9a7a8b 100644 --- a/next.config.js +++ b/next.config.js @@ -11,13 +11,7 @@ const IS_DEV = process.env.NODE_ENV === "development"; const IS_PROD = process.env.NODE_ENV === "production"; // The folders containing files importing twin.macro -const includedDirs = [ - path.resolve(__dirname, "./src/application"), - path.resolve(__dirname, "./src/components"), - path.resolve(__dirname, "./src/infra"), - path.resolve(__dirname, "./src/pages"), - path.resolve(__dirname, "./src/styles"), -]; +const includedDirs = [path.resolve(__dirname, "./src")]; // eslint-disable-next-line @typescript-eslint/no-var-requires const withPWA = require("next-pwa")({ From 9a9989ca8dd6ed106c21d38ec3a377812a132125 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 24 Jun 2023 16:35:10 +0900 Subject: [PATCH 08/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=ED=99=88=20=ED=99=94=EB=A9=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-=20/components/home=20->=20/f?= =?UTF-8?q?eatures/home/components=20-=20deadcode=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/MemeListContainer/DropDown/index.ts | 1 - .../MemeList/UserFindMemeList.tsx | 24 ----------- .../home/MemeListContainer/MemeList/index.ts | 2 - src/components/home/Skeleton/SkeletonMeme.tsx | 43 ------------------- src/components/home/Skeleton/index.ts | 1 - .../home/UserSharedMeme/SharedMemeItem.tsx | 38 ---------------- .../home/UserSharedMeme/SharedMemeTagList.tsx | 25 ----------- .../UserSharedMeme/UserSharedMemeList.tsx | 39 ----------------- src/components/home/UserSharedMeme/index.ts | 1 - .../MemeListContainer}/CommonMemeList.tsx | 2 +- .../MemeListContainer/MemeListContainer.tsx | 4 +- .../MemeListContainer}/MemeSortDropDown.tsx | 2 +- .../components}/MemeListContainer/index.ts | 0 .../components}/MemeListContainer/type.ts | 0 .../home/components}/index.ts | 1 - src/pages/index.tsx | 2 +- 16 files changed, 5 insertions(+), 180 deletions(-) delete mode 100644 src/components/home/MemeListContainer/DropDown/index.ts delete mode 100644 src/components/home/MemeListContainer/MemeList/UserFindMemeList.tsx delete mode 100644 src/components/home/MemeListContainer/MemeList/index.ts delete mode 100644 src/components/home/Skeleton/SkeletonMeme.tsx delete mode 100644 src/components/home/UserSharedMeme/SharedMemeItem.tsx delete mode 100644 src/components/home/UserSharedMeme/SharedMemeTagList.tsx delete mode 100644 src/components/home/UserSharedMeme/UserSharedMemeList.tsx delete mode 100644 src/components/home/UserSharedMeme/index.ts rename src/{components/home/MemeListContainer/MemeList => features/home/components/MemeListContainer}/CommonMemeList.tsx (91%) rename src/{components/home => features/home/components}/MemeListContainer/MemeListContainer.tsx (83%) rename src/{components/home/MemeListContainer/DropDown => features/home/components/MemeListContainer}/MemeSortDropDown.tsx (98%) rename src/{components/home => features/home/components}/MemeListContainer/index.ts (100%) rename src/{components/home => features/home/components}/MemeListContainer/type.ts (100%) rename src/{components/home => features/home/components}/index.ts (52%) diff --git a/src/components/home/MemeListContainer/DropDown/index.ts b/src/components/home/MemeListContainer/DropDown/index.ts deleted file mode 100644 index 859f7da0..00000000 --- a/src/components/home/MemeListContainer/DropDown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MemeSortDropDown"; diff --git a/src/components/home/MemeListContainer/MemeList/UserFindMemeList.tsx b/src/components/home/MemeListContainer/MemeList/UserFindMemeList.tsx deleted file mode 100644 index 86082981..00000000 --- a/src/components/home/MemeListContainer/MemeList/UserFindMemeList.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useGetUserFindMemes } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; - -interface Props { - userId: number | undefined; -} - -export const UserFindMemeList = ({ userId }: Props) => { - const { - data: memeList, - isFetchingNextPage, - fetchNextPage, - } = useGetUserFindMemes({ - userId: userId as number, - }); - - return ( - fetchNextPage({ cancelRefetch: false })} - /> - ); -}; diff --git a/src/components/home/MemeListContainer/MemeList/index.ts b/src/components/home/MemeListContainer/MemeList/index.ts deleted file mode 100644 index ed83a373..00000000 --- a/src/components/home/MemeListContainer/MemeList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./CommonMemeList"; -export * from "./UserFindMemeList"; diff --git a/src/components/home/Skeleton/SkeletonMeme.tsx b/src/components/home/Skeleton/SkeletonMeme.tsx deleted file mode 100644 index f9a0d77f..00000000 --- a/src/components/home/Skeleton/SkeletonMeme.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Skeleton } from "@/common/components/Skeleton"; - -import { SkeletonTagList } from "./SkeletonTagList"; - -export const SkeletonMeme = () => { - return ( -
    - - -
    - - -
    - -
    - ); -}; diff --git a/src/components/home/Skeleton/index.ts b/src/components/home/Skeleton/index.ts index 19129f4d..4e48487c 100644 --- a/src/components/home/Skeleton/index.ts +++ b/src/components/home/Skeleton/index.ts @@ -1,2 +1 @@ -export * from "./SkeletonMeme"; export * from "./SkeletonTagList"; diff --git a/src/components/home/UserSharedMeme/SharedMemeItem.tsx b/src/components/home/UserSharedMeme/SharedMemeItem.tsx deleted file mode 100644 index 0c11a735..00000000 --- a/src/components/home/UserSharedMeme/SharedMemeItem.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import Link from "next/link"; - -import { Icon } from "@/common/components/Icon"; -import { Photo } from "@/common/components/Photo"; -import { SSRSuspense } from "@/common/components/Suspense"; -import type { Meme } from "@/types"; - -import { SkeletonTagList } from "../Skeleton"; -import { SharedMemeTagList } from "./SharedMemeTagList"; - -interface Props { - meme: Meme; -} - -export const SharedMemeItem = ({ meme }: Props) => { - return ( -
  • - -
    - -
    -
    - {meme.name} - - - {meme.shareCount} - -
    - - }> - - -
  • - ); -}; diff --git a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx b/src/components/home/UserSharedMeme/SharedMemeTagList.tsx deleted file mode 100644 index 1b939540..00000000 --- a/src/components/home/UserSharedMeme/SharedMemeTagList.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Link from "next/link"; - -import { useGetMemeTagsById } from "@/application/hooks"; -import { Chip } from "@/common/components/Chip"; -import { PATH } from "@/common/utils"; - -interface Props { - id: string; -} - -export const SharedMemeTagList = ({ id }: Props) => { - const { tags } = useGetMemeTagsById(id); - - return ( -
      - {tags?.slice(0, 3)?.map((tag) => ( -
    • - - - -
    • - ))} -
    - ); -}; diff --git a/src/components/home/UserSharedMeme/UserSharedMemeList.tsx b/src/components/home/UserSharedMeme/UserSharedMemeList.tsx deleted file mode 100644 index 86cd5b23..00000000 --- a/src/components/home/UserSharedMeme/UserSharedMemeList.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Link from "next/link"; -import { css } from "twin.macro"; - -import { useGetMemesByCollectionId } from "@/application/hooks"; -import { Icon } from "@/common/components/Icon"; - -import { SharedMemeItem } from "./SharedMemeItem"; - -interface Props { - name?: string; - sharedId?: number; -} -export const UserSharedMemeList = ({ name, sharedId }: Props) => { - const { data: memeList } = useGetMemesByCollectionId(sharedId as number); - if (!memeList.length) return null; - - return ( -
    - -
    - {`${name} 이(가) 공유했던 밈`} - -
    - -
      - {memeList.map((meme) => ( - - ))} -
    -
    - ); -}; diff --git a/src/components/home/UserSharedMeme/index.ts b/src/components/home/UserSharedMeme/index.ts deleted file mode 100644 index 70d508d6..00000000 --- a/src/components/home/UserSharedMeme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./UserSharedMemeList"; diff --git a/src/components/home/MemeListContainer/MemeList/CommonMemeList.tsx b/src/features/home/components/MemeListContainer/CommonMemeList.tsx similarity index 91% rename from src/components/home/MemeListContainer/MemeList/CommonMemeList.tsx rename to src/features/home/components/MemeListContainer/CommonMemeList.tsx index 46bcaca1..0f06a4f4 100644 --- a/src/components/home/MemeListContainer/MemeList/CommonMemeList.tsx +++ b/src/features/home/components/MemeListContainer/CommonMemeList.tsx @@ -1,7 +1,7 @@ import { useGetMemesBySort } from "@/application/hooks"; import { InfiniteMemeList } from "@/components/meme"; -import type { MemeListType } from "../type"; +import type { MemeListType } from "./type"; interface Props { sortBy: MemeListType; diff --git a/src/components/home/MemeListContainer/MemeListContainer.tsx b/src/features/home/components/MemeListContainer/MemeListContainer.tsx similarity index 83% rename from src/components/home/MemeListContainer/MemeListContainer.tsx rename to src/features/home/components/MemeListContainer/MemeListContainer.tsx index d82de229..8cca537c 100644 --- a/src/components/home/MemeListContainer/MemeListContainer.tsx +++ b/src/features/home/components/MemeListContainer/MemeListContainer.tsx @@ -3,8 +3,8 @@ import { useState } from "react"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { MemeSortDropDown } from "./DropDown"; -import { CommonMemeList } from "./MemeList"; +import { CommonMemeList } from "./CommonMemeList"; +import { MemeSortDropDown } from "./MemeSortDropDown"; import type { MemeListType } from "./type"; export const MemeListContainer = () => { diff --git a/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx b/src/features/home/components/MemeListContainer/MemeSortDropDown.tsx similarity index 98% rename from src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx rename to src/features/home/components/MemeListContainer/MemeSortDropDown.tsx index 6d08b412..7b39d40d 100644 --- a/src/components/home/MemeListContainer/DropDown/MemeSortDropDown.tsx +++ b/src/features/home/components/MemeListContainer/MemeSortDropDown.tsx @@ -5,7 +5,7 @@ import { css } from "twin.macro"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; -import type { MemeListType } from "../type"; +import type { MemeListType } from "./type"; interface Props { sortBy: MemeListType; diff --git a/src/components/home/MemeListContainer/index.ts b/src/features/home/components/MemeListContainer/index.ts similarity index 100% rename from src/components/home/MemeListContainer/index.ts rename to src/features/home/components/MemeListContainer/index.ts diff --git a/src/components/home/MemeListContainer/type.ts b/src/features/home/components/MemeListContainer/type.ts similarity index 100% rename from src/components/home/MemeListContainer/type.ts rename to src/features/home/components/MemeListContainer/type.ts diff --git a/src/components/home/index.ts b/src/features/home/components/index.ts similarity index 52% rename from src/components/home/index.ts rename to src/features/home/components/index.ts index 36a1e823..460b4644 100644 --- a/src/components/home/index.ts +++ b/src/features/home/components/index.ts @@ -1,2 +1 @@ export * from "./MemeListContainer"; -export * from "./UserSharedMeme"; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 679d7179..c8c0d1d4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,7 @@ import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; -import { MemeListContainer } from "@/components/home"; +import { MemeListContainer } from "@/features/home/components"; const HomePage: NextPage = () => { return ( From 5b8f3e0ff77cd2c5f3ffdd0f2617602e5482b8b4 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Wed, 5 Jul 2023 00:06:09 +0900 Subject: [PATCH 09/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EB=B0=88=20=EC=83=81=EC=84=B8=20=ED=99=94=EB=A9=B4=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99,=20feature?= =?UTF-8?q?=EA=B0=84=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-=20/components/meme=20->=20/f?= =?UTF-8?q?eatures/memes/components=20-=20deadcode=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?-=20feature=EA=B0=84=EC=97=90=20=EA=B3=B5=ED=86=B5=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=93=B0=EC=9D=B4=EB=8A=94=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=8A=94=20/features/common=20=EC=97=90=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Masonry/Masonry.stories.tsx | 2 +- .../collect/Collection/Collection.tsx | 2 +- .../SearchedCollection/SearchedCollection.tsx | 2 +- .../explore/MemesByKeyword/MemesByKeyword.tsx | 2 +- .../explore/MemesByTag/MemesByTag.tsx | 2 +- src/components/meme/ActionSheet/index.ts | 1 - src/components/meme/InfiniteMemeList/index.ts | 1 - .../MemeInfo/Button/CollectionSaveButton.tsx | 31 ---------- src/components/meme/MemeInfo/Button/index.ts | 4 -- src/components/meme/MemeInfo/MemeCTAList.tsx | 35 ----------- src/components/meme/MemeItem/index.ts | 1 - .../SummarizedCollection.tsx | 2 +- src/components/share/SharedMemeList.tsx | 2 +- .../common/components}/InfiniteMemeList.tsx | 2 +- .../common/components}/MemeActionSheet.tsx | 3 +- .../common/components}/MemeItem.tsx | 3 +- .../common/components}/index.ts | 3 +- src/features/common/index.ts | 1 + .../MemeListContainer/CommonMemeList.tsx | 2 +- src/features/memes/components/MemeCTAList.tsx | 62 +++++++++++++++++++ .../MemeDetail}/MemeDetail.stories.tsx | 2 +- .../components/MemeDetail}/MemeDetail.tsx | 3 +- .../components/MemeDetail}/MemeExport.tsx | 0 .../memes/components/MemeDetail/index.ts | 1 + .../MemeShareModal}/ClipboardCopyButton.tsx | 0 .../MemeShareModal}/KakaoShareButton.tsx | 0 .../MemeShareModal}/MemeShareModal.tsx | 9 ++- .../MemeShareModal}/NativeShareButton.tsx | 0 .../memes/components/MemeShareModal}/index.ts | 0 .../memes/components}/MemeTagList.tsx | 0 .../memes/components}/RelativeMemeList.tsx | 2 +- .../Skeleton/SkeletonMemeDetail.tsx | 3 +- .../Skeleton/SkeletonMemeTagList.tsx | 0 .../memes/components}/Skeleton/index.ts | 0 .../memes/components}/index.ts | 1 + src/pages/memes/[id].tsx | 2 +- 36 files changed, 88 insertions(+), 98 deletions(-) delete mode 100644 src/components/meme/ActionSheet/index.ts delete mode 100644 src/components/meme/InfiniteMemeList/index.ts delete mode 100644 src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx delete mode 100644 src/components/meme/MemeInfo/Button/index.ts delete mode 100644 src/components/meme/MemeInfo/MemeCTAList.tsx delete mode 100644 src/components/meme/MemeItem/index.ts rename src/{components/meme/InfiniteMemeList => features/common/components}/InfiniteMemeList.tsx (98%) rename src/{components/meme/ActionSheet => features/common/components}/MemeActionSheet.tsx (96%) rename src/{components/meme/MemeItem => features/common/components}/MemeItem.tsx (97%) rename src/{components/meme => features/common/components}/index.ts (52%) create mode 100644 src/features/common/index.ts create mode 100644 src/features/memes/components/MemeCTAList.tsx rename src/{components/meme/MemeInfo => features/memes/components/MemeDetail}/MemeDetail.stories.tsx (83%) rename src/{components/meme/MemeInfo => features/memes/components/MemeDetail}/MemeDetail.tsx (95%) rename src/{components/meme/MemeInfo/DropDown => features/memes/components/MemeDetail}/MemeExport.tsx (100%) create mode 100644 src/features/memes/components/MemeDetail/index.ts rename src/{components/meme/MemeInfo/Button => features/memes/components/MemeShareModal}/ClipboardCopyButton.tsx (100%) rename src/{components/meme/MemeInfo/Button => features/memes/components/MemeShareModal}/KakaoShareButton.tsx (100%) rename src/{components/meme/MemeInfo/Modal => features/memes/components/MemeShareModal}/MemeShareModal.tsx (94%) rename src/{components/meme/MemeInfo/Button => features/memes/components/MemeShareModal}/NativeShareButton.tsx (100%) rename src/{components/meme/MemeInfo/Modal => features/memes/components/MemeShareModal}/index.ts (100%) rename src/{components/meme/MemeInfo => features/memes/components}/MemeTagList.tsx (100%) rename src/{components/meme/MemeInfo => features/memes/components}/RelativeMemeList.tsx (91%) rename src/{components/meme/MemeInfo => features/memes/components}/Skeleton/SkeletonMemeDetail.tsx (93%) rename src/{components/meme/MemeInfo => features/memes/components}/Skeleton/SkeletonMemeTagList.tsx (100%) rename src/{components/meme/MemeInfo => features/memes/components}/Skeleton/index.ts (100%) rename src/{components/meme/MemeInfo => features/memes/components}/index.ts (82%) diff --git a/src/common/components/Masonry/Masonry.stories.tsx b/src/common/components/Masonry/Masonry.stories.tsx index 25175a9d..ec7d9844 100644 --- a/src/common/components/Masonry/Masonry.stories.tsx +++ b/src/common/components/Masonry/Masonry.stories.tsx @@ -1,7 +1,7 @@ import type { ComponentMeta, ComponentStory } from "@storybook/react"; import React from "react"; -import { MemeItem } from "@/components/meme/MemeItem"; +import { MemeItem } from "@/features/common"; import { Masonry } from "./Masonry"; diff --git a/src/components/collect/Collection/Collection.tsx b/src/components/collect/Collection/Collection.tsx index 14b45a52..4c110a95 100644 --- a/src/components/collect/Collection/Collection.tsx +++ b/src/components/collect/Collection/Collection.tsx @@ -1,5 +1,5 @@ import { useGetMemesByCollectionId } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; interface Props { collectionId: number; diff --git a/src/components/collect/SearchedCollection/SearchedCollection.tsx b/src/components/collect/SearchedCollection/SearchedCollection.tsx index 6b36b5f8..be17449d 100644 --- a/src/components/collect/SearchedCollection/SearchedCollection.tsx +++ b/src/components/collect/SearchedCollection/SearchedCollection.tsx @@ -1,5 +1,5 @@ import { useGetMemesFromCollectionByKeyword } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; interface Props { searchQuery: string; diff --git a/src/components/explore/MemesByKeyword/MemesByKeyword.tsx b/src/components/explore/MemesByKeyword/MemesByKeyword.tsx index 23f1bfc1..5991012a 100644 --- a/src/components/explore/MemesByKeyword/MemesByKeyword.tsx +++ b/src/components/explore/MemesByKeyword/MemesByKeyword.tsx @@ -1,5 +1,5 @@ import { useGetMemesByKeyword } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; import { EmptyMemesView } from "../EmptyMemesView"; diff --git a/src/components/explore/MemesByTag/MemesByTag.tsx b/src/components/explore/MemesByTag/MemesByTag.tsx index 29324cf9..0ea4f761 100644 --- a/src/components/explore/MemesByTag/MemesByTag.tsx +++ b/src/components/explore/MemesByTag/MemesByTag.tsx @@ -1,5 +1,5 @@ import { useGetMemesByTag } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; import { EmptyMemesView } from "../EmptyMemesView"; diff --git a/src/components/meme/ActionSheet/index.ts b/src/components/meme/ActionSheet/index.ts deleted file mode 100644 index 9248829a..00000000 --- a/src/components/meme/ActionSheet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MemeActionSheet"; diff --git a/src/components/meme/InfiniteMemeList/index.ts b/src/components/meme/InfiniteMemeList/index.ts deleted file mode 100644 index 435c2149..00000000 --- a/src/components/meme/InfiniteMemeList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./InfiniteMemeList"; diff --git a/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx b/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx deleted file mode 100644 index e4c7f308..00000000 --- a/src/components/meme/MemeInfo/Button/CollectionSaveButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useAuth, useCollection } from "@/application/hooks"; -import { Button } from "@/common/components/Button"; -import { Icon } from "@/common/components/Icon"; - -interface Props { - id: string; -} - -export const CollectionSaveButton = ({ id }: Props) => { - const { validate, isLogin } = useAuth(); - const { isAdded, onUpdateCollection } = useCollection({ memeId: Number(id), isLogin }); - - return ( - - ); -}; diff --git a/src/components/meme/MemeInfo/Button/index.ts b/src/components/meme/MemeInfo/Button/index.ts deleted file mode 100644 index bc1b9427..00000000 --- a/src/components/meme/MemeInfo/Button/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./ClipboardCopyButton"; -export * from "./CollectionSaveButton"; -export * from "./KakaoShareButton"; -export * from "./NativeShareButton"; diff --git a/src/components/meme/MemeInfo/MemeCTAList.tsx b/src/components/meme/MemeInfo/MemeCTAList.tsx deleted file mode 100644 index 6dbe72fe..00000000 --- a/src/components/meme/MemeInfo/MemeCTAList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Suspense } from "react"; - -import { Button } from "@/common/components/Button"; -import { Icon } from "@/common/components/Icon"; -import { useOverlay } from "@/common/hooks"; -import { MemeShareModal } from "@/components/meme/MemeInfo/Modal"; - -import { CollectionSaveButton } from "./Button"; - -interface Props { - id: string; -} - -export const MemeCTAList = ({ id }: Props) => { - const overlay = useOverlay(); - - return ( -
    - - - -
    - ); -}; diff --git a/src/components/meme/MemeItem/index.ts b/src/components/meme/MemeItem/index.ts deleted file mode 100644 index 204b7d3d..00000000 --- a/src/components/meme/MemeItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MemeItem"; diff --git a/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx b/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx index 88b5c77f..83b1916e 100644 --- a/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx +++ b/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx @@ -1,6 +1,6 @@ import { useGetMemesByCollectionId } from "@/application/hooks"; import { Masonry } from "@/common/components/Masonry"; -import { MemeItem } from "@/components/meme/MemeItem"; +import { MemeItem } from "@/features/common"; interface Props { collectionId: number; diff --git a/src/components/share/SharedMemeList.tsx b/src/components/share/SharedMemeList.tsx index 6ece3a2d..4e51c2e7 100644 --- a/src/components/share/SharedMemeList.tsx +++ b/src/components/share/SharedMemeList.tsx @@ -1,5 +1,5 @@ import { useGetMemesByCollectionId } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; interface Props { sharedId: number; diff --git a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx b/src/features/common/components/InfiniteMemeList.tsx similarity index 98% rename from src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx rename to src/features/common/components/InfiniteMemeList.tsx index 82ae3dc5..ee336d9d 100644 --- a/src/components/meme/InfiniteMemeList/InfiniteMemeList.tsx +++ b/src/features/common/components/InfiniteMemeList.tsx @@ -8,7 +8,7 @@ import { QUERY_KEYS } from "@/application/hooks/api/meme/queryKey"; import { Masonry } from "@/common/components/Masonry"; import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; import { useIntersect } from "@/common/hooks"; -import { MemeItem } from "@/components/meme/MemeItem"; +import { MemeItem } from "@/features/common"; import type { GetMemesResponse, Meme } from "@/types"; const skeletons = renderMemeItemSkeletons(4); diff --git a/src/components/meme/ActionSheet/MemeActionSheet.tsx b/src/features/common/components/MemeActionSheet.tsx similarity index 96% rename from src/components/meme/ActionSheet/MemeActionSheet.tsx rename to src/features/common/components/MemeActionSheet.tsx index 297c9277..ff7df5cd 100644 --- a/src/components/meme/ActionSheet/MemeActionSheet.tsx +++ b/src/features/common/components/MemeActionSheet.tsx @@ -5,10 +5,9 @@ import { useAuth, useCollection } from "@/application/hooks"; import { ActionSheet } from "@/common/components/ActionSheet"; import { useOverlay } from "@/common/hooks"; import { channelUrl } from "@/common/utils"; +import { MemeShareModal } from "@/features/memes/components"; import type { Meme } from "@/types"; -import { MemeShareModal } from "../MemeInfo/Modal"; - interface Props { meme: Meme; onClose: () => void; diff --git a/src/components/meme/MemeItem/MemeItem.tsx b/src/features/common/components/MemeItem.tsx similarity index 97% rename from src/components/meme/MemeItem/MemeItem.tsx rename to src/features/common/components/MemeItem.tsx index 5db5b14d..31c0277a 100644 --- a/src/components/meme/MemeItem/MemeItem.tsx +++ b/src/features/common/components/MemeItem.tsx @@ -5,10 +5,9 @@ import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useOverlay } from "@/common/hooks"; import { isEncodingError } from "@/common/utils"; +import { MemeActionSheet } from "@/features/common"; import type { Meme } from "@/types"; -import { MemeActionSheet } from "../ActionSheet"; - interface Props { meme: Meme; onClick?: (id: number) => void; diff --git a/src/components/meme/index.ts b/src/features/common/components/index.ts similarity index 52% rename from src/components/meme/index.ts rename to src/features/common/components/index.ts index fc0951d3..0c480b4c 100644 --- a/src/components/meme/index.ts +++ b/src/features/common/components/index.ts @@ -1,4 +1,3 @@ -export * from "./ActionSheet"; export * from "./InfiniteMemeList"; -export * from "./MemeInfo"; +export * from "./MemeActionSheet"; export * from "./MemeItem"; diff --git a/src/features/common/index.ts b/src/features/common/index.ts new file mode 100644 index 00000000..40b494c5 --- /dev/null +++ b/src/features/common/index.ts @@ -0,0 +1 @@ +export * from "./components"; diff --git a/src/features/home/components/MemeListContainer/CommonMemeList.tsx b/src/features/home/components/MemeListContainer/CommonMemeList.tsx index 0f06a4f4..5698790a 100644 --- a/src/features/home/components/MemeListContainer/CommonMemeList.tsx +++ b/src/features/home/components/MemeListContainer/CommonMemeList.tsx @@ -1,5 +1,5 @@ import { useGetMemesBySort } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; import type { MemeListType } from "./type"; diff --git a/src/features/memes/components/MemeCTAList.tsx b/src/features/memes/components/MemeCTAList.tsx new file mode 100644 index 00000000..4d0feafb --- /dev/null +++ b/src/features/memes/components/MemeCTAList.tsx @@ -0,0 +1,62 @@ +import { Suspense } from "react"; + +import { useAuth, useCollection } from "@/application/hooks"; +import { Button } from "@/common/components/Button"; +import { Icon } from "@/common/components/Icon"; +import { useOverlay } from "@/common/hooks"; + +import { MemeShareModal } from "./MemeShareModal"; + +interface MemeCTAListProps { + id: string; +} + +export const MemeCTAList = ({ id }: MemeCTAListProps) => { + const overlay = useOverlay(); + + return ( +
    + + + +
    + ); +}; + +interface CollectionSaveButtonProps { + id: string; +} +const CollectionSaveButton = ({ id }: CollectionSaveButtonProps) => { + const { validate, isLogin } = useAuth(); + const { isAdded, onUpdateCollection } = useCollection({ memeId: Number(id), isLogin }); + + return ( + + ); +}; diff --git a/src/components/meme/MemeInfo/MemeDetail.stories.tsx b/src/features/memes/components/MemeDetail/MemeDetail.stories.tsx similarity index 83% rename from src/components/meme/MemeInfo/MemeDetail.stories.tsx rename to src/features/memes/components/MemeDetail/MemeDetail.stories.tsx index 82c2dd44..ef3f62db 100644 --- a/src/components/meme/MemeInfo/MemeDetail.stories.tsx +++ b/src/features/memes/components/MemeDetail/MemeDetail.stories.tsx @@ -1,6 +1,6 @@ import type { ComponentMeta, ComponentStory } from "@storybook/react"; -import { MemeDetail } from "@/components/meme/MemeInfo"; +import { MemeDetail } from "./MemeDetail"; export default { title: "components/meme/MemeDetail", diff --git a/src/components/meme/MemeInfo/MemeDetail.tsx b/src/features/memes/components/MemeDetail/MemeDetail.tsx similarity index 95% rename from src/components/meme/MemeInfo/MemeDetail.tsx rename to src/features/memes/components/MemeDetail/MemeDetail.tsx index ebb8e43c..ad003591 100644 --- a/src/components/meme/MemeInfo/MemeDetail.tsx +++ b/src/features/memes/components/MemeDetail/MemeDetail.tsx @@ -3,7 +3,8 @@ import { css } from "twin.macro"; import { useMemeDetailById } from "@/application/hooks"; import { Photo } from "@/common/components/Photo"; import { SSRSuspense } from "@/common/components/Suspense"; -import { MemeExport } from "@/components/meme/MemeInfo/DropDown/MemeExport"; + +import { MemeExport } from "./MemeExport"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/DropDown/MemeExport.tsx b/src/features/memes/components/MemeDetail/MemeExport.tsx similarity index 100% rename from src/components/meme/MemeInfo/DropDown/MemeExport.tsx rename to src/features/memes/components/MemeDetail/MemeExport.tsx diff --git a/src/features/memes/components/MemeDetail/index.ts b/src/features/memes/components/MemeDetail/index.ts new file mode 100644 index 00000000..7bfbabb2 --- /dev/null +++ b/src/features/memes/components/MemeDetail/index.ts @@ -0,0 +1 @@ +export * from "./MemeDetail"; diff --git a/src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx b/src/features/memes/components/MemeShareModal/ClipboardCopyButton.tsx similarity index 100% rename from src/components/meme/MemeInfo/Button/ClipboardCopyButton.tsx rename to src/features/memes/components/MemeShareModal/ClipboardCopyButton.tsx diff --git a/src/components/meme/MemeInfo/Button/KakaoShareButton.tsx b/src/features/memes/components/MemeShareModal/KakaoShareButton.tsx similarity index 100% rename from src/components/meme/MemeInfo/Button/KakaoShareButton.tsx rename to src/features/memes/components/MemeShareModal/KakaoShareButton.tsx diff --git a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx similarity index 94% rename from src/components/meme/MemeInfo/Modal/MemeShareModal.tsx rename to src/features/memes/components/MemeShareModal/MemeShareModal.tsx index 33af98c5..11247eb6 100644 --- a/src/components/meme/MemeInfo/Modal/MemeShareModal.tsx +++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx @@ -4,11 +4,10 @@ import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; import { DOMAIN, PATH } from "@/common/utils"; -import { - ClipboardCopyButton, - KakaoShareButton, - NativeShareButton, -} from "@/components/meme/MemeInfo/Button"; + +import { ClipboardCopyButton } from "./ClipboardCopyButton"; +import { KakaoShareButton } from "./KakaoShareButton"; +import { NativeShareButton } from "./NativeShareButton"; interface Props { id: string; diff --git a/src/components/meme/MemeInfo/Button/NativeShareButton.tsx b/src/features/memes/components/MemeShareModal/NativeShareButton.tsx similarity index 100% rename from src/components/meme/MemeInfo/Button/NativeShareButton.tsx rename to src/features/memes/components/MemeShareModal/NativeShareButton.tsx diff --git a/src/components/meme/MemeInfo/Modal/index.ts b/src/features/memes/components/MemeShareModal/index.ts similarity index 100% rename from src/components/meme/MemeInfo/Modal/index.ts rename to src/features/memes/components/MemeShareModal/index.ts diff --git a/src/components/meme/MemeInfo/MemeTagList.tsx b/src/features/memes/components/MemeTagList.tsx similarity index 100% rename from src/components/meme/MemeInfo/MemeTagList.tsx rename to src/features/memes/components/MemeTagList.tsx diff --git a/src/components/meme/MemeInfo/RelativeMemeList.tsx b/src/features/memes/components/RelativeMemeList.tsx similarity index 91% rename from src/components/meme/MemeInfo/RelativeMemeList.tsx rename to src/features/memes/components/RelativeMemeList.tsx index 4de95573..b45c5e54 100644 --- a/src/components/meme/MemeInfo/RelativeMemeList.tsx +++ b/src/features/memes/components/RelativeMemeList.tsx @@ -1,5 +1,5 @@ import { useAuth, useGetMemesBySort } from "@/application/hooks"; -import { InfiniteMemeList } from "@/components/meme"; +import { InfiniteMemeList } from "@/features/common"; export const RelativeMemeList = () => { const { data: memeList, isFetchingNextPage, fetchNextPage } = useGetMemesBySort("popular"); diff --git a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx b/src/features/memes/components/Skeleton/SkeletonMemeDetail.tsx similarity index 93% rename from src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx rename to src/features/memes/components/Skeleton/SkeletonMemeDetail.tsx index 2efb23fb..dc156608 100644 --- a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeDetail.tsx +++ b/src/features/memes/components/Skeleton/SkeletonMemeDetail.tsx @@ -1,5 +1,6 @@ import { Skeleton } from "@/common/components/Skeleton"; -import { SkeletonMemeTagList } from "@/components/meme"; + +import { SkeletonMemeTagList } from "./SkeletonMemeTagList"; export const SkeletonMemeDetail = () => { return ( diff --git a/src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx b/src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx similarity index 100% rename from src/components/meme/MemeInfo/Skeleton/SkeletonMemeTagList.tsx rename to src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx diff --git a/src/components/meme/MemeInfo/Skeleton/index.ts b/src/features/memes/components/Skeleton/index.ts similarity index 100% rename from src/components/meme/MemeInfo/Skeleton/index.ts rename to src/features/memes/components/Skeleton/index.ts diff --git a/src/components/meme/MemeInfo/index.ts b/src/features/memes/components/index.ts similarity index 82% rename from src/components/meme/MemeInfo/index.ts rename to src/features/memes/components/index.ts index 14c0cb61..d4cfabdf 100644 --- a/src/components/meme/MemeInfo/index.ts +++ b/src/features/memes/components/index.ts @@ -1,5 +1,6 @@ export * from "./MemeCTAList"; export * from "./MemeDetail"; +export * from "./MemeShareModal"; export * from "./MemeTagList"; export * from "./RelativeMemeList"; export * from "./Skeleton"; diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index 58c5250b..93283f1d 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -15,7 +15,7 @@ import { RelativeMemeList, SkeletonMemeDetail, SkeletonMemeTagList, -} from "@/components/meme"; +} from "@/features/memes/components"; import type { DefaultPageProps, Meme } from "@/types"; interface Props { From b3d0c329fadfc1f3af93372957db6c520e98f115 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Wed, 5 Jul 2023 00:08:59 +0900 Subject: [PATCH 10/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-=20/compone?= =?UTF-8?q?nts/mypage=20->=20/features/mypage/components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mypage/index.ts | 1 - .../mypage/components}/SummarizedCollection.tsx | 0 .../mypage/components}/index.ts | 0 src/pages/mypage/index.tsx | 2 +- 4 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 src/components/mypage/index.ts rename src/{components/mypage/SummarizedCollection => features/mypage/components}/SummarizedCollection.tsx (100%) rename src/{components/mypage/SummarizedCollection => features/mypage/components}/index.ts (100%) diff --git a/src/components/mypage/index.ts b/src/components/mypage/index.ts deleted file mode 100644 index 2e435930..00000000 --- a/src/components/mypage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SummarizedCollection"; diff --git a/src/components/mypage/SummarizedCollection/SummarizedCollection.tsx b/src/features/mypage/components/SummarizedCollection.tsx similarity index 100% rename from src/components/mypage/SummarizedCollection/SummarizedCollection.tsx rename to src/features/mypage/components/SummarizedCollection.tsx diff --git a/src/components/mypage/SummarizedCollection/index.ts b/src/features/mypage/components/index.ts similarity index 100% rename from src/components/mypage/SummarizedCollection/index.ts rename to src/features/mypage/components/index.ts diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 99383d27..0f680289 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -8,7 +8,7 @@ import { Photo } from "@/common/components/Photo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { withAuth } from "@/components/hocs"; -import { SummarizedCollection } from "@/components/mypage"; +import { SummarizedCollection } from "@/features/mypage/components"; const MyPage = () => { const { isLoading, user } = useAuth(); From 799a29871fb85d25f4602022b131b0be2733fc3d Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Wed, 5 Jul 2023 00:11:13 +0900 Subject: [PATCH 11/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EC=BD=9C=EB=A0=89=EC=85=98=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-?= =?UTF-8?q?=20/components/collect=20->=20/features/collect/components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/collect/Collection/index.ts | 1 - src/components/collect/SearchedCollection/index.ts | 1 - .../Collection => features/collect/components}/Collection.tsx | 0 .../collect/components}/SearchedCollection.tsx | 0 .../collect => features/collect/components}/index.ts | 0 src/pages/collect/index.tsx | 2 +- 6 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 src/components/collect/Collection/index.ts delete mode 100644 src/components/collect/SearchedCollection/index.ts rename src/{components/collect/Collection => features/collect/components}/Collection.tsx (100%) rename src/{components/collect/SearchedCollection => features/collect/components}/SearchedCollection.tsx (100%) rename src/{components/collect => features/collect/components}/index.ts (100%) diff --git a/src/components/collect/Collection/index.ts b/src/components/collect/Collection/index.ts deleted file mode 100644 index cbb3f0f3..00000000 --- a/src/components/collect/Collection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Collection"; diff --git a/src/components/collect/SearchedCollection/index.ts b/src/components/collect/SearchedCollection/index.ts deleted file mode 100644 index 74f09e61..00000000 --- a/src/components/collect/SearchedCollection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SearchedCollection"; diff --git a/src/components/collect/Collection/Collection.tsx b/src/features/collect/components/Collection.tsx similarity index 100% rename from src/components/collect/Collection/Collection.tsx rename to src/features/collect/components/Collection.tsx diff --git a/src/components/collect/SearchedCollection/SearchedCollection.tsx b/src/features/collect/components/SearchedCollection.tsx similarity index 100% rename from src/components/collect/SearchedCollection/SearchedCollection.tsx rename to src/features/collect/components/SearchedCollection.tsx diff --git a/src/components/collect/index.ts b/src/features/collect/components/index.ts similarity index 100% rename from src/components/collect/index.ts rename to src/features/collect/components/index.ts diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index 0f1ea567..a59fb9bf 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -5,9 +5,9 @@ import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { useDebounce, useInput } from "@/common/hooks"; -import { Collection, SearchedCollection } from "@/components/collect"; import { withAuth } from "@/components/hocs"; import { SearchInput } from "@/components/search"; +import { Collection, SearchedCollection } from "@/features/collect/components"; const CollectPage = () => { const inputProps = useInput(); From 3c33230b291248fcb8b083dbe1b5529ae4eb9955 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 15:46:44 +0900 Subject: [PATCH 12/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-=20/compone?= =?UTF-8?q?nts/search=20->=20/features/search/components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Navigation/SearchHeader/SearchHeader.tsx | 2 +- src/components/search/SearchRecent/index.ts | 1 - src/components/search/SearchResult/index.ts | 1 - src/components/search/index.ts | 5 ----- .../search/components}/SearchInput/SearchInput.stories.tsx | 0 .../search/components}/SearchInput/SearchInput.tsx | 0 .../search/components}/SearchInput/index.ts | 0 .../search/components}/SearchItem/SearchItem.tsx | 0 .../search/components}/SearchItem/index.ts | 0 .../search/components}/SearchItem/searchItem.stories.tsx | 0 .../components/SearchPopularList}/SearchPopularItem.tsx | 0 .../components/SearchPopularList}/SearchPopularList.tsx | 0 .../search/components/SearchPopularList}/index.ts | 0 .../search/components}/SearchRecent.tsx | 2 +- .../search/components}/SearchResultList.tsx | 3 ++- .../search/components}/Skeleton/SkeletonTagList.tsx | 0 .../search => features/search/components}/Skeleton/index.ts | 0 src/features/search/components/index.ts | 6 ++++++ src/pages/collect/index.tsx | 2 +- src/pages/search/index.tsx | 4 ++-- 20 files changed, 13 insertions(+), 13 deletions(-) delete mode 100644 src/components/search/SearchRecent/index.ts delete mode 100644 src/components/search/SearchResult/index.ts delete mode 100644 src/components/search/index.ts rename src/{components/search => features/search/components}/SearchInput/SearchInput.stories.tsx (100%) rename src/{components/search => features/search/components}/SearchInput/SearchInput.tsx (100%) rename src/{components/search => features/search/components}/SearchInput/index.ts (100%) rename src/{components/search => features/search/components}/SearchItem/SearchItem.tsx (100%) rename src/{components/search => features/search/components}/SearchItem/index.ts (100%) rename src/{components/search => features/search/components}/SearchItem/searchItem.stories.tsx (100%) rename src/{components/search/SearchPopular => features/search/components/SearchPopularList}/SearchPopularItem.tsx (100%) rename src/{components/search/SearchPopular => features/search/components/SearchPopularList}/SearchPopularList.tsx (100%) rename src/{components/search/SearchPopular => features/search/components/SearchPopularList}/index.ts (100%) rename src/{components/search/SearchRecent => features/search/components}/SearchRecent.tsx (97%) rename src/{components/search/SearchResult => features/search/components}/SearchResultList.tsx (95%) rename src/{components/search => features/search/components}/Skeleton/SkeletonTagList.tsx (100%) rename src/{components/search => features/search/components}/Skeleton/index.ts (100%) create mode 100644 src/features/search/components/index.ts diff --git a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx index 7b6e313a..17dff228 100644 --- a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx +++ b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx @@ -3,8 +3,8 @@ import { CSSTransition } from "react-transition-group"; import { css } from "twin.macro"; import { useScrollDirection } from "@/common/hooks"; -import { SearchInput } from "@/components/search"; import { TagCategory } from "@/components/tags"; +import { SearchInput } from "@/features/search/components"; import { BackButton } from "../BackButton"; diff --git a/src/components/search/SearchRecent/index.ts b/src/components/search/SearchRecent/index.ts deleted file mode 100644 index ec027fa2..00000000 --- a/src/components/search/SearchRecent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SearchRecent"; diff --git a/src/components/search/SearchResult/index.ts b/src/components/search/SearchResult/index.ts deleted file mode 100644 index 40ae39a1..00000000 --- a/src/components/search/SearchResult/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SearchResultList"; diff --git a/src/components/search/index.ts b/src/components/search/index.ts deleted file mode 100644 index 53bccf20..00000000 --- a/src/components/search/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from "./SearchInput"; -export * from "./SearchItem"; -export * from "./SearchPopular"; -export * from "./SearchRecent"; -export * from "./SearchResult"; diff --git a/src/components/search/SearchInput/SearchInput.stories.tsx b/src/features/search/components/SearchInput/SearchInput.stories.tsx similarity index 100% rename from src/components/search/SearchInput/SearchInput.stories.tsx rename to src/features/search/components/SearchInput/SearchInput.stories.tsx diff --git a/src/components/search/SearchInput/SearchInput.tsx b/src/features/search/components/SearchInput/SearchInput.tsx similarity index 100% rename from src/components/search/SearchInput/SearchInput.tsx rename to src/features/search/components/SearchInput/SearchInput.tsx diff --git a/src/components/search/SearchInput/index.ts b/src/features/search/components/SearchInput/index.ts similarity index 100% rename from src/components/search/SearchInput/index.ts rename to src/features/search/components/SearchInput/index.ts diff --git a/src/components/search/SearchItem/SearchItem.tsx b/src/features/search/components/SearchItem/SearchItem.tsx similarity index 100% rename from src/components/search/SearchItem/SearchItem.tsx rename to src/features/search/components/SearchItem/SearchItem.tsx diff --git a/src/components/search/SearchItem/index.ts b/src/features/search/components/SearchItem/index.ts similarity index 100% rename from src/components/search/SearchItem/index.ts rename to src/features/search/components/SearchItem/index.ts diff --git a/src/components/search/SearchItem/searchItem.stories.tsx b/src/features/search/components/SearchItem/searchItem.stories.tsx similarity index 100% rename from src/components/search/SearchItem/searchItem.stories.tsx rename to src/features/search/components/SearchItem/searchItem.stories.tsx diff --git a/src/components/search/SearchPopular/SearchPopularItem.tsx b/src/features/search/components/SearchPopularList/SearchPopularItem.tsx similarity index 100% rename from src/components/search/SearchPopular/SearchPopularItem.tsx rename to src/features/search/components/SearchPopularList/SearchPopularItem.tsx diff --git a/src/components/search/SearchPopular/SearchPopularList.tsx b/src/features/search/components/SearchPopularList/SearchPopularList.tsx similarity index 100% rename from src/components/search/SearchPopular/SearchPopularList.tsx rename to src/features/search/components/SearchPopularList/SearchPopularList.tsx diff --git a/src/components/search/SearchPopular/index.ts b/src/features/search/components/SearchPopularList/index.ts similarity index 100% rename from src/components/search/SearchPopular/index.ts rename to src/features/search/components/SearchPopularList/index.ts diff --git a/src/components/search/SearchRecent/SearchRecent.tsx b/src/features/search/components/SearchRecent.tsx similarity index 97% rename from src/components/search/SearchRecent/SearchRecent.tsx rename to src/features/search/components/SearchRecent.tsx index c037c98c..b527a4c1 100644 --- a/src/components/search/SearchRecent/SearchRecent.tsx +++ b/src/features/search/components/SearchRecent.tsx @@ -5,7 +5,7 @@ import { isTagType } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { PATH } from "@/common/utils"; -import { SearchItem } from "../SearchItem"; +import { SearchItem } from "./SearchItem"; interface Props { items: RecentSearch[]; diff --git a/src/components/search/SearchResult/SearchResultList.tsx b/src/features/search/components/SearchResultList.tsx similarity index 95% rename from src/components/search/SearchResult/SearchResultList.tsx rename to src/features/search/components/SearchResultList.tsx index c1a4e4c7..c655f327 100644 --- a/src/components/search/SearchResult/SearchResultList.tsx +++ b/src/features/search/components/SearchResultList.tsx @@ -4,7 +4,8 @@ import type { RecentSearch } from "@/application/hooks"; import { useGetTagSearch } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { PATH } from "@/common/utils"; -import { SearchItem } from "@/components/search"; + +import { SearchItem } from "./SearchItem"; interface Prop { value: string; diff --git a/src/components/search/Skeleton/SkeletonTagList.tsx b/src/features/search/components/Skeleton/SkeletonTagList.tsx similarity index 100% rename from src/components/search/Skeleton/SkeletonTagList.tsx rename to src/features/search/components/Skeleton/SkeletonTagList.tsx diff --git a/src/components/search/Skeleton/index.ts b/src/features/search/components/Skeleton/index.ts similarity index 100% rename from src/components/search/Skeleton/index.ts rename to src/features/search/components/Skeleton/index.ts diff --git a/src/features/search/components/index.ts b/src/features/search/components/index.ts new file mode 100644 index 00000000..b410eaed --- /dev/null +++ b/src/features/search/components/index.ts @@ -0,0 +1,6 @@ +export * from "./SearchInput"; +export * from "./SearchItem"; +export * from "./SearchPopularList"; +export * from "./SearchRecent"; +export * from "./SearchResultList"; +export * from "./Skeleton"; diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index a59fb9bf..ef21a980 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -6,8 +6,8 @@ import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { useDebounce, useInput } from "@/common/hooks"; import { withAuth } from "@/components/hocs"; -import { SearchInput } from "@/components/search"; import { Collection, SearchedCollection } from "@/features/collect/components"; +import { SearchInput } from "@/features/search/components"; const CollectPage = () => { const inputProps = useInput(); diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index dfe47f4d..50751627 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -14,8 +14,8 @@ import { SearchPopularList, SearchRecent, SearchResultList, -} from "@/components/search"; -import { SkeletonTagList } from "@/components/search/Skeleton"; + SkeletonTagList, +} from "@/features/search/components"; /** * FIX From 74f0ac48106948d0d8e90868f730b468f151c9b5 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 16:49:52 +0900 Subject: [PATCH 13/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8,=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-?= =?UTF-8?q?=20/components/tags=20->=20/features/explore/tags/components=20?= =?UTF-8?q?-=20/components/keywords=20->=20/features/explore/keywords/comp?= =?UTF-8?q?onents=20-=20TagCategory=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=8A=94=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20/feature/common=20=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Navigation/SearchHeader/SearchHeader.tsx | 2 +- src/common/components/Navigation/SideBar/SideBar.tsx | 2 +- src/components/explore/EmptyMemesView/index.ts | 1 - src/components/explore/MemesByTag/index.ts | 1 - src/components/explore/Thumbnail/index.ts | 1 - src/components/explore/index.ts | 4 ---- src/components/tags/TagFavoriteButton/index.ts | 1 - src/components/tags/index.ts | 2 -- .../common/components}/EmptyMemesView.tsx | 0 .../common/components}/TagCategory/Category.stories.tsx | 0 .../common/components}/TagCategory/CategoryContent.tsx | 0 .../common/components}/TagCategory/CategoryTitle.tsx | 0 .../common/components}/TagCategory/FavoriteCategory.tsx | 0 .../common/components}/TagCategory/SlotCategory.tsx | 0 .../common/components}/TagCategory/TagCategory.tsx | 0 .../common/components}/TagCategory/context.tsx | 0 .../tags => features/common/components}/TagCategory/index.ts | 0 src/features/common/components/index.ts | 2 ++ .../explore/keywords/components}/MemesByKeyword.tsx | 4 +--- .../explore/keywords/components/index.ts} | 0 .../explore/tags/components}/MemesByTag.tsx | 4 +--- .../explore/tags/components}/TagBookmarkButton.tsx | 3 +-- .../explore/tags/components}/Thumbnail.tsx | 0 src/features/explore/tags/components/index.ts | 3 +++ src/pages/_app.tsx | 2 +- src/pages/explore/keywords/index.tsx | 2 +- src/pages/explore/tags/[tagId].tsx | 3 +-- 27 files changed, 13 insertions(+), 24 deletions(-) delete mode 100644 src/components/explore/EmptyMemesView/index.ts delete mode 100644 src/components/explore/MemesByTag/index.ts delete mode 100644 src/components/explore/Thumbnail/index.ts delete mode 100644 src/components/explore/index.ts delete mode 100644 src/components/tags/TagFavoriteButton/index.ts delete mode 100644 src/components/tags/index.ts rename src/{components/explore/EmptyMemesView => features/common/components}/EmptyMemesView.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/Category.stories.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/CategoryContent.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/CategoryTitle.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/FavoriteCategory.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/SlotCategory.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/TagCategory.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/context.tsx (100%) rename src/{components/tags => features/common/components}/TagCategory/index.ts (100%) rename src/{components/explore/MemesByKeyword => features/explore/keywords/components}/MemesByKeyword.tsx (83%) rename src/{components/explore/MemesByKeyword/index.tsx => features/explore/keywords/components/index.ts} (100%) rename src/{components/explore/MemesByTag => features/explore/tags/components}/MemesByTag.tsx (82%) rename src/{components/tags/TagFavoriteButton => features/explore/tags/components}/TagBookmarkButton.tsx (98%) rename src/{components/explore/Thumbnail => features/explore/tags/components}/Thumbnail.tsx (100%) create mode 100644 src/features/explore/tags/components/index.ts diff --git a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx index 17dff228..3bdd3efa 100644 --- a/src/common/components/Navigation/SearchHeader/SearchHeader.tsx +++ b/src/common/components/Navigation/SearchHeader/SearchHeader.tsx @@ -3,7 +3,7 @@ import { CSSTransition } from "react-transition-group"; import { css } from "twin.macro"; import { useScrollDirection } from "@/common/hooks"; -import { TagCategory } from "@/components/tags"; +import { TagCategory } from "@/features/common"; import { SearchInput } from "@/features/search/components"; import { BackButton } from "../BackButton"; diff --git a/src/common/components/Navigation/SideBar/SideBar.tsx b/src/common/components/Navigation/SideBar/SideBar.tsx index 9cbfb8fa..bf672e4b 100644 --- a/src/common/components/Navigation/SideBar/SideBar.tsx +++ b/src/common/components/Navigation/SideBar/SideBar.tsx @@ -1,6 +1,6 @@ import { useAuth } from "@/application/hooks"; import { instagramUrl, twitterUrl } from "@/common/utils"; -import { useTagCategoryContext } from "@/components/tags"; +import { useTagCategoryContext } from "@/features/common"; import { Drawer } from "../../Drawer"; import { Icon } from "../../Icon"; diff --git a/src/components/explore/EmptyMemesView/index.ts b/src/components/explore/EmptyMemesView/index.ts deleted file mode 100644 index d7d91c38..00000000 --- a/src/components/explore/EmptyMemesView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./EmptyMemesView"; diff --git a/src/components/explore/MemesByTag/index.ts b/src/components/explore/MemesByTag/index.ts deleted file mode 100644 index 69c35de0..00000000 --- a/src/components/explore/MemesByTag/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MemesByTag"; diff --git a/src/components/explore/Thumbnail/index.ts b/src/components/explore/Thumbnail/index.ts deleted file mode 100644 index d376b7af..00000000 --- a/src/components/explore/Thumbnail/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Thumbnail"; diff --git a/src/components/explore/index.ts b/src/components/explore/index.ts deleted file mode 100644 index d415b828..00000000 --- a/src/components/explore/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./EmptyMemesView"; -export * from "./MemesByKeyword"; -export * from "./MemesByTag"; -export * from "./Thumbnail"; diff --git a/src/components/tags/TagFavoriteButton/index.ts b/src/components/tags/TagFavoriteButton/index.ts deleted file mode 100644 index 3858de9d..00000000 --- a/src/components/tags/TagFavoriteButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./TagBookmarkButton"; diff --git a/src/components/tags/index.ts b/src/components/tags/index.ts deleted file mode 100644 index 9bcc64e3..00000000 --- a/src/components/tags/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./TagCategory"; -export * from "./TagFavoriteButton"; diff --git a/src/components/explore/EmptyMemesView/EmptyMemesView.tsx b/src/features/common/components/EmptyMemesView.tsx similarity index 100% rename from src/components/explore/EmptyMemesView/EmptyMemesView.tsx rename to src/features/common/components/EmptyMemesView.tsx diff --git a/src/components/tags/TagCategory/Category.stories.tsx b/src/features/common/components/TagCategory/Category.stories.tsx similarity index 100% rename from src/components/tags/TagCategory/Category.stories.tsx rename to src/features/common/components/TagCategory/Category.stories.tsx diff --git a/src/components/tags/TagCategory/CategoryContent.tsx b/src/features/common/components/TagCategory/CategoryContent.tsx similarity index 100% rename from src/components/tags/TagCategory/CategoryContent.tsx rename to src/features/common/components/TagCategory/CategoryContent.tsx diff --git a/src/components/tags/TagCategory/CategoryTitle.tsx b/src/features/common/components/TagCategory/CategoryTitle.tsx similarity index 100% rename from src/components/tags/TagCategory/CategoryTitle.tsx rename to src/features/common/components/TagCategory/CategoryTitle.tsx diff --git a/src/components/tags/TagCategory/FavoriteCategory.tsx b/src/features/common/components/TagCategory/FavoriteCategory.tsx similarity index 100% rename from src/components/tags/TagCategory/FavoriteCategory.tsx rename to src/features/common/components/TagCategory/FavoriteCategory.tsx diff --git a/src/components/tags/TagCategory/SlotCategory.tsx b/src/features/common/components/TagCategory/SlotCategory.tsx similarity index 100% rename from src/components/tags/TagCategory/SlotCategory.tsx rename to src/features/common/components/TagCategory/SlotCategory.tsx diff --git a/src/components/tags/TagCategory/TagCategory.tsx b/src/features/common/components/TagCategory/TagCategory.tsx similarity index 100% rename from src/components/tags/TagCategory/TagCategory.tsx rename to src/features/common/components/TagCategory/TagCategory.tsx diff --git a/src/components/tags/TagCategory/context.tsx b/src/features/common/components/TagCategory/context.tsx similarity index 100% rename from src/components/tags/TagCategory/context.tsx rename to src/features/common/components/TagCategory/context.tsx diff --git a/src/components/tags/TagCategory/index.ts b/src/features/common/components/TagCategory/index.ts similarity index 100% rename from src/components/tags/TagCategory/index.ts rename to src/features/common/components/TagCategory/index.ts diff --git a/src/features/common/components/index.ts b/src/features/common/components/index.ts index 0c480b4c..f58d37e7 100644 --- a/src/features/common/components/index.ts +++ b/src/features/common/components/index.ts @@ -1,3 +1,5 @@ +export * from "./EmptyMemesView"; export * from "./InfiniteMemeList"; export * from "./MemeActionSheet"; export * from "./MemeItem"; +export * from "./TagCategory"; diff --git a/src/components/explore/MemesByKeyword/MemesByKeyword.tsx b/src/features/explore/keywords/components/MemesByKeyword.tsx similarity index 83% rename from src/components/explore/MemesByKeyword/MemesByKeyword.tsx rename to src/features/explore/keywords/components/MemesByKeyword.tsx index 5991012a..ae6d9722 100644 --- a/src/components/explore/MemesByKeyword/MemesByKeyword.tsx +++ b/src/features/explore/keywords/components/MemesByKeyword.tsx @@ -1,7 +1,5 @@ import { useGetMemesByKeyword } from "@/application/hooks"; -import { InfiniteMemeList } from "@/features/common"; - -import { EmptyMemesView } from "../EmptyMemesView"; +import { EmptyMemesView, InfiniteMemeList } from "@/features/common"; interface Props { searchQuery: string; diff --git a/src/components/explore/MemesByKeyword/index.tsx b/src/features/explore/keywords/components/index.ts similarity index 100% rename from src/components/explore/MemesByKeyword/index.tsx rename to src/features/explore/keywords/components/index.ts diff --git a/src/components/explore/MemesByTag/MemesByTag.tsx b/src/features/explore/tags/components/MemesByTag.tsx similarity index 82% rename from src/components/explore/MemesByTag/MemesByTag.tsx rename to src/features/explore/tags/components/MemesByTag.tsx index 0ea4f761..d454ce35 100644 --- a/src/components/explore/MemesByTag/MemesByTag.tsx +++ b/src/features/explore/tags/components/MemesByTag.tsx @@ -1,7 +1,5 @@ import { useGetMemesByTag } from "@/application/hooks"; -import { InfiniteMemeList } from "@/features/common"; - -import { EmptyMemesView } from "../EmptyMemesView"; +import { EmptyMemesView, InfiniteMemeList } from "@/features/common"; interface Props { searchQuery: string; diff --git a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx b/src/features/explore/tags/components/TagBookmarkButton.tsx similarity index 98% rename from src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx rename to src/features/explore/tags/components/TagBookmarkButton.tsx index af614468..e62fd24f 100644 --- a/src/components/tags/TagFavoriteButton/TagBookmarkButton.tsx +++ b/src/features/explore/tags/components/TagBookmarkButton.tsx @@ -7,8 +7,7 @@ import { import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; - -import { useTagCategoryContext } from "../TagCategory"; +import { useTagCategoryContext } from "@/features/common"; interface Props { tagId: number; diff --git a/src/components/explore/Thumbnail/Thumbnail.tsx b/src/features/explore/tags/components/Thumbnail.tsx similarity index 100% rename from src/components/explore/Thumbnail/Thumbnail.tsx rename to src/features/explore/tags/components/Thumbnail.tsx diff --git a/src/features/explore/tags/components/index.ts b/src/features/explore/tags/components/index.ts new file mode 100644 index 00000000..a1e08c4e --- /dev/null +++ b/src/features/explore/tags/components/index.ts @@ -0,0 +1,3 @@ +export * from "./MemesByTag"; +export * from "./TagBookmarkButton"; +export * from "./Thumbnail"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b55da103..3a052ff9 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -12,7 +12,7 @@ import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; import { ToastContainer, ToastProvider } from "@/common/components/Toast"; import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/common/hooks"; import { GoogleTagManagerScript, GTagScript } from "@/common/libs"; -import { TagCategoryProvider } from "@/components/tags"; +import { TagCategoryProvider } from "@/features/common"; import type { DefaultPageProps } from "@/types"; if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { diff --git a/src/pages/explore/keywords/index.tsx b/src/pages/explore/keywords/index.tsx index a1264038..592f8711 100644 --- a/src/pages/explore/keywords/index.tsx +++ b/src/pages/explore/keywords/index.tsx @@ -7,7 +7,7 @@ import { PullToRefresh } from "@/common/components/PullToRefresh"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; -import { MemesByKeyword } from "@/components/explore"; +import { MemesByKeyword } from "@/features/explore/keywords/components"; interface Props { searchQuery: string; diff --git a/src/pages/explore/tags/[tagId].tsx b/src/pages/explore/tags/[tagId].tsx index d65794f4..88d386fb 100644 --- a/src/pages/explore/tags/[tagId].tsx +++ b/src/pages/explore/tags/[tagId].tsx @@ -6,8 +6,7 @@ import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; import { DEFAULT_DESCRIPTION, SITE_NAME } from "@/common/utils"; -import { MemesByTag, Thumbnail } from "@/components/explore"; -import { TagBookmarkButton } from "@/components/tags"; +import { MemesByTag, TagBookmarkButton, Thumbnail } from "@/features/explore/tags/components"; interface Props { searchQuery: string; From f98ae703fce0b81cf33acfd88010111688d4cc4b Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 16:54:59 +0900 Subject: [PATCH 14/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0=20=EB=B0=88=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=8F=99=20-?= =?UTF-8?q?=20/components/share=20->=20/features/share/components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../share => features/share/components}/SharedMemeList.tsx | 0 src/{components/share => features/share/components}/index.ts | 0 src/pages/share/index.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename src/{components/share => features/share/components}/SharedMemeList.tsx (100%) rename src/{components/share => features/share/components}/index.ts (100%) diff --git a/src/components/share/SharedMemeList.tsx b/src/features/share/components/SharedMemeList.tsx similarity index 100% rename from src/components/share/SharedMemeList.tsx rename to src/features/share/components/SharedMemeList.tsx diff --git a/src/components/share/index.ts b/src/features/share/components/index.ts similarity index 100% rename from src/components/share/index.ts rename to src/features/share/components/index.ts diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index c66c6cc6..31bf2342 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -5,7 +5,7 @@ import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { withAuth } from "@/components/hocs"; -import { SharedMemeList } from "@/components/share"; +import { SharedMemeList } from "@/features/share/components"; const SharedHistoryPage: NextPage = () => { const { user } = useAuth(); From cd3f7a0ea342475fa6c5e8f41b825e153de91acb Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 16:59:07 +0900 Subject: [PATCH 15/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20hocs=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=9D=B4=EB=8F=99=20-=20/components/hocs?= =?UTF-8?q?=20->=20/features/common/hocs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{components => features/common}/hocs/index.ts | 0 src/{components => features/common}/hocs/withAuth/index.ts | 0 src/{components => features/common}/hocs/withAuth/withAuth.tsx | 0 src/features/common/index.ts | 1 + src/pages/collect/index.tsx | 2 +- src/pages/mypage/index.tsx | 2 +- src/pages/setting/index.tsx | 2 +- src/pages/share/index.tsx | 2 +- 8 files changed, 5 insertions(+), 4 deletions(-) rename src/{components => features/common}/hocs/index.ts (100%) rename src/{components => features/common}/hocs/withAuth/index.ts (100%) rename src/{components => features/common}/hocs/withAuth/withAuth.tsx (100%) diff --git a/src/components/hocs/index.ts b/src/features/common/hocs/index.ts similarity index 100% rename from src/components/hocs/index.ts rename to src/features/common/hocs/index.ts diff --git a/src/components/hocs/withAuth/index.ts b/src/features/common/hocs/withAuth/index.ts similarity index 100% rename from src/components/hocs/withAuth/index.ts rename to src/features/common/hocs/withAuth/index.ts diff --git a/src/components/hocs/withAuth/withAuth.tsx b/src/features/common/hocs/withAuth/withAuth.tsx similarity index 100% rename from src/components/hocs/withAuth/withAuth.tsx rename to src/features/common/hocs/withAuth/withAuth.tsx diff --git a/src/features/common/index.ts b/src/features/common/index.ts index 40b494c5..18c99581 100644 --- a/src/features/common/index.ts +++ b/src/features/common/index.ts @@ -1 +1,2 @@ export * from "./components"; +export * from "./hocs"; diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index ef21a980..c60989ce 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -5,8 +5,8 @@ import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { useDebounce, useInput } from "@/common/hooks"; -import { withAuth } from "@/components/hocs"; import { Collection, SearchedCollection } from "@/features/collect/components"; +import { withAuth } from "@/features/common"; import { SearchInput } from "@/features/search/components"; const CollectPage = () => { diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 0f680289..1bc46521 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -7,7 +7,7 @@ import { MyPageNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { withAuth } from "@/components/hocs"; +import { withAuth } from "@/features/common"; import { SummarizedCollection } from "@/features/mypage/components"; const MyPage = () => { diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index a3e3aa6c..9efcc1b1 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -4,7 +4,7 @@ import { SignOutModal } from "@/common/components/Modal"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { useModal } from "@/common/hooks"; -import { withAuth } from "@/components/hocs"; +import { withAuth } from "@/features/common"; const SettingPage = () => { const modalProps = useModal(); diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index 31bf2342..7273a62c 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -4,7 +4,7 @@ import { useAuth } from "@/application/hooks"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { withAuth } from "@/components/hocs"; +import { withAuth } from "@/features/common"; import { SharedMemeList } from "@/features/share/components"; const SharedHistoryPage: NextPage = () => { From 76906d6ada8a97e15e2b9c4c9e1af026f7520f3d Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 17:27:53 +0900 Subject: [PATCH 16/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(SkeletonTag?= =?UTF-8?q?List):=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/Skeleton/SkeletonTagList.tsx | 17 ----------------- src/components/home/Skeleton/index.ts | 1 - .../components/Skeleton/SkeletonMemeTagList.tsx | 13 +++++++++++-- 3 files changed, 11 insertions(+), 20 deletions(-) delete mode 100644 src/components/home/Skeleton/SkeletonTagList.tsx delete mode 100644 src/components/home/Skeleton/index.ts diff --git a/src/components/home/Skeleton/SkeletonTagList.tsx b/src/components/home/Skeleton/SkeletonTagList.tsx deleted file mode 100644 index f01af79e..00000000 --- a/src/components/home/Skeleton/SkeletonTagList.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Skeleton } from "@/common/components/Skeleton"; - -export const SkeletonTagList = ({ count }: { count: number }) => { - return ( -
    - {Array.from(Array(count).keys()).map((i) => ( - - ))} -
    - ); -}; diff --git a/src/components/home/Skeleton/index.ts b/src/components/home/Skeleton/index.ts deleted file mode 100644 index 4e48487c..00000000 --- a/src/components/home/Skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SkeletonTagList"; diff --git a/src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx b/src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx index 1163296c..4122f556 100644 --- a/src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx +++ b/src/features/memes/components/Skeleton/SkeletonMemeTagList.tsx @@ -1,5 +1,4 @@ import { Skeleton } from "@/common/components/Skeleton"; -import { SkeletonTagList } from "@/components/home/Skeleton"; export const SkeletonMemeTagList = () => { return ( @@ -12,7 +11,17 @@ export const SkeletonMemeTagList = () => { variant="rectangular" width="10rem" /> - +
    + {Array.from(Array(3).keys()).map((i) => ( + + ))} +
    ); }; From 73accf9c2a8733ca4702d29613b377f62fb759b6 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 19:36:51 +0900 Subject: [PATCH 17/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?= =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=9D=B8=20hook=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20-=20/application/hooks/domain=20->=20/feat?= =?UTF-8?q?ures/common/hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/api/search/index.ts | 2 +- src/application/hooks/domain/channel/index.ts | 1 - src/application/hooks/domain/collection/index.ts | 1 - src/application/hooks/domain/index.ts | 5 ----- src/application/hooks/domain/meme/index.ts | 1 - src/features/common/components/MemeActionSheet.tsx | 4 +++- src/features/common/components/MemeItem.tsx | 3 +-- src/features/common/hooks/index.ts | 3 +++ .../channel => features/common/hooks}/useChannelIO.ts | 0 .../common/hooks}/useCollection.tsx | 0 .../meme => features/common/hooks}/useMoveMemeDetail.ts | 0 src/features/common/index.ts | 1 + src/features/memes/components/MemeCTAList.tsx | 3 ++- src/features/memes/components/MemeDetail/MemeExport.tsx | 8 ++------ .../memes/components/MemeShareModal/KakaoShareButton.tsx | 5 +++-- .../hooks/domain/share => features/memes/hooks}/index.ts | 0 .../share => features/memes/hooks}/useKakaoShare.ts | 0 .../components/SearchPopularList/SearchPopularList.tsx | 2 +- src/features/search/components/SearchRecent.tsx | 4 ++-- src/features/search/components/SearchResultList.tsx | 2 +- .../domain/search => features/search/hooks}/index.ts | 0 .../search/hooks}/useRecentSearch/index.ts | 0 .../search/hooks}/useRecentSearch/types.ts | 0 .../search/hooks}/useRecentSearch/useRecentSearch.ts | 0 .../search/hooks}/useRecentSearch/utils.ts | 0 src/pages/memes/[id].tsx | 3 ++- src/pages/mypage/index.tsx | 4 ++-- src/pages/search/index.tsx | 2 +- src/pages/setting/index.tsx | 4 ++-- 29 files changed, 27 insertions(+), 31 deletions(-) delete mode 100644 src/application/hooks/domain/channel/index.ts delete mode 100644 src/application/hooks/domain/collection/index.ts delete mode 100644 src/application/hooks/domain/meme/index.ts create mode 100644 src/features/common/hooks/index.ts rename src/{application/hooks/domain/channel => features/common/hooks}/useChannelIO.ts (100%) rename src/{application/hooks/domain/collection => features/common/hooks}/useCollection.tsx (100%) rename src/{application/hooks/domain/meme => features/common/hooks}/useMoveMemeDetail.ts (100%) rename src/{application/hooks/domain/share => features/memes/hooks}/index.ts (100%) rename src/{application/hooks/domain/share => features/memes/hooks}/useKakaoShare.ts (100%) rename src/{application/hooks/domain/search => features/search/hooks}/index.ts (100%) rename src/{application/hooks/domain/search => features/search/hooks}/useRecentSearch/index.ts (100%) rename src/{application/hooks/domain/search => features/search/hooks}/useRecentSearch/types.ts (100%) rename src/{application/hooks/domain/search => features/search/hooks}/useRecentSearch/useRecentSearch.ts (100%) rename src/{application/hooks/domain/search => features/search/hooks}/useRecentSearch/utils.ts (100%) diff --git a/src/application/hooks/api/search/index.ts b/src/application/hooks/api/search/index.ts index 0ffdbb8b..52b65722 100644 --- a/src/application/hooks/api/search/index.ts +++ b/src/application/hooks/api/search/index.ts @@ -2,8 +2,8 @@ import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query"; import { useEffect, useRef } from "react"; -import type { RecentSearch } from "@/application/hooks"; import { useLocalStorage } from "@/common/hooks"; +import type { RecentSearch } from "@/features/search/hooks"; import { api } from "@/infra/api"; import { useCoreInfiniteQuery } from "../core/useCoreInfiniteQuery"; diff --git a/src/application/hooks/domain/channel/index.ts b/src/application/hooks/domain/channel/index.ts deleted file mode 100644 index 10749675..00000000 --- a/src/application/hooks/domain/channel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./useChannelIO"; diff --git a/src/application/hooks/domain/collection/index.ts b/src/application/hooks/domain/collection/index.ts deleted file mode 100644 index ee32c2ca..00000000 --- a/src/application/hooks/domain/collection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./useCollection"; diff --git a/src/application/hooks/domain/index.ts b/src/application/hooks/domain/index.ts index 670b7acb..97ccf764 100644 --- a/src/application/hooks/domain/index.ts +++ b/src/application/hooks/domain/index.ts @@ -1,6 +1 @@ export * from "./auth"; -export * from "./channel"; -export * from "./collection"; -export * from "./meme"; -export * from "./search"; -export * from "./share"; diff --git a/src/application/hooks/domain/meme/index.ts b/src/application/hooks/domain/meme/index.ts deleted file mode 100644 index ce59e3a4..00000000 --- a/src/application/hooks/domain/meme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./useMoveMemeDetail"; diff --git a/src/features/common/components/MemeActionSheet.tsx b/src/features/common/components/MemeActionSheet.tsx index ff7df5cd..f3e523a3 100644 --- a/src/features/common/components/MemeActionSheet.tsx +++ b/src/features/common/components/MemeActionSheet.tsx @@ -1,13 +1,15 @@ import { Suspense } from "react"; import tw from "twin.macro"; -import { useAuth, useCollection } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { ActionSheet } from "@/common/components/ActionSheet"; import { useOverlay } from "@/common/hooks"; import { channelUrl } from "@/common/utils"; import { MemeShareModal } from "@/features/memes/components"; import type { Meme } from "@/types"; +import { useCollection } from "../hooks"; + interface Props { meme: Meme; onClose: () => void; diff --git a/src/features/common/components/MemeItem.tsx b/src/features/common/components/MemeItem.tsx index 31c0277a..f06ffc3f 100644 --- a/src/features/common/components/MemeItem.tsx +++ b/src/features/common/components/MemeItem.tsx @@ -1,11 +1,10 @@ import { memo } from "react"; -import { useMoveMemeDetail } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useOverlay } from "@/common/hooks"; import { isEncodingError } from "@/common/utils"; -import { MemeActionSheet } from "@/features/common"; +import { MemeActionSheet, useMoveMemeDetail } from "@/features/common"; import type { Meme } from "@/types"; interface Props { diff --git a/src/features/common/hooks/index.ts b/src/features/common/hooks/index.ts new file mode 100644 index 00000000..e597cfb2 --- /dev/null +++ b/src/features/common/hooks/index.ts @@ -0,0 +1,3 @@ +export * from "./useChannelIO"; +export * from "./useCollection"; +export * from "./useMoveMemeDetail"; diff --git a/src/application/hooks/domain/channel/useChannelIO.ts b/src/features/common/hooks/useChannelIO.ts similarity index 100% rename from src/application/hooks/domain/channel/useChannelIO.ts rename to src/features/common/hooks/useChannelIO.ts diff --git a/src/application/hooks/domain/collection/useCollection.tsx b/src/features/common/hooks/useCollection.tsx similarity index 100% rename from src/application/hooks/domain/collection/useCollection.tsx rename to src/features/common/hooks/useCollection.tsx diff --git a/src/application/hooks/domain/meme/useMoveMemeDetail.ts b/src/features/common/hooks/useMoveMemeDetail.ts similarity index 100% rename from src/application/hooks/domain/meme/useMoveMemeDetail.ts rename to src/features/common/hooks/useMoveMemeDetail.ts diff --git a/src/features/common/index.ts b/src/features/common/index.ts index 18c99581..67700710 100644 --- a/src/features/common/index.ts +++ b/src/features/common/index.ts @@ -1,2 +1,3 @@ export * from "./components"; export * from "./hocs"; +export * from "./hooks"; diff --git a/src/features/memes/components/MemeCTAList.tsx b/src/features/memes/components/MemeCTAList.tsx index 4d0feafb..1d00dc17 100644 --- a/src/features/memes/components/MemeCTAList.tsx +++ b/src/features/memes/components/MemeCTAList.tsx @@ -1,9 +1,10 @@ import { Suspense } from "react"; -import { useAuth, useCollection } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; import { useOverlay } from "@/common/hooks"; +import { useCollection } from "@/features/common"; import { MemeShareModal } from "./MemeShareModal"; diff --git a/src/features/memes/components/MemeDetail/MemeExport.tsx b/src/features/memes/components/MemeDetail/MemeExport.tsx index 8621a182..93d9e20e 100644 --- a/src/features/memes/components/MemeDetail/MemeExport.tsx +++ b/src/features/memes/components/MemeDetail/MemeExport.tsx @@ -1,15 +1,11 @@ import tw from "twin.macro"; -import { - useAuth, - useCollection, - useMemeDetailById, - usePostMemeToSharedCollection, -} from "@/application/hooks"; +import { useAuth, useMemeDetailById, usePostMemeToSharedCollection } from "@/application/hooks"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; import { DOMAIN, PATH } from "@/common/utils"; +import { useCollection } from "@/features/common"; interface Props { id: string; diff --git a/src/features/memes/components/MemeShareModal/KakaoShareButton.tsx b/src/features/memes/components/MemeShareModal/KakaoShareButton.tsx index b5cf560d..d92e444b 100644 --- a/src/features/memes/components/MemeShareModal/KakaoShareButton.tsx +++ b/src/features/memes/components/MemeShareModal/KakaoShareButton.tsx @@ -1,8 +1,9 @@ -import type { KakaoShareOptions } from "@/application/hooks/domain/share"; -import { useKakaoShare } from "@/application/hooks/domain/share"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; +import type { KakaoShareOptions } from "../../hooks"; +import { useKakaoShare } from "../../hooks"; + interface Props { resource: Omit; onSuccess?: () => void; diff --git a/src/application/hooks/domain/share/index.ts b/src/features/memes/hooks/index.ts similarity index 100% rename from src/application/hooks/domain/share/index.ts rename to src/features/memes/hooks/index.ts diff --git a/src/application/hooks/domain/share/useKakaoShare.ts b/src/features/memes/hooks/useKakaoShare.ts similarity index 100% rename from src/application/hooks/domain/share/useKakaoShare.ts rename to src/features/memes/hooks/useKakaoShare.ts diff --git a/src/features/search/components/SearchPopularList/SearchPopularList.tsx b/src/features/search/components/SearchPopularList/SearchPopularList.tsx index 3016af7e..73b9ab04 100644 --- a/src/features/search/components/SearchPopularList/SearchPopularList.tsx +++ b/src/features/search/components/SearchPopularList/SearchPopularList.tsx @@ -1,9 +1,9 @@ import Link from "next/link"; -import type { RecentSearch } from "@/application/hooks"; import { useGetPopularTags } from "@/application/hooks"; import { PATH } from "@/common/utils"; +import type { RecentSearch } from "../../hooks"; import { SearchPopularItem } from "./SearchPopularItem"; interface Props { diff --git a/src/features/search/components/SearchRecent.tsx b/src/features/search/components/SearchRecent.tsx index b527a4c1..ff21f32e 100644 --- a/src/features/search/components/SearchRecent.tsx +++ b/src/features/search/components/SearchRecent.tsx @@ -1,10 +1,10 @@ import { useRouter } from "next/router"; -import type { RecentSearch } from "@/application/hooks"; -import { isTagType } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { PATH } from "@/common/utils"; +import type { RecentSearch } from "../hooks"; +import { isTagType } from "../hooks"; import { SearchItem } from "./SearchItem"; interface Props { diff --git a/src/features/search/components/SearchResultList.tsx b/src/features/search/components/SearchResultList.tsx index c655f327..48df3b4f 100644 --- a/src/features/search/components/SearchResultList.tsx +++ b/src/features/search/components/SearchResultList.tsx @@ -1,10 +1,10 @@ import Link from "next/link"; -import type { RecentSearch } from "@/application/hooks"; import { useGetTagSearch } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { PATH } from "@/common/utils"; +import type { RecentSearch } from "../hooks"; import { SearchItem } from "./SearchItem"; interface Prop { diff --git a/src/application/hooks/domain/search/index.ts b/src/features/search/hooks/index.ts similarity index 100% rename from src/application/hooks/domain/search/index.ts rename to src/features/search/hooks/index.ts diff --git a/src/application/hooks/domain/search/useRecentSearch/index.ts b/src/features/search/hooks/useRecentSearch/index.ts similarity index 100% rename from src/application/hooks/domain/search/useRecentSearch/index.ts rename to src/features/search/hooks/useRecentSearch/index.ts diff --git a/src/application/hooks/domain/search/useRecentSearch/types.ts b/src/features/search/hooks/useRecentSearch/types.ts similarity index 100% rename from src/application/hooks/domain/search/useRecentSearch/types.ts rename to src/features/search/hooks/useRecentSearch/types.ts diff --git a/src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts b/src/features/search/hooks/useRecentSearch/useRecentSearch.ts similarity index 100% rename from src/application/hooks/domain/search/useRecentSearch/useRecentSearch.ts rename to src/features/search/hooks/useRecentSearch/useRecentSearch.ts diff --git a/src/application/hooks/domain/search/useRecentSearch/utils.ts b/src/features/search/hooks/useRecentSearch/utils.ts similarity index 100% rename from src/application/hooks/domain/search/useRecentSearch/utils.ts rename to src/features/search/hooks/useRecentSearch/utils.ts diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index 93283f1d..eb3e6172 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -2,12 +2,13 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { Suspense } from "react"; -import { fetchMemeDetailById, fetchMemeTagsById, useMoveMemeDetail } from "@/application/hooks"; +import { fetchMemeDetailById, fetchMemeTagsById } from "@/application/hooks"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { SITE_NAME } from "@/common/utils"; +import { useMoveMemeDetail } from "@/features/common"; import { MemeCTAList, MemeDetail, diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 1bc46521..4255c18a 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -1,13 +1,13 @@ import Link from "next/link"; import { css } from "twin.macro"; -import { useAuth, useChannelIO } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { MyPageNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { withAuth } from "@/features/common"; +import { useChannelIO, withAuth } from "@/features/common"; import { SummarizedCollection } from "@/features/mypage/components"; const MyPage = () => { diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 50751627..3eebe1ae 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -2,7 +2,6 @@ import type { NextPage } from "next"; import { useRouter } from "next/router"; import { Suspense } from "react"; -import { useRecentSearch } from "@/application/hooks"; import { SearchPageNavigation } from "@/common/components/Navigation"; import type { NextSeoProps } from "@/common/components/NextSeo"; import { NextSeo } from "@/common/components/NextSeo"; @@ -16,6 +15,7 @@ import { SearchResultList, SkeletonTagList, } from "@/features/search/components"; +import { useRecentSearch } from "@/features/search/hooks"; /** * FIX diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index 9efcc1b1..8c17f663 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -1,10 +1,10 @@ -import { useAuth, useChannelIO } from "@/application/hooks"; +import { useAuth } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { SignOutModal } from "@/common/components/Modal"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { useModal } from "@/common/hooks"; -import { withAuth } from "@/features/common"; +import { useChannelIO, withAuth } from "@/features/common"; const SettingPage = () => { const modalProps = useModal(); From b23a065f6a1aaa0c2d32b724a79c88d095645b0c Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 14 Jul 2023 19:43:11 +0900 Subject: [PATCH 18/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20useAuth?= =?UTF-8?q?=20hook=20=EC=9D=B4=EB=8F=99=20-=20/application/hooks/domain=20?= =?UTF-8?q?->=20/features/common/hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/hooks/domain/auth/index.ts | 1 - src/application/hooks/domain/index.ts | 1 - src/application/hooks/index.ts | 1 - src/common/components/Modal/SignOutModal.tsx | 2 +- .../Navigation/SideBar/LoginSideBarContent.tsx | 2 +- .../Navigation/SideBar/LogoutSideBarContent.tsx | 2 +- src/common/components/Navigation/SideBar/SideBar.tsx | 3 +-- src/features/common/components/MemeActionSheet.tsx | 2 +- .../common/components/TagCategory/FavoriteCategory.tsx | 3 ++- src/features/common/hocs/withAuth/withAuth.tsx | 2 +- src/features/common/hooks/index.ts | 1 + .../domain/auth => features/common/hooks}/useAuth.ts | 0 .../explore/tags/components/TagBookmarkButton.tsx | 9 ++------- src/features/memes/components/MemeCTAList.tsx | 3 +-- src/features/memes/components/MemeDetail/MemeExport.tsx | 4 ++-- .../memes/components/MemeShareModal/MemeShareModal.tsx | 3 ++- src/features/memes/components/RelativeMemeList.tsx | 4 ++-- src/pages/collect/index.tsx | 3 +-- src/pages/mypage/index.tsx | 3 +-- src/pages/oauth2/redirect/index.tsx | 2 +- src/pages/setting/index.tsx | 3 +-- src/pages/share/index.tsx | 3 +-- 22 files changed, 23 insertions(+), 34 deletions(-) delete mode 100644 src/application/hooks/domain/auth/index.ts delete mode 100644 src/application/hooks/domain/index.ts rename src/{application/hooks/domain/auth => features/common/hooks}/useAuth.ts (100%) diff --git a/src/application/hooks/domain/auth/index.ts b/src/application/hooks/domain/auth/index.ts deleted file mode 100644 index dabdde66..00000000 --- a/src/application/hooks/domain/auth/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./useAuth"; diff --git a/src/application/hooks/domain/index.ts b/src/application/hooks/domain/index.ts deleted file mode 100644 index 97ccf764..00000000 --- a/src/application/hooks/domain/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./auth"; diff --git a/src/application/hooks/index.ts b/src/application/hooks/index.ts index d68bbb1a..d158c576 100644 --- a/src/application/hooks/index.ts +++ b/src/application/hooks/index.ts @@ -1,2 +1 @@ export * from "./api"; -export * from "./domain"; diff --git a/src/common/components/Modal/SignOutModal.tsx b/src/common/components/Modal/SignOutModal.tsx index d502972f..058b6cb3 100644 --- a/src/common/components/Modal/SignOutModal.tsx +++ b/src/common/components/Modal/SignOutModal.tsx @@ -1,8 +1,8 @@ import { useRouter } from "next/router"; -import { useAuth } from "@/application/hooks"; import { useToast } from "@/common/hooks"; import { PATH } from "@/common/utils"; +import { useAuth } from "@/features/common"; import { RandomImage } from "../RandomImge"; import { Modal } from "./Modal"; diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx index 62fe875c..a4a5a2eb 100644 --- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx @@ -1,11 +1,11 @@ import Link from "next/link"; -import type { useAuth } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { SignOutModal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useModal } from "@/common/hooks"; import { channelUrl } from "@/common/utils"; +import type { useAuth } from "@/features/common"; type LoginSideBarContentProps = ReturnType; diff --git a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx index 99105605..ca246dce 100644 --- a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx +++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx @@ -1,7 +1,7 @@ -import type { useAuth } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { channelUrl } from "@/common/utils"; +import type { useAuth } from "@/features/common"; const defaultAvatarUrl = "/img/default-avatar.png"; const defaultName = "로그인하기"; diff --git a/src/common/components/Navigation/SideBar/SideBar.tsx b/src/common/components/Navigation/SideBar/SideBar.tsx index bf672e4b..9678d1c6 100644 --- a/src/common/components/Navigation/SideBar/SideBar.tsx +++ b/src/common/components/Navigation/SideBar/SideBar.tsx @@ -1,6 +1,5 @@ -import { useAuth } from "@/application/hooks"; import { instagramUrl, twitterUrl } from "@/common/utils"; -import { useTagCategoryContext } from "@/features/common"; +import { useAuth, useTagCategoryContext } from "@/features/common"; import { Drawer } from "../../Drawer"; import { Icon } from "../../Icon"; diff --git a/src/features/common/components/MemeActionSheet.tsx b/src/features/common/components/MemeActionSheet.tsx index f3e523a3..c1080935 100644 --- a/src/features/common/components/MemeActionSheet.tsx +++ b/src/features/common/components/MemeActionSheet.tsx @@ -1,10 +1,10 @@ import { Suspense } from "react"; import tw from "twin.macro"; -import { useAuth } from "@/application/hooks"; import { ActionSheet } from "@/common/components/ActionSheet"; import { useOverlay } from "@/common/hooks"; import { channelUrl } from "@/common/utils"; +import { useAuth } from "@/features/common"; import { MemeShareModal } from "@/features/memes/components"; import type { Meme } from "@/types"; diff --git a/src/features/common/components/TagCategory/FavoriteCategory.tsx b/src/features/common/components/TagCategory/FavoriteCategory.tsx index 1c1ae8c1..3c7bedf5 100644 --- a/src/features/common/components/TagCategory/FavoriteCategory.tsx +++ b/src/features/common/components/TagCategory/FavoriteCategory.tsx @@ -1,11 +1,12 @@ import { Content, Header, Item, Trigger } from "@radix-ui/react-accordion"; import { useRouter } from "next/router"; -import { useAuth, useDeleteFavoriteTag, useGetFavoriteTags } from "@/application/hooks"; +import { useDeleteFavoriteTag, useGetFavoriteTags } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; import { PATH } from "@/common/utils"; +import { useAuth } from "@/features/common"; import { CategoryTitle } from "./CategoryTitle"; import { useTagCategoryContext } from "./context"; diff --git a/src/features/common/hocs/withAuth/withAuth.tsx b/src/features/common/hocs/withAuth/withAuth.tsx index 09dad2d3..48e665b8 100644 --- a/src/features/common/hocs/withAuth/withAuth.tsx +++ b/src/features/common/hocs/withAuth/withAuth.tsx @@ -2,8 +2,8 @@ import { useRouter } from "next/router"; import type { ComponentType } from "react"; import { useEffect } from "react"; -import { useAuth } from "@/application/hooks"; import { useToast } from "@/common/hooks"; +import { useAuth } from "@/features/common"; export const withAuth = (WrappedComponent: ComponentType) => { const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component"; diff --git a/src/features/common/hooks/index.ts b/src/features/common/hooks/index.ts index e597cfb2..3431fa9c 100644 --- a/src/features/common/hooks/index.ts +++ b/src/features/common/hooks/index.ts @@ -1,3 +1,4 @@ +export * from "./useAuth"; export * from "./useChannelIO"; export * from "./useCollection"; export * from "./useMoveMemeDetail"; diff --git a/src/application/hooks/domain/auth/useAuth.ts b/src/features/common/hooks/useAuth.ts similarity index 100% rename from src/application/hooks/domain/auth/useAuth.ts rename to src/features/common/hooks/useAuth.ts diff --git a/src/features/explore/tags/components/TagBookmarkButton.tsx b/src/features/explore/tags/components/TagBookmarkButton.tsx index e62fd24f..34b581f6 100644 --- a/src/features/explore/tags/components/TagBookmarkButton.tsx +++ b/src/features/explore/tags/components/TagBookmarkButton.tsx @@ -1,13 +1,8 @@ -import { - useAuth, - useDeleteFavoriteTag, - useGetTagInfo, - usePostFavoriteTag, -} from "@/application/hooks"; +import { useDeleteFavoriteTag, useGetTagInfo, usePostFavoriteTag } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; -import { useTagCategoryContext } from "@/features/common"; +import { useAuth, useTagCategoryContext } from "@/features/common"; interface Props { tagId: number; diff --git a/src/features/memes/components/MemeCTAList.tsx b/src/features/memes/components/MemeCTAList.tsx index 1d00dc17..dc92c863 100644 --- a/src/features/memes/components/MemeCTAList.tsx +++ b/src/features/memes/components/MemeCTAList.tsx @@ -1,10 +1,9 @@ import { Suspense } from "react"; -import { useAuth } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; import { useOverlay } from "@/common/hooks"; -import { useCollection } from "@/features/common"; +import { useAuth, useCollection } from "@/features/common"; import { MemeShareModal } from "./MemeShareModal"; diff --git a/src/features/memes/components/MemeDetail/MemeExport.tsx b/src/features/memes/components/MemeDetail/MemeExport.tsx index 93d9e20e..c57dc6cb 100644 --- a/src/features/memes/components/MemeDetail/MemeExport.tsx +++ b/src/features/memes/components/MemeDetail/MemeExport.tsx @@ -1,11 +1,11 @@ import tw from "twin.macro"; -import { useAuth, useMemeDetailById, usePostMemeToSharedCollection } from "@/application/hooks"; +import { useMemeDetailById, usePostMemeToSharedCollection } from "@/application/hooks"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; import { DOMAIN, PATH } from "@/common/utils"; -import { useCollection } from "@/features/common"; +import { useAuth, useCollection } from "@/features/common"; interface Props { id: string; diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx index 11247eb6..7891c2ca 100644 --- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx +++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx @@ -1,9 +1,10 @@ -import { useAuth, useMemeDetailById } from "@/application/hooks"; +import { useMemeDetailById } from "@/application/hooks"; import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; import { DOMAIN, PATH } from "@/common/utils"; +import { useAuth } from "@/features/common"; import { ClipboardCopyButton } from "./ClipboardCopyButton"; import { KakaoShareButton } from "./KakaoShareButton"; diff --git a/src/features/memes/components/RelativeMemeList.tsx b/src/features/memes/components/RelativeMemeList.tsx index b45c5e54..48522e9b 100644 --- a/src/features/memes/components/RelativeMemeList.tsx +++ b/src/features/memes/components/RelativeMemeList.tsx @@ -1,5 +1,5 @@ -import { useAuth, useGetMemesBySort } from "@/application/hooks"; -import { InfiniteMemeList } from "@/features/common"; +import { useGetMemesBySort } from "@/application/hooks"; +import { InfiniteMemeList, useAuth } from "@/features/common"; export const RelativeMemeList = () => { const { data: memeList, isFetchingNextPage, fetchNextPage } = useGetMemesBySort("popular"); diff --git a/src/pages/collect/index.tsx b/src/pages/collect/index.tsx index c60989ce..b1903d41 100644 --- a/src/pages/collect/index.tsx +++ b/src/pages/collect/index.tsx @@ -1,12 +1,11 @@ import { useDeferredValue } from "react"; -import { useAuth } from "@/application/hooks"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; import { useDebounce, useInput } from "@/common/hooks"; import { Collection, SearchedCollection } from "@/features/collect/components"; -import { withAuth } from "@/features/common"; +import { useAuth, withAuth } from "@/features/common"; import { SearchInput } from "@/features/search/components"; const CollectPage = () => { diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 4255c18a..0877649b 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -1,13 +1,12 @@ import Link from "next/link"; import { css } from "twin.macro"; -import { useAuth } from "@/application/hooks"; import { Icon } from "@/common/components/Icon"; import { MyPageNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { useChannelIO, withAuth } from "@/features/common"; +import { useAuth, useChannelIO, withAuth } from "@/features/common"; import { SummarizedCollection } from "@/features/mypage/components"; const MyPage = () => { diff --git a/src/pages/oauth2/redirect/index.tsx b/src/pages/oauth2/redirect/index.tsx index e6f75b0c..90cab596 100644 --- a/src/pages/oauth2/redirect/index.tsx +++ b/src/pages/oauth2/redirect/index.tsx @@ -1,7 +1,7 @@ import Router from "next/router"; import React, { useEffect } from "react"; -import { useAuth } from "@/application/hooks"; +import { useAuth } from "@/features/common"; const KaKaoRedirect = () => { const { login } = useAuth(); diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index 8c17f663..11aa2272 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -1,10 +1,9 @@ -import { useAuth } from "@/application/hooks"; import { Button } from "@/common/components/Button"; import { SignOutModal } from "@/common/components/Modal"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { Photo } from "@/common/components/Photo"; import { useModal } from "@/common/hooks"; -import { useChannelIO, withAuth } from "@/features/common"; +import { useAuth, useChannelIO, withAuth } from "@/features/common"; const SettingPage = () => { const modalProps = useModal(); diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index 7273a62c..fbd98830 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -1,10 +1,9 @@ import type { NextPage } from "next"; -import { useAuth } from "@/application/hooks"; import { BackButtonNavigation } from "@/common/components/Navigation"; import { MemeListSkeleton } from "@/common/components/Skeleton"; import { SSRSuspense } from "@/common/components/Suspense"; -import { withAuth } from "@/features/common"; +import { useAuth, withAuth } from "@/features/common"; import { SharedMemeList } from "@/features/share/components"; const SharedHistoryPage: NextPage = () => { From baa8bbe523f7af683103ba3ea8b0b1b1953c4ebe Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Tue, 18 Jul 2023 14:11:34 +0900 Subject: [PATCH 19/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20react-qu?= =?UTF-8?q?ery=20core=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99=20-=20/app?= =?UTF-8?q?lication/hooks/api/core=20->=20/api/core=20-=20useCoreInfiniteQ?= =?UTF-8?q?uery=20=EC=B6=94=ED=9B=84=20=EB=A6=AC=ED=8C=A9=ED=84=B0?= =?UTF-8?q?=EB=A7=81=20=EC=8B=9C=20=EC=82=AD=EC=A0=9C=20=EC=98=88=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/core/index.ts | 3 ++ .../hooks => }/api/core/queryKey.ts | 0 .../api/core/useCoreInfiniteQuery.ts | 0 .../hooks => }/api/core/useSuspensedQuery.ts | 42 +++++++++++++++---- src/application/hooks/api/core/index.ts | 1 - src/application/hooks/api/core/types.ts | 32 -------------- src/application/hooks/api/meme/index.ts | 3 +- src/application/hooks/api/meme/queryKey.ts | 2 +- src/application/hooks/api/search/index.ts | 2 +- src/application/hooks/api/search/queryKey.ts | 2 +- src/application/hooks/api/tags/index.ts | 4 +- .../common/components/InfiniteMemeList.tsx | 2 +- 12 files changed, 45 insertions(+), 48 deletions(-) create mode 100644 src/api/core/index.ts rename src/{application/hooks => }/api/core/queryKey.ts (100%) rename src/{application/hooks => }/api/core/useCoreInfiniteQuery.ts (100%) rename src/{application/hooks => }/api/core/useSuspensedQuery.ts (60%) delete mode 100644 src/application/hooks/api/core/index.ts delete mode 100644 src/application/hooks/api/core/types.ts diff --git a/src/api/core/index.ts b/src/api/core/index.ts new file mode 100644 index 00000000..44a0df02 --- /dev/null +++ b/src/api/core/index.ts @@ -0,0 +1,3 @@ +export * from "./queryKey"; +export * from "./useCoreInfiniteQuery"; +export * from "./useSuspensedQuery"; diff --git a/src/application/hooks/api/core/queryKey.ts b/src/api/core/queryKey.ts similarity index 100% rename from src/application/hooks/api/core/queryKey.ts rename to src/api/core/queryKey.ts diff --git a/src/application/hooks/api/core/useCoreInfiniteQuery.ts b/src/api/core/useCoreInfiniteQuery.ts similarity index 100% rename from src/application/hooks/api/core/useCoreInfiniteQuery.ts rename to src/api/core/useCoreInfiniteQuery.ts diff --git a/src/application/hooks/api/core/useSuspensedQuery.ts b/src/api/core/useSuspensedQuery.ts similarity index 60% rename from src/application/hooks/api/core/useSuspensedQuery.ts rename to src/api/core/useSuspensedQuery.ts index 57e8ec1c..d3fc6440 100644 --- a/src/application/hooks/api/core/useSuspensedQuery.ts +++ b/src/api/core/useSuspensedQuery.ts @@ -1,13 +1,41 @@ -import type { QueryFunction, QueryKey } from "@tanstack/react-query"; +import type { + QueryFunction, + QueryKey, + UseQueryOptions, + UseQueryResult, +} from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query"; -import type { - BaseSuspendedUseQueryResult, - SuspendedUseQueryOptions, - SuspendedUseQueryResultOnIdle, - SuspendedUseQueryResultOnSuccess, -} from "@/application/hooks/api/core/types"; +export interface BaseSuspendedUseQueryResult + extends Omit< + UseQueryResult, + "data" | "status" | "error" | "isLoading" | "isError" | "isFetching" + > { + data: TData; + status: "success" | "idle"; +} + +export type SuspendedUseQueryResultOnSuccess = BaseSuspendedUseQueryResult & { + status: "success"; + isSuccess: true; + isIdle: false; +}; +export type SuspendedUseQueryResultOnIdle = BaseSuspendedUseQueryResult & { + status: "idle"; + isSuccess: false; + isIdle: true; +}; + +export type SuspendedUseQueryOptions< + TQueryFnData = unknown, + TError = unknown, + TData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +> = Omit, "suspense">; +export type QuerySelectOption any> = ( + data: Awaited>, +) => Result; /** * @desc suspense 사용 시 non-nullable data 이도록 wrapping * @link https://github.com/toss/slash/blob/main/packages/react/react-query/src/hooks/useSuspendedQuery.ts diff --git a/src/application/hooks/api/core/index.ts b/src/application/hooks/api/core/index.ts deleted file mode 100644 index 60ec563b..00000000 --- a/src/application/hooks/api/core/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./useSuspensedQuery"; diff --git a/src/application/hooks/api/core/types.ts b/src/application/hooks/api/core/types.ts deleted file mode 100644 index d05c44ee..00000000 --- a/src/application/hooks/api/core/types.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { QueryKey, UseQueryOptions, UseQueryResult } from "@tanstack/react-query"; - -export interface BaseSuspendedUseQueryResult - extends Omit< - UseQueryResult, - "data" | "status" | "error" | "isLoading" | "isError" | "isFetching" - > { - data: TData; - status: "success" | "idle"; -} - -export type SuspendedUseQueryResultOnSuccess = BaseSuspendedUseQueryResult & { - status: "success"; - isSuccess: true; - isIdle: false; -}; -export type SuspendedUseQueryResultOnIdle = BaseSuspendedUseQueryResult & { - status: "idle"; - isSuccess: false; - isIdle: true; -}; - -export type SuspendedUseQueryOptions< - TQueryFnData = unknown, - TError = unknown, - TData = TQueryFnData, - TQueryKey extends QueryKey = QueryKey, -> = Omit, "suspense">; - -export type QuerySelectOption any> = ( - data: Awaited>, -) => Result; diff --git a/src/application/hooks/api/meme/index.ts b/src/application/hooks/api/meme/index.ts index a235e682..d5b9a6d3 100644 --- a/src/application/hooks/api/meme/index.ts +++ b/src/application/hooks/api/meme/index.ts @@ -1,9 +1,8 @@ import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; -import { useSuspendedQuery } from "@/application/hooks/api/core"; +import { useCoreInfiniteQuery, useSuspendedQuery } from "@/api/core"; import { api } from "@/infra/api"; -import { useCoreInfiniteQuery } from "../core/useCoreInfiniteQuery"; import { QUERY_KEYS } from "./queryKey"; const PAGE_SIZE = 10; diff --git a/src/application/hooks/api/meme/queryKey.ts b/src/application/hooks/api/meme/queryKey.ts index 02b3c31c..601afe04 100644 --- a/src/application/hooks/api/meme/queryKey.ts +++ b/src/application/hooks/api/meme/queryKey.ts @@ -1,4 +1,4 @@ -import { CORE_QUERY_KEY } from "@/application/hooks/api/core/queryKey"; +import { CORE_QUERY_KEY } from "@/api/core"; export const QUERY_KEYS = { getMemeDetailById: (id: string) => ["getMemeDetailById", id], diff --git a/src/application/hooks/api/search/index.ts b/src/application/hooks/api/search/index.ts index 52b65722..a64890cb 100644 --- a/src/application/hooks/api/search/index.ts +++ b/src/application/hooks/api/search/index.ts @@ -2,11 +2,11 @@ import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query"; import { useEffect, useRef } from "react"; +import { useCoreInfiniteQuery } from "@/api/core"; import { useLocalStorage } from "@/common/hooks"; import type { RecentSearch } from "@/features/search/hooks"; import { api } from "@/infra/api"; -import { useCoreInfiniteQuery } from "../core/useCoreInfiniteQuery"; import { QUERY_KEYS } from "./queryKey"; const PAGE_SIZE = 20; diff --git a/src/application/hooks/api/search/queryKey.ts b/src/application/hooks/api/search/queryKey.ts index 17a6ca71..57865b92 100644 --- a/src/application/hooks/api/search/queryKey.ts +++ b/src/application/hooks/api/search/queryKey.ts @@ -1,4 +1,4 @@ -import { CORE_QUERY_KEY } from "@/application/hooks/api/core/queryKey"; +import { CORE_QUERY_KEY } from "@/api/core"; export const QUERY_KEYS = { getMemesByKeyword: (keyword: string) => [ diff --git a/src/application/hooks/api/tags/index.ts b/src/application/hooks/api/tags/index.ts index f921c145..fb488d79 100644 --- a/src/application/hooks/api/tags/index.ts +++ b/src/application/hooks/api/tags/index.ts @@ -1,8 +1,8 @@ import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { useSuspendedQuery } from "@/application/hooks/api/core"; -import type { QuerySelectOption } from "@/application/hooks/api/core/types"; +import type { QuerySelectOption } from "@/api/core"; +import { useSuspendedQuery } from "@/api/core"; import { delay } from "@/common/utils"; import { api } from "@/infra/api"; import type { diff --git a/src/features/common/components/InfiniteMemeList.tsx b/src/features/common/components/InfiniteMemeList.tsx index ee336d9d..2f527746 100644 --- a/src/features/common/components/InfiniteMemeList.tsx +++ b/src/features/common/components/InfiniteMemeList.tsx @@ -2,8 +2,8 @@ import type { UseInfiniteQueryResult } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query"; import { useCallback, useMemo } from "react"; +import { CORE_QUERY_KEY } from "@/api/core"; import { prefetchCollectionCheck } from "@/application/hooks"; -import { CORE_QUERY_KEY } from "@/application/hooks/api/core/queryKey"; import { QUERY_KEYS } from "@/application/hooks/api/meme/queryKey"; import { Masonry } from "@/common/components/Masonry"; import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; From a1fa512b924f8a2d96344300fd71ed5cf3a8e0ca Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 21 Jul 2023 22:59:54 +0900 Subject: [PATCH 20/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20axios=20?= =?UTF-8?q?=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20-=20/infra/api/index.ts=20->=20/api/core/a?= =?UTF-8?q?xios.ts=20-=20/infra/api/index.ts=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EC=98=88=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/core/axios.ts | 41 +++++++++++++++++++++++++++++++++++++++++ src/api/core/index.ts | 1 + 2 files changed, 42 insertions(+) create mode 100644 src/api/core/axios.ts diff --git a/src/api/core/axios.ts b/src/api/core/axios.ts new file mode 100644 index 00000000..e6e03c1a --- /dev/null +++ b/src/api/core/axios.ts @@ -0,0 +1,41 @@ +import axios from "axios"; + +import { AccountApi } from "@/infra/api/account"; +import { AuthApi } from "@/infra/api/auth"; +import { CollectionApi } from "@/infra/api/collection"; +import { MemeApi } from "@/infra/api/meme"; +import { SearchApi } from "@/infra/api/search"; +import { TagApi } from "@/infra/api/tags"; + +export const axiosBasic = axios.create({ + baseURL: `${process.env.NEXT_PUBLIC_API_URL}`, + withCredentials: true, +}); + +/** + * FIX + * 검색 API만 서버 endpoint가 다름. + * 추후에 다른 API와 endpoint 통일될 예정. + */ +export const axiosSearchBasic = axios.create({ + baseURL: `${process.env.NEXT_PUBLIC_SEARCH_API_URL}`, +}); + +/** + * NOTE + * 통신 클라이언트(axios) 의존성 주입 + * private/public 으로 api 요청 정책이 분리될 가능성을 위함 + * 특정 정책에 따라 여러 버전의 api 인스턴스를 런타임에 생성 가능 + * + * TODO + * 1. 요청 데이터를 검증하는 방법과 위치 및 에러 핸들링 + * 2. 응답 에러 핸들링 + */ +export const api = { + auth: new AuthApi(axiosBasic), + account: new AccountApi(axiosBasic), + search: new SearchApi(axiosSearchBasic), + meme: new MemeApi(axiosBasic), + tags: new TagApi(axiosBasic), + collection: new CollectionApi(axiosBasic), +}; diff --git a/src/api/core/index.ts b/src/api/core/index.ts index 44a0df02..4bbe7277 100644 --- a/src/api/core/index.ts +++ b/src/api/core/index.ts @@ -1,3 +1,4 @@ +export * from "./axios"; export * from "./queryKey"; export * from "./useCoreInfiniteQuery"; export * from "./useSuspensedQuery"; From 39153b8bf6c0935a8cbb504de846c51b3bbc18ac Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 21 Jul 2023 23:01:00 +0900 Subject: [PATCH 21/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20meme=20?= =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=9D=B8=20API=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20-=20/application/hooks/api/meme=20->=20/ap?= =?UTF-8?q?i/meme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/meme/index.ts | 3 + src/api/meme/useGetMemeDetailById.ts | 24 ++++++ src/api/meme/useGetMemesByCollectionId.ts | 38 +++++++++ src/api/meme/useGetMemesBySort.ts | 32 +++++++ src/application/hooks/api/collection/index.ts | 4 +- src/application/hooks/api/index.ts | 1 - src/application/hooks/api/meme/index.ts | 83 ------------------- src/application/hooks/api/meme/queryKey.ts | 11 --- .../collect/components/Collection.tsx | 2 +- .../common/components/InfiniteMemeList.tsx | 6 +- .../MemeListContainer/CommonMemeList.tsx | 2 +- .../components/MemeDetail/MemeDetail.tsx | 4 +- .../components/MemeDetail/MemeExport.tsx | 5 +- .../MemeShareModal/MemeShareModal.tsx | 4 +- .../memes/components/RelativeMemeList.tsx | 2 +- .../components/SummarizedCollection.tsx | 2 +- .../share/components/SharedMemeList.tsx | 2 +- src/pages/memes/[id].tsx | 5 +- 18 files changed, 117 insertions(+), 113 deletions(-) create mode 100644 src/api/meme/index.ts create mode 100644 src/api/meme/useGetMemeDetailById.ts create mode 100644 src/api/meme/useGetMemesByCollectionId.ts create mode 100644 src/api/meme/useGetMemesBySort.ts delete mode 100644 src/application/hooks/api/meme/index.ts delete mode 100644 src/application/hooks/api/meme/queryKey.ts diff --git a/src/api/meme/index.ts b/src/api/meme/index.ts new file mode 100644 index 00000000..fa871a7b --- /dev/null +++ b/src/api/meme/index.ts @@ -0,0 +1,3 @@ +export * from "./useGetMemeDetailById"; +export * from "./useGetMemesByCollectionId"; +export * from "./useGetMemesBySort"; diff --git a/src/api/meme/useGetMemeDetailById.ts b/src/api/meme/useGetMemeDetailById.ts new file mode 100644 index 00000000..2d661ff8 --- /dev/null +++ b/src/api/meme/useGetMemeDetailById.ts @@ -0,0 +1,24 @@ +import type { QueryClient } from "@tanstack/react-query"; + +import { api, useSuspendedQuery } from "../core"; + +/** + * 밈 상세 조회 API + * @param id 상세 조회할 밈 id + */ +export const useGetMemeDetailById = (id: string) => { + const { data, isRefetching } = useSuspendedQuery({ + queryKey: useGetMemeDetailById.queryKey(id), + queryFn: () => useGetMemeDetailById.queryFn(id), + staleTime: Infinity, + }); + + return { ...data, isRefetching }; +}; + +useGetMemeDetailById.queryKey = (id: string) => ["getMemeDetailById", id] as const; + +useGetMemeDetailById.queryFn = (id: string) => api.meme.getMemeDetailById(id); + +useGetMemeDetailById.fetchQuery = (id: string, queryClient: QueryClient) => + queryClient.fetchQuery(useGetMemeDetailById.queryKey(id), () => api.meme.getMemeDetailById(id)); diff --git a/src/api/meme/useGetMemesByCollectionId.ts b/src/api/meme/useGetMemesByCollectionId.ts new file mode 100644 index 00000000..56729a97 --- /dev/null +++ b/src/api/meme/useGetMemesByCollectionId.ts @@ -0,0 +1,38 @@ +import type { QueryFunctionContext } from "@tanstack/react-query"; + +import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core"; + +const PAGE_SIZE = 10; + +/** + * 콜렉션 별 밈 리스트 API + * + * NOTE + * 현재 하나의 콜렉션만이 존재(즉, collectionId가 하나) + * 추후에 여러개의 콜렉션을 다룰 예정(즉, collectionId에 여러개) + * + * 마이페이지(/mypage)에서는 무한스크롤 적용 안함 + * 콜렉션 페이지(/collect) 페이지에서 무한 스크롤 적용함 + */ +export const useGetMemesByCollectionId = (collectionId: number) => { + const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( + useGetMemesByCollectionId.queryKey(collectionId), + ({ pageParam = 0 }: QueryFunctionContext) => + api.meme.getMemesByCollectionId({ collectionId, offset: pageParam, limit: PAGE_SIZE }), + PAGE_SIZE, + { + staleTime: 1000 * 5, + select: (data) => { + return { + pages: data.pages.map((page) => ({ data: page.memes })), + pageParams: data.pageParams, + }; + }, + }, + ); + + return { data, isEmpty, isFetchingNextPage, fetchNextPage }; +}; + +useGetMemesByCollectionId.queryKey = (collectionId: number | null) => + [CORE_QUERY_KEY.infiniteMemeList, "getMemesByCollectionId", collectionId] as const; diff --git a/src/api/meme/useGetMemesBySort.ts b/src/api/meme/useGetMemesBySort.ts new file mode 100644 index 00000000..93d5cfad --- /dev/null +++ b/src/api/meme/useGetMemesBySort.ts @@ -0,0 +1,32 @@ +import type { QueryFunctionContext } from "@tanstack/react-query"; + +import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core"; + +const PAGE_SIZE = 10; + +const types = { share: "shareCount", recent: "createdDate", popular: "viewCount", user: "user" }; + +/** + * 밈 type 에 따른 리스트 api + * @param sort 밈 리스트 type : share,recent,popular + */ +export const useGetMemesBySort = (sort: keyof typeof types) => { + const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( + useGetMemesBySort.queryKey(sort), + ({ pageParam = 0 }: QueryFunctionContext) => + api.meme.getMemesBySort({ offset: pageParam, limit: PAGE_SIZE, sort: types[sort] }), + PAGE_SIZE, + { + select: (data) => { + return { + pages: data.pages.map((page) => ({ data: page.memes })), + pageParams: data.pageParams, + }; + }, + }, + ); + + return { data, isEmpty, isFetchingNextPage, fetchNextPage }; +}; +useGetMemesBySort.queryKey = (sort: string) => + [CORE_QUERY_KEY.infiniteMemeList, "getMemesBySort", sort] as const; diff --git a/src/application/hooks/api/collection/index.ts b/src/application/hooks/api/collection/index.ts index 02215223..4abe96a9 100644 --- a/src/application/hooks/api/collection/index.ts +++ b/src/application/hooks/api/collection/index.ts @@ -1,11 +1,11 @@ import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useGetMemesByCollectionId } from "@/api/meme"; import { api } from "@/infra/api"; import type { GetCollectionCheckResponse } from "@/infra/api/collection/types"; import { QUERY_KEYS as ACCOUNT_QUERY_KEYS } from "../account/queryKey"; -import { QUERY_KEYS as MEME_QUERY_KEYS } from "../meme/queryKey"; import { QUERY_KEYS } from "./queryKey"; /** @@ -112,7 +112,7 @@ export const usePostMemeToSharedCollection = ({ return useMutation({ mutationFn: () => api.collection.postMemeToSharedCollection(memeId), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: MEME_QUERY_KEYS.getMemesByCollectionId(sharedId) }); + queryClient.invalidateQueries({ queryKey: useGetMemesByCollectionId.queryKey(sharedId) }); queryClient.invalidateQueries({ queryKey: ACCOUNT_QUERY_KEYS.getMyAccount }); }, }); diff --git a/src/application/hooks/api/index.ts b/src/application/hooks/api/index.ts index 0983ff76..e884bbe1 100644 --- a/src/application/hooks/api/index.ts +++ b/src/application/hooks/api/index.ts @@ -1,5 +1,4 @@ export * from "./account"; export * from "./collection"; -export * from "./meme"; export * from "./search"; export * from "./tags"; diff --git a/src/application/hooks/api/meme/index.ts b/src/application/hooks/api/meme/index.ts deleted file mode 100644 index d5b9a6d3..00000000 --- a/src/application/hooks/api/meme/index.ts +++ /dev/null @@ -1,83 +0,0 @@ -import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; - -import { useCoreInfiniteQuery, useSuspendedQuery } from "@/api/core"; -import { api } from "@/infra/api"; - -import { QUERY_KEYS } from "./queryKey"; - -const PAGE_SIZE = 10; - -/** - * 밈 상세 조회 API - * @param id 상세 조회할 밈 id - * @desc staleTime 0 : 조회수 증가를 위해 바로 브라우저에서 재요청 - * - */ - -export const useMemeDetailById = (id: string) => { - const { data, isRefetching } = useSuspendedQuery({ - queryKey: QUERY_KEYS.getMemeDetailById(id), - queryFn: () => api.meme.getMemeDetailById(id), - staleTime: Infinity, - }); - - return { ...data, isRefetching }; -}; - -export const fetchMemeDetailById = (id: string, queryClient: QueryClient) => - queryClient.fetchQuery(QUERY_KEYS.getMemeDetailById(id), () => api.meme.getMemeDetailById(id)); - -/** - * 밈 type 에 따른 리스트 api - * @param sort 밈 리스트 type : share,recent,popular - */ -const types = { share: "shareCount", recent: "createdDate", popular: "viewCount", user: "user" }; - -export const useGetMemesBySort = (sort: keyof typeof types) => { - const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( - QUERY_KEYS.getMemesBySort(sort), - ({ pageParam = 0 }: QueryFunctionContext) => - api.meme.getMemesBySort({ offset: pageParam, limit: PAGE_SIZE, sort: types[sort] }), - PAGE_SIZE, - { - select: (data) => { - return { - pages: data.pages.map((page) => ({ data: page.memes })), - pageParams: data.pageParams, - }; - }, - }, - ); - - return { data, isEmpty, isFetchingNextPage, fetchNextPage }; -}; - -/** - * 콜렉션 별 밈 리스트 API - * - * NOTE - * 현재 하나의 콜렉션만이 존재(즉, collectionId가 하나) - * 추후에 여러개의 콜렉션을 다룰 예정(즉, collectionId에 여러개) - * - * 마이페이지(/mypage)에서는 무한스크롤 적용 안함 - * 콜렉션 페이지(/collect) 페이지에서 무한 스크롤 적용함 - */ -export const useGetMemesByCollectionId = (collectionId: number) => { - const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( - QUERY_KEYS.getMemesByCollectionId(collectionId), - ({ pageParam = 0 }: QueryFunctionContext) => - api.meme.getMemesByCollectionId({ collectionId, offset: pageParam, limit: PAGE_SIZE }), - PAGE_SIZE, - { - staleTime: 1000 * 5, - select: (data) => { - return { - pages: data.pages.map((page) => ({ data: page.memes })), - pageParams: data.pageParams, - }; - }, - }, - ); - - return { data, isEmpty, isFetchingNextPage, fetchNextPage }; -}; diff --git a/src/application/hooks/api/meme/queryKey.ts b/src/application/hooks/api/meme/queryKey.ts deleted file mode 100644 index 601afe04..00000000 --- a/src/application/hooks/api/meme/queryKey.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CORE_QUERY_KEY } from "@/api/core"; - -export const QUERY_KEYS = { - getMemeDetailById: (id: string) => ["getMemeDetailById", id], - getMemesBySort: (sort: string) => [CORE_QUERY_KEY.infiniteMemeList, "getMemesBySort", sort], - getMemesByCollectionId: (collectionId: number | null) => [ - CORE_QUERY_KEY.infiniteMemeList, - "getMemesByCollectionId", - collectionId, - ], -} as const; diff --git a/src/features/collect/components/Collection.tsx b/src/features/collect/components/Collection.tsx index 4c110a95..51005fff 100644 --- a/src/features/collect/components/Collection.tsx +++ b/src/features/collect/components/Collection.tsx @@ -1,4 +1,4 @@ -import { useGetMemesByCollectionId } from "@/application/hooks"; +import { useGetMemesByCollectionId } from "@/api/meme"; import { InfiniteMemeList } from "@/features/common"; interface Props { diff --git a/src/features/common/components/InfiniteMemeList.tsx b/src/features/common/components/InfiniteMemeList.tsx index 2f527746..0b543c65 100644 --- a/src/features/common/components/InfiniteMemeList.tsx +++ b/src/features/common/components/InfiniteMemeList.tsx @@ -3,8 +3,8 @@ import { useQueryClient } from "@tanstack/react-query"; import { useCallback, useMemo } from "react"; import { CORE_QUERY_KEY } from "@/api/core"; +import { useGetMemeDetailById } from "@/api/meme"; import { prefetchCollectionCheck } from "@/application/hooks"; -import { QUERY_KEYS } from "@/application/hooks/api/meme/queryKey"; import { Masonry } from "@/common/components/Masonry"; import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; import { useIntersect } from "@/common/hooks"; @@ -54,12 +54,12 @@ export const InfiniteMemeList = ({ if (cachedMeme) { queryClient.setQueryData( - QUERY_KEYS.getMemeDetailById(String(cachedMeme.memeId)), + useGetMemeDetailById.queryKey(String(cachedMeme.memeId)), cachedMeme, ); // NOTE: 조회수 증가를 위해 한번 더 밈 상세 api를 fetch 합니다 - queryClient.invalidateQueries(QUERY_KEYS.getMemeDetailById(String(cachedMeme.memeId))); + queryClient.invalidateQueries(useGetMemeDetailById.queryKey(String(cachedMeme.memeId))); // NOTE: collection check api에 waterfall 현상이 일어나기 때문에 prefetch 합니다 prefetchCollectionCheck(cachedMeme.memeId, queryClient); diff --git a/src/features/home/components/MemeListContainer/CommonMemeList.tsx b/src/features/home/components/MemeListContainer/CommonMemeList.tsx index 5698790a..25a07b46 100644 --- a/src/features/home/components/MemeListContainer/CommonMemeList.tsx +++ b/src/features/home/components/MemeListContainer/CommonMemeList.tsx @@ -1,4 +1,4 @@ -import { useGetMemesBySort } from "@/application/hooks"; +import { useGetMemesBySort } from "@/api/meme"; import { InfiniteMemeList } from "@/features/common"; import type { MemeListType } from "./type"; diff --git a/src/features/memes/components/MemeDetail/MemeDetail.tsx b/src/features/memes/components/MemeDetail/MemeDetail.tsx index ad003591..74978b5a 100644 --- a/src/features/memes/components/MemeDetail/MemeDetail.tsx +++ b/src/features/memes/components/MemeDetail/MemeDetail.tsx @@ -1,6 +1,6 @@ import { css } from "twin.macro"; -import { useMemeDetailById } from "@/application/hooks"; +import { useGetMemeDetailById } from "@/api/meme"; import { Photo } from "@/common/components/Photo"; import { SSRSuspense } from "@/common/components/Suspense"; @@ -19,7 +19,7 @@ export const MemeDetail = ({ id }: Props) => { description, image: { images }, isRefetching, - } = useMemeDetailById(id); + } = useGetMemeDetailById(id); const { imageUrl, imageWidth, imageHeight } = images[0]; diff --git a/src/features/memes/components/MemeDetail/MemeExport.tsx b/src/features/memes/components/MemeDetail/MemeExport.tsx index c57dc6cb..9206122a 100644 --- a/src/features/memes/components/MemeDetail/MemeExport.tsx +++ b/src/features/memes/components/MemeDetail/MemeExport.tsx @@ -1,6 +1,7 @@ import tw from "twin.macro"; -import { useMemeDetailById, usePostMemeToSharedCollection } from "@/application/hooks"; +import { useGetMemeDetailById } from "@/api/meme"; +import { usePostMemeToSharedCollection } from "@/application/hooks"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; @@ -12,7 +13,7 @@ interface Props { } export const MemeExport = ({ id }: Props) => { - const { name, description } = useMemeDetailById(id); + const { name, description } = useGetMemeDetailById(id); const { validate, isLogin, user } = useAuth(); const { onUpdateCollection } = useCollection({ memeId: Number(id), isLogin }); diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx index 7891c2ca..32512b7a 100644 --- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx +++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx @@ -1,4 +1,4 @@ -import { useMemeDetailById } from "@/application/hooks"; +import { useGetMemeDetailById } from "@/api/meme"; import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; @@ -24,7 +24,7 @@ export const MemeShareModal = ({ id, isOpen, onClose }: Props) => { name, description, image: { images }, - } = useMemeDetailById(id); + } = useGetMemeDetailById(id); const src = images[0].imageUrl; diff --git a/src/features/memes/components/RelativeMemeList.tsx b/src/features/memes/components/RelativeMemeList.tsx index 48522e9b..cecc1950 100644 --- a/src/features/memes/components/RelativeMemeList.tsx +++ b/src/features/memes/components/RelativeMemeList.tsx @@ -1,4 +1,4 @@ -import { useGetMemesBySort } from "@/application/hooks"; +import { useGetMemesBySort } from "@/api/meme"; import { InfiniteMemeList, useAuth } from "@/features/common"; export const RelativeMemeList = () => { diff --git a/src/features/mypage/components/SummarizedCollection.tsx b/src/features/mypage/components/SummarizedCollection.tsx index 83b1916e..c99843b5 100644 --- a/src/features/mypage/components/SummarizedCollection.tsx +++ b/src/features/mypage/components/SummarizedCollection.tsx @@ -1,4 +1,4 @@ -import { useGetMemesByCollectionId } from "@/application/hooks"; +import { useGetMemesByCollectionId } from "@/api/meme"; import { Masonry } from "@/common/components/Masonry"; import { MemeItem } from "@/features/common"; diff --git a/src/features/share/components/SharedMemeList.tsx b/src/features/share/components/SharedMemeList.tsx index 4e51c2e7..13953f5c 100644 --- a/src/features/share/components/SharedMemeList.tsx +++ b/src/features/share/components/SharedMemeList.tsx @@ -1,4 +1,4 @@ -import { useGetMemesByCollectionId } from "@/application/hooks"; +import { useGetMemesByCollectionId } from "@/api/meme"; import { InfiniteMemeList } from "@/features/common"; interface Props { diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index eb3e6172..29bcf347 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -2,7 +2,8 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { Suspense } from "react"; -import { fetchMemeDetailById, fetchMemeTagsById } from "@/application/hooks"; +import { useGetMemeDetailById } from "@/api/meme"; +import { fetchMemeTagsById } from "@/application/hooks"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; @@ -87,7 +88,7 @@ export const getStaticProps: GetStaticProps< try { const [{ description, name, image }] = await Promise.all([ - fetchMemeDetailById(id, queryClient), + useGetMemeDetailById.fetchQuery(id, queryClient), fetchMemeTagsById(id, queryClient), ]); From 5ec202a89a2961b868120dc17c3fd200f7a86e0f Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 21 Jul 2023 23:43:24 +0900 Subject: [PATCH 22/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20tag=20?= =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=9D=B8=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20-=20/application/hooks/api/tags=20->=20/api/tag?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/tag/index.ts | 8 + src/api/tag/useDeleteFavoriteTag.ts | 49 +++++ src/api/tag/useGetCategoryWithTag.ts | 23 +++ src/api/tag/useGetFavoriteTags.ts | 20 ++ src/api/tag/useGetMemeTagsById.ts | 19 ++ src/api/tag/useGetPopularTags.ts | 19 ++ src/api/tag/useGetTagInfo.ts | 23 +++ src/api/tag/useGetTagSearch.ts | 21 ++ src/api/tag/usePostFavoriteTag.ts | 48 +++++ src/application/hooks/api/index.ts | 1 - src/application/hooks/api/tags/index.ts | 179 ------------------ src/application/hooks/api/tags/queryKey.ts | 8 - .../TagCategory/CategoryContent.tsx | 2 +- .../TagCategory/FavoriteCategory.tsx | 2 +- .../tags/components/TagBookmarkButton.tsx | 2 +- src/features/memes/components/MemeTagList.tsx | 2 +- .../SearchPopularList/SearchPopularList.tsx | 2 +- .../search/components/SearchResultList.tsx | 2 +- src/infra/api/tags/index.ts | 3 +- src/pages/explore/tags/[tagId].tsx | 5 +- src/pages/memes/[id].tsx | 4 +- 21 files changed, 243 insertions(+), 199 deletions(-) create mode 100644 src/api/tag/index.ts create mode 100644 src/api/tag/useDeleteFavoriteTag.ts create mode 100644 src/api/tag/useGetCategoryWithTag.ts create mode 100644 src/api/tag/useGetFavoriteTags.ts create mode 100644 src/api/tag/useGetMemeTagsById.ts create mode 100644 src/api/tag/useGetPopularTags.ts create mode 100644 src/api/tag/useGetTagInfo.ts create mode 100644 src/api/tag/useGetTagSearch.ts create mode 100644 src/api/tag/usePostFavoriteTag.ts delete mode 100644 src/application/hooks/api/tags/index.ts delete mode 100644 src/application/hooks/api/tags/queryKey.ts diff --git a/src/api/tag/index.ts b/src/api/tag/index.ts new file mode 100644 index 00000000..321007cc --- /dev/null +++ b/src/api/tag/index.ts @@ -0,0 +1,8 @@ +export * from "./useDeleteFavoriteTag"; +export * from "./useGetCategoryWithTag"; +export * from "./useGetFavoriteTags"; +export * from "./useGetMemeTagsById"; +export * from "./useGetPopularTags"; +export * from "./useGetTagInfo"; +export * from "./useGetTagSearch"; +export * from "./usePostFavoriteTag"; diff --git a/src/api/tag/useDeleteFavoriteTag.ts b/src/api/tag/useDeleteFavoriteTag.ts new file mode 100644 index 00000000..65047d83 --- /dev/null +++ b/src/api/tag/useDeleteFavoriteTag.ts @@ -0,0 +1,49 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { delay } from "@/common/utils"; + +import { api } from "../core"; +import { useGetFavoriteTags } from "./useGetFavoriteTags"; +import { useGetTagInfo } from "./useGetTagInfo"; + +export const useDeleteFavoriteTag = (wait = 0) => { + const queryClient = useQueryClient(); + + const controller = new AbortController(); + + const mutation = useMutation({ + mutationFn: (id: number) => api.tags.deleteFavoriteTag(id, controller.signal), + onMutate: async (id) => { + await queryClient.cancelQueries({ queryKey: useGetTagInfo.queryKey(id) }); + await queryClient.cancelQueries({ queryKey: useGetFavoriteTags.queryKey }); + + const previousFavoriteCategory = queryClient.getQueryData(useGetFavoriteTags.queryKey); + const previousTagInfo = queryClient.getQueryData(useGetTagInfo.queryKey(id)) as Awaited< + ReturnType + >; + + queryClient.setQueryData>>( + useGetFavoriteTags.queryKey, + (old) => { + if (!old) return; + const newTags = old.tags.filter((tag) => tag.tagId !== id); + return { tags: newTags }; + }, + ); + + queryClient.setQueryData(useGetTagInfo.queryKey(id), (old) => ({ + ...(old as Awaited>), + isFav: false, + })); + + await delay(wait); + return { previousTagInfo, previousFavoriteCategory }; + }, + + onError: (err, id, context) => { + queryClient.setQueryData(useGetTagInfo.queryKey(id), context?.previousTagInfo); + queryClient.setQueryData(useGetFavoriteTags.queryKey, context?.previousFavoriteCategory); + }, + }); + return { ...mutation, onCancel: () => controller.abort() }; +}; diff --git a/src/api/tag/useGetCategoryWithTag.ts b/src/api/tag/useGetCategoryWithTag.ts new file mode 100644 index 00000000..658df775 --- /dev/null +++ b/src/api/tag/useGetCategoryWithTag.ts @@ -0,0 +1,23 @@ +import { useQuery } from "@tanstack/react-query"; + +import type { QuerySelectOption } from "../core"; +import { api } from "../core"; + +/** + * @desc + * Tag Category 에 즐겨찾기를 제외한 태그들 + */ +export const useGetCategoryWithTag = ({ + select, +}: { + select: QuerySelectOption; +}) => + useQuery({ + queryKey: useGetCategoryWithTag.queryKey, + queryFn: useGetCategoryWithTag.queryFn, + select, + }); + +useGetCategoryWithTag.queryKey = ["getCategoryWithTags"] as const; + +useGetCategoryWithTag.queryFn = () => api.tags.getCategoryWithTags(); diff --git a/src/api/tag/useGetFavoriteTags.ts b/src/api/tag/useGetFavoriteTags.ts new file mode 100644 index 00000000..851690e6 --- /dev/null +++ b/src/api/tag/useGetFavoriteTags.ts @@ -0,0 +1,20 @@ +import type { UseQueryOptions } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; + +import { api } from "../core"; + +export const useGetFavoriteTags = ( + options: Pick = { enabled: false }, +) => { + const { data } = useQuery({ + queryKey: useGetFavoriteTags.queryKey, + queryFn: useGetFavoriteTags.queryFn, + ...options, + }); + + return { favoriteTags: data?.tags }; +}; + +useGetFavoriteTags.queryKey = ["getFavoriteTags"] as const; + +useGetFavoriteTags.queryFn = () => api.tags.getFavoriteTags(); diff --git a/src/api/tag/useGetMemeTagsById.ts b/src/api/tag/useGetMemeTagsById.ts new file mode 100644 index 00000000..0b8a8ca1 --- /dev/null +++ b/src/api/tag/useGetMemeTagsById.ts @@ -0,0 +1,19 @@ +import type { QueryClient } from "@tanstack/react-query"; + +import { api, useSuspendedQuery } from "../core"; + +export const useGetMemeTagsById = (id: string) => { + const { data, ...rest } = useSuspendedQuery({ + queryKey: useGetMemeTagsById.queryKey(id), + queryFn: () => useGetMemeTagsById.queryFn(id), + staleTime: Infinity, + }); + return { ...data, ...rest }; +}; + +useGetMemeTagsById.queryKey = (id: string) => ["getMemeTagsById", id] as const; + +useGetMemeTagsById.queryFn = (id: string) => api.tags.getMemeTagsById(id); + +useGetMemeTagsById.fetchQuery = (id: string, queryClient: QueryClient) => + queryClient.fetchQuery(useGetMemeTagsById.queryKey(id), () => useGetMemeTagsById.queryFn(id)); diff --git a/src/api/tag/useGetPopularTags.ts b/src/api/tag/useGetPopularTags.ts new file mode 100644 index 00000000..60a3cfbf --- /dev/null +++ b/src/api/tag/useGetPopularTags.ts @@ -0,0 +1,19 @@ +import { useQuery } from "@tanstack/react-query"; + +import { api } from "../core"; + +/** + * 인기 태그 조회 API + */ +export const useGetPopularTags = () => { + const { data } = useQuery({ + queryKey: useGetPopularTags.queryKey, + queryFn: useGetPopularTags.queryFn, + }); + + return { ...data }; +}; + +useGetPopularTags.queryKey = ["getPopularTags"] as const; + +useGetPopularTags.queryFn = () => api.tags.getPopularTags(); diff --git a/src/api/tag/useGetTagInfo.ts b/src/api/tag/useGetTagInfo.ts new file mode 100644 index 00000000..05ec69a1 --- /dev/null +++ b/src/api/tag/useGetTagInfo.ts @@ -0,0 +1,23 @@ +import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; + +import { api } from "../core"; + +export const useGetTagInfo = ( + tagId: number, + options: Pick = { enabled: true }, +) => { + return useQuery({ + queryKey: useGetTagInfo.queryKey(tagId), + queryFn: () => useGetTagInfo.queryFn(tagId), + staleTime: 0, + ...options, + }); +}; + +useGetTagInfo.queryKey = (tagId: number) => ["getTagInfo", tagId] as const; + +useGetTagInfo.queryFn = (tagId: number) => api.tags.getTagInfo(tagId); + +useGetTagInfo.fetchQuery = (tagId: number, queryClient: QueryClient) => + queryClient.fetchQuery(useGetTagInfo.queryKey(tagId), () => useGetTagInfo.queryFn(tagId)); diff --git a/src/api/tag/useGetTagSearch.ts b/src/api/tag/useGetTagSearch.ts new file mode 100644 index 00000000..c6224f1b --- /dev/null +++ b/src/api/tag/useGetTagSearch.ts @@ -0,0 +1,21 @@ +import { useQuery } from "@tanstack/react-query"; + +import { api } from "../core"; + +/** + * 태그 자동완성 API + * @param value 검색어 + */ +export const useGetTagSearch = (value: string) => { + const { data, ...rest } = useQuery({ + queryKey: useGetTagSearch.queryKey(value), + queryFn: () => useGetTagSearch.queryFn(value), + keepPreviousData: true, + enabled: !!value, + }); + return { autoCompletedTags: data?.tags, ...rest }; +}; + +useGetTagSearch.queryKey = (value: string) => ["getTagSearch", value] as const; + +useGetTagSearch.queryFn = (value: string) => api.tags.getTagSearch(value); diff --git a/src/api/tag/usePostFavoriteTag.ts b/src/api/tag/usePostFavoriteTag.ts new file mode 100644 index 00000000..8cd9823f --- /dev/null +++ b/src/api/tag/usePostFavoriteTag.ts @@ -0,0 +1,48 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { api } from "../core"; +import { useGetFavoriteTags } from "./useGetFavoriteTags"; +import { useGetTagInfo } from "./useGetTagInfo"; + +export const usePostFavoriteTag = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: api.tags.postFavoriteTag, + onMutate: async ({ tagId, name }) => { + await queryClient.cancelQueries({ queryKey: useGetTagInfo.queryKey(tagId) }); + + const previousTagInfo = queryClient.getQueryData(useGetTagInfo.queryKey(tagId)) as Awaited< + ReturnType + >; + + queryClient.setQueryData>>( + useGetFavoriteTags.queryKey, + (old) => { + if (!old) return; + const newTags = [ + ...old.tags, + { + tagId: tagId, + name: name, + isFav: true, + }, + ]; + + return { tags: newTags }; + }, + ); + + queryClient.setQueryData(useGetTagInfo.queryKey(tagId), (old) => ({ + ...(old as Awaited>), + isFav: true, + })); + + return { previousTagInfo }; + }, + + onError: (err, { tagId }, context) => { + queryClient.setQueryData(useGetTagInfo.queryKey(tagId), context?.previousTagInfo); + }, + }); +}; diff --git a/src/application/hooks/api/index.ts b/src/application/hooks/api/index.ts index e884bbe1..e42805ed 100644 --- a/src/application/hooks/api/index.ts +++ b/src/application/hooks/api/index.ts @@ -1,4 +1,3 @@ export * from "./account"; export * from "./collection"; export * from "./search"; -export * from "./tags"; diff --git a/src/application/hooks/api/tags/index.ts b/src/application/hooks/api/tags/index.ts deleted file mode 100644 index fb488d79..00000000 --- a/src/application/hooks/api/tags/index.ts +++ /dev/null @@ -1,179 +0,0 @@ -import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; - -import type { QuerySelectOption } from "@/api/core"; -import { useSuspendedQuery } from "@/api/core"; -import { delay } from "@/common/utils"; -import { api } from "@/infra/api"; -import type { - GetFavoriteTagsResponse, - GetPopularTagsResponse, - GetTagSearchResponse, -} from "@/infra/api/tags/types"; - -import { QUERY_KEYS } from "./queryKey"; - -/** - * 인기 태그 조회 API - */ -export const useGetPopularTags = () => { - const { data } = useQuery({ - queryKey: QUERY_KEYS.getPopularTags, - queryFn: () => api.tags.getPopularTags(), - }); - - return { ...data }; -}; - -/** - * 태그 자동완성 API - * @param value 검색어 - */ -export const useGetTagSearch = (value: string) => { - const { data, ...rest } = useQuery({ - queryKey: QUERY_KEYS.getTagSearch(value), - queryFn: () => api.tags.getTagSearch(value), - keepPreviousData: true, - enabled: !!value, - }); - return { autoCompletedTags: data?.tags, ...rest }; -}; - -/** - * @desc - * Tag Category 에 즐겨찾기를 제외한 태그들 - */ -export const useGetCategoryWithTag = ({ - select, -}: { - select: QuerySelectOption; -}) => - useQuery({ - queryKey: QUERY_KEYS.getCategoryWithTags, - queryFn: api.tags.getCategoryWithTags, - select, - }); - -export const useGetMemeTagsById = (id: string) => { - const { data, ...rest } = useSuspendedQuery({ - queryKey: QUERY_KEYS.getMemeTagsById(id), - queryFn: () => api.tags.getMemeTagsById(id), - staleTime: Infinity, - }); - return { ...data, ...rest }; -}; - -export const fetchMemeTagsById = (id: string, queryClient: QueryClient) => - queryClient.fetchQuery(QUERY_KEYS.getMemeTagsById(id), () => api.tags.getMemeTagsById(id)); - -export const useGetTagInfo = ( - tagId: number, - options: Pick = { enabled: true }, -) => { - return useQuery({ - queryKey: QUERY_KEYS.getTagInfo(tagId), - queryFn: () => api.tags.getTagInfo(tagId), - staleTime: 0, - ...options, - }); -}; - -export const fetchTagInfo = (tagId: number, queryClient: QueryClient) => - queryClient.fetchQuery(QUERY_KEYS.getTagInfo(tagId), () => api.tags.getTagInfo(tagId)); - -export const useGetFavoriteTags = ( - options: Pick = { enabled: false }, -) => { - const { data } = useQuery({ - queryKey: QUERY_KEYS.getFavoriteTags, - queryFn: () => api.tags.getFavoriteTags(), - ...options, - }); - - return { favoriteTags: data?.tags }; -}; - -export const usePostFavoriteTag = () => { - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: api.tags.postFavoriteTag, - onMutate: async ({ tagId, name }) => { - await queryClient.cancelQueries({ queryKey: QUERY_KEYS.getTagInfo(tagId) }); - - const previousTagInfo = queryClient.getQueryData(QUERY_KEYS.getTagInfo(tagId)) as Awaited< - ReturnType - >; - - queryClient.setQueryData>>( - QUERY_KEYS.getFavoriteTags, - (old) => { - if (!old) return; - const newTags = [ - ...old.tags, - { - tagId: tagId, - name: name, - isFav: true, - }, - ]; - - return { tags: newTags }; - }, - ); - - queryClient.setQueryData(QUERY_KEYS.getTagInfo(tagId), (old) => ({ - ...(old as Awaited>), - isFav: true, - })); - - return { previousTagInfo }; - }, - - onError: (err, { tagId }, context) => { - queryClient.setQueryData(QUERY_KEYS.getTagInfo(tagId), context?.previousTagInfo); - }, - }); -}; - -export const useDeleteFavoriteTag = (wait = 0) => { - const queryClient = useQueryClient(); - - const controller = new AbortController(); - - const mutation = useMutation({ - mutationFn: (id: number) => api.tags.deleteFavoriteTag(id, controller.signal), - onMutate: async (id) => { - await queryClient.cancelQueries({ queryKey: QUERY_KEYS.getTagInfo(id) }); - await queryClient.cancelQueries({ queryKey: QUERY_KEYS.getFavoriteTags }); - - const previousFavoriteCategory = queryClient.getQueryData(QUERY_KEYS.getFavoriteTags); - const previousTagInfo = queryClient.getQueryData(QUERY_KEYS.getTagInfo(id)) as Awaited< - ReturnType - >; - - queryClient.setQueryData>>( - QUERY_KEYS.getFavoriteTags, - (old) => { - if (!old) return; - const newTags = old.tags.filter((tag) => tag.tagId !== id); - return { tags: newTags }; - }, - ); - - queryClient.setQueryData(QUERY_KEYS.getTagInfo(id), (old) => ({ - ...(old as Awaited>), - isFav: false, - })); - - await delay(wait); - return { previousTagInfo, previousFavoriteCategory }; - }, - - onError: (err, id, context) => { - queryClient.setQueryData(QUERY_KEYS.getTagInfo(id), context?.previousTagInfo); - queryClient.setQueryData(QUERY_KEYS.getFavoriteTags, context?.previousFavoriteCategory); - }, - }); - return { ...mutation, onCancel: () => controller.abort() }; -}; diff --git a/src/application/hooks/api/tags/queryKey.ts b/src/application/hooks/api/tags/queryKey.ts deleted file mode 100644 index 3ab109a4..00000000 --- a/src/application/hooks/api/tags/queryKey.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const QUERY_KEYS = { - getPopularTags: ["getPopularTags"], - getTagSearch: (debouncedValue: string) => ["getTagSearch", debouncedValue], - getCategoryWithTags: ["getCategoryWithTags"], - getFavoriteTags: ["getFavoriteTags"], - getMemeTagsById: (id: string) => ["getMemeTagsById", id], - getTagInfo: (tagId: number) => ["getTagInfo", tagId], -} as const; diff --git a/src/features/common/components/TagCategory/CategoryContent.tsx b/src/features/common/components/TagCategory/CategoryContent.tsx index 253a3b54..b35b1215 100644 --- a/src/features/common/components/TagCategory/CategoryContent.tsx +++ b/src/features/common/components/TagCategory/CategoryContent.tsx @@ -2,7 +2,7 @@ import { Content, Header, Item, Root, Trigger } from "@radix-ui/react-accordion" import { useRouter } from "next/router"; import React, { Fragment } from "react"; -import { useGetCategoryWithTag } from "@/application/hooks"; +import { useGetCategoryWithTag } from "@/api/tag"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { PATH } from "@/common/utils"; diff --git a/src/features/common/components/TagCategory/FavoriteCategory.tsx b/src/features/common/components/TagCategory/FavoriteCategory.tsx index 3c7bedf5..75321023 100644 --- a/src/features/common/components/TagCategory/FavoriteCategory.tsx +++ b/src/features/common/components/TagCategory/FavoriteCategory.tsx @@ -1,7 +1,7 @@ import { Content, Header, Item, Trigger } from "@radix-ui/react-accordion"; import { useRouter } from "next/router"; -import { useDeleteFavoriteTag, useGetFavoriteTags } from "@/application/hooks"; +import { useDeleteFavoriteTag, useGetFavoriteTags } from "@/api/tag"; import { Icon } from "@/common/components/Icon"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; diff --git a/src/features/explore/tags/components/TagBookmarkButton.tsx b/src/features/explore/tags/components/TagBookmarkButton.tsx index 34b581f6..5ef79c39 100644 --- a/src/features/explore/tags/components/TagBookmarkButton.tsx +++ b/src/features/explore/tags/components/TagBookmarkButton.tsx @@ -1,4 +1,4 @@ -import { useDeleteFavoriteTag, useGetTagInfo, usePostFavoriteTag } from "@/application/hooks"; +import { useDeleteFavoriteTag, useGetTagInfo, usePostFavoriteTag } from "@/api/tag"; import { Button } from "@/common/components/Button"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; diff --git a/src/features/memes/components/MemeTagList.tsx b/src/features/memes/components/MemeTagList.tsx index 4a23f147..3794e0be 100644 --- a/src/features/memes/components/MemeTagList.tsx +++ b/src/features/memes/components/MemeTagList.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; -import { useGetMemeTagsById } from "@/application/hooks"; +import { useGetMemeTagsById } from "@/api/tag"; import { PATH } from "@/common/utils"; interface Props { diff --git a/src/features/search/components/SearchPopularList/SearchPopularList.tsx b/src/features/search/components/SearchPopularList/SearchPopularList.tsx index 73b9ab04..8922a4f6 100644 --- a/src/features/search/components/SearchPopularList/SearchPopularList.tsx +++ b/src/features/search/components/SearchPopularList/SearchPopularList.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; -import { useGetPopularTags } from "@/application/hooks"; +import { useGetPopularTags } from "@/api/tag"; import { PATH } from "@/common/utils"; import type { RecentSearch } from "../../hooks"; diff --git a/src/features/search/components/SearchResultList.tsx b/src/features/search/components/SearchResultList.tsx index 48df3b4f..e65485e5 100644 --- a/src/features/search/components/SearchResultList.tsx +++ b/src/features/search/components/SearchResultList.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; -import { useGetTagSearch } from "@/application/hooks"; +import { useGetTagSearch } from "@/api/tag"; import { Icon } from "@/common/components/Icon"; import { PATH } from "@/common/utils"; diff --git a/src/infra/api/tags/index.ts b/src/infra/api/tags/index.ts index 615ef7ff..fc36e5ae 100644 --- a/src/infra/api/tags/index.ts +++ b/src/infra/api/tags/index.ts @@ -6,6 +6,7 @@ import type { GetMemeTagsByIdResponse, GetPopularTagsResponse, GetTagInfoResponse, + GetTagSearchResponse, } from "./types"; export class TagApi { @@ -25,7 +26,7 @@ export class TagApi { } //NOTE : api response에 categoryName 없음 check return this.api - .get("/tags/search", { + .get("/tags/search", { params: { word: value, }, diff --git a/src/pages/explore/tags/[tagId].tsx b/src/pages/explore/tags/[tagId].tsx index 88d386fb..4b5f5bdc 100644 --- a/src/pages/explore/tags/[tagId].tsx +++ b/src/pages/explore/tags/[tagId].tsx @@ -1,7 +1,8 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; -import { fetchTagInfo, prefetchMemesByTag } from "@/application/hooks"; +import { useGetTagInfo } from "@/api/tag"; +import { prefetchMemesByTag } from "@/application/hooks"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; @@ -57,7 +58,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { } try { - const { name: tagName } = await fetchTagInfo(Number(tagId), queryClient); + const { name: tagName } = await useGetTagInfo.fetchQuery(Number(tagId), queryClient); // NOTE: tag name 이 api request 값이기 때문에 waterfall 한 fetching 이 필요합니다 await prefetchMemesByTag(tagName, queryClient); diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index 29bcf347..a815278a 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -3,7 +3,7 @@ import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { Suspense } from "react"; import { useGetMemeDetailById } from "@/api/meme"; -import { fetchMemeTagsById } from "@/application/hooks"; +import { useGetMemeTagsById } from "@/api/tag"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { MemeListSkeleton, Skeleton } from "@/common/components/Skeleton"; @@ -89,7 +89,7 @@ export const getStaticProps: GetStaticProps< try { const [{ description, name, image }] = await Promise.all([ useGetMemeDetailById.fetchQuery(id, queryClient), - fetchMemeTagsById(id, queryClient), + useGetMemeTagsById.fetchQuery(id, queryClient), ]); return { From e66343997931f8b666844c8f9eeb839f6781e167 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 21 Jul 2023 23:59:07 +0900 Subject: [PATCH 23/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20collecti?= =?UTF-8?q?on=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20-=20/application/hooks/api/collection=20->?= =?UTF-8?q?=20/api/collection?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/collection/index.ts | 4 + .../collection/useDeleteMemeFromCollection.ts | 41 ++++++ src/api/collection/useGetCollectionCheck.ts | 29 +++++ src/api/collection/usePostMemeToCollection.ts | 41 ++++++ .../usePostMemeToSharedCollection.ts | 24 ++++ src/application/hooks/api/collection/index.ts | 119 ------------------ .../hooks/api/collection/queryKey.ts | 3 - src/application/hooks/api/index.ts | 1 - .../common/components/InfiniteMemeList.tsx | 4 +- src/features/common/hooks/useCollection.tsx | 2 +- .../components/MemeDetail/MemeExport.tsx | 2 +- .../MemeShareModal/MemeShareModal.tsx | 2 +- 12 files changed, 144 insertions(+), 128 deletions(-) create mode 100644 src/api/collection/index.ts create mode 100644 src/api/collection/useDeleteMemeFromCollection.ts create mode 100644 src/api/collection/useGetCollectionCheck.ts create mode 100644 src/api/collection/usePostMemeToCollection.ts create mode 100644 src/api/collection/usePostMemeToSharedCollection.ts delete mode 100644 src/application/hooks/api/collection/index.ts delete mode 100644 src/application/hooks/api/collection/queryKey.ts diff --git a/src/api/collection/index.ts b/src/api/collection/index.ts new file mode 100644 index 00000000..47f1a482 --- /dev/null +++ b/src/api/collection/index.ts @@ -0,0 +1,4 @@ +export * from "./useDeleteMemeFromCollection"; +export * from "./useGetCollectionCheck"; +export * from "./usePostMemeToCollection"; +export * from "./usePostMemeToSharedCollection"; diff --git a/src/api/collection/useDeleteMemeFromCollection.ts b/src/api/collection/useDeleteMemeFromCollection.ts new file mode 100644 index 00000000..8845f278 --- /dev/null +++ b/src/api/collection/useDeleteMemeFromCollection.ts @@ -0,0 +1,41 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; + +import { api } from "../core"; +import { useGetCollectionCheck } from "./useGetCollectionCheck"; +/** + * 콜렉션 삭제 API + */ +export const useDeleteMemeFromCollection = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: api.collection.deleteMemeFromCollection, + onMutate: async (deletedMemeId) => { + await queryClient.cancelQueries({ + queryKey: useGetCollectionCheck.queryKey(deletedMemeId), + }); + + const previousCollectionInfo = queryClient.getQueryData( + useGetCollectionCheck.queryKey(deletedMemeId), + ); + + queryClient.setQueryData(useGetCollectionCheck.queryKey(deletedMemeId), { + collectionId: null, + isAdded: false, + }); + + return { previousCollectionInfo, deletedMemeId }; + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + }, + onError: (_, deletedMemeId, context) => { + queryClient.setQueryData( + useGetCollectionCheck.queryKey(deletedMemeId), + context?.previousCollectionInfo, + ); + }, + }); +}; diff --git a/src/api/collection/useGetCollectionCheck.ts b/src/api/collection/useGetCollectionCheck.ts new file mode 100644 index 00000000..9e7faf2e --- /dev/null +++ b/src/api/collection/useGetCollectionCheck.ts @@ -0,0 +1,29 @@ +import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; + +import { api } from "../core"; + +/** + * 밈별 콜렉션 정보 API + */ +export const useGetCollectionCheck = ( + memeId: number, + options?: Pick, +) => { + return useQuery({ + queryKey: useGetCollectionCheck.queryKey(memeId), + queryFn: () => useGetCollectionCheck.queryFn(memeId), + suspense: false, + ...options, + }); +}; + +useGetCollectionCheck.queryKey = (memeId: number) => ["getCollectionCheck", memeId] as const; + +useGetCollectionCheck.queryFn = (memeId: number) => api.collection.getCollectionCheck(memeId); + +useGetCollectionCheck.prefetchQuery = (memeId: number, queryClient: QueryClient) => + queryClient.prefetchQuery({ + queryKey: useGetCollectionCheck.queryKey(memeId), + queryFn: () => useGetCollectionCheck.queryFn(memeId), + }); diff --git a/src/api/collection/usePostMemeToCollection.ts b/src/api/collection/usePostMemeToCollection.ts new file mode 100644 index 00000000..a5bf6989 --- /dev/null +++ b/src/api/collection/usePostMemeToCollection.ts @@ -0,0 +1,41 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; + +import { api } from "../core"; +import { useGetCollectionCheck } from "./useGetCollectionCheck"; +/** + * 콜렉션 저장 API + */ +export const usePostMemeToCollection = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: api.collection.postMemeToCollection, + onMutate: async (newMemeId) => { + await queryClient.cancelQueries({ + queryKey: useGetCollectionCheck.queryKey(newMemeId), + }); + + const previousCollectionInfo = queryClient.getQueryData( + useGetCollectionCheck.queryKey(newMemeId), + ); + + queryClient.setQueryData(useGetCollectionCheck.queryKey(newMemeId), { + collectionId: 1, + isAdded: true, + }); + + return { previousCollectionInfo, newMemeId }; + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + }, + onError: (_, newMemeId, context) => { + queryClient.setQueryData( + useGetCollectionCheck.queryKey(newMemeId), + context?.previousCollectionInfo, + ); + }, + }); +}; diff --git a/src/api/collection/usePostMemeToSharedCollection.ts b/src/api/collection/usePostMemeToSharedCollection.ts new file mode 100644 index 00000000..b10e436b --- /dev/null +++ b/src/api/collection/usePostMemeToSharedCollection.ts @@ -0,0 +1,24 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; + +import { api } from "../core"; +import { useGetMemesByCollectionId } from "../meme"; + +export const usePostMemeToSharedCollection = ({ + memeId, + sharedId, +}: { + memeId: number; + sharedId: number; +}) => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: () => api.collection.postMemeToSharedCollection(memeId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: useGetMemesByCollectionId.queryKey(sharedId) }); + queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + }, + }); +}; diff --git a/src/application/hooks/api/collection/index.ts b/src/application/hooks/api/collection/index.ts deleted file mode 100644 index 4abe96a9..00000000 --- a/src/application/hooks/api/collection/index.ts +++ /dev/null @@ -1,119 +0,0 @@ -import type { QueryClient, UseQueryOptions } from "@tanstack/react-query"; -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; - -import { useGetMemesByCollectionId } from "@/api/meme"; -import { api } from "@/infra/api"; -import type { GetCollectionCheckResponse } from "@/infra/api/collection/types"; - -import { QUERY_KEYS as ACCOUNT_QUERY_KEYS } from "../account/queryKey"; -import { QUERY_KEYS } from "./queryKey"; - -/** - * 밈별 콜렉션 정보 API - */ -export const useGetCollectionCheck = ( - memeId: number, - options?: UseQueryOptions, -) => { - return useQuery({ - queryKey: QUERY_KEYS.getCollectionCheck(memeId), - queryFn: () => api.collection.getCollectionCheck(memeId), - suspense: false, - ...options, - }); -}; -export const prefetchCollectionCheck = (memeId: number, queryClient: QueryClient) => - queryClient.prefetchQuery({ - queryKey: QUERY_KEYS.getCollectionCheck(memeId), - queryFn: () => api.collection.getCollectionCheck(memeId), - }); - -/** - * 콜렉션 삭제 API - */ -export const useDeleteMemeFromCollection = () => { - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: api.collection.deleteMemeFromCollection, - onMutate: async (deletedMemeId) => { - await queryClient.cancelQueries({ - queryKey: QUERY_KEYS.getCollectionCheck(deletedMemeId), - }); - - const previousCollectionInfo = queryClient.getQueryData( - QUERY_KEYS.getCollectionCheck(deletedMemeId), - ); - - queryClient.setQueryData(QUERY_KEYS.getCollectionCheck(deletedMemeId), { - collectionId: null, - isAdded: false, - }); - - return { previousCollectionInfo, deletedMemeId }; - }, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ACCOUNT_QUERY_KEYS.getMyAccount }); - }, - onError: (_, deletedMemeId, context) => { - queryClient.setQueryData( - QUERY_KEYS.getCollectionCheck(deletedMemeId), - context?.previousCollectionInfo, - ); - }, - }); -}; - -/** - * 콜렉션 저장 API - */ -export const usePostMemeToCollection = () => { - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: api.collection.postMemeToCollection, - onMutate: async (newMemeId) => { - await queryClient.cancelQueries({ - queryKey: QUERY_KEYS.getCollectionCheck(newMemeId), - }); - - const previousCollectionInfo = queryClient.getQueryData( - QUERY_KEYS.getCollectionCheck(newMemeId), - ); - - queryClient.setQueryData(QUERY_KEYS.getCollectionCheck(newMemeId), { - collectionId: 1, - isAdded: true, - }); - - return { previousCollectionInfo, newMemeId }; - }, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ACCOUNT_QUERY_KEYS.getMyAccount }); - }, - onError: (_, newMemeId, context) => { - queryClient.setQueryData( - QUERY_KEYS.getCollectionCheck(newMemeId), - context?.previousCollectionInfo, - ); - }, - }); -}; - -export const usePostMemeToSharedCollection = ({ - memeId, - sharedId, -}: { - memeId: number; - sharedId: number; -}) => { - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: () => api.collection.postMemeToSharedCollection(memeId), - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: useGetMemesByCollectionId.queryKey(sharedId) }); - queryClient.invalidateQueries({ queryKey: ACCOUNT_QUERY_KEYS.getMyAccount }); - }, - }); -}; diff --git a/src/application/hooks/api/collection/queryKey.ts b/src/application/hooks/api/collection/queryKey.ts deleted file mode 100644 index c5855af9..00000000 --- a/src/application/hooks/api/collection/queryKey.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const QUERY_KEYS = { - getCollectionCheck: (memeId: number) => ["getCollectionCheck", memeId], -} as const; diff --git a/src/application/hooks/api/index.ts b/src/application/hooks/api/index.ts index e42805ed..40610ca5 100644 --- a/src/application/hooks/api/index.ts +++ b/src/application/hooks/api/index.ts @@ -1,3 +1,2 @@ export * from "./account"; -export * from "./collection"; export * from "./search"; diff --git a/src/features/common/components/InfiniteMemeList.tsx b/src/features/common/components/InfiniteMemeList.tsx index 0b543c65..a1af5d76 100644 --- a/src/features/common/components/InfiniteMemeList.tsx +++ b/src/features/common/components/InfiniteMemeList.tsx @@ -2,9 +2,9 @@ import type { UseInfiniteQueryResult } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query"; import { useCallback, useMemo } from "react"; +import { useGetCollectionCheck } from "@/api/collection"; import { CORE_QUERY_KEY } from "@/api/core"; import { useGetMemeDetailById } from "@/api/meme"; -import { prefetchCollectionCheck } from "@/application/hooks"; import { Masonry } from "@/common/components/Masonry"; import { renderMemeItemSkeletons } from "@/common/components/Skeleton"; import { useIntersect } from "@/common/hooks"; @@ -62,7 +62,7 @@ export const InfiniteMemeList = ({ queryClient.invalidateQueries(useGetMemeDetailById.queryKey(String(cachedMeme.memeId))); // NOTE: collection check api에 waterfall 현상이 일어나기 때문에 prefetch 합니다 - prefetchCollectionCheck(cachedMeme.memeId, queryClient); + useGetCollectionCheck.prefetchQuery(cachedMeme.memeId, queryClient); } }, [queryClient], diff --git a/src/features/common/hooks/useCollection.tsx b/src/features/common/hooks/useCollection.tsx index 1937a07d..5ae60c50 100644 --- a/src/features/common/hooks/useCollection.tsx +++ b/src/features/common/hooks/useCollection.tsx @@ -4,7 +4,7 @@ import { useDeleteMemeFromCollection, useGetCollectionCheck, usePostMemeToCollection, -} from "@/application/hooks"; +} from "@/api/collection"; import { useToast } from "@/common/hooks"; const TAG_DELETE_DELAY = 3000; diff --git a/src/features/memes/components/MemeDetail/MemeExport.tsx b/src/features/memes/components/MemeDetail/MemeExport.tsx index 9206122a..5597d360 100644 --- a/src/features/memes/components/MemeDetail/MemeExport.tsx +++ b/src/features/memes/components/MemeDetail/MemeExport.tsx @@ -1,7 +1,7 @@ import tw from "twin.macro"; +import { usePostMemeToSharedCollection } from "@/api/collection"; import { useGetMemeDetailById } from "@/api/meme"; -import { usePostMemeToSharedCollection } from "@/application/hooks"; import { DropDown } from "@/common/components/DropDown"; import { Icon } from "@/common/components/Icon"; import { useToast } from "@/common/hooks"; diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx index 32512b7a..281fcb0a 100644 --- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx +++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx @@ -1,5 +1,5 @@ +import { usePostMemeToSharedCollection } from "@/api/collection"; import { useGetMemeDetailById } from "@/api/meme"; -import { usePostMemeToSharedCollection } from "@/application/hooks/api/collection"; import { Modal } from "@/common/components/Modal"; import { Photo } from "@/common/components/Photo"; import { useToast } from "@/common/hooks"; From 5a5354be4997433d57d35632fc38f38dfa8b38a3 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 00:11:12 +0900 Subject: [PATCH 24/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20search?= =?UTF-8?q?=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20-=20/application/hooks/api/search=20->=20/api/searc?= =?UTF-8?q?h=20-=20useGetUserFindMemes(=ED=9A=8C=EC=9B=90=EC=9D=B4=20?= =?UTF-8?q?=EC=B0=BE=EB=8A=94=20=EB=B0=88=20API)=20=EC=82=AD=EC=A0=9C(dead?= =?UTF-8?q?=20code)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/search/index.ts | 3 + src/api/search/useGetMemesByKeyword.ts | 35 +++++ src/api/search/useGetMemesByTag.ts | 44 ++++++ .../useGetMemesFromCollectionByKeyword.ts | 53 +++++++ src/application/hooks/api/index.ts | 1 - src/application/hooks/api/search/index.ts | 148 ------------------ src/application/hooks/api/search/queryKey.ts | 26 --- .../collect/components/SearchedCollection.tsx | 2 +- .../keywords/components/MemesByKeyword.tsx | 2 +- .../explore/tags/components/MemesByTag.tsx | 2 +- .../explore/tags/components/Thumbnail.tsx | 2 +- src/pages/explore/tags/[tagId].tsx | 4 +- 12 files changed, 141 insertions(+), 181 deletions(-) create mode 100644 src/api/search/index.ts create mode 100644 src/api/search/useGetMemesByKeyword.ts create mode 100644 src/api/search/useGetMemesByTag.ts create mode 100644 src/api/search/useGetMemesFromCollectionByKeyword.ts delete mode 100644 src/application/hooks/api/search/index.ts delete mode 100644 src/application/hooks/api/search/queryKey.ts diff --git a/src/api/search/index.ts b/src/api/search/index.ts new file mode 100644 index 00000000..ef658755 --- /dev/null +++ b/src/api/search/index.ts @@ -0,0 +1,3 @@ +export * from "./useGetMemesByKeyword"; +export * from "./useGetMemesByTag"; +export * from "./useGetMemesFromCollectionByKeyword"; diff --git a/src/api/search/useGetMemesByKeyword.ts b/src/api/search/useGetMemesByKeyword.ts new file mode 100644 index 00000000..ace7a461 --- /dev/null +++ b/src/api/search/useGetMemesByKeyword.ts @@ -0,0 +1,35 @@ +import type { QueryFunctionContext } from "@tanstack/react-query"; + +import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core"; + +const PAGE_SIZE = 20; + +/** + * keyword 밈 검색 API + * @param keyword 검색할 keyword + * @returns + * data - 밈 검색 결과 + * isEmpty - 밈 검색 결과가 없는 경우 true + */ +export const useGetMemesByKeyword = (keyword: string) => { + const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( + useGetMemesByKeyword.queryKey(keyword), + ({ pageParam = 0 }: QueryFunctionContext) => + api.search.getMemesByKeyword({ keyword, offset: pageParam, limit: PAGE_SIZE }), + PAGE_SIZE, + { + enabled: !!keyword, + select: (data) => { + return { + pages: data.pages.map((page) => ({ data: page.memes })), + pageParams: data.pageParams, + }; + }, + }, + ); + + return { data, isEmpty, isFetchingNextPage, fetchNextPage }; +}; + +useGetMemesByKeyword.queryKey = (keyword: string) => + [CORE_QUERY_KEY.infiniteMemeList, "getMemesByKeyword", keyword] as const; diff --git a/src/api/search/useGetMemesByTag.ts b/src/api/search/useGetMemesByTag.ts new file mode 100644 index 00000000..61b32598 --- /dev/null +++ b/src/api/search/useGetMemesByTag.ts @@ -0,0 +1,44 @@ +import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; +import { useInfiniteQuery } from "@tanstack/react-query"; + +import { api, CORE_QUERY_KEY } from "../core"; + +const PAGE_SIZE = 20; + +/** + * tag 밈 검색 API + * @param tag 검색할 tag + * @returns + * data - 밈 검색 결과 + * isEmpty - 밈 검색 결과가 없는 경우 true + */ +export const useGetMemesByTag = (tag: string) => { + const { data, isFetchingNextPage, fetchNextPage } = useInfiniteQuery( + useGetMemesByTag.queryKey(tag), + ({ pageParam = 0 }: QueryFunctionContext) => + api.search.getMemesByTag({ keyword: tag, offset: pageParam, limit: PAGE_SIZE }), + { + getNextPageParam: (lastPage, allPages) => { + const { count } = lastPage; + const isLastPage = count < PAGE_SIZE; + const offset = count * (allPages.length - 1); + return isLastPage ? undefined : offset + PAGE_SIZE; + }, + enabled: !!tag, + }, + ); + + const memes = data?.pages.flatMap(({ memes }) => memes) || []; + const totalCount = data?.pages[0].totalCount; + const isEmpty = !memes.length; + + return { data: memes, totalCount, isEmpty, isFetchingNextPage, fetchNextPage }; +}; + +useGetMemesByTag.queryKey = (tag: string) => + [CORE_QUERY_KEY.infiniteMemeList, "getMemesByTag", tag] as const; + +useGetMemesByTag.fetchInfiniteQuery = (tag: string, queryClient: QueryClient) => + queryClient.fetchInfiniteQuery(useGetMemesByTag.queryKey(tag), ({ pageParam = 0 }) => + api.search.getMemesByTag({ keyword: tag, offset: pageParam, limit: PAGE_SIZE }), + ); diff --git a/src/api/search/useGetMemesFromCollectionByKeyword.ts b/src/api/search/useGetMemesFromCollectionByKeyword.ts new file mode 100644 index 00000000..57219128 --- /dev/null +++ b/src/api/search/useGetMemesFromCollectionByKeyword.ts @@ -0,0 +1,53 @@ +import type { QueryFunctionContext } from "@tanstack/react-query"; + +import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core"; + +const PAGE_SIZE = 20; + +export const useGetMemesFromCollectionByKeyword = ({ + keyword, + collectionId, +}: { + keyword: string; + collectionId: number; +}) => { + const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( + useGetMemesFromCollectionByKeyword.queryKey({ + keyword: keyword, + collectionId: collectionId, + }), + ({ pageParam = 0 }: QueryFunctionContext) => + api.search.getMemesFromCollectionByKeyword({ + keyword: keyword, + collectionId, + offset: pageParam, + limit: PAGE_SIZE, + }), + PAGE_SIZE, + { + enabled: !!keyword && !!collectionId, + keepPreviousData: true, + select: (data) => { + return { + pages: data.pages.map((page) => ({ data: page.memes })), + pageParams: data.pageParams, + }; + }, + }, + ); + + return { data, isEmpty, isFetchingNextPage, fetchNextPage }; +}; + +useGetMemesFromCollectionByKeyword.queryKey = ({ + keyword, + collectionId, +}: { + keyword: string; + collectionId: number; +}) => + [ + CORE_QUERY_KEY.infiniteMemeList, + "getMemesFromCollectionByKeyword", + { keyword, collectionId }, + ] as const; diff --git a/src/application/hooks/api/index.ts b/src/application/hooks/api/index.ts index 40610ca5..ed4079f3 100644 --- a/src/application/hooks/api/index.ts +++ b/src/application/hooks/api/index.ts @@ -1,2 +1 @@ export * from "./account"; -export * from "./search"; diff --git a/src/application/hooks/api/search/index.ts b/src/application/hooks/api/search/index.ts deleted file mode 100644 index a64890cb..00000000 --- a/src/application/hooks/api/search/index.ts +++ /dev/null @@ -1,148 +0,0 @@ -import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query"; -import { useInfiniteQuery } from "@tanstack/react-query"; -import { useEffect, useRef } from "react"; - -import { useCoreInfiniteQuery } from "@/api/core"; -import { useLocalStorage } from "@/common/hooks"; -import type { RecentSearch } from "@/features/search/hooks"; -import { api } from "@/infra/api"; - -import { QUERY_KEYS } from "./queryKey"; - -const PAGE_SIZE = 20; - -/** - * keyword 밈 검색 API - * @param keyword 검색할 keyword - * @returns - * data - 밈 검색 결과 - * isEmpty - 밈 검색 결과가 없는 경우 true - */ -export const useGetMemesByKeyword = (keyword: string) => { - const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( - QUERY_KEYS.getMemesByKeyword(keyword), - ({ pageParam = 0 }: QueryFunctionContext) => - api.search.getMemesByKeyword({ keyword, offset: pageParam, limit: PAGE_SIZE }), - PAGE_SIZE, - { - enabled: !!keyword, - select: (data) => { - return { - pages: data.pages.map((page) => ({ data: page.memes })), - pageParams: data.pageParams, - }; - }, - }, - ); - - return { data, isEmpty, isFetchingNextPage, fetchNextPage }; -}; - -/** - * tag 밈 검색 API - * @param tag 검색할 tag - * @returns - * data - 밈 검색 결과 - * isEmpty - 밈 검색 결과가 없는 경우 true - */ -export const useGetMemesByTag = (tag: string) => { - const { data, isFetchingNextPage, fetchNextPage } = useInfiniteQuery( - QUERY_KEYS.getMemesByTag(tag), - ({ pageParam = 0 }: QueryFunctionContext) => - api.search.getMemesByTag({ keyword: tag, offset: pageParam, limit: PAGE_SIZE }), - { - getNextPageParam: (lastPage, allPages) => { - const { count } = lastPage; - const isLastPage = count < PAGE_SIZE; - const offset = count * (allPages.length - 1); - return isLastPage ? undefined : offset + PAGE_SIZE; - }, - enabled: !!tag, - }, - ); - - const memes = data?.pages.flatMap(({ memes }) => memes) || []; - const totalCount = data?.pages[0].totalCount; - const isEmpty = !memes.length; - - return { data: memes, totalCount, isEmpty, isFetchingNextPage, fetchNextPage }; -}; - -export const prefetchMemesByTag = (tag: string, queryClient: QueryClient) => - queryClient.fetchInfiniteQuery(QUERY_KEYS.getMemesByTag(tag), ({ pageParam = 0 }) => - api.search.getMemesByTag({ keyword: tag, offset: pageParam, limit: PAGE_SIZE }), - ); - -/** - * 회원이 찾는 밈 API - */ -export const useGetUserFindMemes = ({ userId }: { userId: number }) => { - const isMount = useRef(false); - useEffect(() => { - isMount.current = true; - }, []); - - const [items] = useLocalStorage("recentSearch", { defaultValue: [] }); - const keywords = items - .map((item) => item.value) - .slice(0, 3) - .join(); - - const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( - QUERY_KEYS.getUserFindMemes(keywords), - ({ pageParam = 0 }: QueryFunctionContext) => - api.search.getUserFindMemes({ - keywords: keywords, - offset: pageParam, - limit: PAGE_SIZE, - userId: String(userId), - }), - PAGE_SIZE, - { - enabled: isMount.current, - select: (data) => { - return { - pages: data.pages.map((page) => ({ data: page.memes })), - pageParams: data.pageParams, - }; - }, - }, - ); - - return { data, isEmpty, isFetchingNextPage, fetchNextPage }; -}; - -export const useGetMemesFromCollectionByKeyword = ({ - keyword, - collectionId, -}: { - keyword: string; - collectionId: number; -}) => { - const { data, isEmpty, isFetchingNextPage, fetchNextPage } = useCoreInfiniteQuery( - QUERY_KEYS.getMemesFromCollectionByKeyword({ - keyword: keyword, - collectionId: collectionId, - }), - ({ pageParam = 0 }: QueryFunctionContext) => - api.search.getMemesFromCollectionByKeyword({ - keyword: keyword, - collectionId, - offset: pageParam, - limit: PAGE_SIZE, - }), - PAGE_SIZE, - { - enabled: !!keyword && !!collectionId, - keepPreviousData: true, - select: (data) => { - return { - pages: data.pages.map((page) => ({ data: page.memes })), - pageParams: data.pageParams, - }; - }, - }, - ); - - return { data, isEmpty, isFetchingNextPage, fetchNextPage }; -}; diff --git a/src/application/hooks/api/search/queryKey.ts b/src/application/hooks/api/search/queryKey.ts deleted file mode 100644 index 57865b92..00000000 --- a/src/application/hooks/api/search/queryKey.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CORE_QUERY_KEY } from "@/api/core"; - -export const QUERY_KEYS = { - getMemesByKeyword: (keyword: string) => [ - CORE_QUERY_KEY.infiniteMemeList, - "getMemesByKeyword", - keyword, - ], - getMemesByTag: (tag: string) => [CORE_QUERY_KEY.infiniteMemeList, "getMemesByTag", tag], - getMemesFromCollectionByKeyword: ({ - keyword, - collectionId, - }: { - keyword: string; - collectionId: number; - }) => [ - CORE_QUERY_KEY.infiniteMemeList, - "getMemesFromCollectionByKeyword", - { keyword, collectionId }, - ], - getUserFindMemes: (keywords: string) => [ - CORE_QUERY_KEY.infiniteMemeList, - "getUserFindMemes", - keywords, - ], -} as const; diff --git a/src/features/collect/components/SearchedCollection.tsx b/src/features/collect/components/SearchedCollection.tsx index be17449d..f779c8ce 100644 --- a/src/features/collect/components/SearchedCollection.tsx +++ b/src/features/collect/components/SearchedCollection.tsx @@ -1,4 +1,4 @@ -import { useGetMemesFromCollectionByKeyword } from "@/application/hooks"; +import { useGetMemesFromCollectionByKeyword } from "@/api/search"; import { InfiniteMemeList } from "@/features/common"; interface Props { diff --git a/src/features/explore/keywords/components/MemesByKeyword.tsx b/src/features/explore/keywords/components/MemesByKeyword.tsx index ae6d9722..0493af13 100644 --- a/src/features/explore/keywords/components/MemesByKeyword.tsx +++ b/src/features/explore/keywords/components/MemesByKeyword.tsx @@ -1,4 +1,4 @@ -import { useGetMemesByKeyword } from "@/application/hooks"; +import { useGetMemesByKeyword } from "@/api/search"; import { EmptyMemesView, InfiniteMemeList } from "@/features/common"; interface Props { diff --git a/src/features/explore/tags/components/MemesByTag.tsx b/src/features/explore/tags/components/MemesByTag.tsx index d454ce35..6afe3096 100644 --- a/src/features/explore/tags/components/MemesByTag.tsx +++ b/src/features/explore/tags/components/MemesByTag.tsx @@ -1,4 +1,4 @@ -import { useGetMemesByTag } from "@/application/hooks"; +import { useGetMemesByTag } from "@/api/search"; import { EmptyMemesView, InfiniteMemeList } from "@/features/common"; interface Props { diff --git a/src/features/explore/tags/components/Thumbnail.tsx b/src/features/explore/tags/components/Thumbnail.tsx index 51ce9bd6..70adce29 100644 --- a/src/features/explore/tags/components/Thumbnail.tsx +++ b/src/features/explore/tags/components/Thumbnail.tsx @@ -1,6 +1,6 @@ import { useRouter } from "next/router"; -import { useGetMemesByTag } from "@/application/hooks"; +import { useGetMemesByTag } from "@/api/search"; import { Photo } from "@/common/components/Photo"; import { useClipboard, useToast } from "@/common/hooks"; import { DOMAIN } from "@/common/utils"; diff --git a/src/pages/explore/tags/[tagId].tsx b/src/pages/explore/tags/[tagId].tsx index 4b5f5bdc..095d6326 100644 --- a/src/pages/explore/tags/[tagId].tsx +++ b/src/pages/explore/tags/[tagId].tsx @@ -1,8 +1,8 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; +import { useGetMemesByTag } from "@/api/search"; import { useGetTagInfo } from "@/api/tag"; -import { prefetchMemesByTag } from "@/application/hooks"; import { ExplorePageNavigation } from "@/common/components/Navigation"; import { NextSeo } from "@/common/components/NextSeo"; import { PullToRefresh } from "@/common/components/PullToRefresh"; @@ -61,7 +61,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { const { name: tagName } = await useGetTagInfo.fetchQuery(Number(tagId), queryClient); // NOTE: tag name 이 api request 값이기 때문에 waterfall 한 fetching 이 필요합니다 - await prefetchMemesByTag(tagName, queryClient); + await useGetMemesByTag.fetchInfiniteQuery(tagName, queryClient); return { props: { From 0007c6a0a3dcdf29babf617fb26742f0adaa35e0 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 00:18:32 +0900 Subject: [PATCH 25/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20account?= =?UTF-8?q?=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20-=20/application/hooks/api/account=20->=20/api/acco?= =?UTF-8?q?unt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/account/index.ts | 2 ++ src/api/account/useGetMyAccount.ts | 19 +++++++++++++ src/api/account/useLogout.ts | 15 +++++++++++ .../collection/useDeleteMemeFromCollection.ts | 5 ++-- src/api/collection/usePostMemeToCollection.ts | 5 ++-- .../usePostMemeToSharedCollection.ts | 5 ++-- src/application/hooks/api/account/index.ts | 27 ------------------- src/application/hooks/api/account/queryKey.ts | 3 --- src/application/hooks/api/index.ts | 1 - src/application/hooks/index.ts | 1 - src/features/common/hooks/useAuth.ts | 2 +- 11 files changed, 43 insertions(+), 42 deletions(-) create mode 100644 src/api/account/index.ts create mode 100644 src/api/account/useGetMyAccount.ts create mode 100644 src/api/account/useLogout.ts delete mode 100644 src/application/hooks/api/account/index.ts delete mode 100644 src/application/hooks/api/account/queryKey.ts delete mode 100644 src/application/hooks/api/index.ts delete mode 100644 src/application/hooks/index.ts diff --git a/src/api/account/index.ts b/src/api/account/index.ts new file mode 100644 index 00000000..ee4efab7 --- /dev/null +++ b/src/api/account/index.ts @@ -0,0 +1,2 @@ +export * from "./useGetMyAccount"; +export * from "./useLogout"; diff --git a/src/api/account/useGetMyAccount.ts b/src/api/account/useGetMyAccount.ts new file mode 100644 index 00000000..d071e237 --- /dev/null +++ b/src/api/account/useGetMyAccount.ts @@ -0,0 +1,19 @@ +import { useQuery, useQueryClient } from "@tanstack/react-query"; + +import { api } from "../core"; + +export const useGetMyAccount = () => { + const queryClient = useQueryClient(); + return useQuery({ + suspense: false, + queryKey: useGetMyAccount.queryKey, + queryFn: useGetMyAccount.queryFn, + onError: () => { + queryClient.setQueryData(useGetMyAccount.queryKey, null); + }, + }); +}; + +useGetMyAccount.queryKey = ["getMyAccount"] as const; + +useGetMyAccount.queryFn = () => api.account.getMyAccount(); diff --git a/src/api/account/useLogout.ts b/src/api/account/useLogout.ts new file mode 100644 index 00000000..ce655f91 --- /dev/null +++ b/src/api/account/useLogout.ts @@ -0,0 +1,15 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { api } from "../core"; +import { useGetMyAccount } from "./useGetMyAccount"; + +export const useLogout = () => { + const queryClient = useQueryClient(); + + return useMutation(api.auth.logout, { + onSuccess: () => { + api.auth.deleteAccessToken(); + queryClient.setQueryData(useGetMyAccount.queryKey, null); + }, + }); +}; diff --git a/src/api/collection/useDeleteMemeFromCollection.ts b/src/api/collection/useDeleteMemeFromCollection.ts index 8845f278..72c6d328 100644 --- a/src/api/collection/useDeleteMemeFromCollection.ts +++ b/src/api/collection/useDeleteMemeFromCollection.ts @@ -1,7 +1,6 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; - +import { useGetMyAccount } from "../account"; import { api } from "../core"; import { useGetCollectionCheck } from "./useGetCollectionCheck"; /** @@ -29,7 +28,7 @@ export const useDeleteMemeFromCollection = () => { return { previousCollectionInfo, deletedMemeId }; }, onSuccess: () => { - queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + queryClient.invalidateQueries({ queryKey: useGetMyAccount.queryKey }); }, onError: (_, deletedMemeId, context) => { queryClient.setQueryData( diff --git a/src/api/collection/usePostMemeToCollection.ts b/src/api/collection/usePostMemeToCollection.ts index a5bf6989..59121c6a 100644 --- a/src/api/collection/usePostMemeToCollection.ts +++ b/src/api/collection/usePostMemeToCollection.ts @@ -1,7 +1,6 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; - +import { useGetMyAccount } from "../account"; import { api } from "../core"; import { useGetCollectionCheck } from "./useGetCollectionCheck"; /** @@ -29,7 +28,7 @@ export const usePostMemeToCollection = () => { return { previousCollectionInfo, newMemeId }; }, onSuccess: () => { - queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + queryClient.invalidateQueries({ queryKey: useGetMyAccount.queryKey }); }, onError: (_, newMemeId, context) => { queryClient.setQueryData( diff --git a/src/api/collection/usePostMemeToSharedCollection.ts b/src/api/collection/usePostMemeToSharedCollection.ts index b10e436b..63bcb3bd 100644 --- a/src/api/collection/usePostMemeToSharedCollection.ts +++ b/src/api/collection/usePostMemeToSharedCollection.ts @@ -1,7 +1,6 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { QUERY_KEYS } from "@/application/hooks/api/account/queryKey"; - +import { useGetMyAccount } from "../account"; import { api } from "../core"; import { useGetMemesByCollectionId } from "../meme"; @@ -18,7 +17,7 @@ export const usePostMemeToSharedCollection = ({ mutationFn: () => api.collection.postMemeToSharedCollection(memeId), onSuccess: () => { queryClient.invalidateQueries({ queryKey: useGetMemesByCollectionId.queryKey(sharedId) }); - queryClient.invalidateQueries({ queryKey: QUERY_KEYS.getMyAccount }); + queryClient.invalidateQueries({ queryKey: useGetMyAccount.queryKey }); }, }); }; diff --git a/src/application/hooks/api/account/index.ts b/src/application/hooks/api/account/index.ts deleted file mode 100644 index 557bb349..00000000 --- a/src/application/hooks/api/account/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; - -import { api } from "@/infra/api"; - -import { QUERY_KEYS } from "./queryKey"; - -export const useGetMyAccount = () => { - const queryClient = useQueryClient(); - return useQuery({ - suspense: false, - queryKey: QUERY_KEYS.getMyAccount, - queryFn: api.account.getMyAccount, - onError: () => { - queryClient.setQueryData(QUERY_KEYS.getMyAccount, null); - }, - }); -}; - -export const useLogout = () => { - const queryClient = useQueryClient(); - return useMutation(api.auth.logout, { - onSuccess: () => { - api.auth.deleteAccessToken(); - queryClient.setQueryData(QUERY_KEYS.getMyAccount, null); - }, - }); -}; diff --git a/src/application/hooks/api/account/queryKey.ts b/src/application/hooks/api/account/queryKey.ts deleted file mode 100644 index 6bce374f..00000000 --- a/src/application/hooks/api/account/queryKey.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const QUERY_KEYS = { - getMyAccount: ["getMyAccount"], -} as const; diff --git a/src/application/hooks/api/index.ts b/src/application/hooks/api/index.ts deleted file mode 100644 index ed4079f3..00000000 --- a/src/application/hooks/api/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./account"; diff --git a/src/application/hooks/index.ts b/src/application/hooks/index.ts deleted file mode 100644 index d158c576..00000000 --- a/src/application/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./api"; diff --git a/src/features/common/hooks/useAuth.ts b/src/features/common/hooks/useAuth.ts index 39944659..883c8dc9 100644 --- a/src/features/common/hooks/useAuth.ts +++ b/src/features/common/hooks/useAuth.ts @@ -1,6 +1,6 @@ import { useCallback } from "react"; -import { useGetMyAccount, useLogout } from "@/application/hooks"; +import { useGetMyAccount, useLogout } from "@/api/account"; import { useSignUpModalContext } from "@/common/components/Modal"; import { api } from "@/infra/api"; From 82eae87e0642f74e6228a3d79c27b821a804a954 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 00:25:48 +0900 Subject: [PATCH 26/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20QueryCli?= =?UTF-8?q?entProvider=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99=20-=20/ap?= =?UTF-8?q?plication=20->=20/api/core=20-=20DefaultPageProps=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=9D=84=20/api/core/query-client.tsx=20=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/core/index.ts | 1 + .../queryClient.tsx => api/core/query-client.tsx} | 6 +++++- src/pages/_app.tsx | 4 ++-- src/pages/memes/[id].tsx | 3 ++- src/types/index.d.ts | 8 -------- 5 files changed, 10 insertions(+), 12 deletions(-) rename src/{application/queryClient.tsx => api/core/query-client.tsx} (85%) diff --git a/src/api/core/index.ts b/src/api/core/index.ts index 4bbe7277..6b34748d 100644 --- a/src/api/core/index.ts +++ b/src/api/core/index.ts @@ -1,4 +1,5 @@ export * from "./axios"; +export * from "./query-client"; export * from "./queryKey"; export * from "./useCoreInfiniteQuery"; export * from "./useSuspensedQuery"; diff --git a/src/application/queryClient.tsx b/src/api/core/query-client.tsx similarity index 85% rename from src/application/queryClient.tsx rename to src/api/core/query-client.tsx index 78f2a1f6..8b1c46d7 100644 --- a/src/application/queryClient.tsx +++ b/src/api/core/query-client.tsx @@ -5,9 +5,13 @@ import { QueryClientProvider as TanStackQueryClientProvider, } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import type { ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; import { useState } from "react"; +export interface DefaultPageProps { + hydrateState: ComponentProps["hydrateState"]; +} + interface Props { hydrateState?: DehydratedState; children: ReactNode; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3a052ff9..689c912e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,7 +5,8 @@ import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect } from "react"; -import { QueryClientProvider } from "@/application/queryClient"; +import type { DefaultPageProps } from "@/api/core"; +import { QueryClientProvider } from "@/api/core"; import { QueryErrorBoundary } from "@/common/components/ErrorBoundary"; import { Layout } from "@/common/components/Layout"; import { SignUpModal, SignUpModalProvider } from "@/common/components/Modal"; @@ -13,7 +14,6 @@ import { ToastContainer, ToastProvider } from "@/common/components/Toast"; import { OverlayProvider, RouteTrackingProvider, useAnalytics } from "@/common/hooks"; import { GoogleTagManagerScript, GTagScript } from "@/common/libs"; import { TagCategoryProvider } from "@/features/common"; -import type { DefaultPageProps } from "@/types"; if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { await import("../../mocks"); diff --git a/src/pages/memes/[id].tsx b/src/pages/memes/[id].tsx index a815278a..041ace35 100644 --- a/src/pages/memes/[id].tsx +++ b/src/pages/memes/[id].tsx @@ -2,6 +2,7 @@ import { dehydrate, QueryClient } from "@tanstack/react-query"; import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; import { Suspense } from "react"; +import type { DefaultPageProps } from "@/api/core"; import { useGetMemeDetailById } from "@/api/meme"; import { useGetMemeTagsById } from "@/api/tag"; import { ExplorePageNavigation } from "@/common/components/Navigation"; @@ -18,7 +19,7 @@ import { SkeletonMemeDetail, SkeletonMemeTagList, } from "@/features/memes/components"; -import type { DefaultPageProps, Meme } from "@/types"; +import type { Meme } from "@/types"; interface Props { id: string; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index f822ec27..5b69e55b 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1,11 +1,3 @@ -import type { ComponentProps } from "react"; - -import type { QueryClientProvider } from "@/application/queryClient"; - -export interface DefaultPageProps { - hydrateState: ComponentProps["hydrateState"]; -} - export interface Meme { memeId: number; name: string; From e578df0d2ec4edc5157b4059472ca465b170715e Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 00:26:43 +0900 Subject: [PATCH 27/32] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20remove:=20/infra/api?= =?UTF-8?q?/index.ts=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20-=20/api/?= =?UTF-8?q?core/axios.ts=20=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/common/hooks/useAuth.ts | 2 +- src/infra/api/index.ts | 42 ---------------------------- 2 files changed, 1 insertion(+), 43 deletions(-) delete mode 100644 src/infra/api/index.ts diff --git a/src/features/common/hooks/useAuth.ts b/src/features/common/hooks/useAuth.ts index 883c8dc9..4ca5c862 100644 --- a/src/features/common/hooks/useAuth.ts +++ b/src/features/common/hooks/useAuth.ts @@ -1,8 +1,8 @@ import { useCallback } from "react"; import { useGetMyAccount, useLogout } from "@/api/account"; +import { api } from "@/api/core"; import { useSignUpModalContext } from "@/common/components/Modal"; -import { api } from "@/infra/api"; type Handler = (...args: any[]) => unknown; interface ValidatorOptions { diff --git a/src/infra/api/index.ts b/src/infra/api/index.ts deleted file mode 100644 index a8b1313c..00000000 --- a/src/infra/api/index.ts +++ /dev/null @@ -1,42 +0,0 @@ -import axios from "axios"; - -import { AccountApi } from "@/infra/api/account"; -import { AuthApi } from "@/infra/api/auth"; - -import { CollectionApi } from "./collection"; -import { MemeApi } from "./meme"; -import { SearchApi } from "./search"; -import { TagApi } from "./tags"; - -export const axiosBasic = axios.create({ - baseURL: `${process.env.NEXT_PUBLIC_API_URL}`, - withCredentials: true, -}); - -/** - * FIX - * 검색 API만 서버 endpoint가 다름. - * 추후에 다른 API와 endpoint 통일될 예정. - */ -export const axiosSearchBasic = axios.create({ - baseURL: `${process.env.NEXT_PUBLIC_SEARCH_API_URL}`, -}); - -/** - * NOTE - * 통신 클라이언트(axios) 의존성 주입 - * private/public 으로 api 요청 정책이 분리될 가능성을 위함 - * 특정 정책에 따라 여러 버전의 api 인스턴스를 런타임에 생성 가능 - * - * TODO - * 1. 요청 데이터를 검증하는 방법과 위치 및 에러 핸들링 - * 2. 응답 에러 핸들링 - */ -export const api = { - auth: new AuthApi(axiosBasic), - account: new AccountApi(axiosBasic), - search: new SearchApi(axiosSearchBasic), - meme: new MemeApi(axiosBasic), - tags: new TagApi(axiosBasic), - collection: new CollectionApi(axiosBasic), -}; From 45305bfcd18adeaf53487121217f8f162f193b04 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 22:29:01 +0900 Subject: [PATCH 28/32] =?UTF-8?q?=F0=9F=94=A7=20fix(tailwind.config.js):?= =?UTF-8?q?=20content=20=EC=98=B5=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index eb585931..4ca338e0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,14 +11,6 @@ module.exports = { "./src/pages/**/*.{js,ts,jsx,tsx}", "./src/features/**/*.{js,ts,jsx,tsx}", "./src/common/**/*.{js,ts,jsx,tsx}", - - /** - * ################################ - * 리팩터링 이후 아래 content는 제거될 예정입니다. - * @deprecated - */ - "./src/components/**/*.{js,ts,jsx,tsx}", - "./src/application/**/*.{js,ts,jsx,tsx}", ], safelist: [{ pattern: /line-clamp-/ }], theme: { From 29f51fb48703660859fa99c18326f793a6552b47 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 22:31:39 +0900 Subject: [PATCH 29/32] =?UTF-8?q?=F0=9F=90=9B=20fix(preview.js):=20storybo?= =?UTF-8?q?ok=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95(=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 3ab3169a..6e0ef3f4 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,11 +3,11 @@ import { initialize, mswDecorator } from "msw-storybook-addon"; import "@/styles/globals.css"; import { handlers } from "../mocks/handlers"; import * as NextImage from "next/image"; -import { QueryClientProvider } from "../src/application/queryClient"; +import { QueryClientProvider } from "../src/api/core"; import { Suspense } from "react"; import { RouterContext } from "next/dist/shared/lib/router-context"; -import { ToastContainer, ToastProvider } from "../src/components/common/Toast"; -import { SignUpModal, SignUpModalProvider } from "../src/components/common/Modal"; +import { ToastContainer, ToastProvider } from "../src/common/components/Toast"; +import { SignUpModal, SignUpModalProvider } from "../src/common/components/Modal"; // Initialize MSW initialize(); From 854713bf1dedf25a4ad5af44a494255cb26ce36b Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 22:45:11 +0900 Subject: [PATCH 30/32] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20remove:=20=EC=A7=80?= =?UTF-8?q?=EB=9D=BC=20=ED=8B=B0=EC=BC=93=20=EB=84=98=EB=B2=84=20husky?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/prepare-commit-msg | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100755 .husky/prepare-commit-msg diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg deleted file mode 100755 index 06097bd3..00000000 --- a/.husky/prepare-commit-msg +++ /dev/null @@ -1,18 +0,0 @@ -#!/bin/sh -# -# git prepare-commit-msg hook for automatically prepending an issue key -# from the start of the current branch name to commit messages. - -# check if commit is merge commit or a commit ammend -if [ $2 = "merge" ] || [ $2 = "commit" ]; then - exit -fi -ISSUE_KEY=`git branch | grep -o "\* \(.*/\)*[A-Z]\{2,\}-[0-9]\+" | grep -o "[A-Z]\{2,\}-[0-9]\+"` -if [ $? -ne 0 ]; then - # no issue key in branch, use the default message - exit -fi -# issue key matched from branch prefix, prepend to commit message -TEMP=`mktemp /tmp/commitmsg-XXXXX` -(echo "$(cat $1) [$ISSUE_KEY]") > $TEMP -cat $TEMP > $1 \ No newline at end of file From 3f108104fd40714955f9772c549b29ea48bee976 Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Sat, 22 Jul 2023 23:58:47 +0900 Subject: [PATCH 31/32] =?UTF-8?q?=F0=9F=94=A5=20remove:=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=98=A4=EB=A5=98=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20-=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20Navigation,=20Categor?= =?UTF-8?q?y,=20Sidebar=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20-=20=EC=9C=84=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=BD=94=EB=93=9C=EC=97=90=EC=84=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EB=B0=9C=EC=83=9D=EC=9C=BC=EB=A1=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=ED=95=A8=20-=20preview.js=EC=97=90=20OverlayProvider?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.js | 25 +++++++++++-------- .../Navigation/Navigation.stories.tsx | 21 ---------------- .../Navigation/SideBar/SideBar.stories.tsx | 10 -------- .../TagCategory/Category.stories.tsx | 10 -------- 4 files changed, 14 insertions(+), 52 deletions(-) delete mode 100644 src/common/components/Navigation/Navigation.stories.tsx delete mode 100644 src/common/components/Navigation/SideBar/SideBar.stories.tsx delete mode 100644 src/features/common/components/TagCategory/Category.stories.tsx diff --git a/.storybook/preview.js b/.storybook/preview.js index 6e0ef3f4..2ac2c621 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -8,6 +8,7 @@ import { Suspense } from "react"; import { RouterContext } from "next/dist/shared/lib/router-context"; import { ToastContainer, ToastProvider } from "../src/common/components/Toast"; import { SignUpModal, SignUpModalProvider } from "../src/common/components/Modal"; +import { OverlayProvider } from "../src/common/hooks"; // Initialize MSW initialize(); @@ -16,17 +17,19 @@ export const decorators = [ mswDecorator, (Story) => ( - - - -
    - - - -
    -
    -
    -
    + + + + +
    + + + +
    +
    +
    +
    +
    ), ]; diff --git a/src/common/components/Navigation/Navigation.stories.tsx b/src/common/components/Navigation/Navigation.stories.tsx deleted file mode 100644 index d21bc5bb..00000000 --- a/src/common/components/Navigation/Navigation.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentStory } from "@storybook/react"; -import React from "react"; - -import { ExplorePageNavigation } from "./ExplorePageNavigation"; -import { IntroPageNavigation } from "./IntroPageNavigation"; -import { SearchPageNavigation } from "./SearchPageNavigation"; - -export default { - title: "components/common/Navigation", - component: null, -}; - -export const IntroNavigation: ComponentStory = () => ( - -); -export const SearchNavigation: ComponentStory = () => ( - -); -export const ExploreNavigation: ComponentStory = () => ( - -); diff --git a/src/common/components/Navigation/SideBar/SideBar.stories.tsx b/src/common/components/Navigation/SideBar/SideBar.stories.tsx deleted file mode 100644 index 055dd7f6..00000000 --- a/src/common/components/Navigation/SideBar/SideBar.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { ComponentMeta, ComponentStory } from "@storybook/react"; - -import { SideBar } from "./SideBar"; - -export default { - title: "components/common/Navigation/SideBar", - component: SideBar, -} as ComponentMeta; - -export const _SideBar: ComponentStory = () => ; diff --git a/src/features/common/components/TagCategory/Category.stories.tsx b/src/features/common/components/TagCategory/Category.stories.tsx deleted file mode 100644 index 211c6359..00000000 --- a/src/features/common/components/TagCategory/Category.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { ComponentMeta, ComponentStory } from "@storybook/react"; - -import { CategoryContent } from "./CategoryContent"; - -export default { - title: "components/common/Category", - component: CategoryContent, -} as ComponentMeta; - -export const Default: ComponentStory = () => ; From 40cc3a1f7969d7a2df828b318b101d78bb87ab4f Mon Sep 17 00:00:00 2001 From: Jeongjin Date: Fri, 29 Sep 2023 21:00:55 +0900 Subject: [PATCH 32/32] =?UTF-8?q?=E2=9C=A8=20feat:=20UploadButton,=20Uploa?= =?UTF-8?q?dModal=20=EA=B5=AC=ED=98=84=20-=20UploadModal=EA=B3=BC=20?= =?UTF-8?q?=EA=B5=AC=EA=B8=80=20=ED=8F=BC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Navigation/ExplorePageNavigation.tsx | 2 + .../Navigation/IntroPageNavigation.tsx | 2 + .../Navigation/UploadButton/UploadButton.tsx | 25 +++++++++++ .../Navigation/UploadButton/UploadModal.tsx | 45 +++++++++++++++++++ .../Navigation/UploadButton/index.ts | 1 + 5 files changed, 75 insertions(+) create mode 100644 src/common/components/Navigation/UploadButton/UploadButton.tsx create mode 100644 src/common/components/Navigation/UploadButton/UploadModal.tsx create mode 100644 src/common/components/Navigation/UploadButton/index.ts diff --git a/src/common/components/Navigation/ExplorePageNavigation.tsx b/src/common/components/Navigation/ExplorePageNavigation.tsx index bb8db618..93ccea06 100644 --- a/src/common/components/Navigation/ExplorePageNavigation.tsx +++ b/src/common/components/Navigation/ExplorePageNavigation.tsx @@ -2,6 +2,7 @@ import { Logo } from "./Logo"; import { Navigation } from "./Navigation"; import { SearchHeader } from "./SearchHeader"; import { SideBar } from "./SideBar"; +import { UploadButton } from "./UploadButton"; interface Props { title?: string; @@ -15,6 +16,7 @@ export const ExplorePageNavigation = ({ title }: Props) => { + diff --git a/src/common/components/Navigation/IntroPageNavigation.tsx b/src/common/components/Navigation/IntroPageNavigation.tsx index 65e2d7b9..0be5ca48 100644 --- a/src/common/components/Navigation/IntroPageNavigation.tsx +++ b/src/common/components/Navigation/IntroPageNavigation.tsx @@ -2,6 +2,7 @@ import { Logo } from "./Logo"; import { Navigation } from "./Navigation"; import { SearchHeader } from "./SearchHeader"; import { SideBar } from "./SideBar"; +import { UploadButton } from "./UploadButton"; export const IntroPageNavigation = () => { return ( @@ -11,6 +12,7 @@ export const IntroPageNavigation = () => { + diff --git a/src/common/components/Navigation/UploadButton/UploadButton.tsx b/src/common/components/Navigation/UploadButton/UploadButton.tsx new file mode 100644 index 00000000..04de8263 --- /dev/null +++ b/src/common/components/Navigation/UploadButton/UploadButton.tsx @@ -0,0 +1,25 @@ +import { useOverlay } from "@/common/hooks"; + +import { UploadModal } from "./UploadModal"; + +export const UploadButton = () => { + const overlay = useOverlay(); + const handleClick = () => { + /** + * TODO + * 업로드 기능 완료 후, + * 1. 업로드 페이지로 이동하는 버튼으로 변경 + * 2. UploadModal 삭제 + */ + overlay.open(({ isOpen, close }) => ); + }; + + return ( + + ); +}; diff --git a/src/common/components/Navigation/UploadButton/UploadModal.tsx b/src/common/components/Navigation/UploadButton/UploadModal.tsx new file mode 100644 index 00000000..b6193cba --- /dev/null +++ b/src/common/components/Navigation/UploadButton/UploadModal.tsx @@ -0,0 +1,45 @@ +import { Modal } from "../../Modal"; + +interface Props { + open: boolean; + onClose: () => void; +} + +/** + * TODO + * 업로드 기능 완성 후 제거 + */ +export const UploadModal = ({ open, onClose }: Props) => { + return ( + + +
    +

    밈 업로드에 관심있는 당신!

    +

    + 그밈 팀은 업로드 기능을 준비 중이에요! +
    +
    + 이메일을 남겨주시면 +
    + 업로드 기능이 완성되었을 때 +
    + 미리 체험할 수 있도록 알려드릴게요. +
    +

    +
    + + + + 좋아요 + + +
    + ); +}; diff --git a/src/common/components/Navigation/UploadButton/index.ts b/src/common/components/Navigation/UploadButton/index.ts new file mode 100644 index 00000000..1b9efe82 --- /dev/null +++ b/src/common/components/Navigation/UploadButton/index.ts @@ -0,0 +1 @@ +export * from "./UploadButton";