Merge pull request #138 from ppochaco/fix/137-main

Week10/issue#137 �쿠키 주기 버그 수정

src/api/services/group/member.api.ts

@@ -1,8 +1,8 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseInfiniteQuery } from '@tanstack/react-query'
 
 import { authorizationInstance } from '@/api/instance'
 import { appendParamsToUrl } from '@/api/utils/common/appendParamsToUrl'
-import { Member, PagingRequestParams, PagingResponse } from '@/types'
+import { GroupRole, Member, PagingRequestParams, PagingResponse } from '@/types'
 
 type GroupMembersRequestParams = {
   groupId: number
@@ -57,3 +57,28 @@ export const membersQuries = {
 export const joinGroupMember = async (inviteCode: string) => {
   await authorizationInstance.post('/api/group/join', { inviteCode })
 }
+
+export const exitGroupMember = async (groupId: number) => {
+  await authorizationInstance.post('/api/group/exit', {
+    groupId,
+  })
+}
+
+type GruopRoleResponse = {
+  role: GroupRole
+}
+
+const getGroupRole = async (groupId: number) => {
+  const response = await authorizationInstance.get<GruopRoleResponse>(
+    `/api/group/${groupId}/role`
+  )
+
+  return response.data.role
+}
+
+export const useGroupRole = (groupId: number) => {
+  return useQuery({
+    queryKey: ['group', 'role', groupId],
+    queryFn: () => getGroupRole(groupId),
+  })
+}

src/pages/GroupPage/ExitGroupButton/index.tsx

@@ -0,0 +1,71 @@
+import { BiSolidError } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
+
+import { Button, Flex, useDisclosure } from '@chakra-ui/react'
+import { useMutation } from '@tanstack/react-query'
+
+import { queryClient } from '@/api/instance'
+import { exitGroupMember } from '@/api/services/group/member.api'
+import {
+  ConfirmModal,
+  ConfirmModalButton,
+} from '@/components/Modal/ConfirmModal'
+import { GroupRole } from '@/types'
+
+interface ExitGroupButtonProps {
+  groupId: number
+  groupName: string
+  role: GroupRole
+}
+
+export const ExitGroupButton = ({
+  groupId,
+  groupName,
+  role,
+}: ExitGroupButtonProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const navigate = useNavigate()
+
+  const { mutate: exitGroup } = useMutation({
+    mutationFn: () => exitGroupMember(groupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['groups'] })
+      navigate('/')
+    },
+  })
+
+  return (
+    <Flex justifyContent="end" paddingX={8} paddingBottom={5}>
+      <Button
+        variant="link"
+        size="sm"
+        color="brown.500"
+        onClick={onOpen}
+        _hover={{ color: 'brown.600' }}
+      >
+        그룹 탈퇴하기
+      </Button>
+      <ConfirmModal
+        isOpen={isOpen}
+        onClose={onClose}
+        icon={<BiSolidError />}
+        title={`정말로 ${groupName} 그룹에서 나가시겠습니까?`}
+        description={
+          role === 'LEADER'
+            ? '그룹장이 그룹을 나가면 그룹이 삭제됩니다.'
+            : '그룹에서의 모든 활동은 삭제됩니다.'
+        }
+        confirmButton={
+          <ConfirmModalButton
+            onClick={() => {
+              onClose()
+              exitGroup()
+            }}
+          >
+            확인
+          </ConfirmModalButton>
+        }
+      />
+    </Flex>
+  )
+}

src/pages/GroupPage/Management/index.tsx

@@ -4,11 +4,12 @@ import { Link } from 'react-router-dom'
 import { Box, Flex, Text } from '@chakra-ui/react'
 
 import { CardButton } from '@/components/CardButton'
+import { GroupRole } from '@/types'
 
 import { InviteMemberModal } from './InviteMemberModal'
 
 interface ManagementProps {
-  role: 'leader' | 'member'
+  role: GroupRole
   groupId: number
 }
 
@@ -25,7 +26,7 @@ export default function Management({ role, groupId }: ManagementProps) {
           Icon={BiPlus}
         />
       </Flex>
-      {role === 'leader' && (
+      {role === 'LEADER' && (
         <Box
           display="flex"
           flexDirection="row"

src/pages/GroupPage/Profile/index.tsx

@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react'
 
 import { Avatar, Box, HStack, Input, Text, VStack } from '@chakra-ui/react'
 
-import { Group } from '@/types'
+import { Group, GroupRole } from '@/types'
 
 import { EditProfile } from './EditProfile'
 
 type GroupProps = {
   gprofile: Group
-  role: 'leader' | 'member'
+  role: GroupRole
 }
 
 export default function Profile({ role, gprofile }: GroupProps) {
@@ -70,7 +70,7 @@ export default function Profile({ role, gprofile }: GroupProps) {
                 fontWeight="bold"
                 color="primary"
               >
-                {role === 'leader' ? '그룹장' : '그룹원'}
+                {role === 'LEADER' ? '그룹장' : '그룹원'}
               </Text>
             </HStack>
 
@@ -95,7 +95,7 @@ export default function Profile({ role, gprofile }: GroupProps) {
                   {gprofile.groupDescription}
                 </Text>
               )}
-              {role === 'leader' && (
+              {role === 'LEADER' && (
                 <EditProfile
                   isEditing={isEditing}
                   setIsEditing={(isEdit) => setIsEditing(isEdit)}

src/pages/GroupPage/index.tsx

@@ -1,12 +1,14 @@
 import { useParams } from 'react-router-dom'
 
-import { Box } from '@chakra-ui/react'
+import { Box, Flex } from '@chakra-ui/react'
 
 import { useGroupInfo } from '@/api/services/group/group.api'
+import { useGroupRole } from '@/api/services/group/member.api'
 import { Loading } from '@/components/Loading'
 import { RankingGraph } from '@/components/RankingGraph'
 import ErrorPage from '@/pages/ErrorPage'
 
+import { ExitGroupButton } from './ExitGroupButton'
 import Management from './Management'
 import Navigate from './Navigate'
 import Profile from './Profile'
@@ -38,19 +40,15 @@ const dummyRankData = [
   },
 ]
 
-const userRole = 'leader' // "leader" or "member"
-
 export default function GroupPage() {
   const { groupId } = useParams<{ groupId: string }>()
 
+  if (!groupId) return <ErrorPage />
+
   return (
     <div>
       <Navigate />
       <GroupSection groupId={Number(groupId)} />
-      <Box p="0 30px">
-        <RankingGraph rank={dummyRankData} />
-      </Box>
-      {groupId && <Management role={userRole} groupId={Number(groupId)} />}
     </div>
   )
 }
@@ -61,10 +59,24 @@ interface GroupSectionProps {
 
 const GroupSection = ({ groupId }: GroupSectionProps) => {
   const { data: groupData, error, status } = useGroupInfo(groupId)
+  const { data: role } = useGroupRole(groupId)
 
   if (status === 'pending') return <Loading />
   if (error) return <ErrorPage />
-  if (!groupData) return <ErrorPage />
+  if (!groupData || !role) return <ErrorPage />
 
-  return <Profile role={userRole} gprofile={groupData} />
+  return (
+    <Flex flexDirection="column">
+      <Profile role={role} gprofile={groupData} />
+      <Box p="0 30px">
+        <RankingGraph rank={dummyRankData} />
+      </Box>
+      {groupId && <Management role={role} groupId={Number(groupId)} />}
+      <ExitGroupButton
+        groupName={groupData.groupName}
+        groupId={groupData.groupId}
+        role={role}
+      />
+    </Flex>
+  )
 }

src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/SelectFriendHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BiCheckCircle, BiUserCheck } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
 
 import { Box, Text, useDisclosure } from '@chakra-ui/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
@@ -20,6 +21,7 @@ export const SelectFreindHeader = ({
 }: SelectFreindHeaderProps) => {
   const queryClient = useQueryClient()
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const navigate = useNavigate()
 
   const setMemberType = useMemberTypeStore((state) => state.setMemberType)
   const friendList = useFriendStore((state) => state.friendList())
@@ -62,6 +64,7 @@ export const SelectFreindHeader = ({
         onClose={() => {
           onClose()
           setMemberType('FRIEND')
+          navigate(0)
         }}
         icon={<BiCheckCircle />}
         title="친구 설정이 완료되었습니다."

src/pages/MainPage/UseProfilehook/index.ts

@@ -7,6 +7,7 @@ import { Friend } from '@/types'
 
 const useProfile = () => {
   const { data: all } = useSuspenseQuery(friendsQueries.myFriends())
+
   const [remain, setRemain] = useState<Friend[]>([])
   const [picked, setPicked] = useState<Friend[]>([])
 

src/types/index.ts

@@ -98,7 +98,7 @@ export type Modal = {
 export type Member = {
   groupMemberId: number
   userId: number
-  role: 'LEADER' | 'MEMBER'
+  role: GroupRole
   userName: string
   memberImageUrl: string
   joinedAt: string
@@ -128,3 +128,5 @@ export type UserRankingItem = {
   count: number
   groupName: string
 }
+
+export type GroupRole = 'MEMBER' | 'LEADER'