feat(bingo) bingo 부분에 reactQuery 추가

package.json

@@ -15,6 +15,7 @@
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
+    "@tanstack/react-query": "^5.51.11",
     "@types/react-router-dom": "^5.3.3",
     "dayjs": "^1.11.11",
     "prettier": "^3.3.0",

src/App.tsx

@@ -11,35 +11,40 @@ import Board from "./modules/Community/index.tsx";
 import BoardView from "./modules/Community/BoardView.tsx";
 import { Container, CssBaseline } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 function App() {
   const defaultTheme = createTheme();
 
+  const queryClient = new QueryClient();
+
   return (
-    <ThemeProvider theme={defaultTheme}>
-      <BrowserRouter>
-        <CssBaseline />
-        <Container className="App">
-          <Header />
-          <Routes>
-            <Route path="/" Component={Home} />
-            <Route path="/builder" element={<IntroduceBuilder />} />
-            <Route path="/runner" element={<Test />} />
-            <Route path="/community/*" element={<Board />} />
-            <Route path="/bingo" element={<Bingo />} />
-            <Route path="/signup" element={<SignUpForm />} />
-            {/* <Route path="/posts" component={Posts} />
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={defaultTheme}>
+        <BrowserRouter>
+          <CssBaseline />
+          <Container className="App">
+            <Header />
+            <Routes>
+              <Route path="/" Component={Home} />
+              <Route path="/builder" element={<IntroduceBuilder />} />
+              <Route path="/runner" element={<Test />} />
+              <Route path="/community/*" element={<Board />} />
+              <Route path="/bingo" element={<Bingo />} />
+              <Route path="/signup" element={<SignUpForm />} />
+              {/* <Route path="/posts" component={Posts} />
             <Route path="/posts/:id" component={Post} />
             <Route path="/posts/new" component={NewPost} />
             <Route path="/posts/edit/:id" component={EditPost} />
             <Route path="/posts/delete/:id" component={DeletePost} />
             <Route path="/posts/search/:query" component={Search} />
             <Route path="/posts/search/:query/:page" component={Search} /> */}
-          </Routes>
-          <Footer />
-        </Container>
-      </BrowserRouter>
-    </ThemeProvider>
+            </Routes>
+            <Footer />
+          </Container>
+        </BrowserRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 

src/api/bingo_api.ts

@@ -1,4 +1,5 @@
-const API_URL: string = import.meta.env.VITE_API_URL;
+// const API_URL: string = import.meta.env.VITE_API_URL;
+const API_URL: string = 'http://localhost:8000';
 
 export const singUpUser = async (username: string) => {
   const response = await fetch(
@@ -25,12 +26,13 @@ export const getUser = async (username: string) => {
   return data;
 };
 
-export const createBingoBoard = async (
+export const createBingoBoard = async (args: {
   userId: string,
   boardData: {
     [key: string]: { value: string; status: number; selected: number };
   }
-) => {
+}) => {
+  const { userId, boardData } = args;
   const response = await fetch(`${API_URL}/api/bingo/boards`, {
     method: "POST",
     headers: {
@@ -42,6 +44,10 @@ export const createBingoBoard = async (
 };
 
 export const getBingoBoard = async (userId: string) => {
+  if (!userId) {
+    return;
+  }
+
   const response = await fetch(`${API_URL}/api/bingo/boards/${userId}`);
   if (response.ok === false) {
     return [];
@@ -52,6 +58,7 @@ export const getBingoBoard = async (userId: string) => {
     ...boardData[key],
     id: key,
   }));
+  console.log(items);
   return items;
 };
 
@@ -83,11 +90,12 @@ export const updateBingoBoard = async (
   return response.ok;
 };
 
-export const createUserBingoInteraction = async (
-  word_id_list: string | null,
-  send_user_id: number,
-  receive_user_id: number
-) => {
+export const createUserBingoInteraction = async (args: {
+  word_id_list: string | null;
+  send_user_id: number;
+  receive_user_id: number;
+}) => {
+  const { word_id_list, send_user_id, receive_user_id } = args;
   const response = await fetch(`${API_URL}/api/bingo/interactions`, {
     method: "POST",
     headers: {
@@ -99,6 +107,11 @@ export const createUserBingoInteraction = async (
 };
 
 export const getUserLatestInteraction = async (userId: string) => {
+
+  if (!userId) {
+    return;
+  }
+
   const response = await fetch(`${API_URL}/api/bingo/interactions/${userId}`);
 
   if (response.ok === false) {
@@ -109,6 +122,10 @@ export const getUserLatestInteraction = async (userId: string) => {
 };
 
 export const getUserName = async (userId: string) => {
+  if (!userId) {
+    return;
+  }
+
   const response = await fetch(`${API_URL}/api/auth/bingo/get-user/${userId}`);
   if (response.ok === false) {
     return [];

src/hooks/bingo/mutations/useCreateBingoBoardMutation.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createBingoBoard } from "../../../api/bingo_api";
+import QueryKeyGenerator from "../../common/QueryKeyGenerator";
+
+export const useCreateBingoBoardMutation = async (sendUserId: string) => {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: (args: {
+            userId: string,
+            boardData: {
+                [key: string]: { value: string; status: number; selected: number };
+            },
+        }) => {
+            const { userId, boardData } = args;
+            return createBingoBoard(
+                {
+                    userId,
+                    boardData,
+                }
+            );
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: QueryKeyGenerator.bingoBoard(sendUserId) });
+            queryClient.invalidateQueries({ queryKey: QueryKeyGenerator.userLatestInteraction(sendUserId) });
+        }
+    });
+}

src/hooks/bingo/mutations/useCreateUserBingoInteractionMutation.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createUserBingoInteraction } from "../../../api/bingo_api";
+import QueryKeyGenerator from "../../common/QueryKeyGenerator";
+
+export const useCreateUserBingoInteractionMutation = async (sendUserId: string) => {
+    const queryClient = useQueryClient();
+    // 새로운 interaction을 생성하는 mutation입니다.
+    return useMutation({
+        mutationFn: (args: {
+            word_id_list: string | null,
+            send_user_id: number,
+            receive_user_id: number
+        }) => {
+            const { word_id_list, send_user_id, receive_user_id } = args;
+            return createUserBingoInteraction(
+                {
+                    word_id_list,
+                    send_user_id,
+                    receive_user_id
+                }
+            );
+        },
+        onSuccess: () => {
+            // 새로운 interaction이 생성되면, 해당 유저의 bingo board와 latest interaction을 업데이트합니다.
+            queryClient.invalidateQueries({ queryKey: QueryKeyGenerator.bingoBoard(sendUserId) });
+            queryClient.invalidateQueries({ queryKey: QueryKeyGenerator.userLatestInteraction(sendUserId) });
+        }
+    });
+};

src/hooks/bingo/useBingoBoardByUserId.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import QueryKeyGenerator from "../common/QueryKeyGenerator";
+import { getBingoBoard } from "../../api/bingo_api";
+
+export const useBingoBoardByUserId = (userId: string) => {
+    return useQuery({
+        queryKey: QueryKeyGenerator.bingoBoard(userId), // 쿼리 키를 통해서 쿼리들을 구분합니다. 나중에 쿼리키를 활용해서 해당 쿼리들을 reset 할 수 있습니다.
+        queryFn: () => { // 쿼리 함수
+            const data = getBingoBoard(userId)
+            if (!data) {
+                throw new Error("Bingo board not found");
+            }
+            return data;
+        }
+    });
+}

src/hooks/bingo/useUserLatestInteractionByUserId.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import QueryKeyGenerator from "../common/QueryKeyGenerator";
+import { getUserLatestInteraction } from "../../api/bingo_api";
+
+export const useUserLatestInteractionByUserId = (userId: string) => {
+    return useQuery({
+        queryKey: QueryKeyGenerator.userLatestInteraction(userId),
+        queryFn: () => {
+            const data = getUserLatestInteraction(userId)
+            if (!data) {
+                throw new Error("User latest interaction not found");
+            }
+            return data;
+        }
+    });
+}

src/hooks/common/QueryKeyGenerator.ts

@@ -0,0 +1,5 @@
+export default {
+    user: (username: string) => ['user', username],
+    bingoBoard: (userId: string) => ['bingoBoard', userId],
+    userLatestInteraction: (userId: string) => ['userLatestInteraction', userId],
+}

src/hooks/user/useUserById.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getUser as getUserByUsername } from "../../api/bingo_api";
+import QueryKeyGenerator from "../common/QueryKeyGenerator";
+
+export const useUserByUsername = (username: string) => {
+    return useQuery({
+        queryKey: QueryKeyGenerator.user(username), queryFn: () => {
+            const data = getUserByUsername(username)
+            if (!data) {
+                throw new Error("User not found");
+            }
+            return data;
+        }
+    });
+};