From 6d1c805c9d9bc8e534e55e755880eddd0879a477 Mon Sep 17 00:00:00 2001 From: daeun heo <60952506+nno3onn@users.noreply.github.com> Date: Tue, 14 Mar 2023 22:24:57 +0900 Subject: [PATCH 1/7] Delete .DS_Store --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 295f858c6b65fa06d1b869367e8f666553b7553b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK!AiqG5Z!I7O(;SR3OxqA7HzGzh?f}a!K)EHsMMq>8jRV}r1nq>IqMJkCH{`i z>~4foy?78TGcfx$vojm!ZP>{$#<)8PTZ~zZF#{B_WWw-`;5zD(l(eM`$Z-!b2x1Yy z6K+TH9~i*1E3=f1+2AZ*IKN|9+4+zn6VYD5G#%+vehWr%lxEH5J1>yNMT=|YG&DCT}}84ag>Yx6`TnI9#?u?&d9A-LRJMM)^8u9zfYDq}sh zV3>y4x9YQ5_n_0T+pX@rVb2ctnhkru-I>o#V{3c&=)C_JKPBQt5zpb9l(M0*fLEC4 zY@WSw5{u*>EQNRBMMw+~1H{1UGN5lfqqe#!Qf9;eG4M+U@P4pC5gm=WLV0z-AX@;y z3Yew9T>kt6+GqfDH0BDy0>V`&pbF)>#o)Sk;3^!}9qpehRN;)vH^V;q&0KdVT(=(F zmhOx@3TY$;h=D~0u=fM8u>PO^-2Y1_8i)a6U^N-wm7dpgAvaxHm$JlKYlGf_qM%={ m@GAr+vJ`_amf||76tLSk0dzFx3c&(GKLU~l8i;{EW#AKKG*a#W From ea331da1ee827baab2dc55d5de499542e0a6584a Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 18 Mar 2023 12:25:21 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC,=20=EC=B1=84=EB=84=90=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/community.ts | 18 +++ .../molecules/Modal/CreateCategoryModal.tsx | 106 ++++++++++++++ .../molecules/Modal/CreateChannelModal.tsx | 129 ++++++++++++++++++ src/hooks/query/useCreateCatergory.ts | 8 ++ src/hooks/query/useCreateChanel.ts | 8 ++ src/store/useModalStore.ts | 4 +- 6 files changed, 272 insertions(+), 1 deletion(-) create mode 100644 src/components/molecules/Modal/CreateCategoryModal.tsx create mode 100644 src/components/molecules/Modal/CreateChannelModal.tsx create mode 100644 src/hooks/query/useCreateCatergory.ts create mode 100644 src/hooks/query/useCreateChanel.ts diff --git a/src/api/community.ts b/src/api/community.ts index cdf742d..df8365c 100644 --- a/src/api/community.ts +++ b/src/api/community.ts @@ -5,6 +5,24 @@ const communityApi = { create: async ({ formData }: any) => { return await clientApi.post("/community/create", formData); }, + //카테고리 생성 + createCategory: async ({ name, communityId, role }: any) => { + return await clientApi.post("/community/createchannel", { + name, + communityId, + role, + }); + }, + + // 채널 생성 + createChannel: async ({ name, categoryId, role, type }: any) => { + return await clientApi.post("/community/createcategory", { + name, + categoryId, + role, + type, + }); + }, // 커뮤니티 이름 변경 update: async ({ communityName, communityId, userId }: any) => { diff --git a/src/components/molecules/Modal/CreateCategoryModal.tsx b/src/components/molecules/Modal/CreateCategoryModal.tsx new file mode 100644 index 0000000..51763d1 --- /dev/null +++ b/src/components/molecules/Modal/CreateCategoryModal.tsx @@ -0,0 +1,106 @@ +import styled from "styled-components"; +import useInput from "@hooks/common/useInput"; +import DefaultInput from "@components/atoms/Input/DefaultInput"; +import { useMutation } from "@tanstack/react-query"; +import { useNavigate, useParams } from "react-router-dom"; +import { useUserStore } from "@store/useUserStore"; +import { useState } from "react"; +import communityApi from "@api/community"; +import CreateCommunityText from "@components/molecules/Text/CreateCommunityText"; +import BackgroundModal from "@components/organisms/BackgroundModal"; +import ImageUploadButton from "@components/molecules/Button/ImageUploadButton"; +import DefaultButton from "@components/atoms/Button/DefaultButton"; +import CancelIcon from "@components/atoms/Icons/CancelIcon"; +import useModalStore from "@store/useModalStore"; +import Text from "@components/atoms/Text/Text"; + +const CreateCategroyModal = () => { + const navigate = useNavigate(); + + let formData = new FormData(); + + const { userInfo } = useUserStore(); + const { setShowModal } = useModalStore(); + const [name, changeName] = useInput(); + const [type, setType] = useState(); + const [role, setRole] = useState(); + //userInfo에 role이 없었던가? + const [categoryId, setCategoryId] = useState(); + const { communityId } = useParams(); + const { mutate: createCategory } = useMutation(communityApi.createCategory, { + onSuccess: () => { + navigate(-1); + }, + }); + + const MakeCategory = () => { + createCategory({ name, communityId, role }); + navigate(-1); + }; + + const closeModal = () => { + setShowModal(false); + }; + + return ( + + <> + + + + + + + + + + + + + + + + + ); +}; + +const CreateCommunityHeader = styled.div` + padding: 1.5rem 1.5rem 0; +`; + +const CancelIconWrapper = styled.div` + width: 100%; + color: ${({ theme }) => theme.color.icon}; + + display: flex; + justify-content: end; + + cursor: pointer; +`; + +const CreateCommunityBody = styled.div` + margin: 1rem 0; + padding: 0 0.5rem 0 1rem; +`; + +const CreateCommunityFooter = styled.div` + padding: 16px; + background-color: ${({ theme }) => theme.backgroundColor["grey-7"]}; + + display: flex; + justify-content: space-between; +`; + +export default CreateCategroyModal; diff --git a/src/components/molecules/Modal/CreateChannelModal.tsx b/src/components/molecules/Modal/CreateChannelModal.tsx new file mode 100644 index 0000000..7f5dcb4 --- /dev/null +++ b/src/components/molecules/Modal/CreateChannelModal.tsx @@ -0,0 +1,129 @@ +import styled from "styled-components"; +import useInput from "@hooks/common/useInput"; +import DefaultInput from "@components/atoms/Input/DefaultInput"; +import { useMutation } from "@tanstack/react-query"; +import { useNavigate, useParams } from "react-router-dom"; +import { useUserStore } from "@store/useUserStore"; +import { useState } from "react"; +import communityApi from "@api/community"; +import CreateCommunityText from "@components/molecules/Text/CreateCommunityText"; +import BackgroundModal from "@components/organisms/BackgroundModal"; +import ImageUploadButton from "@components/molecules/Button/ImageUploadButton"; +import DefaultButton from "@components/atoms/Button/DefaultButton"; +import CancelIcon from "@components/atoms/Icons/CancelIcon"; +import useModalStore from "@store/useModalStore"; +import Text from "@components/atoms/Text/Text"; + +const CreateChannelModal = () => { + const navigate = useNavigate(); + + let formData = new FormData(); + + const { userInfo } = useUserStore(); + const { setShowModal } = useModalStore(); + const [name, changeName] = useInput(); + const [type, setType] = useState(); + const [role, setRole] = useState(); + //userInfo에 role이 없었던가? + const [categoryId, setCategoryId] = useState(); + const { mutate: createChannel } = useMutation(communityApi.createChannel, { + onSuccess: () => { + navigate(-1); + }, + }); + + const MakeChannel = () => { + createChannel({ name, categoryId, type, role }); + navigate(-1); + }; + + const closeModal = () => { + setShowModal(false); + }; + const radioHandler = (event: React.ChangeEvent) => { + setType(event.target.value); + }; + + return ( + + <> + + + + + + + + +

+ + +

+ +

+ + +

+ + + + + + + + + ); +}; + +const CreateCommunityHeader = styled.div` + padding: 1.5rem 1.5rem 0; +`; + +const CancelIconWrapper = styled.div` + width: 100%; + color: ${({ theme }) => theme.color.icon}; + + display: flex; + justify-content: end; + + cursor: pointer; +`; + +const CreateCommunityBody = styled.div` + margin: 1rem 0; + padding: 0 0.5rem 0 1rem; +`; + +const CreateCommunityFooter = styled.div` + padding: 16px; + background-color: ${({ theme }) => theme.backgroundColor["grey-7"]}; + + display: flex; + justify-content: space-between; +`; + +export default CreateChannelModal; diff --git a/src/hooks/query/useCreateCatergory.ts b/src/hooks/query/useCreateCatergory.ts new file mode 100644 index 0000000..10795ca --- /dev/null +++ b/src/hooks/query/useCreateCatergory.ts @@ -0,0 +1,8 @@ +import { useMutation } from "@tanstack/react-query"; +import communityApi from "@api/community"; + +const useCreateCategory = () => { + return useMutation(communityApi.createCategory); +}; + +export default useCreateCategory; diff --git a/src/hooks/query/useCreateChanel.ts b/src/hooks/query/useCreateChanel.ts new file mode 100644 index 0000000..638d5ff --- /dev/null +++ b/src/hooks/query/useCreateChanel.ts @@ -0,0 +1,8 @@ +import { useMutation } from "@tanstack/react-query"; +import communityApi from "@api/community"; + +const useCreateChannel = () => { + return useMutation(communityApi.createChannel); +}; + +export default useCreateChannel; diff --git a/src/store/useModalStore.ts b/src/store/useModalStore.ts index a246307..dd40880 100644 --- a/src/store/useModalStore.ts +++ b/src/store/useModalStore.ts @@ -6,7 +6,9 @@ export type ModalType = | "inviteFriend" | "userSetting" | "communitySetting" - | "createCommunity"; + | "createCommunity" + | "createCategory" + | "createChannel"; interface ModalState { showModal: boolean; From 282483208bf7860b22c5a8fa4a7518558e313d0c Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 18 Mar 2023 17:09:22 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=B1=84=EB=84=90=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1,=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EA=B4=80=EB=A0=A8=20=EB=AA=A8=EB=8B=AC=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20+=20API=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20-=20@nno3onn=20=EB=8B=A4=EC=9D=80=EB=8B=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=95=9C=EA=B1=B0=20merge=20=ED=95=B4?= =?UTF-8?q?=EC=A4=98=EC=95=BC=20=ED=95=A8=20-=20=EB=AC=B4=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=20=ED=84=B0=EC=A7=88=EB=93=AF=20-=20=EC=97=AC?= =?UTF-8?q?=ED=8A=BC=20=EA=B7=B8=EB=9F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/community.ts | 38 ++++-- src/components/atoms/Div/CommunityLogo.tsx | 6 +- .../molecules/Div/CommunityRoomButton.tsx | 4 +- .../molecules/Modal/CreateCategoryModal.tsx | 16 +-- .../molecules/Modal/CreateChannelModal.tsx | 71 +++++----- .../organisms/Modal/CreateCommunityModal.tsx | 18 +-- .../organisms/Tab2CommunityBody.tsx | 129 +++++++++++------- src/hooks/query/useGetCategoryList.ts | 13 ++ src/hooks/query/useGetChannelList.ts | 7 +- src/hooks/query/useGetCommunityList.ts | 48 +++---- src/pages/Common.tsx | 4 + 11 files changed, 204 insertions(+), 150 deletions(-) create mode 100644 src/hooks/query/useGetCategoryList.ts diff --git a/src/api/community.ts b/src/api/community.ts index df8365c..7ee3b59 100644 --- a/src/api/community.ts +++ b/src/api/community.ts @@ -3,11 +3,11 @@ import clientApi from "./axios"; const communityApi = { // 커뮤니티 생성 create: async ({ formData }: any) => { - return await clientApi.post("/community/create", formData); + return await clientApi.post("/community/createcommunity", formData); }, //카테고리 생성 createCategory: async ({ name, communityId, role }: any) => { - return await clientApi.post("/community/createchannel", { + return await clientApi.post("/community/createcategory", { name, communityId, role, @@ -15,12 +15,13 @@ const communityApi = { }, // 채널 생성 - createChannel: async ({ name, categoryId, role, type }: any) => { - return await clientApi.post("/community/createcategory", { + createChannel: async ({ name, categoryId, communityId, role, type }: any) => { + return await clientApi.post("/community/createchannel", { name, categoryId, role, type, + communityId, }); }, @@ -43,22 +44,33 @@ const communityApi = { return await clientApi.patch("/community/imgupload", formData); }, + // 커뮤니티 리스트 가져옴 - 옛날 버전 + // getList: async ({ queryKey }: any) => { + // const { userId } = queryKey[1]; + // return await clientApi.get(`/community/showcommunitys`, { + // params: { userId }, + // }); + // }, + // 커뮤니티 리스트 가져옴 - getList: async ({ queryKey }: any) => { - const { userId } = queryKey[1]; - return await clientApi.get(`/community/getlist`, { - params: { userId }, - }); + getList: async () => { + return await clientApi.get(`/community/showcommunitys`); + }, + // 커뮤니티의 카테고리 가져옴 + getCategoryList: async ({ queryKey }: any) => { + const { communityId } = queryKey[1]; + return await clientApi.get(`/community/categorys/${communityId}`); }, - // 커뮤니티의 카테고리 리스트 가져옴 + // 커뮤니티의 채널 가져옴 getChannelList: async ({ queryKey }: any) => { const { communityId } = queryKey[1]; - return await clientApi.get(`/community/getoption`, { - params: { communityId }, - }); + return await clientApi.get(`/community/channels/${communityId}`); }, + // 커뮤니티 멤버 목록 가져오기 + // getCommunityMemberList: async({}) + sendInvite: async ({ communityId, userId, shortUrl }: any) => { return await clientApi.post(`/invite/member`, { communityId, diff --git a/src/components/atoms/Div/CommunityLogo.tsx b/src/components/atoms/Div/CommunityLogo.tsx index 2b4f313..fe2ac52 100644 --- a/src/components/atoms/Div/CommunityLogo.tsx +++ b/src/components/atoms/Div/CommunityLogo.tsx @@ -26,7 +26,8 @@ const CommunityLogo = ({ const { communityStatus, setCommunityStatus } = useCommunityStore(); active = Number(communityStatus) === id; - const selectCommunity = () => { + const selectCommunity = (e: any) => { + e.stopPropagation(); if (id === -2) return; setCommunityStatus(id); }; @@ -37,7 +38,8 @@ const CommunityLogo = ({ selectCommunity(e)} + disabled > {/* borderRadius로 이미지 동그란 정도 조절하기 */} diff --git a/src/components/molecules/Div/CommunityRoomButton.tsx b/src/components/molecules/Div/CommunityRoomButton.tsx index 1c354f7..6937b19 100644 --- a/src/components/molecules/Div/CommunityRoomButton.tsx +++ b/src/components/molecules/Div/CommunityRoomButton.tsx @@ -8,7 +8,7 @@ import { useNavigate, useParams } from "react-router-dom"; import styled from "styled-components"; interface CommunityRoomButtonProps { - type: "chat" | "voice"; + type: "CHAT" | "VOICE"; text: string; communityId: string; channelId: number; @@ -44,7 +44,7 @@ const CommunityRoomButton = ({ > - {type === "chat" ? : } + {type === "CHAT" ? : }
diff --git a/src/components/molecules/Modal/CreateCategoryModal.tsx b/src/components/molecules/Modal/CreateCategoryModal.tsx index 51763d1..4eae91d 100644 --- a/src/components/molecules/Modal/CreateCategoryModal.tsx +++ b/src/components/molecules/Modal/CreateCategoryModal.tsx @@ -13,29 +13,24 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateCategory from "@hooks/query/useCreateCatergory"; const CreateCategroyModal = () => { const navigate = useNavigate(); - let formData = new FormData(); - const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [name, changeName] = useInput(); const [type, setType] = useState(); - const [role, setRole] = useState(); + const [role, setRole] = useState(0); //userInfo에 role이 없었던가? const [categoryId, setCategoryId] = useState(); const { communityId } = useParams(); - const { mutate: createCategory } = useMutation(communityApi.createCategory, { - onSuccess: () => { - navigate(-1); - }, - }); + const { mutate: createCategory } = useCreateCategory(); const MakeCategory = () => { createCategory({ name, communityId, role }); - navigate(-1); + closeModal(); }; const closeModal = () => { @@ -49,7 +44,8 @@ const CreateCategroyModal = () => { - + + diff --git a/src/components/molecules/Modal/CreateChannelModal.tsx b/src/components/molecules/Modal/CreateChannelModal.tsx index 7f5dcb4..707af59 100644 --- a/src/components/molecules/Modal/CreateChannelModal.tsx +++ b/src/components/molecules/Modal/CreateChannelModal.tsx @@ -13,6 +13,7 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateChannel from "@hooks/query/useCreateChanel"; const CreateChannelModal = () => { const navigate = useNavigate(); @@ -22,26 +23,28 @@ const CreateChannelModal = () => { const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [name, changeName] = useInput(); - const [type, setType] = useState(); - const [role, setRole] = useState(); + const { communityId } = useParams(); + const [type, setType] = useState(0); + const [role, setRole] = useState(0); //userInfo에 role이 없었던가? - const [categoryId, setCategoryId] = useState(); - const { mutate: createChannel } = useMutation(communityApi.createChannel, { - onSuccess: () => { - navigate(-1); - }, - }); - + const [categoryId, setCategoryId] = useState(10); + // const { mutate: createChannel } = useMutation(communityApi.createChannel, { + // onSuccess: () => { + // navigate(-1); + // }, + // }); + const { mutate: createChannel } = useCreateChannel(); const MakeChannel = () => { - createChannel({ name, categoryId, type, role }); - navigate(-1); + createChannel({ name, categoryId, communityId, type, role }); + closeModal(); }; const closeModal = () => { setShowModal(false); }; const radioHandler = (event: React.ChangeEvent) => { - setType(event.target.value); + setType(event.target.value === "CHAT" ? 0 : 1); + console.log(type); }; return ( @@ -51,31 +54,31 @@ const CreateChannelModal = () => { - + + -

- - -

- -

- - -

+
+ + +
diff --git a/src/components/organisms/Modal/CreateCommunityModal.tsx b/src/components/organisms/Modal/CreateCommunityModal.tsx index 24f35c2..ebf9e27 100644 --- a/src/components/organisms/Modal/CreateCommunityModal.tsx +++ b/src/components/organisms/Modal/CreateCommunityModal.tsx @@ -13,36 +13,26 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateCommunity from "@hooks/query/useCreateCommunity"; const CreateCommunityModal = () => { const navigate = useNavigate(); let formData = new FormData(); - const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [img, setImg] = useState(); const [name, changeName] = useInput(); - const [nickName, setNickName] = useState(userInfo.name); - const { mutate: createCommunity } = useMutation(communityApi.create, { - onSuccess: () => { - navigate(-1); - }, - }); + const { mutate: createCommunity } = useCreateCommunity(); const MakeCommunity = () => { formData.append("communityName", name); - formData.append("userId", JSON.stringify(userInfo.id)); if (!img) return 0; - formData.append("img", img); - formData.append( - "profile", - JSON.stringify({ userName: nickName, img: null, 한줄소개: "한줄소개" }) - ); + formData.append("file", img); + console.log(formData.get("communityName")); createCommunity({ formData }); - navigate(-1); }; const closeModal = () => { diff --git a/src/components/organisms/Tab2CommunityBody.tsx b/src/components/organisms/Tab2CommunityBody.tsx index f3f4ada..3886a49 100644 --- a/src/components/organisms/Tab2CommunityBody.tsx +++ b/src/components/organisms/Tab2CommunityBody.tsx @@ -6,6 +6,10 @@ import UserChannelOnBox from "@components/molecules/Div/UserChannelOnBox"; import { useUserStore } from "@store/useUserStore"; import UserFriendChannelOnBox from "@components/molecules/Div/UserFriendChannelOnBox"; import useGetFriendList from "@hooks/query/useGetFriendList"; +import AddIcon from "@components/atoms/Icons/AddIcon"; +import useModalStore from "@store/useModalStore"; +import useGetCommunityList from "@hooks/query/useGetCommunityList"; +import useGetCategoryList from "@hooks/query/useGetCategoryList"; interface ChannelType { channel_id: number; @@ -22,73 +26,102 @@ interface RoomType { const Tab2CommunityBody = () => { const navigate = useNavigate(); const { communityId, channelId } = useParams(); - - const { data: res, isSuccess } = useGetChannelList({ + const channelList = useGetChannelList({ + communityId, + }); + console.log(channelList); + const categoryList = useGetCategoryList({ communityId, }); const { userInfo } = useUserStore(); const { data: friendList } = useGetFriendList(userInfo.email); - const data = res?.data?.data; - if (!communityId || !isSuccess) return <>; + const { setModalType, setShowModal } = useModalStore(); + + const showCreateCategoryModal = () => { + setModalType("createCategory"); + setShowModal(true); + }; + + const showCreateChannelModal = () => { + setModalType("createChannel"); + setShowModal(true); + }; + + if (!communityId) + return ( + <> + + + + ); - const List = JSON.parse(JSON.stringify(data[0])).split("},"); - const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); - const channelList: ChannelType[] = []; - const roomList: RoomType[] = []; + // const List = JSON.parse(JSON.stringify(data[0])).split("},"); + // const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); + // const channelList: ChannelType[] = []; + // const roomList: RoomType[] = []; - if (List.length > 0 && channelList.length < List?.length) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - channelList.push(JSON.parse(List[i] + "}")); - } else { - channelList.push(JSON.parse(List[i])); - } - } - } - if (List2.length > 0 && roomList.length < List2?.length) { - for (let i = 0; i < List2?.length; i++) { - if (i !== List2.length - 1) { - roomList.push(JSON.parse(List2[i] + "}")); - } else { - roomList.push(JSON.parse(List2[i])); - } - } - } + // if (List.length > 0 && channelList.length < List?.length) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // channelList.push(JSON.parse(List[i] + "}")); + // } else { + // channelList.push(JSON.parse(List[i])); + // } + // } + // } + // if (List2.length > 0 && roomList.length < List2?.length) { + // for (let i = 0; i < List2?.length; i++) { + // if (i !== List2.length - 1) { + // roomList.push(JSON.parse(List2[i] + "}")); + // } else { + // roomList.push(JSON.parse(List2[i])); + // } + // } + // } - if (!channelId) { - let id; - for (let i = 0; i < roomList.length; i++) { - if (roomList[i]["type"] === 2) { - id = roomList[i]["channel_id"]; - break; - } - } - navigate(`/${channelId}/${id}`); - } + // if (!channelId) { + // let id; + // for (let i = 0; i < roomList.length; i++) { + // if (roomList[i]["type"] === 2) { + // id = roomList[i]["channel_id"]; + // break; + // } + // } + // navigate(`/${channelId}/${id}`); + // } return (
- {channelList.map((channel: any) => ( + + + {/* category = channel / room -> channel */} + {categoryList.map((category: any) => ( <> - - {roomList - .filter((room) => room["channel_id"] === channel["channel_id"]) - .map((room) => ( + + {channelList + .filter((channel: any) => category.id === channel.categoryId) + .map((channel: any) => ( <> - {room["channel_id"] === Number(channelId) && ( - - )} + {channel.id === Number(channelId) && } {friendList.map((friend: FriendType) => ( ))} diff --git a/src/hooks/query/useGetCategoryList.ts b/src/hooks/query/useGetCategoryList.ts new file mode 100644 index 0000000..b910faf --- /dev/null +++ b/src/hooks/query/useGetCategoryList.ts @@ -0,0 +1,13 @@ +import communityApi from "@api/community"; +import { useQuery } from "@tanstack/react-query"; + +const useGetCategoryList = ({ communityId }: any) => { + const { data } = useQuery( + ["categoryList", { communityId }], + communityApi.getCategoryList + ); + if (!data?.data?.data) return []; + return data?.data?.data; +}; + +export default useGetCategoryList; diff --git a/src/hooks/query/useGetChannelList.ts b/src/hooks/query/useGetChannelList.ts index f19674b..c5464f9 100644 --- a/src/hooks/query/useGetChannelList.ts +++ b/src/hooks/query/useGetChannelList.ts @@ -2,7 +2,12 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; const useGetChannelList = ({ communityId }: any) => { - return useQuery(["channel", { communityId }], communityApi.getChannelList); + const { data } = useQuery( + ["channelList", { communityId }], + communityApi.getChannelList + ); + if (!data?.data?.data) return []; + return data?.data?.data; }; export default useGetChannelList; diff --git a/src/hooks/query/useGetCommunityList.ts b/src/hooks/query/useGetCommunityList.ts index b2cd6c3..0b7e1f7 100644 --- a/src/hooks/query/useGetCommunityList.ts +++ b/src/hooks/query/useGetCommunityList.ts @@ -2,36 +2,32 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; import { useState, useEffect } from "react"; -const useGetCommunityList = ({ userId }: any) => { - const [list, setList] = useState([]); - const { data: res } = useQuery( - ["CommunityList", { userId }], - communityApi.getList - ); +const useGetCommunityList = () => { + const { data: res } = useQuery(["communityList"], communityApi.getList); - useEffect(() => { - if (!res) return; + // useEffect(() => { + if (!res?.data?.data) return []; - const List = (res as any)?.data.data[0].split("},") || []; - if (List[0] === "") { - return setList([]); - } + // const List = (res as any)?.data.data || []; + // if (List[0] === "") { + // return setList([]); + // } - const parsedData: any = []; - if (List.length > 0) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - parsedData.push(JSON.parse(List[i] + "}")); - } else { - parsedData.push(JSON.parse(List[i])); - } - } - } + // const parsedData: any = []; + // if (List.length > 0) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // parsedData.push(JSON.parse(List[i] + "}")); + // } else { + // parsedData.push(JSON.parse(List[i])); + // } + // } + // } - setList(parsedData); - }, [res]); - - return { list }; + // setList(parsedData); + // setList(res.data.data); + return res.data.data; + // }, [res]); }; export default useGetCommunityList; diff --git a/src/pages/Common.tsx b/src/pages/Common.tsx index c5ad8e1..1299e13 100644 --- a/src/pages/Common.tsx +++ b/src/pages/Common.tsx @@ -1,5 +1,7 @@ import PageContainer from "@components/atoms/Div/PageContainer"; import HeaderHelmet from "@components/atoms/Helmet"; +import CreateCategroyModal from "@components/molecules/Modal/CreateCategoryModal"; +import CreateChannelModal from "@components/molecules/Modal/CreateChannelModal"; import CommunitySettingModal from "@components/organisms/Modal/CommunitySettingModal"; import CreateCommunityModal from "@components/organisms/Modal/CreateCommunityModal"; import InviteFriendModal from "@components/organisms/Modal/InviteFriendModal"; @@ -14,6 +16,8 @@ const modalTable = { userSetting: , communitySetting: , createCommunity: , + createCategory: , + createChannel: , }; const Common = () => { From 2ab584468018061ef71ab459a4e6f8ed26d2e223 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sun, 19 Mar 2023 12:03:25 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refac:=20=EC=B1=84=EB=84=90=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1,=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EA=B4=80=EB=A0=A8=20=EB=AA=A8=EB=8B=AC=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20+=20API=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20-=20@nno3onn=20=EB=8B=A4=EC=9D=80=EB=8B=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=95=9C=EA=B1=B0=20merge=20=ED=95=B4?= =?UTF-8?q?=EC=A4=98=EC=95=BC=20=ED=95=A8=20-=20=EB=AC=B4=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=20=ED=84=B0=EC=A7=88=EB=93=AF=20-=20=EC=97=AC?= =?UTF-8?q?=ED=8A=BC=20=EA=B7=B8=EB=9F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/community.ts | 38 ++++-- src/components/atoms/Div/CommunityLogo.tsx | 6 +- .../molecules/Div/CommunityRoomButton.tsx | 4 +- .../molecules/Modal/CreateCategoryModal.tsx | 16 +-- .../molecules/Modal/CreateChannelModal.tsx | 71 +++++----- .../organisms/Modal/CreateCommunityModal.tsx | 18 +-- .../organisms/Tab2CommunityBody.tsx | 129 +++++++++++------- src/hooks/query/useGetCategoryList.ts | 13 ++ src/hooks/query/useGetChannelList.ts | 7 +- src/hooks/query/useGetCommunityList.ts | 48 +++---- src/pages/Common.tsx | 4 + 11 files changed, 204 insertions(+), 150 deletions(-) create mode 100644 src/hooks/query/useGetCategoryList.ts diff --git a/src/api/community.ts b/src/api/community.ts index df8365c..7ee3b59 100644 --- a/src/api/community.ts +++ b/src/api/community.ts @@ -3,11 +3,11 @@ import clientApi from "./axios"; const communityApi = { // 커뮤니티 생성 create: async ({ formData }: any) => { - return await clientApi.post("/community/create", formData); + return await clientApi.post("/community/createcommunity", formData); }, //카테고리 생성 createCategory: async ({ name, communityId, role }: any) => { - return await clientApi.post("/community/createchannel", { + return await clientApi.post("/community/createcategory", { name, communityId, role, @@ -15,12 +15,13 @@ const communityApi = { }, // 채널 생성 - createChannel: async ({ name, categoryId, role, type }: any) => { - return await clientApi.post("/community/createcategory", { + createChannel: async ({ name, categoryId, communityId, role, type }: any) => { + return await clientApi.post("/community/createchannel", { name, categoryId, role, type, + communityId, }); }, @@ -43,22 +44,33 @@ const communityApi = { return await clientApi.patch("/community/imgupload", formData); }, + // 커뮤니티 리스트 가져옴 - 옛날 버전 + // getList: async ({ queryKey }: any) => { + // const { userId } = queryKey[1]; + // return await clientApi.get(`/community/showcommunitys`, { + // params: { userId }, + // }); + // }, + // 커뮤니티 리스트 가져옴 - getList: async ({ queryKey }: any) => { - const { userId } = queryKey[1]; - return await clientApi.get(`/community/getlist`, { - params: { userId }, - }); + getList: async () => { + return await clientApi.get(`/community/showcommunitys`); + }, + // 커뮤니티의 카테고리 가져옴 + getCategoryList: async ({ queryKey }: any) => { + const { communityId } = queryKey[1]; + return await clientApi.get(`/community/categorys/${communityId}`); }, - // 커뮤니티의 카테고리 리스트 가져옴 + // 커뮤니티의 채널 가져옴 getChannelList: async ({ queryKey }: any) => { const { communityId } = queryKey[1]; - return await clientApi.get(`/community/getoption`, { - params: { communityId }, - }); + return await clientApi.get(`/community/channels/${communityId}`); }, + // 커뮤니티 멤버 목록 가져오기 + // getCommunityMemberList: async({}) + sendInvite: async ({ communityId, userId, shortUrl }: any) => { return await clientApi.post(`/invite/member`, { communityId, diff --git a/src/components/atoms/Div/CommunityLogo.tsx b/src/components/atoms/Div/CommunityLogo.tsx index 2b4f313..fe2ac52 100644 --- a/src/components/atoms/Div/CommunityLogo.tsx +++ b/src/components/atoms/Div/CommunityLogo.tsx @@ -26,7 +26,8 @@ const CommunityLogo = ({ const { communityStatus, setCommunityStatus } = useCommunityStore(); active = Number(communityStatus) === id; - const selectCommunity = () => { + const selectCommunity = (e: any) => { + e.stopPropagation(); if (id === -2) return; setCommunityStatus(id); }; @@ -37,7 +38,8 @@ const CommunityLogo = ({ selectCommunity(e)} + disabled > {/* borderRadius로 이미지 동그란 정도 조절하기 */} diff --git a/src/components/molecules/Div/CommunityRoomButton.tsx b/src/components/molecules/Div/CommunityRoomButton.tsx index 1c354f7..6937b19 100644 --- a/src/components/molecules/Div/CommunityRoomButton.tsx +++ b/src/components/molecules/Div/CommunityRoomButton.tsx @@ -8,7 +8,7 @@ import { useNavigate, useParams } from "react-router-dom"; import styled from "styled-components"; interface CommunityRoomButtonProps { - type: "chat" | "voice"; + type: "CHAT" | "VOICE"; text: string; communityId: string; channelId: number; @@ -44,7 +44,7 @@ const CommunityRoomButton = ({ > - {type === "chat" ? : } + {type === "CHAT" ? : }
diff --git a/src/components/molecules/Modal/CreateCategoryModal.tsx b/src/components/molecules/Modal/CreateCategoryModal.tsx index 51763d1..4eae91d 100644 --- a/src/components/molecules/Modal/CreateCategoryModal.tsx +++ b/src/components/molecules/Modal/CreateCategoryModal.tsx @@ -13,29 +13,24 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateCategory from "@hooks/query/useCreateCatergory"; const CreateCategroyModal = () => { const navigate = useNavigate(); - let formData = new FormData(); - const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [name, changeName] = useInput(); const [type, setType] = useState(); - const [role, setRole] = useState(); + const [role, setRole] = useState(0); //userInfo에 role이 없었던가? const [categoryId, setCategoryId] = useState(); const { communityId } = useParams(); - const { mutate: createCategory } = useMutation(communityApi.createCategory, { - onSuccess: () => { - navigate(-1); - }, - }); + const { mutate: createCategory } = useCreateCategory(); const MakeCategory = () => { createCategory({ name, communityId, role }); - navigate(-1); + closeModal(); }; const closeModal = () => { @@ -49,7 +44,8 @@ const CreateCategroyModal = () => { - + + diff --git a/src/components/molecules/Modal/CreateChannelModal.tsx b/src/components/molecules/Modal/CreateChannelModal.tsx index 7f5dcb4..707af59 100644 --- a/src/components/molecules/Modal/CreateChannelModal.tsx +++ b/src/components/molecules/Modal/CreateChannelModal.tsx @@ -13,6 +13,7 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateChannel from "@hooks/query/useCreateChanel"; const CreateChannelModal = () => { const navigate = useNavigate(); @@ -22,26 +23,28 @@ const CreateChannelModal = () => { const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [name, changeName] = useInput(); - const [type, setType] = useState(); - const [role, setRole] = useState(); + const { communityId } = useParams(); + const [type, setType] = useState(0); + const [role, setRole] = useState(0); //userInfo에 role이 없었던가? - const [categoryId, setCategoryId] = useState(); - const { mutate: createChannel } = useMutation(communityApi.createChannel, { - onSuccess: () => { - navigate(-1); - }, - }); - + const [categoryId, setCategoryId] = useState(10); + // const { mutate: createChannel } = useMutation(communityApi.createChannel, { + // onSuccess: () => { + // navigate(-1); + // }, + // }); + const { mutate: createChannel } = useCreateChannel(); const MakeChannel = () => { - createChannel({ name, categoryId, type, role }); - navigate(-1); + createChannel({ name, categoryId, communityId, type, role }); + closeModal(); }; const closeModal = () => { setShowModal(false); }; const radioHandler = (event: React.ChangeEvent) => { - setType(event.target.value); + setType(event.target.value === "CHAT" ? 0 : 1); + console.log(type); }; return ( @@ -51,31 +54,31 @@ const CreateChannelModal = () => { - + + -

- - -

- -

- - -

+
+ + +
diff --git a/src/components/organisms/Modal/CreateCommunityModal.tsx b/src/components/organisms/Modal/CreateCommunityModal.tsx index 24f35c2..ebf9e27 100644 --- a/src/components/organisms/Modal/CreateCommunityModal.tsx +++ b/src/components/organisms/Modal/CreateCommunityModal.tsx @@ -13,36 +13,26 @@ import DefaultButton from "@components/atoms/Button/DefaultButton"; import CancelIcon from "@components/atoms/Icons/CancelIcon"; import useModalStore from "@store/useModalStore"; import Text from "@components/atoms/Text/Text"; +import useCreateCommunity from "@hooks/query/useCreateCommunity"; const CreateCommunityModal = () => { const navigate = useNavigate(); let formData = new FormData(); - const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [img, setImg] = useState(); const [name, changeName] = useInput(); - const [nickName, setNickName] = useState(userInfo.name); - const { mutate: createCommunity } = useMutation(communityApi.create, { - onSuccess: () => { - navigate(-1); - }, - }); + const { mutate: createCommunity } = useCreateCommunity(); const MakeCommunity = () => { formData.append("communityName", name); - formData.append("userId", JSON.stringify(userInfo.id)); if (!img) return 0; - formData.append("img", img); - formData.append( - "profile", - JSON.stringify({ userName: nickName, img: null, 한줄소개: "한줄소개" }) - ); + formData.append("file", img); + console.log(formData.get("communityName")); createCommunity({ formData }); - navigate(-1); }; const closeModal = () => { diff --git a/src/components/organisms/Tab2CommunityBody.tsx b/src/components/organisms/Tab2CommunityBody.tsx index f3f4ada..3886a49 100644 --- a/src/components/organisms/Tab2CommunityBody.tsx +++ b/src/components/organisms/Tab2CommunityBody.tsx @@ -6,6 +6,10 @@ import UserChannelOnBox from "@components/molecules/Div/UserChannelOnBox"; import { useUserStore } from "@store/useUserStore"; import UserFriendChannelOnBox from "@components/molecules/Div/UserFriendChannelOnBox"; import useGetFriendList from "@hooks/query/useGetFriendList"; +import AddIcon from "@components/atoms/Icons/AddIcon"; +import useModalStore from "@store/useModalStore"; +import useGetCommunityList from "@hooks/query/useGetCommunityList"; +import useGetCategoryList from "@hooks/query/useGetCategoryList"; interface ChannelType { channel_id: number; @@ -22,73 +26,102 @@ interface RoomType { const Tab2CommunityBody = () => { const navigate = useNavigate(); const { communityId, channelId } = useParams(); - - const { data: res, isSuccess } = useGetChannelList({ + const channelList = useGetChannelList({ + communityId, + }); + console.log(channelList); + const categoryList = useGetCategoryList({ communityId, }); const { userInfo } = useUserStore(); const { data: friendList } = useGetFriendList(userInfo.email); - const data = res?.data?.data; - if (!communityId || !isSuccess) return <>; + const { setModalType, setShowModal } = useModalStore(); + + const showCreateCategoryModal = () => { + setModalType("createCategory"); + setShowModal(true); + }; + + const showCreateChannelModal = () => { + setModalType("createChannel"); + setShowModal(true); + }; + + if (!communityId) + return ( + <> + + + + ); - const List = JSON.parse(JSON.stringify(data[0])).split("},"); - const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); - const channelList: ChannelType[] = []; - const roomList: RoomType[] = []; + // const List = JSON.parse(JSON.stringify(data[0])).split("},"); + // const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); + // const channelList: ChannelType[] = []; + // const roomList: RoomType[] = []; - if (List.length > 0 && channelList.length < List?.length) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - channelList.push(JSON.parse(List[i] + "}")); - } else { - channelList.push(JSON.parse(List[i])); - } - } - } - if (List2.length > 0 && roomList.length < List2?.length) { - for (let i = 0; i < List2?.length; i++) { - if (i !== List2.length - 1) { - roomList.push(JSON.parse(List2[i] + "}")); - } else { - roomList.push(JSON.parse(List2[i])); - } - } - } + // if (List.length > 0 && channelList.length < List?.length) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // channelList.push(JSON.parse(List[i] + "}")); + // } else { + // channelList.push(JSON.parse(List[i])); + // } + // } + // } + // if (List2.length > 0 && roomList.length < List2?.length) { + // for (let i = 0; i < List2?.length; i++) { + // if (i !== List2.length - 1) { + // roomList.push(JSON.parse(List2[i] + "}")); + // } else { + // roomList.push(JSON.parse(List2[i])); + // } + // } + // } - if (!channelId) { - let id; - for (let i = 0; i < roomList.length; i++) { - if (roomList[i]["type"] === 2) { - id = roomList[i]["channel_id"]; - break; - } - } - navigate(`/${channelId}/${id}`); - } + // if (!channelId) { + // let id; + // for (let i = 0; i < roomList.length; i++) { + // if (roomList[i]["type"] === 2) { + // id = roomList[i]["channel_id"]; + // break; + // } + // } + // navigate(`/${channelId}/${id}`); + // } return (
- {channelList.map((channel: any) => ( + + + {/* category = channel / room -> channel */} + {categoryList.map((category: any) => ( <> - - {roomList - .filter((room) => room["channel_id"] === channel["channel_id"]) - .map((room) => ( + + {channelList + .filter((channel: any) => category.id === channel.categoryId) + .map((channel: any) => ( <> - {room["channel_id"] === Number(channelId) && ( - - )} + {channel.id === Number(channelId) && } {friendList.map((friend: FriendType) => ( ))} diff --git a/src/hooks/query/useGetCategoryList.ts b/src/hooks/query/useGetCategoryList.ts new file mode 100644 index 0000000..b910faf --- /dev/null +++ b/src/hooks/query/useGetCategoryList.ts @@ -0,0 +1,13 @@ +import communityApi from "@api/community"; +import { useQuery } from "@tanstack/react-query"; + +const useGetCategoryList = ({ communityId }: any) => { + const { data } = useQuery( + ["categoryList", { communityId }], + communityApi.getCategoryList + ); + if (!data?.data?.data) return []; + return data?.data?.data; +}; + +export default useGetCategoryList; diff --git a/src/hooks/query/useGetChannelList.ts b/src/hooks/query/useGetChannelList.ts index f19674b..c5464f9 100644 --- a/src/hooks/query/useGetChannelList.ts +++ b/src/hooks/query/useGetChannelList.ts @@ -2,7 +2,12 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; const useGetChannelList = ({ communityId }: any) => { - return useQuery(["channel", { communityId }], communityApi.getChannelList); + const { data } = useQuery( + ["channelList", { communityId }], + communityApi.getChannelList + ); + if (!data?.data?.data) return []; + return data?.data?.data; }; export default useGetChannelList; diff --git a/src/hooks/query/useGetCommunityList.ts b/src/hooks/query/useGetCommunityList.ts index b2cd6c3..0b7e1f7 100644 --- a/src/hooks/query/useGetCommunityList.ts +++ b/src/hooks/query/useGetCommunityList.ts @@ -2,36 +2,32 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; import { useState, useEffect } from "react"; -const useGetCommunityList = ({ userId }: any) => { - const [list, setList] = useState([]); - const { data: res } = useQuery( - ["CommunityList", { userId }], - communityApi.getList - ); +const useGetCommunityList = () => { + const { data: res } = useQuery(["communityList"], communityApi.getList); - useEffect(() => { - if (!res) return; + // useEffect(() => { + if (!res?.data?.data) return []; - const List = (res as any)?.data.data[0].split("},") || []; - if (List[0] === "") { - return setList([]); - } + // const List = (res as any)?.data.data || []; + // if (List[0] === "") { + // return setList([]); + // } - const parsedData: any = []; - if (List.length > 0) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - parsedData.push(JSON.parse(List[i] + "}")); - } else { - parsedData.push(JSON.parse(List[i])); - } - } - } + // const parsedData: any = []; + // if (List.length > 0) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // parsedData.push(JSON.parse(List[i] + "}")); + // } else { + // parsedData.push(JSON.parse(List[i])); + // } + // } + // } - setList(parsedData); - }, [res]); - - return { list }; + // setList(parsedData); + // setList(res.data.data); + return res.data.data; + // }, [res]); }; export default useGetCommunityList; diff --git a/src/pages/Common.tsx b/src/pages/Common.tsx index c5ad8e1..1299e13 100644 --- a/src/pages/Common.tsx +++ b/src/pages/Common.tsx @@ -1,5 +1,7 @@ import PageContainer from "@components/atoms/Div/PageContainer"; import HeaderHelmet from "@components/atoms/Helmet"; +import CreateCategroyModal from "@components/molecules/Modal/CreateCategoryModal"; +import CreateChannelModal from "@components/molecules/Modal/CreateChannelModal"; import CommunitySettingModal from "@components/organisms/Modal/CommunitySettingModal"; import CreateCommunityModal from "@components/organisms/Modal/CreateCommunityModal"; import InviteFriendModal from "@components/organisms/Modal/InviteFriendModal"; @@ -14,6 +16,8 @@ const modalTable = { userSetting: , communitySetting: , createCommunity: , + createCategory: , + createChannel: , }; const Common = () => { From fcecad48a5a7ed41d3e9cb11e167198433974407 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sun, 19 Mar 2023 12:04:04 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20dnd=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/CommunityList.tsx | 19 ++++---- .../organisms/CommunityListTest.stories.tsx | 8 ++-- .../organisms/CommunityListTest.tsx | 43 ++++++++++--------- 3 files changed, 36 insertions(+), 34 deletions(-) diff --git a/src/components/organisms/CommunityList.tsx b/src/components/organisms/CommunityList.tsx index 590cefd..4dafb3f 100644 --- a/src/components/organisms/CommunityList.tsx +++ b/src/components/organisms/CommunityList.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import CommunityLgoo from "../atoms/Div/CommunityLogo"; +import CommunityLogo from "../atoms/Div/CommunityLogo"; import { useNavigate, useParams } from "react-router-dom"; import AddIcon from "@components/atoms/Icons/AddIcon"; import { useUserStore } from "@store/useUserStore"; @@ -14,8 +14,7 @@ const CommunityList = () => { const { userInfo } = useUserStore(); const { setShowModal, setModalType } = useModalStore(); - const { list } = useGetCommunityList({ userId: userInfo.id }); - + const list = useGetCommunityList(); const goMainPage = () => { navigate("/@me"); }; @@ -39,7 +38,7 @@ const CommunityList = () => {
  • - { - {list.map((community: any, idx) => ( -
  • onCommunity(community.community_id)}> - ( +
  • onCommunity(community.communityId)}> +
    • @@ -64,9 +63,9 @@ const CommunityList = () => { {list.length !== 0 && }
  • - + - +
diff --git a/src/components/organisms/CommunityListTest.stories.tsx b/src/components/organisms/CommunityListTest.stories.tsx index f0455e7..2c01edc 100644 --- a/src/components/organisms/CommunityListTest.stories.tsx +++ b/src/components/organisms/CommunityListTest.stories.tsx @@ -1,10 +1,10 @@ -import CommunityLisTesttDiv from "./CommunityListTest"; +import CommunityListTest from "./CommunityListTest"; export default { title: "organisms/CommunityListTest", - component: CommunityLisTesttDiv, + component: CommunityListTest, }; -export const CommunityList = () => { - return ; +export const CommunityTestList = () => { + return ; }; diff --git a/src/components/organisms/CommunityListTest.tsx b/src/components/organisms/CommunityListTest.tsx index 7425131..73ea277 100644 --- a/src/components/organisms/CommunityListTest.tsx +++ b/src/components/organisms/CommunityListTest.tsx @@ -32,32 +32,35 @@ const CommunityListTest = () => { {...provided.droppableProps} ref={provided.innerRef} > - ... - {array && array.map(({ id, title }, index) => { return ( - - {(provided) => ( -
  • null} - > - -
    • - )} -     +
    { + e.stopPropagation(); + }} + > + + {(provided) => ( +
  • null} + > + +
    • + )} +     +
    ); })} {provided.placeholder} - ... )} From c8122e5ad65b9f0870feac785e9d1c84145f5fa4 Mon Sep 17 00:00:00 2001 From: nno3onn Date: Sat, 25 Mar 2023 19:43:13 +0900 Subject: [PATCH 6/7] Merge branch 'main' of https://github.com/ODUGI/Odugi --- .DS_Store | Bin 6148 -> 0 bytes src/api/community.ts | 50 +++++-- src/components/atoms/Div/CommunityLogo.tsx | 6 +- .../molecules/Div/CommunityRoomButton.tsx | 4 +- .../molecules/Modal/CreateCategoryModal.tsx | 102 ++++++++++++++ .../molecules/Modal/CreateChannelModal.tsx | 132 ++++++++++++++++++ src/components/organisms/CommunityList.tsx | 19 ++- .../organisms/CommunityListTest.stories.tsx | 8 +- .../organisms/CommunityListTest.tsx | 43 +++--- .../organisms/Modal/CreateCommunityModal.tsx | 48 +------ .../organisms/Tab2CommunityBody.tsx | 129 ++++++++++------- src/hooks/query/useCreateCatergory.ts | 8 ++ src/hooks/query/useCreateChanel.ts | 8 ++ src/hooks/query/useCreateCommunity.ts | 38 ++++- src/hooks/query/useGetCategoryList.ts | 13 ++ src/hooks/query/useGetChannelList.ts | 7 +- src/hooks/query/useGetCommunityList.ts | 49 +++---- src/pages/Common.tsx | 4 + src/store/useModalStore.ts | 4 +- 19 files changed, 500 insertions(+), 172 deletions(-) delete mode 100644 .DS_Store create mode 100644 src/components/molecules/Modal/CreateCategoryModal.tsx create mode 100644 src/components/molecules/Modal/CreateChannelModal.tsx create mode 100644 src/hooks/query/useCreateCatergory.ts create mode 100644 src/hooks/query/useCreateChanel.ts create mode 100644 src/hooks/query/useGetCategoryList.ts diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 295f858c6b65fa06d1b869367e8f666553b7553b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK!AiqG5Z!I7O(;SR3OxqA7HzGzh?f}a!K)EHsMMq>8jRV}r1nq>IqMJkCH{`i z>~4foy?78TGcfx$vojm!ZP>{$#<)8PTZ~zZF#{B_WWw-`;5zD(l(eM`$Z-!b2x1Yy z6K+TH9~i*1E3=f1+2AZ*IKN|9+4+zn6VYD5G#%+vehWr%lxEH5J1>yNMT=|YG&DCT}}84ag>Yx6`TnI9#?u?&d9A-LRJMM)^8u9zfYDq}sh zV3>y4x9YQ5_n_0T+pX@rVb2ctnhkru-I>o#V{3c&=)C_JKPBQt5zpb9l(M0*fLEC4 zY@WSw5{u*>EQNRBMMw+~1H{1UGN5lfqqe#!Qf9;eG4M+U@P4pC5gm=WLV0z-AX@;y z3Yew9T>kt6+GqfDH0BDy0>V`&pbF)>#o)Sk;3^!}9qpehRN;)vH^V;q&0KdVT(=(F zmhOx@3TY$;h=D~0u=fM8u>PO^-2Y1_8i)a6U^N-wm7dpgAvaxHm$JlKYlGf_qM%={ m@GAr+vJ`_amf||76tLSk0dzFx3c&(GKLU~l8i;{EW#AKKG*a#W diff --git a/src/api/community.ts b/src/api/community.ts index cdf742d..7ee3b59 100644 --- a/src/api/community.ts +++ b/src/api/community.ts @@ -3,7 +3,26 @@ import clientApi from "./axios"; const communityApi = { // 커뮤니티 생성 create: async ({ formData }: any) => { - return await clientApi.post("/community/create", formData); + return await clientApi.post("/community/createcommunity", formData); + }, + //카테고리 생성 + createCategory: async ({ name, communityId, role }: any) => { + return await clientApi.post("/community/createcategory", { + name, + communityId, + role, + }); + }, + + // 채널 생성 + createChannel: async ({ name, categoryId, communityId, role, type }: any) => { + return await clientApi.post("/community/createchannel", { + name, + categoryId, + role, + type, + communityId, + }); }, // 커뮤니티 이름 변경 @@ -25,22 +44,33 @@ const communityApi = { return await clientApi.patch("/community/imgupload", formData); }, + // 커뮤니티 리스트 가져옴 - 옛날 버전 + // getList: async ({ queryKey }: any) => { + // const { userId } = queryKey[1]; + // return await clientApi.get(`/community/showcommunitys`, { + // params: { userId }, + // }); + // }, + // 커뮤니티 리스트 가져옴 - getList: async ({ queryKey }: any) => { - const { userId } = queryKey[1]; - return await clientApi.get(`/community/getlist`, { - params: { userId }, - }); + getList: async () => { + return await clientApi.get(`/community/showcommunitys`); + }, + // 커뮤니티의 카테고리 가져옴 + getCategoryList: async ({ queryKey }: any) => { + const { communityId } = queryKey[1]; + return await clientApi.get(`/community/categorys/${communityId}`); }, - // 커뮤니티의 카테고리 리스트 가져옴 + // 커뮤니티의 채널 가져옴 getChannelList: async ({ queryKey }: any) => { const { communityId } = queryKey[1]; - return await clientApi.get(`/community/getoption`, { - params: { communityId }, - }); + return await clientApi.get(`/community/channels/${communityId}`); }, + // 커뮤니티 멤버 목록 가져오기 + // getCommunityMemberList: async({}) + sendInvite: async ({ communityId, userId, shortUrl }: any) => { return await clientApi.post(`/invite/member`, { communityId, diff --git a/src/components/atoms/Div/CommunityLogo.tsx b/src/components/atoms/Div/CommunityLogo.tsx index 2b4f313..fe2ac52 100644 --- a/src/components/atoms/Div/CommunityLogo.tsx +++ b/src/components/atoms/Div/CommunityLogo.tsx @@ -26,7 +26,8 @@ const CommunityLogo = ({ const { communityStatus, setCommunityStatus } = useCommunityStore(); active = Number(communityStatus) === id; - const selectCommunity = () => { + const selectCommunity = (e: any) => { + e.stopPropagation(); if (id === -2) return; setCommunityStatus(id); }; @@ -37,7 +38,8 @@ const CommunityLogo = ({ selectCommunity(e)} + disabled > {/* borderRadius로 이미지 동그란 정도 조절하기 */} diff --git a/src/components/molecules/Div/CommunityRoomButton.tsx b/src/components/molecules/Div/CommunityRoomButton.tsx index 1c354f7..6937b19 100644 --- a/src/components/molecules/Div/CommunityRoomButton.tsx +++ b/src/components/molecules/Div/CommunityRoomButton.tsx @@ -8,7 +8,7 @@ import { useNavigate, useParams } from "react-router-dom"; import styled from "styled-components"; interface CommunityRoomButtonProps { - type: "chat" | "voice"; + type: "CHAT" | "VOICE"; text: string; communityId: string; channelId: number; @@ -44,7 +44,7 @@ const CommunityRoomButton = ({ > - {type === "chat" ? : } + {type === "CHAT" ? : }
    diff --git a/src/components/molecules/Modal/CreateCategoryModal.tsx b/src/components/molecules/Modal/CreateCategoryModal.tsx new file mode 100644 index 0000000..4eae91d --- /dev/null +++ b/src/components/molecules/Modal/CreateCategoryModal.tsx @@ -0,0 +1,102 @@ +import styled from "styled-components"; +import useInput from "@hooks/common/useInput"; +import DefaultInput from "@components/atoms/Input/DefaultInput"; +import { useMutation } from "@tanstack/react-query"; +import { useNavigate, useParams } from "react-router-dom"; +import { useUserStore } from "@store/useUserStore"; +import { useState } from "react"; +import communityApi from "@api/community"; +import CreateCommunityText from "@components/molecules/Text/CreateCommunityText"; +import BackgroundModal from "@components/organisms/BackgroundModal"; +import ImageUploadButton from "@components/molecules/Button/ImageUploadButton"; +import DefaultButton from "@components/atoms/Button/DefaultButton"; +import CancelIcon from "@components/atoms/Icons/CancelIcon"; +import useModalStore from "@store/useModalStore"; +import Text from "@components/atoms/Text/Text"; +import useCreateCategory from "@hooks/query/useCreateCatergory"; + +const CreateCategroyModal = () => { + const navigate = useNavigate(); + + const { userInfo } = useUserStore(); + const { setShowModal } = useModalStore(); + const [name, changeName] = useInput(); + const [type, setType] = useState(); + const [role, setRole] = useState(0); + //userInfo에 role이 없었던가? + const [categoryId, setCategoryId] = useState(); + const { communityId } = useParams(); + const { mutate: createCategory } = useCreateCategory(); + + const MakeCategory = () => { + createCategory({ name, communityId, role }); + closeModal(); + }; + + const closeModal = () => { + setShowModal(false); + }; + + return ( + + <> + + + + + + + + + + + + + + + + + + ); +}; + +const CreateCommunityHeader = styled.div` + padding: 1.5rem 1.5rem 0; +`; + +const CancelIconWrapper = styled.div` + width: 100%; + color: ${({ theme }) => theme.color.icon}; + + display: flex; + justify-content: end; + + cursor: pointer; +`; + +const CreateCommunityBody = styled.div` + margin: 1rem 0; + padding: 0 0.5rem 0 1rem; +`; + +const CreateCommunityFooter = styled.div` + padding: 16px; + background-color: ${({ theme }) => theme.backgroundColor["grey-7"]}; + + display: flex; + justify-content: space-between; +`; + +export default CreateCategroyModal; diff --git a/src/components/molecules/Modal/CreateChannelModal.tsx b/src/components/molecules/Modal/CreateChannelModal.tsx new file mode 100644 index 0000000..707af59 --- /dev/null +++ b/src/components/molecules/Modal/CreateChannelModal.tsx @@ -0,0 +1,132 @@ +import styled from "styled-components"; +import useInput from "@hooks/common/useInput"; +import DefaultInput from "@components/atoms/Input/DefaultInput"; +import { useMutation } from "@tanstack/react-query"; +import { useNavigate, useParams } from "react-router-dom"; +import { useUserStore } from "@store/useUserStore"; +import { useState } from "react"; +import communityApi from "@api/community"; +import CreateCommunityText from "@components/molecules/Text/CreateCommunityText"; +import BackgroundModal from "@components/organisms/BackgroundModal"; +import ImageUploadButton from "@components/molecules/Button/ImageUploadButton"; +import DefaultButton from "@components/atoms/Button/DefaultButton"; +import CancelIcon from "@components/atoms/Icons/CancelIcon"; +import useModalStore from "@store/useModalStore"; +import Text from "@components/atoms/Text/Text"; +import useCreateChannel from "@hooks/query/useCreateChanel"; + +const CreateChannelModal = () => { + const navigate = useNavigate(); + + let formData = new FormData(); + + const { userInfo } = useUserStore(); + const { setShowModal } = useModalStore(); + const [name, changeName] = useInput(); + const { communityId } = useParams(); + const [type, setType] = useState(0); + const [role, setRole] = useState(0); + //userInfo에 role이 없었던가? + const [categoryId, setCategoryId] = useState(10); + // const { mutate: createChannel } = useMutation(communityApi.createChannel, { + // onSuccess: () => { + // navigate(-1); + // }, + // }); + const { mutate: createChannel } = useCreateChannel(); + const MakeChannel = () => { + createChannel({ name, categoryId, communityId, type, role }); + closeModal(); + }; + + const closeModal = () => { + setShowModal(false); + }; + const radioHandler = (event: React.ChangeEvent) => { + setType(event.target.value === "CHAT" ? 0 : 1); + console.log(type); + }; + + return ( + + <> + + + + + + + + + +
    + + +
    + +     + + + + + +     + ); +}; + +const CreateCommunityHeader = styled.div` + padding: 1.5rem 1.5rem 0; +`; + +const CancelIconWrapper = styled.div` + width: 100%; + color: ${({ theme }) => theme.color.icon}; + + display: flex; + justify-content: end; + + cursor: pointer; +`; + +const CreateCommunityBody = styled.div` + margin: 1rem 0; + padding: 0 0.5rem 0 1rem; +`; + +const CreateCommunityFooter = styled.div` + padding: 16px; + background-color: ${({ theme }) => theme.backgroundColor["grey-7"]}; + + display: flex; + justify-content: space-between; +`; + +export default CreateChannelModal; diff --git a/src/components/organisms/CommunityList.tsx b/src/components/organisms/CommunityList.tsx index 590cefd..4dafb3f 100644 --- a/src/components/organisms/CommunityList.tsx +++ b/src/components/organisms/CommunityList.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import CommunityLgoo from "../atoms/Div/CommunityLogo"; +import CommunityLogo from "../atoms/Div/CommunityLogo"; import { useNavigate, useParams } from "react-router-dom"; import AddIcon from "@components/atoms/Icons/AddIcon"; import { useUserStore } from "@store/useUserStore"; @@ -14,8 +14,7 @@ const CommunityList = () => { const { userInfo } = useUserStore(); const { setShowModal, setModalType } = useModalStore(); - const { list } = useGetCommunityList({ userId: userInfo.id }); - + const list = useGetCommunityList(); const goMainPage = () => { navigate("/@me"); }; @@ -39,7 +38,7 @@ const CommunityList = () => {
    • - { - {list.map((community: any, idx) => ( -
    • onCommunity(community.community_id)}> - ( +
    • onCommunity(community.communityId)}> +
      • @@ -64,9 +63,9 @@ const CommunityList = () => { {list.length !== 0 && }
    • - + - +
    diff --git a/src/components/organisms/CommunityListTest.stories.tsx b/src/components/organisms/CommunityListTest.stories.tsx index f0455e7..2c01edc 100644 --- a/src/components/organisms/CommunityListTest.stories.tsx +++ b/src/components/organisms/CommunityListTest.stories.tsx @@ -1,10 +1,10 @@ -import CommunityLisTesttDiv from "./CommunityListTest"; +import CommunityListTest from "./CommunityListTest"; export default { title: "organisms/CommunityListTest", - component: CommunityLisTesttDiv, + component: CommunityListTest, }; -export const CommunityList = () => { - return ; +export const CommunityTestList = () => { + return ; }; diff --git a/src/components/organisms/CommunityListTest.tsx b/src/components/organisms/CommunityListTest.tsx index 7425131..73ea277 100644 --- a/src/components/organisms/CommunityListTest.tsx +++ b/src/components/organisms/CommunityListTest.tsx @@ -32,32 +32,35 @@ const CommunityListTest = () => { {...provided.droppableProps} ref={provided.innerRef} > - ... - {array && array.map(({ id, title }, index) => { return ( - - {(provided) => ( -
  • null} - > - -
    • - )} -     +
    { + e.stopPropagation(); + }} + > + + {(provided) => ( +
  • null} + > + +
    • + )} +     +
    ); })} {provided.placeholder} - ... )} diff --git a/src/components/organisms/Modal/CreateCommunityModal.tsx b/src/components/organisms/Modal/CreateCommunityModal.tsx index 36183f6..b61397c 100644 --- a/src/components/organisms/Modal/CreateCommunityModal.tsx +++ b/src/components/organisms/Modal/CreateCommunityModal.tsx @@ -1,9 +1,6 @@ import styled from "styled-components"; import useInput from "@hooks/common/useInput"; import DefaultInput from "@components/atoms/Input/DefaultInput"; -import { useQueryClient } from "@tanstack/react-query"; -import { useNavigate } from "react-router-dom"; -import { useUserStore } from "@store/useUserStore"; import { useState } from "react"; import CreateCommunityText from "@components/molecules/Text/CreateCommunityText"; import BackgroundModal from "../BackgroundModal"; @@ -15,58 +12,21 @@ import Text from "@components/atoms/Text/Text"; import useCreateCommunity from "@hooks/query/useCreateCommunity"; const CreateCommunityModal = () => { - const queryClient = useQueryClient(); - const navigate = useNavigate(); let formData = new FormData(); - const { userInfo } = useUserStore(); const { setShowModal } = useModalStore(); const [img, setImg] = useState(); const [name, changeName] = useInput(); - const { mutate: createCommunity } = useCreateCommunity({ - onMutate: async (newCommunityList: any) => { - await queryClient.cancelQueries({ - queryKey: ["communityList", { userId: userInfo.id }], - }); - const previousCommunityList = queryClient.getQueriesData([ - "communityList", - newCommunityList, - ]); - return { newCommunityList, previousCommunityList }; - }, - onError: (_err: Error, _newCommunityList: any, context: any) => { - queryClient.setQueriesData( - ["communityList"], - context?.previousCommunityList - ); - }, - onSuccess: () => { - navigate(-1); - }, - onSettled: () => { - queryClient.invalidateQueries({ - queryKey: ["communityList", { userId: userInfo.id }], - }); - }, - }); + const { mutate: createCommunity } = useCreateCommunity(); const MakeCommunity = () => { - formData.append("communityName", name); - formData.append("userId", JSON.stringify(userInfo.id)); if (!img) return 0; - formData.append("img", img); - formData.append( - "profile", - JSON.stringify({ - userName: userInfo.name, - img: null, - 한줄소개: "한줄소개", - }) - ); + + formData.append("communityName", name); + formData.append("file", img); createCommunity({ formData }); - navigate(-1); }; const closeModal = () => { diff --git a/src/components/organisms/Tab2CommunityBody.tsx b/src/components/organisms/Tab2CommunityBody.tsx index f3f4ada..3886a49 100644 --- a/src/components/organisms/Tab2CommunityBody.tsx +++ b/src/components/organisms/Tab2CommunityBody.tsx @@ -6,6 +6,10 @@ import UserChannelOnBox from "@components/molecules/Div/UserChannelOnBox"; import { useUserStore } from "@store/useUserStore"; import UserFriendChannelOnBox from "@components/molecules/Div/UserFriendChannelOnBox"; import useGetFriendList from "@hooks/query/useGetFriendList"; +import AddIcon from "@components/atoms/Icons/AddIcon"; +import useModalStore from "@store/useModalStore"; +import useGetCommunityList from "@hooks/query/useGetCommunityList"; +import useGetCategoryList from "@hooks/query/useGetCategoryList"; interface ChannelType { channel_id: number; @@ -22,73 +26,102 @@ interface RoomType { const Tab2CommunityBody = () => { const navigate = useNavigate(); const { communityId, channelId } = useParams(); - - const { data: res, isSuccess } = useGetChannelList({ + const channelList = useGetChannelList({ + communityId, + }); + console.log(channelList); + const categoryList = useGetCategoryList({ communityId, }); const { userInfo } = useUserStore(); const { data: friendList } = useGetFriendList(userInfo.email); - const data = res?.data?.data; - if (!communityId || !isSuccess) return <>; + const { setModalType, setShowModal } = useModalStore(); + + const showCreateCategoryModal = () => { + setModalType("createCategory"); + setShowModal(true); + }; + + const showCreateChannelModal = () => { + setModalType("createChannel"); + setShowModal(true); + }; + + if (!communityId) + return ( + <> + + + + ); - const List = JSON.parse(JSON.stringify(data[0])).split("},"); - const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); - const channelList: ChannelType[] = []; - const roomList: RoomType[] = []; + // const List = JSON.parse(JSON.stringify(data[0])).split("},"); + // const List2 = JSON.parse(JSON.stringify(data[1])).split("},"); + // const channelList: ChannelType[] = []; + // const roomList: RoomType[] = []; - if (List.length > 0 && channelList.length < List?.length) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - channelList.push(JSON.parse(List[i] + "}")); - } else { - channelList.push(JSON.parse(List[i])); - } - } - } - if (List2.length > 0 && roomList.length < List2?.length) { - for (let i = 0; i < List2?.length; i++) { - if (i !== List2.length - 1) { - roomList.push(JSON.parse(List2[i] + "}")); - } else { - roomList.push(JSON.parse(List2[i])); - } - } - } + // if (List.length > 0 && channelList.length < List?.length) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // channelList.push(JSON.parse(List[i] + "}")); + // } else { + // channelList.push(JSON.parse(List[i])); + // } + // } + // } + // if (List2.length > 0 && roomList.length < List2?.length) { + // for (let i = 0; i < List2?.length; i++) { + // if (i !== List2.length - 1) { + // roomList.push(JSON.parse(List2[i] + "}")); + // } else { + // roomList.push(JSON.parse(List2[i])); + // } + // } + // } - if (!channelId) { - let id; - for (let i = 0; i < roomList.length; i++) { - if (roomList[i]["type"] === 2) { - id = roomList[i]["channel_id"]; - break; - } - } - navigate(`/${channelId}/${id}`); - } + // if (!channelId) { + // let id; + // for (let i = 0; i < roomList.length; i++) { + // if (roomList[i]["type"] === 2) { + // id = roomList[i]["channel_id"]; + // break; + // } + // } + // navigate(`/${channelId}/${id}`); + // } return (
    - {channelList.map((channel: any) => ( + + + {/* category = channel / room -> channel */} + {categoryList.map((category: any) => ( <> - - {roomList - .filter((room) => room["channel_id"] === channel["channel_id"]) - .map((room) => ( + + {channelList + .filter((channel: any) => category.id === channel.categoryId) + .map((channel: any) => ( <> - {room["channel_id"] === Number(channelId) && ( - - )} + {channel.id === Number(channelId) && } {friendList.map((friend: FriendType) => ( ))} diff --git a/src/hooks/query/useCreateCatergory.ts b/src/hooks/query/useCreateCatergory.ts new file mode 100644 index 0000000..10795ca --- /dev/null +++ b/src/hooks/query/useCreateCatergory.ts @@ -0,0 +1,8 @@ +import { useMutation } from "@tanstack/react-query"; +import communityApi from "@api/community"; + +const useCreateCategory = () => { + return useMutation(communityApi.createCategory); +}; + +export default useCreateCategory; diff --git a/src/hooks/query/useCreateChanel.ts b/src/hooks/query/useCreateChanel.ts new file mode 100644 index 0000000..638d5ff --- /dev/null +++ b/src/hooks/query/useCreateChanel.ts @@ -0,0 +1,8 @@ +import { useMutation } from "@tanstack/react-query"; +import communityApi from "@api/community"; + +const useCreateChannel = () => { + return useMutation(communityApi.createChannel); +}; + +export default useCreateChannel; diff --git a/src/hooks/query/useCreateCommunity.ts b/src/hooks/query/useCreateCommunity.ts index d19d75b..4d87cd4 100644 --- a/src/hooks/query/useCreateCommunity.ts +++ b/src/hooks/query/useCreateCommunity.ts @@ -1,8 +1,40 @@ +import { useNavigate } from "react-router-dom"; +import { useUserStore } from "./../../store/useUserStore"; import communityApi from "@api/community"; -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; -const useCreateCommunity = (options: any) => { - return useMutation(communityApi.create, options); +const useCreateCommunity = () => { + const queryClient = useQueryClient(); + const navigate = useNavigate(); + + const { userInfo } = useUserStore(); + + return useMutation(communityApi.create, { + onMutate: async (newCommunityList: any) => { + await queryClient.cancelQueries({ + queryKey: ["communityList", { userId: userInfo.id }], + }); + const previousCommunityList = queryClient.getQueriesData([ + "communityList", + newCommunityList, + ]); + return { newCommunityList, previousCommunityList }; + }, + onError: (_err: Error, _newCommunityList: any, context: any) => { + queryClient.setQueriesData( + ["communityList"], + context?.previousCommunityList + ); + }, + onSuccess: () => { + navigate(-1); + }, + onSettled: () => { + queryClient.invalidateQueries({ + queryKey: ["communityList", { userId: userInfo.id }], + }); + }, + }); }; export default useCreateCommunity; diff --git a/src/hooks/query/useGetCategoryList.ts b/src/hooks/query/useGetCategoryList.ts new file mode 100644 index 0000000..b910faf --- /dev/null +++ b/src/hooks/query/useGetCategoryList.ts @@ -0,0 +1,13 @@ +import communityApi from "@api/community"; +import { useQuery } from "@tanstack/react-query"; + +const useGetCategoryList = ({ communityId }: any) => { + const { data } = useQuery( + ["categoryList", { communityId }], + communityApi.getCategoryList + ); + if (!data?.data?.data) return []; + return data?.data?.data; +}; + +export default useGetCategoryList; diff --git a/src/hooks/query/useGetChannelList.ts b/src/hooks/query/useGetChannelList.ts index f19674b..c5464f9 100644 --- a/src/hooks/query/useGetChannelList.ts +++ b/src/hooks/query/useGetChannelList.ts @@ -2,7 +2,12 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; const useGetChannelList = ({ communityId }: any) => { - return useQuery(["channel", { communityId }], communityApi.getChannelList); + const { data } = useQuery( + ["channelList", { communityId }], + communityApi.getChannelList + ); + if (!data?.data?.data) return []; + return data?.data?.data; }; export default useGetChannelList; diff --git a/src/hooks/query/useGetCommunityList.ts b/src/hooks/query/useGetCommunityList.ts index 6816638..d159806 100644 --- a/src/hooks/query/useGetCommunityList.ts +++ b/src/hooks/query/useGetCommunityList.ts @@ -1,37 +1,32 @@ import communityApi from "@api/community"; import { useQuery } from "@tanstack/react-query"; -import { useState, useEffect } from "react"; -const useGetCommunityList = ({ userId }: any) => { - const [list, setList] = useState([]); - const { data: res } = useQuery( - ["communityList", { userId }], - communityApi.getList - ); +const useGetCommunityList = () => { + const { data: res } = useQuery(["communityList"], communityApi.getList); - useEffect(() => { - if (!res) return; + // useEffect(() => { + if (!res?.data?.data) return []; - const List = (res as any)?.data.data[0].split("},") || []; - if (List[0] === "") { - return setList([]); - } + // const List = (res as any)?.data.data || []; + // if (List[0] === "") { + // return setList([]); + // } - const parsedData: any = []; - if (List.length > 0) { - for (let i = 0; i < List?.length; i++) { - if (i !== List.length - 1) { - parsedData.push(JSON.parse(List[i] + "}")); - } else { - parsedData.push(JSON.parse(List[i])); - } - } - } + // const parsedData: any = []; + // if (List.length > 0) { + // for (let i = 0; i < List?.length; i++) { + // if (i !== List.length - 1) { + // parsedData.push(JSON.parse(List[i] + "}")); + // } else { + // parsedData.push(JSON.parse(List[i])); + // } + // } + // } - setList(parsedData); - }, [res]); - - return { list }; + // setList(parsedData); + // setList(res.data.data); + return res.data.data; + // }, [res]); }; export default useGetCommunityList; diff --git a/src/pages/Common.tsx b/src/pages/Common.tsx index c5ad8e1..1299e13 100644 --- a/src/pages/Common.tsx +++ b/src/pages/Common.tsx @@ -1,5 +1,7 @@ import PageContainer from "@components/atoms/Div/PageContainer"; import HeaderHelmet from "@components/atoms/Helmet"; +import CreateCategroyModal from "@components/molecules/Modal/CreateCategoryModal"; +import CreateChannelModal from "@components/molecules/Modal/CreateChannelModal"; import CommunitySettingModal from "@components/organisms/Modal/CommunitySettingModal"; import CreateCommunityModal from "@components/organisms/Modal/CreateCommunityModal"; import InviteFriendModal from "@components/organisms/Modal/InviteFriendModal"; @@ -14,6 +16,8 @@ const modalTable = { userSetting: , communitySetting: , createCommunity: , + createCategory: , + createChannel: , }; const Common = () => { diff --git a/src/store/useModalStore.ts b/src/store/useModalStore.ts index a246307..dd40880 100644 --- a/src/store/useModalStore.ts +++ b/src/store/useModalStore.ts @@ -6,7 +6,9 @@ export type ModalType = | "inviteFriend" | "userSetting" | "communitySetting" - | "createCommunity"; + | "createCommunity" + | "createCategory" + | "createChannel"; interface ModalState { showModal: boolean; From d863ce316f34a646f2df66423f21613a6d7282ae Mon Sep 17 00:00:00 2001 From: whipbaek <75191916+whipbaek@users.noreply.github.com> Date: Tue, 28 Mar 2023 23:19:27 +0900 Subject: [PATCH 7/7] =?UTF-8?q?docs:=20readme=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5f241e9..5fe6aac 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,56 @@ -# Odugi project +# Odugi 🎧 + + + + +- Odugi 는 디스코드의 디자인과 주요 기능들을 클론하여 만든 프로젝트 입니다. + + +
    +
    + + +| 팀원 | 역할 | +| --------------------------------------- | --------- | +| [김현우](https://github.com/krokerdile) | FRONT-END | +| [허다은](https://github.com/nno3onn) | FRONT-END | +| [백종인](https://github.com/whipbaek) | BACK-END | + + +# Architecture + + +개발은 MSA 구조를 기반으로 진행되었으며 Spring Cloud와 Eureka를 활용하여 진행하였습니다. + +### Server List + +

    + +# 기술 스택 + +#### FRONT END 🔮 + +- TypeScript +- React +- Zustand +- React Query +- Story Book + +#### BACK END & Devops ♟️ + +- JAVA +- Spring FrameWork (JPA, Security, Cloud ..) +- MySQL +- Redis +- STOMP, WebSocket +- RabbitMQ +- AWS +- AWS S3 +- Jenkins + +
    + +# 기능