Merge branch 'main' into refac/ReactQuery

README.md

@@ -1,4 +1,56 @@
-# Odugi project
+# Odugi 🎧
+
+
+
 
 
 <img src="https://user-images.githubusercontent.com/75191916/223446704-36bfed67-fa5e-4717-8ff6-6be96bcbb01a.png"  width="315" height="315"/>
+
+- <b>Odugi</b> 는 디스코드의 디자인과 주요 기능들을 클론하여 만든 프로젝트 입니다.
+
+
+<br>
+<br>
+
+
+| 팀원                                    | 역할      | 
+| --------------------------------------- | --------- | 
+| [김현우](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
+
+<br><br>
+
+# 기술 스택
+
+#### 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
+
+<bR>
+
+# 기능

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,

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 = ({
       <StyledIconButton
         height={avatarHeight}
         width={avatarWidth}
-        onClick={selectCommunity}
+        onClick={(e) => selectCommunity(e)}
+        disabled
       >
         {/* borderRadius로 이미지 동그란 정도 조절하기 */}
         <Avatar className="avatar" src={src}>

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 = ({
       >
         <CommunityRoomButtonContainer>
           <LeftContainer>
-            {type === "chat" ? <TagIcon /> : <VolumeIcon />}
+            {type === "CHAT" ? <TagIcon /> : <VolumeIcon />}
             <Text text={text} />
           </LeftContainer>
           <div className="right-icon" onClick={showInviteModal}>

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<number>(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 (
+    <BackgroundModal width={440} p={0}>
+      <>
+        <CreateCommunityHeader>
+          <CancelIconWrapper onClick={closeModal}>
+            <CancelIcon />
+          </CancelIconWrapper>
+
+          <Text text="카테고리 만들기" fontSize="xxl" color="white" />
+        </CreateCommunityHeader>
+        <CreateCommunityBody>
+          <Text text="카테고리 이름" fontSize="xs" color="white" mb={8} />
+          <DefaultInput value={name} onChange={changeName} type="text" />
+        </CreateCommunityBody>
+        <CreateCommunityFooter>
+          <DefaultButton
+            width={96}
+            height={38}
+            text="취소"
+            backgroundColor="transparernt"
+            hoverBackgroundColor="transparent"
+            onClick={closeModal}
+          />
+          <DefaultButton
+            width={96}
+            height={38}
+            text="만들기"
+            onClick={MakeCategory}
+          />
+        </CreateCommunityFooter>
+      </>
+    </BackgroundModal>
+  );
+};
+
+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;