feat: queryClient, interestMutation 추가

YAPP-Github · Aug 17, 2024 · 543bbaa · 543bbaa
1 parent dcd38a6
commit 543bbaa
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/YAPP-Github/24th-Web-Team-2-FE#readme",
   "dependencies": {
-    "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.2",
     "next": "^14.2.3",
     "react-cookie": "^7.1.4",
@@ -46,6 +46,7 @@
     "@storybook/nextjs": "^8.1.6",
     "@storybook/react": "^8.1.6",
     "@storybook/test": "^8.1.6",
+    "@tanstack/react-query-devtools": "^5.51.23",
     "@types/morgan": "^1.9.9",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",

diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export const axiosInstance = axios.create({
+  withCredentials: true,
+});
diff --git a/src/api/hooks/useInterestMutation.ts b/src/api/hooks/useInterestMutation.ts
@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+import { axiosInstance } from '@/api/axiosInstance';
+import { AxiosError, AxiosResponse } from 'axios';
+
+interface postMutationParams {
+  interestList: string[];
+}
+
+export const postMutation = ({ interestList }: postMutationParams) => {
+  return axiosInstance.post('/inbox/interests', {
+    interests: interestList.map(data => {
+      return { category: data };
+    }),
+  });
+};
+
+export const useInterestMutation = () => {
+  return useMutation<AxiosResponse, AxiosError, postMutationParams>({
+    mutationFn: postMutation,
+  });
+};
diff --git a/src/api/queryClient.tsx b/src/api/queryClient.tsx
@@ -0,0 +1,25 @@
+'use client';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
+
+export default function ReactQueryProviders({ children }: React.PropsWithChildren) {
+  const [client] = useState(
+    new QueryClient({
+      defaultOptions: {
+        queries: {
+          refetchOnWindowFocus: false,
+          refetchOnMount: false,
+          retry: 1,
+        },
+      },
+    }),
+  );
+
+  return (
+    <QueryClientProvider client={client}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,19 +1,19 @@
 import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+import ReactQueryProviders from '@/api/queryClient';
 import '@/styles/tailwind.css';
 
 export const metadata: Metadata = {
   title: 'InspoMailClub',
   description: 'Your Daily Insight Source',
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
   return (
     <html lang='ko'>
-      <body className='flex flex-col items-center w-full'>{children}</body>
+      <body className='flex flex-col items-center w-full'>
+        <ReactQueryProviders>{children}</ReactQueryProviders>
+      </body>
     </html>
   );
 }
diff --git a/src/app/onboard/interest/page.tsx b/src/app/onboard/interest/page.tsx
@@ -1,4 +1,3 @@
-import { OnboardButton } from '@/components/OnboardButton';
 import { getInterestList } from '@/api/onboard';
 import InterestInteraction from '@/components/PageInteraction/Onboard/InterestInteraction';
 
@@ -7,7 +6,40 @@ interface InterestProps {
 }
 
 const Interest = async ({ userName = '채현' }: InterestProps) => {
-  const interestList = await getInterestList();
+  // const interestList = await getInterestList();
+
+  const interestList = [
+    {
+      id: 'randomstring1',
+      interest: '시사',
+      desc: '세상 돌아가는',
+    },
+    {
+      id: 'randomstring2',
+      interest: 'IT/테크',
+      desc: '최신 테크',
+    },
+    {
+      id: 'randomstring3',
+      interest: '디자인',
+      desc: '디자인 영감',
+    },
+    {
+      id: 'randomstring4',
+      interest: '경제',
+      desc: '핵심 기업',
+    },
+    {
+      id: 'randomstring5',
+      interest: '트렌드',
+      desc: '글로벌 트렌드',
+    },
+    {
+      id: 'randomstring6',
+      interest: '채용',
+      desc: '신규 채용',
+    },
+  ];
 
   return (
     <div className='flex flex-col items-center justify-start w-full h-full gap-10'>

diff --git a/src/app/onboard/layout.tsx b/src/app/onboard/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from 'next';
 import '@/styles/tailwind.css';
 import OnboardHeader from '@/components/Header/OnboardHeader';
 import { PropsWithChildren } from 'react';
-
 export const metadata: Metadata = {
   title: 'Inspo Mail Club',
   description: 'TODO: FIX DESCRIPTION',

diff --git a/src/components/PageInteraction/Onboard/InterestInteraction.tsx b/src/components/PageInteraction/Onboard/InterestInteraction.tsx
@@ -1,14 +1,19 @@
 'use client';
 
+import { useInterestMutation } from '@/api/hooks/useInterestMutation';
 import { OnboardButton } from '@/components/OnboardButton';
 import type { Interest } from '@/types/onboard';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 interface InterestInteractionProps {
   interestList: Interest[];
 }
 const InterestInteraction = ({ interestList }: InterestInteractionProps) => {
   const [selectedCategory, setSelectedCategory] = useState<string[]>([]);
+  const router = useRouter();
+
+  const interestMutation = useInterestMutation();
 
   const handleCategoryClick = (category: string) => {
     if (selectedCategory.includes(category)) {
@@ -20,7 +25,12 @@ const InterestInteraction = ({ interestList }: InterestInteractionProps) => {
   };
 
   const handleConfirmBtnClick = () => {
-    console.log('confirm button clicked with selected category: ', selectedCategory);
+    interestMutation.mutate(
+      { interestList: selectedCategory },
+      {
+        onSuccess: () => router.push('/onboard/emailList'), // TODO: 백엔드 개발 미완, 수정필요
+      },
+    );
   };
 
   return (

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -38,6 +38,9 @@ export const handlers = [
       ],
     });
   }),
+  http.post('/inbox/interests', () => {
+    return HttpResponse.json({}, { status: 201 });
+  }),
 
   http.get('/auth/google', () => {
     const CookieHeader: HeadersInit = new Headers();

diff --git a/src/network/index.tsx b/src/network/index.tsx
@@ -4,7 +4,7 @@ import { cookies } from 'next/headers';
 const SSR_API_ORIGIN =
   process.env.NEXT_PUBLIC_API_MOCK === 'enabled' ? process.env.NEXT_PUBLIC_MOCK_URL : process.env.NEXT_PUBLIC_API_URL;
 
-const fetchWrapper = async ({ method, url, body, params, header }: any) => {
+const fetchWrapper = async ({ method, url, body, params }: any) => {
   const config: AxiosRequestConfig = {
     baseURL: SSR_API_ORIGIN,