.

hooks/groupStudy/queries.ts

@@ -58,12 +58,16 @@ export const useGroupsMineQuery = (status: "pending" | "all", options?: QueryOpt
   );
 export const useGroupsTitleQuery = (
   userId: string,
-  options?: QueryOptions<{ _id: string; title: string }[]>,
+  options?: QueryOptions<{ _id: string; title: string; category: { sub: string } }[]>,
 ) =>
-  useQuery<{ _id: string; title: string }[], AxiosError, { _id: string; title: string }[]>(
+  useQuery<
+    { _id: string; title: string; category: { sub: string } }[],
+    AxiosError,
+    { _id: string; title: string; category: { sub: string } }[]
+  >(
     [GROUP_STUDY, userId],
     async () => {
-      const res = await axios.get<{ _id: string; title: string }[]>(
+      const res = await axios.get<{ _id: string; title: string; category: { sub: string } }[]>(
         `${SERVER_URI}/groupStudy/profile/${userId}`,
         {},
       );
@@ -76,6 +80,7 @@ export const useGroupIdQuery = (groupStudyId?: string, options?: QueryOptions<IG
   useQuery<IGroup, AxiosError, IGroup>(
     [GROUP_STUDY, groupStudyId],
     async () => {
+      console.log(53);
       const res = await axios.get<IGroup>(`${SERVER_URI}/groupStudy`, {
         params: { groupStudyId },
       });

pageTemplates/gather/detail/GatherHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useState } from "react";
 import styled from "styled-components";
 
@@ -42,13 +42,14 @@ function GatherHeader({ gatherData }: IGatherHeader) {
           <IconWrapper onClick={() => setDrawerType("kakaoShare")}>
             <i className="fa-light fa-share-nodes fa-lg" />
           </IconWrapper>
-          {(gatherData.user as IUserSummary)._id === session?.user.id && (
-            <IconWrapper>
-              <Link href={`/gather/${gatherData.id}/setting`}>
-                <i className="fa-light fa-gear fa-lg" />
-              </Link>
-            </IconWrapper>
-          )}
+          {(gatherData.user as IUserSummary)._id === session?.user.id ||
+            (session?.user.uid === "2259633694" && (
+              <IconWrapper>
+                <Link href={`/gather/${gatherData.id}/setting`}>
+                  <i className="fa-light fa-gear fa-lg" />
+                </Link>
+              </IconWrapper>
+            ))}
         </Flex>
       </Header>
       {drawerType === "kakaoShare" && (

pageTemplates/group/ParticipateModal.tsx

@@ -8,11 +8,7 @@ import styled from "styled-components";
 import { PopOverIcon } from "../../components/Icons/PopOverIcon";
 import { GROUP_STUDY } from "../../constants/keys/queryKeys";
 import { useCompleteToast, useFailToast } from "../../hooks/custom/CustomToast";
-import {
-  useGroupParticipationMutation,
-  useGroupWaitingMutation,
-} from "../../hooks/groupStudy/mutations";
-import { usePointSystemMutation } from "../../hooks/user/mutations";
+import { useGroupWaitingMutation } from "../../hooks/groupStudy/mutations";
 import { useUserInfoQuery } from "../../hooks/user/queries";
 import { IFooterOptions, ModalFooterTwo, ModalLayout } from "../../modals/Modals";
 import { transferGroupDataState } from "../../recoils/transferRecoils";
@@ -21,32 +17,20 @@ import { IModal } from "../../types/components/modalTypes";
 
 interface IParticipateModal extends IModal {
   id: number;
-  isFree: boolean;
+
   feeText: string;
   answer: string;
 }
 
-function ParticipateModal({ isFree, id, setIsModal, answer }: IParticipateModal) {
+function ParticipateModal({ id, setIsModal, answer }: IParticipateModal) {
   const router = useRouter();
   const failToast = useFailToast();
   const completeToast = useCompleteToast();
   const { data: userInfo } = useUserInfoQuery();
   const [selectBtn, setSelectBtn] = useState<"point" | "deposit">("point");
 
-  const { mutate: getPoint } = usePointSystemMutation("point");
-  const { mutate: getDeposit } = usePointSystemMutation("deposit");
-
   const setTransferGroup = useSetRecoilState(transferGroupDataState);
 
-  const chargePoint = () => {
-    if (selectBtn === "point") {
-      getPoint({ value: 30, message: "소모임 가입" });
-    }
-    if (selectBtn === "deposit") {
-      getDeposit({ value: -200, message: "소모임 가입" });
-    }
-  };
-
   const queryClient = useQueryClient();
 
   const resetCache = () => {
@@ -55,14 +39,6 @@ function ParticipateModal({ isFree, id, setIsModal, answer }: IParticipateModal)
     router.push(`/group/${id}`);
   };
 
-  const { mutate: participate } = useGroupParticipationMutation("post", id, {
-    onSuccess() {
-      if (isFree) chargePoint();
-      completeToast("free", "가입이 완료되었습니다.");
-      resetCache();
-    },
-  });
-
   const { mutate: sendRegisterForm } = useGroupWaitingMutation(id, {
     onSuccess() {
       completeToast("free", "가입 신청이 완료되었습니다.");
@@ -87,10 +63,7 @@ function ParticipateModal({ isFree, id, setIsModal, answer }: IParticipateModal)
         failToast("free", "보증금을 사용한 뒤에도 1000원 이상 보유해야 합니다.");
         return;
       }
-    }
-
-    if (isFree) participate();
-    else sendRegisterForm({ answer, pointType: selectBtn });
+    } else sendRegisterForm({ answer, pointType: selectBtn });
     setIsModal(false);
   };
 

pageTemplates/group/detail/GroupBottomNav.tsx

@@ -1,28 +1,45 @@
+import { Box, Button, Flex } from "@chakra-ui/react";
 import { useRouter } from "next/dist/client/router";
+import Image from "next/image";
 import { useParams } from "next/navigation";
 import { useSession } from "next-auth/react";
+import { useState } from "react";
 import { useQueryClient } from "react-query";
+import { useSetRecoilState } from "recoil";
 
 import BottomFixedButton from "../../../components/atoms/BottomFixedButton";
+import BottomFlexDrawer from "../../../components/organisms/drawer/BottomFlexDrawer";
 import { GROUP_STUDY } from "../../../constants/keys/queryKeys";
 import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast";
 import { useGroupParticipationMutation } from "../../../hooks/groupStudy/mutations";
+import { transferGroupDataState } from "../../../recoils/transferRecoils";
 import { IGroup } from "../../../types/models/groupTypes/group";
 
 interface IGroupBottomNav {
   data: IGroup;
 }
 
-type ButtonType = "cancel" | "participate" | "expire";
+type ButtonType = "cancel" | "participate" | "expire" | "register";
 
 function GroupBottomNav({ data }: IGroupBottomNav) {
   const router = useRouter();
   const completeToast = useCompleteToast();
   const { id } = useParams<{ id: string }>() || {};
+  const setTransferGroup = useSetRecoilState(transferGroupDataState);
 
   const errorToast = useErrorToast();
   const { data: session } = useSession();
 
+  const [isModal, setIsModal] = useState(false);
+
+  const { mutate: participate } = useGroupParticipationMutation("post", +id, {
+    onSuccess() {
+      completeToast("free", "가입이 완료되었습니다.");
+      setTransferGroup(null);
+      queryClient.invalidateQueries([GROUP_STUDY, id]);
+    },
+  });
+
   const url = router.asPath;
   const myUid = session?.user.uid;
 
@@ -44,6 +61,7 @@ function GroupBottomNav({ data }: IGroupBottomNav) {
   const onClick = (type: ButtonType) => {
     if (type === "cancel") cancel();
     if (type === "participate") router.push(`${url}/participate`);
+    if (type === "register") participate();
   };
 
   const getButtonSettings = () => {
@@ -58,13 +76,69 @@ function GroupBottomNav({ data }: IGroupBottomNav) {
       };
     return {
       text: "가입 신청",
-      handleFunction: () => onClick("participate"),
+      handleFunction: data.fee ? () => onClick("participate") : () => setIsModal(true),
     };
   };
 
   const { text, handleFunction } = getButtonSettings();
 
-  return <BottomFixedButton text={text} func={handleFunction} />;
+  return (
+    <>
+      <BottomFixedButton text={text} func={handleFunction} />
+      {isModal && (
+        <BottomFlexDrawer
+          isDrawerUp
+          isOverlay
+          height={429}
+          isHideBottom
+          setIsModal={() => setIsModal(false)}
+        >
+          <Box
+            py={3}
+            lineHeight="32px"
+            w="100%"
+            fontWeight="semibold"
+            fontSize="20px"
+            textAlign="start"
+          >
+            {data.questionText
+              ? "모임장의 승인이 필요한 소모임이에요."
+              : "즉시 가입이 가능한 소모임이에요."}
+            <br /> {data.questionText ? "참여를 희망하시나요?" : "활동을 시작해볼까요?"}
+          </Box>
+          <Box p={5}>
+            <Image
+              src="https://studyabout.s3.ap-northeast-2.amazonaws.com/%EC%95%84%EC%9D%B4%EC%BD%98/freepik__background__12597-removebg-preview.png"
+              width={160}
+              height={160}
+              alt="studyResult"
+            />
+          </Box>
+
+          <Flex direction="column" mt="auto" w="100%">
+            <Button
+              w="full"
+              size="lg"
+              colorScheme="black"
+              onClick={() => (data.questionText ? onClick("participate") : onClick("register"))}
+            >
+              {data.questionText ? "가입 신청하기" : "가입하기"}
+            </Button>
+            <Button
+              my={2}
+              size="lg"
+              color="gray.700"
+              fontWeight="semibold"
+              variant="ghost"
+              onClick={() => setIsModal(false)}
+            >
+              다음에 할게요
+            </Button>
+          </Flex>
+        </BottomFlexDrawer>
+      )}
+    </>
+  );
 }
 
 export default GroupBottomNav;

pageTemplates/group/detail/GroupHeader.tsx

@@ -97,7 +97,7 @@ function GroupHeader({ group }: IGroupHeader) {
 
   return (
     <>
-      <Header title="모임 정보" rightPadding={6} isCenter >
+      <Header title="모임 정보" rightPadding={6} isCenter>
         <MenuButton menuArr={menuArr} />
       </Header>
       {isSettigModal && (

pages/group/[id]/index.tsx

@@ -14,7 +14,6 @@ import Slide from "../../../components/layouts/PageSlide";
 import BlurredLink from "../../../components/molecules/BlurredLink";
 import InfoBoxCol from "../../../components/molecules/InfoBoxCol";
 import TabNav from "../../../components/molecules/navs/TabNav";
-import { useGroupAttendancePatchMutation } from "../../../hooks/groupStudy/mutations";
 import { useGroupIdQuery } from "../../../hooks/groupStudy/queries";
 import { checkGroupGathering } from "../../../libs/group/checkGroupGathering";
 import GroupBottomNav from "../../../pageTemplates/group/detail/GroupBottomNav";
@@ -25,7 +24,7 @@ import GroupHeader from "../../../pageTemplates/group/detail/GroupHeader";
 import GroupParticipation from "../../../pageTemplates/group/detail/GroupParticipation";
 import { transferGroupDataState } from "../../../recoils/transferRecoils";
 import { convertMeetingTypeToKr } from "../../../utils/convertUtils/convertText";
-import { dayjsToFormat, dayjsToStr } from "../../../utils/dateTimeUtils";
+import { dayjsToFormat } from "../../../utils/dateTimeUtils";
 
 export type GroupSectionCategory = "정 보" | "피 드";
 const TAB_LIST: GroupSectionCategory[] = ["정 보", "피 드"];
@@ -40,26 +39,21 @@ function GroupDetail() {
   const [group, setTransferGroup] = useRecoilState(transferGroupDataState);
 
   const { data: groupData, refetch } = useGroupIdQuery(id, { enabled: !!id && !group });
-
+  console.log(43, groupData, !!id, group);
   useEffect(() => {
     if (groupData) {
+      console.log(42, groupData);
       setTransferGroup(groupData);
     }
   }, [groupData]);
 
-  const { mutate: patchAttendance } = useGroupAttendancePatchMutation(+id, {
-    onSuccess() {
-      resetCache();
-    },
-  });
-
-  useEffect(() => {
-    if (!group) return;
-    const firstDate = group.attendance.firstDate;
-    if (!firstDate) return;
-    if (firstDate !== dayjsToStr(dayjs().subtract(1, "day").startOf("week").add(1, "day")))
-      patchAttendance();
-  }, [group?.attendance?.firstDate]);
+  // useEffect(() => {
+  //   if (!group) return;
+  //   const firstDate = group.attendance.firstDate;
+  //   if (!firstDate) return;
+  //   if (firstDate !== dayjsToStr(dayjs().subtract(1, "day").startOf("week").add(1, "day")))
+  //     patchAttendance();
+  // }, [group?.attendance?.firstDate]);
 
   const belong = group && checkGroupGathering(group.hashTag);
 
@@ -74,6 +68,7 @@ function GroupDetail() {
     refetch();
   };
 
+  console.log(group, session, category === "정 보", isMember, !isGuest);
   return (
     <>
       {group && <GroupHeader group={group} />}

pages/group/[id]/member.tsx

@@ -31,6 +31,14 @@ export default function Member() {
 
   const { data: groupData } = useGroupIdQuery(id, { enabled: !!id && !transferGroup });
 
+  const [users, setUsers] = useState<GroupParicipantProps[]>([]);
+
+  useEffect(() => {
+    if (group) {
+      setUsers(group.participants);
+    }
+  }, [group]);
+
   useEffect(() => {
     if (transferGroup) setGroup(transferGroup);
     else if (groupData) setGroup(groupData);
@@ -60,6 +68,11 @@ export default function Member() {
       if (belong) {
         await handleBelong({ uid: deleteUser?.user?.uid, belong: null });
       }
+      setGroup((old) => ({
+        ...old,
+        participants: old.participants.filter((par) => par.user.uid !== deleteUser.user.uid),
+      }));
+      setDeleteUser(null);
     },
     text: "추방",
   };
@@ -73,7 +86,7 @@ export default function Member() {
             참여중인 멤버
           </Box>
           <Flex direction="column">
-            {group?.participants.map((who, idx) => (
+            {users.map((who, idx) => (
               <Box key={idx}>
                 <ProfileCommentCard
                   user={who.user}