refactor : 커뮤니티 디테일 페이지 factory 생성

src/components/community/PostDetailIndex.tsx

@@ -6,9 +6,6 @@ import WriteCommentLayout from './comments/WriteCommentLayout';
 import { useModalStore } from '@/store/modal.store';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { useQuery } from 'react-query';
-import { getPostDetail } from './remote/post';
-import ConfirmModal from './shared/modal/ConfirmModal';
 
 const DeleteModal = dynamic(() => import('./shared/modal/DeleteModal'), { ssr: false });
 
@@ -17,19 +14,11 @@ const PostDetailIndex = () => {
   const router = useRouter();
   const { id } = router.query as { id: string };
 
-  const { data: postData } = useQuery(['post', id], () => getPostDetail(id), {
-    enabled: id != null
-  });
-
-  if (postData?.status == 'FAIL') {
-    return <ConfirmModal />;
-  }
-
   return (
     <div className="mx-4">
       <div className="h-[60px]" />
       <ToBackComunity />
-      <PostDetail postData={postData && postData} />
+      <PostDetail />
       {/* 구분선 */}
       <div className="w-full h-1 bg-gray-100" />
       {/* 댓글자리 */}

src/components/community/factory/postDetailFactory.ts

@@ -0,0 +1,28 @@
+import { useQuery } from 'react-query';
+import { useEnumToTag } from '../hooks/useEnumToTag';
+import { useEnumToCategory } from '../hooks/useEnumToCategory';
+import { getPostDetail } from '../remote/post';
+
+export const usePostDetail = (postId: string) => {
+  const { data: postData, ...queryProps } = useQuery(
+    ['post', postId],
+    () => getPostDetail(postId),
+    {
+      enabled: postId != null
+    }
+  );
+
+  const tag = useEnumToTag(postData?.tag);
+  const category = useEnumToCategory(postData?.category);
+  const heartImg = postData?.isLiked
+    ? '/community/colorHeart.svg'
+    : '/community/heart.svg';
+
+  return {
+    postData,
+    tag,
+    category,
+    heartImg,
+    ...queryProps
+  };
+};

src/components/community/shared/PostDetail.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { formatDate, formatTime } from '@/utils/invertFullTime';
 import { useModalStore } from '@/store/modal.store';
-import { PostDetailDataType } from '../model/postDetailType';
 import { useMutation, useQueryClient } from 'react-query';
 import { cancelLike, registerLike } from '../remote/post';
-import { useEnumToTag } from '../hooks/useEnumToTag';
-import { useEnumToCategory } from '../hooks/useEnumToCategory';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { usePostDetail } from '../factory/postDetailFactory';
 
-interface PostDetailType {
-  postData: PostDetailDataType;
-}
+const PostDetail = () => {
+  const router = useRouter();
+  const { id } = router.query as { id: string };
+
+  const { postData, tag, category, heartImg } = usePostDetail(id);
 
-const PostDetail = ({ postData }: PostDetailType) => {
   const queryClient = useQueryClient();
   const { setOpen, setDeleteId, setCategory } = useModalStore();
 
@@ -36,9 +36,6 @@ const PostDetail = ({ postData }: PostDetailType) => {
     }
   );
 
-  const tag = useEnumToTag(postData?.tag);
-  const category = useEnumToCategory(postData?.category);
-
   if (postData == null) {
     return null;
   }
@@ -98,7 +95,7 @@ const PostDetail = ({ postData }: PostDetailType) => {
       {/* 사진자리 */}
       {(postData.images?.length as number) > 0 ? (
         <div className="flex flex-col gap-2 mt-5">
-          {postData.images?.map((image, i) => (
+          {postData.images?.map((image: string, i: number) => (
             <div className="w-[360px] h-[280px]" key={i}>
               <Image
                 width={360}
@@ -138,11 +135,7 @@ const PostDetail = ({ postData }: PostDetailType) => {
             }
           }}
           className="flex items-center justify-center gap-1 cursor-pointer">
-          {postData.isLiked ? (
-            <img src="/community/colorHeart.svg" alt="" />
-          ) : (
-            <img src="/community/heart.svg" alt="" />
-          )}
+          <img src={heartImg} alt="" />
 
           <div className="flex items-center justify-center gap-1">
             <div>좋아요</div>