useAsync 커스텀훅 추가

src/hooks/useAsync.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from "react";
+
+function useAsync(asyncFunction, arg) {
+  //  pending, error 상태값을 status: '대기중', '로딩중' , '완료', '에러'로 바꾸기
+  const [fetchStatus, setFetchStatus] = useState("");
+  const [data, setData] = useState({});
+  const getFetchData = useCallback(async () => {
+    setFetchStatus("대기중");
+
+    try {
+      const getData = await asyncFunction(arg);
+      if (!getData) {
+        throw new Error("데이터를 불러오지 못했습니다.");
+      }
+      setData((data) => ({ ...data, getData }));
+    } catch (error) {
+      setFetchStatus("에러");
+    } finally {
+      setFetchStatus("완료");
+    }
+  }, [arg, asyncFunction]);
+
+  useEffect(() => {
+    getFetchData();
+  }, [getFetchData]);
+
+  return [fetchStatus, data];
+}
+export default useAsync;

src/pages/ProductPage/ProductPage.jsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import styled from "styled-components";
 import { getDetailProduct } from "../../api/api";
 import ProductInfo from "./components/ProductInfo";
 import InquiryCommentBox from "./components/InquiryCommentBox";
 import { TbArrowBack } from "react-icons/tb";
+import useAsync from "../../hooks/useAsync";
 
 const Container = styled.div`
   max-width: 75rem;
@@ -28,47 +28,21 @@ const Loading = styled.div`
 `;
 
 function ProductPage(props) {
-  const [product, setProduct] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const { productId } = useParams();
-
-  const fetchProduct = useCallback(async (id) => {
-    if (!id) {
-      setError("id값이 없어요.");
-      setIsLoading(true);
-      return;
-    }
-    try {
-      const productInfo = await getDetailProduct(id);
-      if (!productInfo) {
-        throw new Error("데이터를 불러오지 못했습니다.");
-      }
-      setProduct(productInfo);
-    } catch (error) {
-      setError(error.message);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchProduct(productId);
-  }, [fetchProduct, productId]);
-
-  if (error) {
+  const productId = useParams();
+  const [fetchStatus, data] = useAsync(getDetailProduct, productId);
+  const { getData: product } = data;
+  if (fetchStatus === "에러") {
     alert("error");
     return;
   }
 
-  if (isLoading) {
+  if (fetchStatus !== "완료") {
     return <Loading>loading중</Loading>;
   }
 
   return (
     <>
-      {!isLoading && (
+      {fetchStatus === "완료" && (
         <Container>
           <ProductInfo product={product} />
           <InquiryCommentBox productId={productId} />

src/pages/ProductPage/components/InquiryCommentBox.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import CommentCard from "./CommentCard";
 import { getComments } from "../../../api/api";
 import styled from "styled-components";
 import inquiryEmptyImg from "../../../images/Img_inquiry_empty.png";
+import useAsync from "../../../hooks/useAsync";
 
 const InquiryCommentForm = styled.form`
   display: flex;
@@ -48,13 +49,10 @@ const InquiryEmptyText = styled.p`
 `;
 
 function InquiryCommentBox({ productId }) {
-  const [comments, setComments] = useState();
+  const [fetchStatus, data] = useAsync(getComments, productId);
+  const { getData: comments } = data;
   const [comment, setComment] = useState();
 
-  const fetchComments = async (id) => {
-    const commentsData = await getComments(id);
-    setComments(commentsData);
-  };
   const handleInputChange = (e) => {
     const commentValue = e.target.value;
     setComment(commentValue);
@@ -63,10 +61,6 @@ function InquiryCommentBox({ productId }) {
     e.preventDefault();
   };
 
-  useEffect(() => {
-    fetchComments(productId);
-  }, [productId]);
-
   return (
     <>
       <InquiryCommentForm onSubmit={handleCommentSubmit}>
@@ -81,16 +75,17 @@ function InquiryCommentBox({ productId }) {
         </SubmitCommentBtn>
       </InquiryCommentForm>
 
-      {comments?.list.length === 0 ? (
-        <InquiryEmptyBox>
-          <InquiryEmptyImg src={inquiryEmptyImg} />
-          <InquiryEmptyText>아직 문의가 없습니다.</InquiryEmptyText>
-        </InquiryEmptyBox>
-      ) : (
-        comments?.list.map((comment) => (
-          <CommentCard key={comment.id} comment={comment} />
-        ))
-      )}
+      {fetchStatus === "완료" &&
+        (comments.list.length === 0 ? (
+          <InquiryEmptyBox>
+            <InquiryEmptyImg src={inquiryEmptyImg} />
+            <InquiryEmptyText>아직 문의가 없습니다.</InquiryEmptyText>
+          </InquiryEmptyBox>
+        ) : (
+          comments.list.map((comment) => (
+            <CommentCard key={comment.id} comment={comment} />
+          ))
+        ))}
     </>
   );
 }