Merge branch 'main' into refac/optimization

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>
+
+# 기능

package.json

@@ -2,6 +2,33 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
+    "chromatic": "chromatic",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -35,33 +62,6 @@
     "web-vitals": "^2.1.0",
     "zustand": "^4.3.5"
   },
-  "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject",
-    "chromatic": "chromatic",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@craco/craco": "^7.0.0",
     "@storybook/addon-actions": "^6.5.16",

src/api/chat.ts

@@ -5,14 +5,13 @@ const chatApi = {
     const { userId } = queryKey[1];
 
     return await clientApi.get("/state/getchannel", {
-      params: {
-        userId,
-      },
+      params: { userId },
     });
   },
 
-  enter: async () => {
+  enterInvitation: async () => {
     return await clientApi.post("/chat/community_enter", {
+      //!TODO 기능 추가되면 하드코딩 수정할 것
       name: "종인",
       channelId: "220",
     });

src/api/userSetting.ts

@@ -35,8 +35,8 @@ const userSettingApi = {
     });
   },
 
-  // 서버 프로필명 이름 변경
-  communityUpdate: async ({
+  // 커뮤니티 프로필명 이름 변경
+  updateCommunityName: async ({
     communityId,
     userId,
     userName,

src/components/atoms/Div/Status.tsx

@@ -1,7 +1,4 @@
 import styled from "styled-components";
-import StateDisturbIcon from "../Icons/StateDisturbIcon";
-import StateEmptyIcon from "../Icons/StateEmptyIcon";
-import StateMobileIcon from "../Icons/StateMobileIcon";
 import StateOffIcon from "../Icons/StateOffIcon";
 import StateOnIcon from "../Icons/StateOnIcon";
 

src/components/molecules/Div/InviteFriendBox.tsx

@@ -21,18 +21,17 @@ const InviteFriendBox = ({ name, userId, channelId }: friend) => {
 
   let backUrl = process.env.REACT_APP_BASE_URL;
   let uuid = crypto.randomUUID();
-  let shortUrl = uuid;
 
   const onSendInvite = () => {
     sendInvite({
       communityId,
       userId,
-      shortUrl,
+      shortUrl: uuid,
     });
     sendInviteToChat({
       sender: userInfo.name,
       channelId: channelId,
-      linkMessage: `${backUrl}/invite/${shortUrl}/${userId}`,
+      linkMessage: `${backUrl}/invite/${uuid}/${userId}`,
     });
   };
 

src/components/molecules/Div/MessageLog.tsx

@@ -2,7 +2,6 @@ import UserLogo from "@components/atoms/Div/UserLogo";
 import MessageText from "@components/atoms/Div/MessageText";
 import { createRef, useEffect, useState } from "react";
 import styled from "styled-components";
-import MessageHoverButtons from "../Button/MessageHoverButtons";
 import MessageUserDate from "./MessageUserDate";
 
 interface MessageLogProps {

src/components/molecules/Div/UserSettingGeneralTab.tsx

@@ -13,7 +13,6 @@ import { useEffect } from "react";
 
 const UserSettingGeneralTab = () => {
   const { userInfo } = useUserStore();
-
   const {
     showSettingModal,
     settingModalType,
@@ -68,13 +67,13 @@ const UserSettingGeneralTab = () => {
             {userInfo.email}
           </Text>
         </LeftRow>
-        <ButtonWrappper>
+        {/* <ButtonWrappper>
           <FieldButton
             text="확인"
             backgroundColor="setting"
             onClick={() => null}
           />
-        </ButtonWrappper>
+        </ButtonWrappper> */}
       </FieldContinaer>
       <FieldContinaer>
         <LeftRow>

src/components/molecules/Div/WelcomeMessage.tsx

@@ -1,12 +1,11 @@
 import MessageText from "@components/atoms/Div/MessageText";
 import WelcomeIcon from "@components/atoms/Icons/WelcomeIcon";
-import React from "react";
 import styled from "styled-components";
-interface WelcomeMessage {
+interface WelcomeMessageProps {
   name: string;
 }
 
-const WelcomeMessage = ({ name }: WelcomeMessage) => {
+const WelcomeMessage = ({ name }: WelcomeMessageProps) => {
   return (
     <WelcomeMessageProps>
       <IconWrapper>

src/components/molecules/Modal/UserSettingIntroModal.tsx

@@ -12,10 +12,11 @@ const UserSettingIntroModal = () => {
   const { setShowSettingModal } = useSettingModalStore();
 
   const { userInfo, setUserInfo } = useUserStore();
-  const [introduction, changeIntroduction] = useInput();
+  const [introduction, changeIntroduction] = useInput(userInfo.introduction);
   const { mutate: modifyIntro } = useModifyIntro();
 
   const updataIntro = () => {
+    setShowSettingModal(false);
     modifyIntro({ introduction });
     setUserInfo({ ...userInfo, introduction });
   };

src/components/molecules/Modal/UserSettingNameModal.tsx

@@ -12,7 +12,7 @@ const UserSettingNameModal = () => {
   const { userInfo, setUserInfo } = useUserStore();
   const { setShowSettingModal } = useSettingModalStore();
 
-  const [name, changeName] = useInput();
+  const [name, changeName] = useInput(userInfo.name);
   const [password, changePassword] = useInput();
   const { mutate: modifyName } = useModifyName();
   const updateUserName = () => {

src/components/organisms/CommunitySettingDefault.tsx

@@ -4,13 +4,12 @@ import FieldButton from "../atoms/Button/fieldButton";
 import styled from "styled-components";
 import ImageUploadButton from "../molecules/Button/ImageUploadButton";
 import { useCallback, useRef, useState } from "react";
-import { useMutation } from "@tanstack/react-query";
 import { useUserStore } from "@store/useUserStore";
 import { useParams } from "react-router-dom";
 import useDeleteCommunity from "@hooks/query/useDeleteCommnunity";
-import communityApi from "@api/community";
 import useModifyCommunityImage from "@hooks/query/useModifyCommunityImage";
 import DefaultInput from "@components/atoms/Input/DefaultInput";
+import useUpdateCommunityName from "@hooks/query/useUpdateCommunityName";
 
 const CommunitySettingDefault = () => {
   let formData = new FormData();
@@ -20,9 +19,12 @@ const CommunitySettingDefault = () => {
   const [img, setImg] = useState();
   const nameRef = useRef<HTMLInputElement>(null);
 
+  const { mutate: updateCommunityName } = useUpdateCommunityName();
   const { mutate: modifyImage } = useModifyCommunityImage();
-  const { mutate: updateCommunityName } = useMutation(communityApi.update);
-  const { mutate: deleteCommunity } = useDeleteCommunity();
+  const { mutate: deleteCommunity } = useDeleteCommunity({
+    communityId,
+    userId: userInfo.id,
+  });
 
   const changeCommunityName = useCallback(() => {
     if (nameRef.current)

src/components/organisms/MainDirectBody.tsx

@@ -1,7 +1,6 @@
 import clientApi from "@api/axios";
 import WelcomeMessage from "@components/molecules/Div/WelcomeMessage";
 import { Client, Stomp } from "@stomp/stompjs";
-import * as StompJS from "@stomp/stompjs";
 import { useUserStore } from "@store/useUserStore";
 import getFormatDate from "@utils/getFormatDate";
 import { useEffect, useRef, useState } from "react";

src/hooks/query/useAcceptFriend.ts

@@ -1,12 +1,28 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import friendApi from "@api/friend";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 const useAcceptFriend = () => {
   const queryClient = useQueryClient();
+  const QUERY_KEY = ["friendList"];
 
   return useMutation(friendApi.accept, {
+    onMutate: async (newFriend: any) => {
+      await queryClient.cancelQueries({ queryKey: QUERY_KEY });
+      const previousFriendList = queryClient.getQueryData(QUERY_KEY);
+      queryClient.setQueryData(QUERY_KEY, [
+        ...(previousFriendList as any),
+        newFriend,
+      ]);
+
+      return { previousFriendList };
+    },
+
+    onError: (_err: Error, _newFriend: any, context: any) => {
+      queryClient.setQueryData(QUERY_KEY, context.previousFriendList);
+    },
+
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["friendList"] });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEY });
     },
   });
 };

src/hooks/query/useCreateCommunity.ts

@@ -1,37 +1,35 @@
+import { useUserStore } from "@store/useUserStore";
 import { useNavigate } from "react-router-dom";
-import { useUserStore } from "./../../store/useUserStore";
 import communityApi from "@api/community";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 const useCreateCommunity = () => {
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-
   const { userInfo } = useUserStore();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const QUERY_KEY = ["communityList", userInfo.id];
 
   return useMutation(communityApi.create, {
-    onMutate: async (newCommunityList: any) => {
-      await queryClient.cancelQueries({
-        queryKey: ["communityList", { userId: userInfo.id }],
-      });
-      const previousCommunityList = queryClient.getQueriesData([
-        "communityList",
-        newCommunityList,
+    onMutate: async (newCommunity: any) => {
+      await queryClient.cancelQueries({ queryKey: QUERY_KEY });
+      const previousCommunityList = queryClient.getQueriesData(QUERY_KEY);
+      queryClient.setQueryData(QUERY_KEY, [
+        ...previousCommunityList,
+        newCommunity,
       ]);
-      return { newCommunityList, previousCommunityList };
+
+      return { previousCommunityList };
     },
-    onError: (_err: Error, _newCommunityList: any, context: any) => {
-      queryClient.setQueriesData(
-        ["communityList"],
-        context?.previousCommunityList
-      );
+
+    onError: (_err: Error, _newCommunity: any, context: any) => {
+      queryClient.setQueriesData(QUERY_KEY, context.previousCommunityList);
     },
     onSuccess: () => {
       navigate(-1);
     },
     onSettled: () => {
       queryClient.invalidateQueries({
-        queryKey: ["communityList", { userId: userInfo.id }],
+        queryKey: QUERY_KEY,
       });
     },
   });