Merge pull request #38 from ODUGI/refac/ReactQuery

refac: Optimistic Updates 적용

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,
@@ -60,13 +59,13 @@ const UserSettingGeneralTab = () => {
           <Text text="이메일" fontSize="xs" color="setting-tab" mb={8} />
           <Text text={userInfo.email} fontSize="base" color="white" />
         </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

@@ -6,14 +6,13 @@ import useInput from "@hooks/common/useInput";
 import useModifyName from "@hooks/query/useModifyName";
 import useSettingModalStore from "@store/useSettingModalStore";
 import { useUserStore } from "@store/useUserStore";
-import styled from "styled-components";
 import { Bottom, InputWrapper, TextWrapper } from "./UserSettingModal";
 
 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,14 +4,13 @@ import FieldButton from "../atoms/Button/fieldButton";
 import styled from "styled-components";
 import ImageUploadButton from "../molecules/Button/ImageUploadButton";
 import { useState } from "react";
-import { useMutation } from "@tanstack/react-query";
 import { useUserStore } from "@store/useUserStore";
 import { useParams } from "react-router-dom";
 import useInput from "@hooks/common/useInput";
 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();
@@ -21,9 +20,12 @@ const CommunitySettingDefault = () => {
   const [img, setImg] = useState();
   const [name, changeName] = useInput();
 
+  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 = () => {
     updateCommunityName({
@@ -37,7 +39,6 @@ const CommunitySettingDefault = () => {
     if (!communityId) return;
 
     deleteCommunity({ communityId, userId: userInfo.id });
-    window.location.replace("/@me");
   };
 
   const changeImage = () => {
@@ -79,7 +80,7 @@ const CommunitySettingDefault = () => {
             <FieldButton text="아바타 변경하기" onClick={changeImage} />
           </ButtonWrapper>
         </LeftSide>
-        <RightSide></RightSide>
+        {/* <RightSide></RightSide> */}
       </Summary>
       <DefaultInput
         height="48"
@@ -102,13 +103,12 @@ const CommunitySettingDefault = () => {
   );
 };
 
-export default CommunitySettingDefault;
-
 const ButtonWrapper = styled.div`
   width: 140px;
   height: 40px;
   margin-top: 0.5rem;
 `;
+
 const Summary = styled.div`
   width: 100%;
   height: auto;
@@ -129,8 +129,11 @@ const Mini = styled.div`
   flex-direction: row;
   width: auto;
 `;
+
 const RightSide = styled.div`
   display: flex;
   flex-direction: row;
   height: 30%;
 `;
+
+export default CommunitySettingDefault;

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/components/organisms/Modal/CreateCommunityModal.tsx

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import useInput from "@hooks/common/useInput";
 import DefaultInput from "@components/atoms/Input/DefaultInput";
+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";
@@ -12,14 +14,15 @@ import Text from "@components/atoms/Text/Text";
 import useCreateCommunity from "@hooks/query/useCreateCommunity";
 
 const CreateCommunityModal = () => {
+  const navigate = useNavigate();
   let formData = new FormData();
 
   const { setShowModal } = useModalStore();
 
   const [img, setImg] = useState<Blob | undefined>();
   const [name, changeName] = useInput();
 
-  const { mutate: createCommunity } = useCreateCommunity();
+  const { mutate: createCommunity } = useCreateCommunity(userInfo.id);
 
   const MakeCommunity = () => {
     if (!img) return 0;

src/components/organisms/MyAccount.tsx

@@ -8,47 +8,36 @@ import useDeleteUser from "@hooks/query/useDeleteUser";
 
 const MyAccount = () => {
   const { mutate: deleteUser } = useDeleteUser();
+
   return (
     <SettingWrapper>
-      <>
-        <Text
-          text={"내 계정"}
-          color="white"
+      <Text
+        text={"내 계정"}
+        color="white"
+        fontWeight="bold"
+        fontSize="xl"
+        mb={20}
+      />
+      <AccountCard />
+      <Divider
+        sx={{ borderColor: "#96989D93", opacity: 0.5, mr: 9, mt: 5, mb: 5 }}
+      />
+      <Text text={"계정 삭제하기"} color="setting-tab" fontSize="xs" mb={10} />
+      <ButtonWrapper>
+        <FieldButton
+          text="계정 삭제하기"
+          onClick={() => deleteUser()}
+          backgroundColor="voice-hangup"
           fontWeight="bold"
-          fontSize="xl"
-          mb={20}
-        />
-        <AccountCard />
-        <Divider
-          sx={{ borderColor: "#96989D93", opacity: 0.5, mr: 9, mt: 5, mb: 5 }}
-        />
-        <Text
-          text={"계정 삭제하기"}
-          color="setting-tab"
-          fontSize="xs"
-          mb={10}
         />
-        <ButtonWrappper2>
-          <FieldButton
-            text="계정 삭제하기"
-            onClick={() => deleteUser()}
-            backgroundColor="voice-hangup"
-            fontWeight="bold"
-          />
-        </ButtonWrappper2>
-      </>
+      </ButtonWrapper>
     </SettingWrapper>
   );
 };
 
 export default MyAccount;
 
-const ButtonWrappper = styled.div`
-  width: 10em;
-  height: 2rem;
-`;
-
-const ButtonWrappper2 = styled.div`
+const ButtonWrapper = styled.div`
   width: 7.5rem;
   height: 2rem;
 `;