♻️ Refactor: 폴더 구조 변경 및 react-query 구조 개선

.storybook/preview.js

@@ -3,11 +3,12 @@ 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";
+import { OverlayProvider } from "../src/common/hooks";
 
 // Initialize MSW
 initialize();
@@ -16,17 +17,19 @@ export const decorators = [
   mswDecorator,
   (Story) => (
     <QueryClientProvider>
-      <ToastProvider>
-        <SignUpModalProvider>
-          <Suspense fallback="loading...">
-            <div className="__font_family_variables font-pretendard">
-              <ToastContainer />
-              <SignUpModal />
-              <Story />
-            </div>
-          </Suspense>
-        </SignUpModalProvider>
-      </ToastProvider>
+      <OverlayProvider>
+        <ToastProvider>
+          <SignUpModalProvider>
+            <Suspense fallback="loading...">
+              <div className="__font_family_variables font-pretendard">
+                <ToastContainer />
+                <SignUpModal />
+                <Story />
+              </div>
+            </Suspense>
+          </SignUpModalProvider>
+        </ToastProvider>
+      </OverlayProvider>
     </QueryClientProvider>
   ),
 ];

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")({

src/api/account/index.ts

@@ -0,0 +1,2 @@
+export * from "./useGetMyAccount";
+export * from "./useLogout";

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();

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);
+    },
+  });
+};

src/api/collection/index.ts

@@ -0,0 +1,4 @@
+export * from "./useDeleteMemeFromCollection";
+export * from "./useGetCollectionCheck";
+export * from "./usePostMemeToCollection";
+export * from "./usePostMemeToSharedCollection";

src/api/collection/useDeleteMemeFromCollection.ts

@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useGetMyAccount } from "../account";
+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: useGetMyAccount.queryKey });
+    },
+    onError: (_, deletedMemeId, context) => {
+      queryClient.setQueryData(
+        useGetCollectionCheck.queryKey(deletedMemeId),
+        context?.previousCollectionInfo,
+      );
+    },
+  });
+};

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<UseQueryOptions, "enabled">,
+) => {
+  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),
+  });

src/api/collection/usePostMemeToCollection.ts

@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useGetMyAccount } from "../account";
+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: useGetMyAccount.queryKey });
+    },
+    onError: (_, newMemeId, context) => {
+      queryClient.setQueryData(
+        useGetCollectionCheck.queryKey(newMemeId),
+        context?.previousCollectionInfo,
+      );
+    },
+  });
+};

src/api/collection/usePostMemeToSharedCollection.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useGetMyAccount } from "../account";
+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: useGetMyAccount.queryKey });
+    },
+  });
+};

src/infra/api/index.ts → src/api/core/axios.ts

@@ -2,11 +2,10 @@ 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";
+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}`,

src/api/core/index.ts

@@ -0,0 +1,5 @@
+export * from "./axios";
+export * from "./query-client";
+export * from "./queryKey";
+export * from "./useCoreInfiniteQuery";
+export * from "./useSuspensedQuery";

src/application/queryClient.tsx → 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<typeof QueryClientProvider>["hydrateState"];
+}
+
 interface Props {
   hydrateState?: DehydratedState;
   children: ReactNode;

src/application/hooks/api/core/useSuspensedQuery.ts → 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<TData>
+  extends Omit<
+    UseQueryResult<TData, never>,
+    "data" | "status" | "error" | "isLoading" | "isError" | "isFetching"
+  > {
+  data: TData;
+  status: "success" | "idle";
+}
+
+export type SuspendedUseQueryResultOnSuccess<TData> = BaseSuspendedUseQueryResult<TData> & {
+  status: "success";
+  isSuccess: true;
+  isIdle: false;
+};
+export type SuspendedUseQueryResultOnIdle<TData> = BaseSuspendedUseQueryResult<TData> & {
+  status: "idle";
+  isSuccess: false;
+  isIdle: true;
+};
+
+export type SuspendedUseQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "suspense">;
 
+export type QuerySelectOption<Result, API extends (...args: any) => any> = (
+  data: Awaited<ReturnType<API>>,
+) => Result;
 /**
  * @desc suspense 사용 시 non-nullable data 이도록 wrapping
  * @link https://github.com/toss/slash/blob/main/packages/react/react-query/src/hooks/useSuspendedQuery.ts

src/api/meme/index.ts

@@ -0,0 +1,3 @@
+export * from "./useGetMemeDetailById";
+export * from "./useGetMemesByCollectionId";
+export * from "./useGetMemesBySort";

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));