Merge branch 'main' of https://github.com/AboutClan/About

AboutClan · Nov 7, 2024 · a800c19 · a800c19
2 parents d6b9fe4 + 3320e23
commit a800c19
Show file tree

Hide file tree

Showing 14 changed files with 219 additions and 191 deletions.
diff --git a/components/atoms/buttons/MenuButton.tsx b/components/atoms/buttons/MenuButton.tsx
@@ -1,11 +1,13 @@
 import { Button, Menu, MenuButton as ChakraMenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+
 import { EllipsisIcon } from "../../Icons/DotIcons";
 import KakaoShareBtn from "../../Icons/KakaoShareBtn";
 import ButtonWrapper from "../ButtonWrapper";
 
 export interface MenuProps {
   text?: string;
   func?: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   kakaoOptions?: any;
 }
 
@@ -25,7 +27,7 @@ function MenuButton({ menuArr }: MenuButtonProps) {
           </ChakraMenuButton>
           <MenuList fontSize="14px">
             {menuArr.map((menu) => (
-              <MenuItem key={menu?.text || "kakao"} onClick={menu?.func}>
+              <MenuItem key={menu?.text || "kakao"} onClick={menu?.func} bg="white">
                 {menu?.text}
                 {menu?.kakaoOptions && <KakaoShareBtn variant="unstyled" {...menu.kakaoOptions} />}
               </MenuItem>

diff --git a/components/molecules/cards/ProfileCommentCard.tsx b/components/molecules/cards/ProfileCommentCard.tsx
@@ -35,7 +35,7 @@ export default function ProfileCommentCard({
   const [isCommentModal, setIsCommentModal] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
   const [text, setText] = useState(comment?.text || "");
-  console.log(24, comment, text);
+
   const changeText = () => {
     changeComment(text);
     setIsEdit(false);
@@ -59,7 +59,7 @@ export default function ProfileCommentCard({
         <Flex direction="column" justify="center" ml={3} my={1}>
           <Flex align="center" mb={memo || comment ? 1 : 0}>
             <Box lineHeight="20px" mr={1} fontWeight="semibold" fontSize="13px">
-              {user?.name}
+              {user?.name || "익명"}
             </Box>
             <UserBadge score={user?.score || 0} uid={user?.uid} />
             {hasCommentButton && (

diff --git a/constants/keys/queryKeys.ts b/constants/keys/queryKeys.ts
@@ -30,7 +30,7 @@ export const ARRIVE_FINDMEMO = "arrive_findmemo";
 export const PLAZA_FINDALL = "plaza_findall";
 export const USER_REQUEST = "user_request";
 export const GATHER_CONTENT = "GATHER";
-export const GROUP_STUDY_ALL = "GroupAll";
+
 export const GROUP_STUDY = "group";
 
 export const Feed = "feed";

diff --git a/hooks/groupStudy/queries.ts b/hooks/groupStudy/queries.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosError } from "axios";
 import { useQuery } from "react-query";
 
-import { GATHER_CONTENT, GROUP_STUDY, GROUP_STUDY_ALL } from "../../constants/keys/queryKeys";
+import { GATHER_CONTENT, GROUP_STUDY } from "../../constants/keys/queryKeys";
 import { SERVER_URI } from "../../constants/system";
 import { IGatherSummary } from "../../pages/review";
 import { QueryOptions } from "../../types/hooks/reactTypes";
@@ -20,7 +20,7 @@ export const useGroupQuery = (
   options?: QueryOptions<IGroup[]>,
 ) =>
   useQuery<IGroup[], AxiosError, IGroup[]>(
-    [GROUP_STUDY_ALL, filter, category, cursor],
+    [GROUP_STUDY, filter, category, cursor],
     async () => {
       const res = await axios.get<IGroup[]>(`${SERVER_URI}/groupStudy`, {
         params: { filter, category, cursor },

diff --git a/modals/gather/GatherWritingConfirmModal.tsx b/modals/gather/GatherWritingConfirmModal.tsx
@@ -14,7 +14,6 @@ import { useErrorToast } from "../../hooks/custom/CustomToast";
 import { useGatherWritingMutation } from "../../hooks/gather/mutations";
 import { isGatherEditState } from "../../recoils/checkAtoms";
 import { sharedGatherWritingState } from "../../recoils/sharedDataAtoms";
-import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
 import { IGather, IGatherWriting } from "../../types/models/gatherTypes/gatherTypes";
 import { IFooterOptions, ModalLayout } from "../Modals";
@@ -79,9 +78,8 @@ function GatherWritingConfirmModal({ setIsModal, gatherData }: IGatherWritingCon
           footerOptions={footerOptions}
         >
           <>
-            <ModalSubtitle>
-              {isFirst ? "개설 내용을 확인해 주세요!" : "선택사항. 기본 랜덤 이미지로 설정됩니다."}
-            </ModalSubtitle>
+            {isFirst ? "개설 내용을 확인해 주세요!" : "선택사항. 기본 랜덤 이미지로 설정됩니다."}
+
             {isFirst ? (
               <Container>
                 <Item>
@@ -120,19 +118,21 @@ function GatherWritingConfirmModal({ setIsModal, gatherData }: IGatherWritingCon
 const Container = styled.div`
   line-height: 2;
   font-size: 13px;
+  text-align: start;
 `;
 
 const Item = styled.div`
   width: 100%;
   display: flex;
   > span:first-child {
     display: inline-block;
-    width: 32px;
+    width: 32px;  text-align: start;
     font-weight: 600;
     margin-right: var(--gap-2);
   }
   > span:last-child {
     flex: 1;
+    text-align: start;
     display: inline-block;
     white-space: nowrap;
     overflow: hidden;

diff --git a/modals/groupStudy/AttendCheckModal.tsx b/modals/groupStudy/AttendCheckModal.tsx
@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import styled from "styled-components";
 
-import { GROUP_STUDY_ALL } from "../../constants/keys/queryKeys";
+import { GROUP_STUDY } from "../../constants/keys/queryKeys";
 import { useResetQueryData } from "../../hooks/custom/CustomHooks";
 import { useCompleteToast } from "../../hooks/custom/CustomToast";
 import { useGroupAttendMutation } from "../../hooks/groupStudy/mutations";
@@ -37,7 +37,7 @@ function AttendCheckModal({
   const { mutate } = useGroupAttendMutation(id, {
     onSuccess() {
       completeToast("free", "저장되었습니다.");
-      resetQueryData([GROUP_STUDY_ALL]);
+      resetQueryData([GROUP_STUDY]);
       setIsModal(false);
     },
   });
@@ -90,8 +90,8 @@ function AttendCheckModal({
                 myAttend?.includes(day)
                   ? "mint"
                   : mySubAttend?.includes(day)
-                    ? "yellowTheme"
-                    : "gray"
+                  ? "yellowTheme"
+                  : "gray"
               }
             >
               {dayjsToFormat(item, "ddd요일")}

diff --git a/modals/groupStudy/InviteOuterModal.tsx b/modals/groupStudy/InviteOuterModal.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { useParams } from "next/navigation";
 import { useQueryClient } from "react-query";
 
-import { GROUP_STUDY_ALL } from "../../constants/keys/queryKeys";
+import { GROUP_STUDY } from "../../constants/keys/queryKeys";
 import { useCompleteToast } from "../../hooks/custom/CustomToast";
 import { useGroupWaitingStatusMutation } from "../../hooks/groupStudy/mutations";
 import { IModal } from "../../types/components/modalTypes";
@@ -17,10 +17,9 @@ function InviteOuterModal({ setIsModal }: InviteOuterModalProps) {
   const { mutate: mutate2, isLoading } = useGroupWaitingStatusMutation(+id, {
     onSuccess() {
       completeToast("free", "가입되었습니다.");
-      queryClient.invalidateQueries([GROUP_STUDY_ALL]);
+      queryClient.invalidateQueries([GROUP_STUDY]);
     },
   });
-
 
   const footerOptions: IFooterOptions = {
     main: {

diff --git a/modals/groupStudy/WritingConfirmModal.tsx b/modals/groupStudy/WritingConfirmModal.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components";
 
 import SuccessScreen from "../../components/layouts/SuccessScreen";
 import { GROUP_WRITING_STORE } from "../../constants/keys/localStorage";
-import { GROUP_STUDY, GROUP_STUDY_ALL } from "../../constants/keys/queryKeys";
+import { GROUP_STUDY } from "../../constants/keys/queryKeys";
 import { useResetQueryData } from "../../hooks/custom/CustomHooks";
 import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast";
 import { useGroupWritingMutation } from "../../hooks/groupStudy/mutations";
@@ -37,14 +37,14 @@ function GroupConfirmModal({ setIsModal, groupWriting }: IGroupConfirmModal) {
 
   const { mutate } = useGroupWritingMutation("post", {
     onSuccess() {
-      resetQueryData([GROUP_STUDY_ALL]);
+      resetQueryData([GROUP_STUDY]);
       resetLocalStorage();
       setIsSuccessScreen(true);
     },
     onError: errorToast,
   });
 
-  const { mutate: updateGroup } = useGroupWritingMutation("patch", {
+  const { mutate: updateGroup, isLoading } = useGroupWritingMutation("patch", {
     onSuccess() {
       resetLocalStorage();
 
@@ -66,6 +66,7 @@ function GroupConfirmModal({ setIsModal, groupWriting }: IGroupConfirmModal) {
     main: {
       text: groupWriting?.id ? "내용 수정" : "소모임 개설",
       func: onSubmit,
+      isLoading,
     },
   };
 
@@ -125,6 +126,7 @@ const Item = styled.div`
     display: inline-block;
     white-space: nowrap;
     overflow: hidden;
+    text-align: start;
     text-overflow: ellipsis;
   }
 `;

diff --git a/pageTemplates/group/admin/GroupAdminInvitation.tsx b/pageTemplates/group/admin/GroupAdminInvitation.tsx
@@ -9,7 +9,7 @@ import { Input } from "../../../components/atoms/Input";
 import { MainLoadingAbsolute } from "../../../components/atoms/loaders/MainLoading";
 import Selector from "../../../components/atoms/Selector";
 import InviteUserGroups from "../../../components/molecules/groups/InviteUserGroups";
-import { GROUP_STUDY_ALL } from "../../../constants/keys/queryKeys";
+import { GROUP_STUDY } from "../../../constants/keys/queryKeys";
 import { LOCATION_ALL } from "../../../constants/location";
 import { useAdminUsersLocationControlQuery } from "../../../hooks/admin/quries";
 import { useCompleteToast } from "../../../hooks/custom/CustomToast";
@@ -45,7 +45,7 @@ export default function GroupAdminInvitation() {
   const { mutate: mutate2 } = useGroupWaitingStatusMutation(+id, {
     onSuccess() {
       completeToast("free", "가입되었습니다.");
-      queryClient.invalidateQueries([GROUP_STUDY_ALL]);
+      queryClient.invalidateQueries([GROUP_STUDY]);
       refetch();
     },
   });

diff --git a/pageTemplates/group/detail/GroupHeader.tsx b/pageTemplates/group/detail/GroupHeader.tsx
@@ -1,40 +1,39 @@
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import { useQueryClient } from "react-query";
+import { useSetRecoilState } from "recoil";
+import AlertModal, { IAlertModalOptions } from "../../../components/AlertModal";
 import MenuButton, { MenuProps } from "../../../components/atoms/buttons/MenuButton";
-
 import Header from "../../../components/layouts/Header";
-import { GROUP_STUDY_ALL } from "../../../constants/keys/queryKeys";
-import { useResetQueryData } from "../../../hooks/custom/CustomHooks";
-import { useCompleteToast, useTypeToast } from "../../../hooks/custom/CustomToast";
+import { GROUP_WRITING_STORE } from "../../../constants/keys/localStorage";
+import { GROUP_STUDY } from "../../../constants/keys/queryKeys";
+import { useCompleteToast } from "../../../hooks/custom/CustomToast";
 import { useGroupParticipationMutation } from "../../../hooks/groupStudy/mutations";
+import { transferGroupDataState } from "../../../recoils/transferRecoils";
 import { IGroup } from "../../../types/models/groupTypes/group";
-import BottomDrawer from "../../profile/BottomDrawer";
+import { setLocalStorageObj } from "../../../utils/storageUtils";
 
 interface IGroupHeader {
   group: IGroup;
 }
 
 function GroupHeader({ group }: IGroupHeader) {
+  const { data: session } = useSession();
   const completeToast = useCompleteToast();
   const router = useRouter();
-  const typeToast = useTypeToast();
+  const isAdmin = group.organizer.uid === session?.user.uid;
+  const isMember = group.participants.some((par) => par.user.uid === session?.user.uid);
 
   const [isSettigModal, setIsSettingModal] = useState(false);
+  const setTransferGroup = useSetRecoilState(transferGroupDataState);
 
-  const resetQueryData = useResetQueryData();
-
-  // const onClick = () => {
-  //   setLocalStorageObj(GROUP_WRITING_STORE, {
-  //     ...group,
-  //   });
-  //   router.push(`/group/writing/main`);
-  // };
-
+  const queryClient = useQueryClient();
   const movePage = async () => {
     completeToast("free", "탈퇴되었습니다.");
-    await resetQueryData([GROUP_STUDY_ALL], () => {
-      router.push("/group");
-    });
+    queryClient.invalidateQueries({ queryKey: [GROUP_STUDY], exact: false });
+    setTransferGroup(null);
+    router.push("/group");
   };
 
   const { mutate } = useGroupParticipationMutation("delete", group?.id, {
@@ -46,10 +45,29 @@ function GroupHeader({ group }: IGroupHeader) {
   };
 
   const menuArr: MenuProps[] = [
-    {
-      text: "내용 수정하기",
-      func: () => {},
-    },
+    ...(isMember
+      ? [
+          {
+            text: "소모임 탈퇴하기",
+            func: () => {
+              setIsSettingModal(true);
+            },
+          },
+        ]
+      : []),
+    ...(isAdmin
+      ? [
+          {
+            text: "내용 수정하기",
+            func: () => {
+              setLocalStorageObj(GROUP_WRITING_STORE, {
+                ...group,
+              });
+              router.push(`/group/writing/main`);
+            },
+          },
+        ]
+      : []),
     {
       kakaoOptions: {
         type: "study",
@@ -61,13 +79,20 @@ function GroupHeader({ group }: IGroupHeader) {
     },
   ];
 
+  const alertOptions: IAlertModalOptions = {
+    title: "소모임 탈퇴",
+    subTitle: "소모임을 탈퇴하시겠어요?",
+    text: "탈퇴",
+    func: handleQuit,
+  };
+
   return (
     <>
       <Header title={group?.title} rightPadding={6}>
         <MenuButton menuArr={menuArr} />
       </Header>
       {isSettigModal && (
-        <BottomDrawer type="group" onClose={() => setIsSettingModal(false)} onSubmit={handleQuit} />
+        <AlertModal options={alertOptions} setIsModal={setIsSettingModal} colorType="red" />
       )}
     </>
   );

diff --git a/pages/group/[id]/member.tsx b/pages/group/[id]/member.tsx
@@ -9,7 +9,7 @@ import AlertModal, { IAlertModalOptions } from "../../../components/AlertModal";
 import Header from "../../../components/layouts/Header";
 import Slide from "../../../components/layouts/PageSlide";
 import ProfileCommentCard from "../../../components/molecules/cards/ProfileCommentCard";
-import { GROUP_STUDY_ALL } from "../../../constants/keys/queryKeys";
+import { GROUP_STUDY } from "../../../constants/keys/queryKeys";
 import { GROUP_STUDY_ROLE } from "../../../constants/settingValue/groupStudy";
 import { useCompleteToast } from "../../../hooks/custom/CustomToast";
 import { useGroupExileUserMutation } from "../../../hooks/groupStudy/mutations";
@@ -39,7 +39,7 @@ export default function Member() {
   const queryClient = useQueryClient();
   const { mutate } = useGroupExileUserMutation(+id, {
     onSuccess() {
-      queryClient.invalidateQueries([GROUP_STUDY_ALL]);
+      queryClient.invalidateQueries([GROUP_STUDY]);
       completeToast("free", "추방되었습니다.");
     },
     onError(err) {

diff --git a/pages/group/[id]/participate.tsx b/pages/group/[id]/participate.tsx
@@ -24,7 +24,7 @@ function Participate() {
     <>
       <>
         <Header title="" />
-        <Slide>
+        <Slide isNoPadding>
           <RegisterLayout>
             <RegisterOverview>
               {group?.questionText ? (