feat: 리액트쿼리 진행중

src/API/communityApi.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { formDataInstance, instance } from "../config/axios";
+import { ICommunityInfo } from "../types/communityType";
+
+export const communityApi = {
+  getCommunityList: () => {
+    return useQuery(["community"], async () => {
+      const { data } = await instance.get("api/community");
+      return data;
+    });
+  },
+  getCommunityDetail: (communityId: number) => {
+    return useQuery<ICommunityInfo>(["community"], async () => {
+      const { data } = await instance.get(`api/community/${communityId}`);
+      return data.data;
+    });
+  },
+};

src/components/Community.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { MenuIcon, CommentIcon } from "../assets/icons";
+import { ICommunityData } from "../types/communityType";
+const Community = (props: { data: ICommunityData }) => {
+  const { data } = props;
+  const navigate = useNavigate();
+  return (
+    <div>
+      <div className="flex justify-center mt-4 py-4 mx-4">
+        <h1 className="text-xl font-bold text-center">IT에 관한 모든 이야기</h1>
+      </div>
+      <div className="w-full h-fit border-b-8 border-[#D9D9D9]">
+        <div className="w-full h-fit">
+          <div className="px-8 w-full h-fit">
+            <div className="flex mt-3 justify-between border-b py-[11px]">
+              <div className="flex">
+                <img
+                  src={`https://avatars.githubusercontent.com/u/108189281?v=4`}
+                  className="w-10 h-10 rounded-full mx-2"
+                />
+                <div>
+                  <p className="font-bold">잇다매니아</p>
+                  <p>등록일: 2022-11-22</p>
+                </div>
+              </div>
+              <MenuIcon cursor="pointer" />
+            </div>
+            <div className="my-4 text-center">
+              <p>내용입니다 내용내용내용...더보기 기능 붙일 예정</p>
+            </div>
+          </div>
+          <img
+            src="https://picsum.photos/480/220"
+            alt="image"
+            className="cursor-pointer"
+            onClick={() => navigate("/community/1")}
+          />
+          {/* <div className="px-8 h-[50px] flex items-center">
+            <CommentIcon cursor="pointer" />
+            <span className="pl-1 font-bold">32개</span>
+          </div> */}
+          <div className="px-[20px] flex items-center border-b h-[70px]">
+            <div className="flex items-center">
+              <CommentIcon cursor="pointer" />
+              <span className="font-bold ml-[10px]">32개</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Community;

src/pages/community/CommunityCreate.tsx

@@ -3,7 +3,7 @@ import { CameraIcon, CancelIcon } from "../../assets/icons";
 import ArrowUpToggle from "../../elements/ArrowUpToggle";
 import useMultiUploadImg from "../../hooks/useMultiUploadImg";
 
-const PostCreate = () => {
+const CommunityCreate = () => {
   const [uploadImg, uploadImgHandler, onDeleteImg] = useMultiUploadImg(5);
   const [categoryTg, setCategoryTg] = useState(false);
   const [content, setContent] = useState("");
@@ -111,4 +111,4 @@ const PostCreate = () => {
   );
 };
 
-export default PostCreate;
+export default CommunityCreate;

src/pages/community/CommunityDetail.tsx

@@ -2,8 +2,17 @@ import { MenuIcon, CommentIcon } from "../../assets/icons";
 import ImageCarousel from "../../components/ImageCarousel";
 import Comment from "../../components/Comment";
 import { productImages } from "../../data/productImages";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { communityApi } from "../../API/communityApi";
 
 function CommunityDetail() {
+  const { id } = useParams();
+
+  const { data, isLoading, isSuccess } = communityApi.getCommunityDetail(
+    Number(id),
+  );
+  console.log(data, isLoading, isSuccess);
   return (
     <div className="w-full h-fit">
       <div className="flex justify-center mt-4 py-4 mx-4">

src/pages/community/CommunityList.tsx

@@ -1,51 +1,23 @@
+import { Fragment } from "react";
 import { useNavigate } from "react-router-dom";
-import { MenuIcon, CommentIcon } from "../../assets/icons";
+import { communityApi } from "../../API/communityApi";
+import Community from "../../components/Community";
+import { ICommunityData } from "../../types/communityType";
 
 function CommunityList() {
   const navigate = useNavigate();
+  const { data } = communityApi.getCommunityList();
+  const communityData = data?.data;
+  console.log(communityData);
   return (
     <div>
-      <div className="flex justify-center mt-4 py-4 mx-4">
-        <h1 className="text-xl font-bold text-center">IT에 관한 모든 이야기</h1>
-      </div>
-      <div className="w-full h-fit border-b-8 border-[#D9D9D9]">
-        <div className="w-full h-fit">
-          <div className="px-8 w-full h-fit">
-            <div className="flex mt-3 justify-between border-b py-[11px]">
-              <div className="flex">
-                <img
-                  src={`https://avatars.githubusercontent.com/u/108189281?v=4`}
-                  className="w-10 h-10 rounded-full mx-2"
-                />
-                <div>
-                  <p className="font-bold">잇다매니아</p>
-                  <p>등록일: 2022-11-22</p>
-                </div>
-              </div>
-              <MenuIcon cursor="pointer" />
-            </div>
-            <div className="my-4 text-center">
-              <p>내용입니다 내용내용내용...더보기 기능 붙일 예정</p>
-            </div>
-          </div>
-          <img
-            src="https://picsum.photos/480/220"
-            alt="image"
-            className="cursor-pointer"
-            onClick={() => navigate("/community/1")}
-          />
-          {/* <div className="px-8 h-[50px] flex items-center">
-            <CommentIcon cursor="pointer" />
-            <span className="pl-1 font-bold">32개</span>
-          </div> */}
-          <div className="px-[20px] flex items-center border-b h-[70px]">
-            <div className="flex items-center">
-              <CommentIcon cursor="pointer" />
-              <span className="font-bold ml-[10px]">32개</span>
-            </div>
-          </div>
-        </div>
-      </div>
+      {communityData?.map((data: ICommunityData) => {
+        return (
+          <Fragment key={data.commuId}>
+            <Community data={data}></Community>
+          </Fragment>
+        );
+      })}
     </div>
   );
 }

src/types/communityType.ts

@@ -0,0 +1,28 @@
+import { Key } from "react";
+
+export interface ICommunityInfo {
+  userId: number;
+  commuId: number;
+  title: string;
+  content: string;
+  imgUrl: string;
+  comment: IComment[];
+}
+
+interface IComment {
+  userId: number;
+  commentId: number;
+  content: string;
+}
+
+export interface ICommunityData {
+  commuId: Key | null | undefined | number;
+  commentsCnt: number;
+  content: string;
+  createdAt: string;
+  imgNames: string[];
+  imgUrls: string[];
+  title: string;
+  userId: number;
+  username: string;
+}