[Step2.3] cactus: TanStack Query 적용하기

package.json

@@ -11,6 +11,8 @@
     "server": "npx json-server db.json"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-query-devtools": "^5.101.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.4.2",

src/App.jsx

@@ -1,11 +1,10 @@
 import "./App.css";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Header from "./components/Header/Header";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter";
 import RestaurantList from "./components/RestaurantList/RestaurantList";
 import RestaurantDetailModal from "./components/Modal/RestaurantDetailModal";
 import AddRestaurantModal from "./components/Modal/AddRestaurantModal";
-import useRestaurantStore from "./store/useRestaurantStore";
 import useFilterStore from "./store/useFilterStore";
 
 export default function App() {
@@ -23,11 +22,6 @@ export default function App() {
   const handleAddModalOpen = () => setIsAddModalOpen(true);
   const handleAddModalClose = () => setIsAddModalOpen(false);
 
-  const fetchRestaurants = useRestaurantStore((state) => state.fetchRestaurants);
-  useEffect(() => {
-    fetchRestaurants();
-  }, [fetchRestaurants]);
-
   return (
     <>
       <Header onAddModalOpen={handleAddModalOpen} />

src/components/Modal/AddRestaurantModal.jsx

@@ -3,27 +3,22 @@ import { useState } from "react";
 import Modal from "./Modal";
 import styled from "styled-components";
 import { textCaption } from "../../styles/typography";
-import useRestaurantStore from "../../store/useRestaurantStore";
+import { useAddRestaurantMutation } from "../../queries/useAddRestaurantMutation";
 
 export default function AddRestaurantModal({ onClose }) {
-  const registerRestaurant = useRestaurantStore((state) => state.registerRestaurant);
+  const { mutate } = useAddRestaurantMutation();
+
   const [category, setCategory] = useState("");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    try {
-      await registerRestaurant({
-        id: crypto.randomUUID(),
-        category,
-        name,
-        description,
-      });
-      onClose();
-    } catch {
-      alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
-    }
+    onClose();
+    mutate(
+      { category, name, description },
+      { onError: () => alert("음식점 추가에 실패했습니다. 다시 시도해주세요.") },
+    );
   };
 
   return (

src/components/RestaurantList/RestaurantList.jsx

@@ -1,16 +1,17 @@
 import { CATEGORY_IMAGES } from "../../constants/categoryImages";
 import styled from "styled-components";
 import { textSubtitle, textBody } from "../../styles/typography";
-import useRestaurantStore from "../../store/useRestaurantStore";
 import { ALL_CATEGORY } from "../../constants/categories";
+import { useRestaurantsQuery } from "../../queries/useRestaurantsQuery";
 
 export default function RestaurantList({
   selectedCategory,
   onRestaurantClick,
 }) {
-  const newRestaurants = useRestaurantStore((state) => state.newRestaurants);
-  const isLoading = useRestaurantStore((state) => state.isLoading);
-  const error = useRestaurantStore((state) => state.error);
+  const { data: newRestaurants, isLoading, error } = useRestaurantsQuery();
+
+  if (isLoading) return <StatusText>로딩중입니다.</StatusText>;
+  if (error) return <StatusText>{error.message}</StatusText>;
 
   const filteredRestaurants =
     selectedCategory === ALL_CATEGORY
@@ -19,8 +20,6 @@ export default function RestaurantList({
 
   return (
     <ListContainer>
-      {isLoading && <p>로딩중입니다.</p>}
-      {error && <p>{error}</p>}
       <RestaurantUl>
         {filteredRestaurants.map((restaurant) => (
           <Restaurant key={restaurant.id}>
@@ -45,6 +44,11 @@ export default function RestaurantList({
   );
 }
 
+const StatusText = styled.p`
+  padding: 16px 8px;
+  color: var(--grey-300);
+`;
+
 const ListContainer = styled.section`
   display: flex;
   flex-direction: column;

src/constants/queryKeys.js

@@ -0,0 +1 @@
+export const RESTAURANTS_QUERY_KEY = ["restaurants"];

src/main.jsx

@@ -1,9 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   </React.StrictMode>,
 );

src/queries/useAddRestaurantMutation.js

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { addRestaurant } from "../api";
+import { RESTAURANTS_QUERY_KEY } from "../constants/queryKeys";
+
+export function useAddRestaurantMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: addRestaurant,
+    onMutate: async (newRestaurant) => {
+      await queryClient.cancelQueries({ queryKey: RESTAURANTS_QUERY_KEY });
+      const previous = queryClient.getQueryData(RESTAURANTS_QUERY_KEY);
+      const optimisticItem = {
+        id: `optimistic-${Date.now()}`,
+        ...newRestaurant,
+      };
+      queryClient.setQueryData(RESTAURANTS_QUERY_KEY, (old) => {
+        const current = Array.isArray(old) ? old : [];
+        return [...current, optimisticItem];
+      });
+      return { previous };
+    },
+    onError: (err, _, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(RESTAURANTS_QUERY_KEY, context.previous);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RESTAURANTS_QUERY_KEY });
+    },
+  });
+}

src/queries/useRestaurantsQuery.js

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getRestaurants } from "../api";
+import { RESTAURANTS_QUERY_KEY } from "../constants/queryKeys";
+
+export function useRestaurantsQuery() {
+  return useQuery({
+    queryKey: RESTAURANTS_QUERY_KEY,
+    queryFn: getRestaurants,
+  });
+}