diff --git a/hooks/groupStudy/queries.ts b/hooks/groupStudy/queries.ts index 1c7493e8..c9ba0927 100644 --- a/hooks/groupStudy/queries.ts +++ b/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( [GROUP_STUDY, groupStudyId], async () => { + console.log(53); const res = await axios.get(`${SERVER_URI}/groupStudy`, { params: { groupStudyId }, }); diff --git a/pageTemplates/gather/detail/GatherHeader.tsx b/pageTemplates/gather/detail/GatherHeader.tsx index bb36745b..f6dd86a4 100644 --- a/pageTemplates/gather/detail/GatherHeader.tsx +++ b/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) { setDrawerType("kakaoShare")}> - {(gatherData.user as IUserSummary)._id === session?.user.id && ( - - - - - - )} + {(gatherData.user as IUserSummary)._id === session?.user.id || + (session?.user.uid === "2259633694" && ( + + + + + + ))} {drawerType === "kakaoShare" && ( diff --git a/pageTemplates/group/ParticipateModal.tsx b/pageTemplates/group/ParticipateModal.tsx index 0175df60..344faab0 100644 --- a/pageTemplates/group/ParticipateModal.tsx +++ b/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); }; diff --git a/pageTemplates/group/detail/GroupBottomNav.tsx b/pageTemplates/group/detail/GroupBottomNav.tsx index cf82394c..dcb3dc84 100644 --- a/pageTemplates/group/detail/GroupBottomNav.tsx +++ b/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 ; + return ( + <> + + {isModal && ( + setIsModal(false)} + > + + {data.questionText + ? "모임장의 승인이 필요한 소모임이에요." + : "즉시 가입이 가능한 소모임이에요."} +
{data.questionText ? "참여를 희망하시나요?" : "활동을 시작해볼까요?"} +
+ + studyResult + + + + + + +
+ )} + + ); } export default GroupBottomNav; diff --git a/pageTemplates/group/detail/GroupHeader.tsx b/pageTemplates/group/detail/GroupHeader.tsx index df76e141..50f10e69 100644 --- a/pageTemplates/group/detail/GroupHeader.tsx +++ b/pageTemplates/group/detail/GroupHeader.tsx @@ -97,7 +97,7 @@ function GroupHeader({ group }: IGroupHeader) { return ( <> -
+
{isSettigModal && ( diff --git a/pages/group/[id]/index.tsx b/pages/group/[id]/index.tsx index 302d9834..1f880eb4 100644 --- a/pages/group/[id]/index.tsx +++ b/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 && } diff --git a/pages/group/[id]/member.tsx b/pages/group/[id]/member.tsx index 3ec827db..b2a84d48 100644 --- a/pages/group/[id]/member.tsx +++ b/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([]); + + 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() { 참여중인 멤버 - {group?.participants.map((who, idx) => ( + {users.map((who, idx) => ( () || {}; + + const queryClient = useQueryClient(); + + const { mutate: sendRegisterForm } = useGroupWaitingMutation(group?.id, { + onSuccess() { + toast("success", "가입 신청이 완료되었습니다."); + setGroup(null); + queryClient.invalidateQueries([GROUP_STUDY, id]); + }, + }); const onClick = () => { - setIsModal(true); + sendRegisterForm({ answer: questionText, pointType: "point" }); }; return ( @@ -57,7 +74,6 @@ function Participate() { {isModal && ( props.title); + const groups = data?.map((props) => props.category.sub); useEffect(() => { if (user) setTransferUserName(user.name);