refactor: 페이지와 컴포넌트에서 서비스로직 분리

- 서비스로직을 훅안으로 들고가서 훅에서 주는 함수로 모든 행동 처리하도록 변경 - 로더분리
codeit-bootcamp-frontend · Dec 8, 2024 · 2df54ff · 2df54ff
1 parent 009fd07
commit 2df54ff
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 89 deletions.
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { getUser, login, refreshAccessToken } from "@service/auth";
+import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
 import { isTokenValid } from "@util/helper";
 import { axiosInstance } from "@service/axios";
 
@@ -114,6 +114,10 @@ export function AuthProvider({ children }) {
     }
   }
 
+  async function handleSignup(formData) {
+    return signUp(formData);
+  }
+
   function clear() {
     localStorage.removeItem("accessToken");
     localStorage.removeItem("refreshToken");
@@ -134,6 +138,7 @@ export function AuthProvider({ children }) {
     auth,
     handleLogin,
     handleLogout,
+    handleSignup,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

diff --git a/src/pages/auth/SignupPage.jsx b/src/pages/auth/SignupPage.jsx
@@ -2,7 +2,6 @@ import { useEffect } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
 import useForm from "@hooks/useForm";
-import { signUp } from "@service/auth";
 import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
@@ -11,6 +10,7 @@ import { signupFormSchema } from "./components/schema";
 export default function SignupPage() {
   const {
     auth: { accessToken },
+    handleSignup,
   } = useAuth();
   const navigate = useNavigate();
 
@@ -38,7 +38,7 @@ export default function SignupPage() {
 
   async function onSubmit(data) {
     try {
-      await signUp(data);
+      await handleSignup(data);
       alert("회원가입에 성공했습니다. \n로그인 페이지로 이동합니다.");
       navigate("/login", { replace: true });
     } catch (err) {

diff --git a/src/pages/items/AllItemsPage.jsx b/src/pages/items/AllItemsPage.jsx
@@ -2,7 +2,6 @@ import { useSearchParams } from "react-router-dom";
 import useResponsive from "@hooks/useResponsive";
 import useProductList from "./components/useProductList";
 import usePagination from "@hooks/usePagination";
-import { getProducts } from "@service/product";
 import { Select, Button } from "@components/ui";
 import { Search, Recent } from "@components/Search";
 import { Section } from "@components/Section";
@@ -28,7 +27,7 @@ export default function AllItemsPage() {
     mobile: 3,
   });
 
-  const { isLoading, error, items, totalCount } = useProductList(getProducts, {
+  const { isLoading, error, items, totalCount } = useProductList({
     page,
     pageSize,
     keyword,

diff --git a/src/pages/items/BestItemsPage.jsx b/src/pages/items/BestItemsPage.jsx
@@ -1,6 +1,5 @@
 import useResponsive from "@hooks/useResponsive";
 import useProductList from "./components/useProductList";
-import { getProducts } from "@service/product";
 import { Section } from "@components/Section";
 import ProductList from "./components/ProductList";
 
@@ -10,7 +9,7 @@ export default function BestItemsPage() {
     tablet: 2,
     mobile: 1,
   });
-  const { isLoading, error, items } = useProductList(getProducts, {
+  const { isLoading, error, items } = useProductList({
     pageSize,
     orderBy: "favorite",
   });

diff --git a/src/pages/items/ItemAddPage.jsx b/src/pages/items/ItemAddPage.jsx
@@ -1,27 +1,13 @@
-import { addProduct, uploadProductImage } from "@service/product";
 import { PageWrapper } from "@components/Page";
 import ProductForm from "./components/ProductForm";
+import useProductActions from "./components/useProductActions";
 
 export default function ItemAddPage() {
-  async function handleSubmit(data) {
-    try {
-      if (data.images) {
-        const imgFormData = new FormData();
-        imgFormData.append("image", data.images);
-
-        const { url } = await uploadProductImage(imgFormData);
-        data.images = [url];
-      }
-
-      await addProduct(data);
-    } catch (err) {
-      throw err;
-    }
-  }
+  const { handleProductAdd } = useProductActions();
 
   return (
     <PageWrapper>
-      <ProductForm onProductSubmit={handleSubmit} />
+      <ProductForm onProductSubmit={handleProductAdd} />
     </PageWrapper>
   );
 }
diff --git a/src/pages/items/ItemDetailPage.jsx b/src/pages/items/ItemDetailPage.jsx
@@ -1,7 +1,5 @@
 import { Suspense } from "react";
 import { Await, useLoaderData } from "react-router-dom";
-import { getProduct } from "@service/product";
-import { getComments } from "@service/comments";
 import { PageWrapper } from "@components/Page";
 import ProductDetail from "./components/ProductDetail";
 import { BackToList } from "@components/Button/BackToList";
@@ -30,27 +28,3 @@ export default function ItemDetailPage() {
     </PageWrapper>
   );
 }
-
-async function loader({ params }) {
-  const { id } = params;
-
-  // 1. 첫번째 시도 : Promise.all
-  // 두 요청이 병렬로 시작은 가능하나, 두 요청이 모두 끝나야 반환하므로, 원하는 케이스가 아님
-
-  // 2. 두번째 시도 : 하나만 await
-  // getProduct를 먼저 await하고 getProdcutComments는 promise상태로 담아서 보내기
-  // getProduct의 await 때문에 코멘트 데이터 요청이 동시에 이뤄지지가 않음 (서비스 호출함수에서 임의로 시간지연으로 테스트해봄)
-  //const detail = await getProduct(id);
-  //const comments = getProductComments({ productId: id, limit: 5 });
-
-  // 3. 해결한 방법
-  // 두 요청을 거의 동시에 보내도록 우선 await없이 promise를 각 변수에 할당함
-  // 여기서 미리 await을 작성하면 그 요청을 기다린후 다음줄의 코드가 실행되어서 동시에 요청이 안됨
-  const detail = getProduct(id);
-  const comments = getComments("products", { productId: id, limit: 5 });
-
-  // detail에 담긴 promise를 기다린후에 리턴
-  return { detail: await detail, comments };
-}
-
-ItemDetailPage.loader = loader;
diff --git a/src/pages/items/ItemDetailPage.loader.js b/src/pages/items/ItemDetailPage.loader.js
@@ -0,0 +1,24 @@
+import { getProduct } from "@service/product";
+import { getComments } from "@service/comments";
+
+export default async function loader({ params }) {
+  const { id } = params;
+
+  // 1. 첫번째 시도 : Promise.all
+  // 두 요청이 병렬로 시작은 가능하나, 두 요청이 모두 끝나야 반환하므로, 원하는 케이스가 아님
+
+  // 2. 두번째 시도 : 하나만 await
+  // getProduct를 먼저 await하고 getProdcutComments는 promise상태로 담아서 보내기
+  // getProduct의 await 때문에 코멘트 데이터 요청이 동시에 이뤄지지가 않음 (서비스 호출함수에서 임의로 시간지연으로 테스트해봄)
+  //const detail = await getProduct(id);
+  //const comments = getProductComments({ productId: id, limit: 5 });
+
+  // 3. 해결한 방법
+  // 두 요청을 거의 동시에 보내도록 우선 await없이 promise를 각 변수에 할당함
+  // 여기서 미리 await을 작성하면 그 요청을 기다린후 다음줄의 코드가 실행되어서 동시에 요청이 안됨
+  const detail = getProduct(id);
+  const comments = getComments("products", { productId: id, limit: 5 });
+
+  // detail에 담긴 promise를 기다린후에 리턴
+  return { detail: await detail, comments };
+}
diff --git a/src/pages/items/ItemModifyPage.jsx b/src/pages/items/ItemModifyPage.jsx
@@ -1,18 +1,15 @@
-import { Navigate, useLoaderData, useNavigate } from "react-router-dom";
+import { Navigate, useLoaderData } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
-import {
-  getProduct,
-  modifyProduct,
-  uploadProductImage,
-} from "@service/product";
 import { PageWrapper } from "@components/Page";
 import ProductForm from "./components/ProductForm";
+import useProductActions from "./components/useProductActions";
 
 export default function ItemModifyPage() {
   const { detail } = useLoaderData();
   const {
     auth: { user },
   } = useAuth();
+  const { handleProductModify } = useProductActions(detail.id);
 
   if (user && user.id !== detail.ownerId) {
     alert("권한이 없습니다.");
@@ -24,38 +21,13 @@ export default function ItemModifyPage() {
     images: detail.images[0],
   };
 
-  async function handleSubmit(data) {
-    try {
-      if (data.images !== detail.images[0]) {
-        const imgFormData = new FormData();
-        imgFormData.append("image", data.images);
-
-        const { url } = await uploadProductImage(imgFormData);
-        data.images = [url];
-      }
-
-      await modifyProduct(detail.id, data);
-    } catch (err) {
-      throw err;
-    }
-  }
-
   return (
     <PageWrapper>
       <ProductForm
         initialData={initialData}
-        onProductSubmit={handleSubmit}
+        onProductSubmit={(formData) => handleProductModify(detail, formData)}
         isEdit
       />
     </PageWrapper>
   );
 }
-
-async function loader({ params }) {
-  const { id } = params;
-  const detail = await getProduct(id);
-
-  return { detail };
-}
-
-ItemModifyPage.loader = loader;
diff --git a/src/pages/items/ItemModifyPage.loader.js b/src/pages/items/ItemModifyPage.loader.js
@@ -0,0 +1,8 @@
+import { getProduct } from "@service/product";
+
+export default async function loader({ params }) {
+  const { id } = params;
+  const detail = await getProduct(id);
+
+  return { detail };
+}
diff --git a/src/pages/items/components/ProductDetail.jsx b/src/pages/items/components/ProductDetail.jsx
@@ -1,6 +1,5 @@
 import { Link, useNavigate, useRevalidator } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
-import { deleteProduct, toggleLike } from "@service/product";
 import {
   Chip,
   Thumbnail,
@@ -11,6 +10,7 @@ import {
 import { More } from "@components/Button";
 import { toWon } from "@util/formatter";
 import styles from "./ProductDetail.module.scss";
+import useProductActions from "./useProductActions";
 
 export default function ProductDetail({ detail }) {
   const {
@@ -31,13 +31,14 @@ export default function ProductDetail({ detail }) {
   } = useAuth();
   const navigate = useNavigate();
   const { revalidate } = useRevalidator();
+  const { handleLike, handleProductDelete } = useProductActions(id);
   const isOwner = ownerId === user?.id;
 
   async function handleToggleLike() {
     if (!user) {
       return alert("로그인이 필요합니다.");
     }
-    await toggleLike(id, !isFavorite);
+    await handleLike(!isFavorite);
     revalidate();
   }
 
@@ -56,7 +57,7 @@ export default function ProductDetail({ detail }) {
 
     if (confirm("정말 삭제할까요?")) {
       try {
-        await deleteProduct(id);
+        await handleProductDelete(id);
         alert("상품을 삭제했습니다.");
         navigate("/items");
       } catch (err) {

diff --git a/src/pages/items/components/useProductActions.js b/src/pages/items/components/useProductActions.js
@@ -0,0 +1,56 @@
+import {
+  addProduct,
+  deleteProduct,
+  modifyProduct,
+  toggleLike,
+  uploadProductImage,
+} from "@service/product";
+
+export default function useProductActions(productId) {
+  async function handleLike(flag) {
+    return toggleLike(productId, flag);
+  }
+
+  async function handleProductAdd(formData) {
+    try {
+      if (formData.images) {
+        const imgFormData = new FormData();
+        imgFormData.append("image", formData.images);
+
+        const { url } = await uploadProductImage(imgFormData);
+        formData.images = [url];
+      }
+
+      await addProduct(formData);
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  async function handleProductModify(prevData, formData) {
+    try {
+      if (formData.images !== prevData.images[0]) {
+        const imgFormData = new FormData();
+        imgFormData.append("image", formData.images);
+
+        const { url } = await uploadProductImage(imgFormData);
+        formData.images = [url];
+      }
+
+      await modifyProduct(productId, formData);
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  async function handleProductDelete() {
+    return deleteProduct(productId);
+  }
+
+  return {
+    handleLike,
+    handleProductAdd,
+    handleProductModify,
+    handleProductDelete,
+  };
+}
diff --git a/src/pages/items/components/useProductList.js b/src/pages/items/components/useProductList.js
@@ -1,9 +1,15 @@
 import { useEffect } from "react";
+import { getProducts } from "@service/product";
 import useAsync from "@hooks/useAsync";
 
-export default function useProductList(fetchFn, params) {
+export default function useProductList(params) {
   const { page, pageSize, keyword, orderBy } = params;
-  const { isLoading, error, result, wrappedFn: getData } = useAsync(fetchFn);
+  const {
+    isLoading,
+    error,
+    result,
+    wrappedFn: getData,
+  } = useAsync(getProducts);
   const items = result?.list || [];
   const totalCount = result?.totalCount || 0;
 

diff --git a/src/router.jsx b/src/router.jsx
@@ -14,6 +14,9 @@ import ItemModifyPage from "./pages/items/ItemModifyPage";
 import BoardPage from "./pages/boards/BoardPage";
 import { Loading } from "@components/ui/Loading";
 
+import ItemDetailPageLoader from "./pages/items/ItemDetailPage.loader";
+import ItemModifyPageLoader from "./pages/items/ItemModifyPage.loader";
+
 export const router = createBrowserRouter(
   [
     {
@@ -62,7 +65,7 @@ export const router = createBrowserRouter(
                   hydrateFallbackElement: (
                     <Loading>정보를 가져오는 중입니다..</Loading>
                   ),
-                  loader: ItemDetailPage.loader,
+                  loader: ItemDetailPageLoader,
                 },
               ],
             },
@@ -84,7 +87,7 @@ export const router = createBrowserRouter(
               hydrateFallbackElement: (
                 <Loading>정보를 가져오는 중입니다..</Loading>
               ),
-              loader: ItemModifyPage.loader,
+              loader: ItemModifyPageLoader,
             },
             {
               path: "boards",