From 9cd260eb6c536389bedbb7ed3f88444594caf6f5 Mon Sep 17 00:00:00 2001 From: LuisKlopp Date: Mon, 2 Jan 2023 23:06:49 +0900 Subject: [PATCH] =?UTF-8?q?feat:api=ED=86=B5=EC=8B=A0=20=EB=B0=8F=20?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/API/communityApi.ts | 18 ++++++++ src/components/Community.tsx | 55 ++++++++++++++++++++++++ src/pages/community/CommunityCreate.tsx | 4 +- src/pages/community/CommunityDetail.tsx | 9 ++++ src/pages/community/CommunityList.tsx | 56 +++++++------------------ src/types/communityType.ts | 28 +++++++++++++ 6 files changed, 126 insertions(+), 44 deletions(-) create mode 100644 src/API/communityApi.ts create mode 100644 src/components/Community.tsx create mode 100644 src/types/communityType.ts diff --git a/src/API/communityApi.ts b/src/API/communityApi.ts new file mode 100644 index 0000000..117a07d --- /dev/null +++ b/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(["community"], async () => { + const { data } = await instance.get(`api/community/${communityId}`); + return data.data; + }); + }, +}; diff --git a/src/components/Community.tsx b/src/components/Community.tsx new file mode 100644 index 0000000..19bcd79 --- /dev/null +++ b/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 ( +
+
+

IT에 관한 모든 이야기

+
+
+
+
+
+
+ +
+

잇다매니아

+

등록일: 2022-11-22

+
+
+ +
+
+

내용입니다 내용내용내용...더보기 기능 붙일 예정

+
+
+ image navigate("/community/1")} + /> + {/*
+ + 32개 +
*/} +
+
+ + 32개 +
+
+
+
+
+ ); +}; + +export default Community; diff --git a/src/pages/community/CommunityCreate.tsx b/src/pages/community/CommunityCreate.tsx index 5fd41cf..4943a48 100644 --- a/src/pages/community/CommunityCreate.tsx +++ b/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; diff --git a/src/pages/community/CommunityDetail.tsx b/src/pages/community/CommunityDetail.tsx index ab05bd7..af7e142 100644 --- a/src/pages/community/CommunityDetail.tsx +++ b/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 (
diff --git a/src/pages/community/CommunityList.tsx b/src/pages/community/CommunityList.tsx index 0623ca7..55bf6ba 100644 --- a/src/pages/community/CommunityList.tsx +++ b/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 (
-
-

IT에 관한 모든 이야기

-
-
-
-
-
-
- -
-

잇다매니아

-

등록일: 2022-11-22

-
-
- -
-
-

내용입니다 내용내용내용...더보기 기능 붙일 예정

-
-
- image navigate("/community/1")} - /> - {/*
- - 32개 -
*/} -
-
- - 32개 -
-
-
-
+ {communityData?.map((data: ICommunityData) => { + return ( + + + + ); + })}
); } diff --git a/src/types/communityType.ts b/src/types/communityType.ts new file mode 100644 index 0000000..d7c111d --- /dev/null +++ b/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; +}