Merge pull request #188 from anheejeong/feat/186-goBackComponent

Week10/issue#186 뒤로 가기 컴포넌트 구현

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

@@ -37,6 +37,7 @@ const getGroupPaging = async (params: PagingRequestParams) => {
     groups: data.content,
     nextPageToken:
       data.page !== data.totalPages ? (data.page + 1).toString() : undefined,
+    groupSize: data.size,
   }
 }
 

src/components/GoBack/index.tsx

@@ -0,0 +1,32 @@
+import { BiChevronLeft } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
+
+import { Button } from '@chakra-ui/react'
+
+interface GoBackProps {
+  goBack: boolean
+  to?: string
+}
+
+export default function GoBack({ goBack, to }: GoBackProps) {
+  const navigate = useNavigate()
+
+  const handleGoBack = () => {
+    if (goBack) {
+      navigate(-1)
+    } else if (to) {
+      navigate(to)
+    }
+  }
+
+  return (
+    <Button
+      height="100%"
+      bg="none"
+      _hover={{ bg: 'none' }}
+      onClick={handleGoBack}
+    >
+      <BiChevronLeft size={20} />
+    </Button>
+  )
+}

src/components/RankingGraph/index.tsx

@@ -7,6 +7,7 @@ import {
   HStack,
   Image,
   Text,
+  Tooltip,
   VStack,
   useTheme,
 } from '@chakra-ui/react'
@@ -55,42 +56,51 @@ export const RankingGraph = ({ rank }: RankingGraphProps) => {
               justifyContent="flex-end"
               position="relative"
             >
-              <Box
-                width="44px"
-                height={`${percentage}%`}
-                minHeight="75px"
-                bg="orange.200"
-                transition="height 0.3s ease-in-out"
-                borderRadius="md"
-                position="relative"
+              <Tooltip
+                hasArrow
+                label={item.count}
+                placement="top"
+                bg="brown.600"
+                fontWeight={600}
+                marginBottom={7}
               >
-                <Center position="relative" width="44px" height="44px">
-                  {item.imageSrc && (
-                    <Image
-                      src={`${item.imageSrc}`}
-                      boxSize="40px"
-                      objectFit="cover"
-                      borderRadius="full"
+                <Box
+                  width="44px"
+                  height={`${percentage}%`}
+                  minHeight="75px"
+                  bg="orange.200"
+                  transition="height 0.3s ease-in-out"
+                  borderRadius="md"
+                  position="relative"
+                >
+                  <Center position="relative" width="44px" height="44px">
+                    {item.imageSrc && (
+                      <Image
+                        src={`${item.imageSrc}`}
+                        boxSize="40px"
+                        objectFit="cover"
+                        borderRadius="full"
+                        position="absolute"
+                        top="-27px"
+                        left="50%"
+                        transform="translateX(-50%)"
+                        bg="white"
+                        padding="5px"
+                        border={`1px solid ${borderColor}`}
+                      />
+                    )}
+                    <Box
+                      as={rankIcons[item.rank as 1 | 2 | 3]}
+                      width="30px"
+                      height="30px"
                       position="absolute"
-                      top="-27px"
+                      top={item.imageSrc ? '30px' : '10px'}
                       left="50%"
                       transform="translateX(-50%)"
-                      bg="white"
-                      padding="5px"
-                      border={`1px solid ${borderColor}`}
                     />
-                  )}
-                  <Box
-                    as={rankIcons[item.rank as 1 | 2 | 3]}
-                    width="30px"
-                    height="30px"
-                    position="absolute"
-                    top={item.imageSrc ? '30px' : '10px'}
-                    left="50%"
-                    transform="translateX(-50%)"
-                  />
-                </Center>
-              </Box>
+                  </Center>
+                </Box>
+              </Tooltip>
             </VStack>
           )
         })}

src/pages/CookieRecordPage/CookieRecordHeader/index.tsx

@@ -1,14 +1,12 @@
-import { BiChevronLeft } from 'react-icons/bi'
+import { Box, Divider, Flex, Text } from '@chakra-ui/react'
 
-import { Box, Center, Divider, Flex, Text } from '@chakra-ui/react'
+import GoBack from '@/components/GoBack'
 
 export const CookieRecordHeader = () => {
   return (
     <Flex flexDirection="column">
       <Box height={8} display="flex" flexDirection="row" width="full">
-        <Center paddingX={2} _hover={{ cursor: 'pointer', color: 'black.700' }}>
-          <BiChevronLeft size={20} />
-        </Center>
+        <GoBack goBack />
         <Text height="100%" lineHeight="2" fontWeight="bold">
           쿠키 기록
         </Text>

src/pages/CreateGroupPage/CreateGroupForm/index.tsx

@@ -11,8 +11,6 @@ import {
 } from '@/components/Form'
 import { CreateGroupFields } from '@/schema/create-group'
 
-import { ImageInput } from './ImageInput'
-
 interface CreateGroupFormProps {
   form: UseFormReturn<CreateGroupFields>
   onClickSumbitButton: () => void
@@ -57,7 +55,6 @@ export const CreateGroupForm = ({
               </FormItem>
             )}
           />
-          <ImageInput />
           <FormField
             control={form.control}
             name="groupDescription"

src/pages/CreateGroupPage/index.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form'
 import { BiCheckCircle, BiError } from 'react-icons/bi'
 import { useNavigate } from 'react-router-dom'
 
-import { Flex, useDisclosure } from '@chakra-ui/react'
+import { Flex, Image, useDisclosure } from '@chakra-ui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
 
@@ -12,6 +12,7 @@ import {
   CreateGroupRequestBody,
   createGroup,
 } from '@/api/services/group/group.api'
+import cookies from '@/assets/cookies.svg'
 import { AlertModal } from '@/components/Modal/AlertModal'
 import { CreateGroupFields, CreateGroupSchema } from '@/schema/create-group'
 
@@ -60,6 +61,7 @@ export default function CreateGroupPage() {
       justifyContent="center"
       height="full"
     >
+      <Image src={cookies} marginBottom={18} width="200px" />
       <CreateGroupForm form={form} onClickSumbitButton={onClickSumbitButton} />
       <AlertModal
         isOpen={errorAlert.isOpen}

src/pages/GroupMembersPage/LeaderChangeBtn/index.tsx

@@ -8,15 +8,14 @@ import { queryClient } from '@/api/instance'
 import { changeLeader } from '@/api/services/group/member.api'
 import { AlertModal } from '@/components/Modal/AlertModal'
 import { ConfirmModal } from '@/components/Modal/ConfirmModal'
-import ErrorPage from '@/pages/ErrorPage'
 
 type LeaderChangeBtnProps = {
   groupId: number
   leaderChangeBtn: boolean
   setLeaderChangeBtn: (leaderChangeBtn: boolean) => void
   leader: {
-    userId: number | undefined
-    userName: string | undefined
+    userId: number
+    userName: string
   }
   changeSelectId: number | null
   changeSelectName: string
@@ -36,11 +35,7 @@ export default function LeaderChangeBtn({
 
   const { mutate: patchChangeLeader } = useMutation({
     mutationFn: () => {
-      if (
-        groupId === undefined ||
-        leader.userId === undefined ||
-        changeSelectId === null
-      ) {
+      if (groupId === undefined || changeSelectId === null) {
         throw new Error('잘못된 접근입니다.')
       }
       return changeLeader({
@@ -59,9 +54,6 @@ export default function LeaderChangeBtn({
     },
   })
 
-  if (leader.userId === undefined || leader.userName === undefined)
-    <ErrorPage />
-
   const onClickChangeBtn = () => {
     if (changeSelectId === null) {
       setErrorMessage('그룹장을 위임할 사람을 선택해주세요')

src/pages/GroupMembersPage/MembersTable/TableComponent/index.tsx

@@ -77,7 +77,7 @@ export default function TableComponent({
         ))}
       </Thead>
       <Tbody>
-        {table.getRowModel().rows.map((row, idx) => (
+        {table.getRowModel().rows.map((row) => (
           <Tr key={row.id} position="relative">
             {row.getVisibleCells().map((cell) => (
               <Td
@@ -97,17 +97,17 @@ export default function TableComponent({
                   name="changeLeader"
                   value={selectBtn !== null ? String(selectBtn) : ''}
                   onChange={() => {
-                    setSelectBtn(idx)
+                    setSelectBtn(row.original.id)
                     setChangeSelectId(row.original.userId)
                     setChangeSelectName(row.original.userName)
                   }}
                 >
                   <Radio
-                    value={String(idx)}
+                    value={String(row.original.id)}
                     colorScheme="brown"
                     variant="outline"
                     sx={{ borderColor: 'brown.400' }}
-                    isChecked={idx === selectBtn}
+                    isChecked={row.original.id === selectBtn}
                   />
                 </RadioGroup>
               </Td>

src/pages/GroupMembersPage/MembersTable/index.tsx

@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { ColumnDef } from '@tanstack/react-table'
 
 import { membersManageQuries } from '@/api/services/group/member.api'
+import { useMyPage } from '@/api/services/profile/my-page.api'
 import { Loading } from '@/components/Loading'
 import ErrorPage from '@/pages/ErrorPage'
 import { Member, MemberTable } from '@/types'
@@ -17,11 +18,13 @@ import TableComponent from './TableComponent'
 
 type MembersTableProps = {
   groupId: number
+  myUserId: number
   groupName: string
 }
 
 export default function MembersTable({
   groupId,
+  myUserId,
   groupName,
 }: MembersTableProps) {
   const theme = useTheme()
@@ -33,13 +36,21 @@ export default function MembersTable({
   const [changeSelectName, setChangeSelectName] = useState<string>('')
   const [tableList, setTableList] = useState<MemberTable[]>()
 
-  const { data, status, isLoading, isError } = useQuery(
-    membersManageQuries.groupMembers(groupId, page)
-  )
+  const {
+    data: profile,
+    status: profileStatus,
+    isError: isProfileError,
+  } = useMyPage(myUserId.toString())
+
+  const {
+    data: memberList,
+    status: memberStatus,
+    isError: isMemberError,
+  } = useQuery(membersManageQuries.groupMembers(groupId, page))
 
-  const members = data?.members
-  const totalPages = data?.totalPages
-  const totalElements = data?.totalElements
+  const members = memberList?.members
+  const totalPages = memberList?.totalPages
+  const totalElements = memberList?.totalElements
 
   useEffect(() => {
     if (members && members.length > 0) {
@@ -63,6 +74,14 @@ export default function MembersTable({
     }))
   }
 
+  if (memberStatus === 'pending' || profileStatus === 'pending')
+    return <Loading />
+  if (isProfileError || isMemberError) return <ErrorPage />
+  if (!profile) return <ErrorPage />
+  if (!members || !totalPages) return '멤버가 없어요!'
+
+  const userName = profile.name
+
   const columns: ColumnDef<MemberTable>[] = [
     {
       header: '',
@@ -118,13 +137,6 @@ export default function MembersTable({
     },
   ]
 
-  if (status === 'pending') return <Loading />
-  if (isLoading) return <Loading />
-  if (isError) return <ErrorPage />
-  if (!members || !totalPages) return '멤버가 없어요!'
-
-  const leader = members?.find((member) => member.role === 'LEADER')
-
   return (
     <Box>
       <Title groupName={groupName} totalElements={totalElements} />
@@ -133,7 +145,7 @@ export default function MembersTable({
           groupId={groupId}
           leaderChangeBtn={leaderChangeBtn}
           setLeaderChangeBtn={setLeaderChangeBtn}
-          leader={{ userId: leader?.userId, userName: leader?.userName }}
+          leader={{ userId: myUserId, userName }}
           changeSelectId={changeSelectId}
           changeSelectName={changeSelectName}
         />

src/pages/GroupMembersPage/Navigate/index.tsx

@@ -1,6 +1,8 @@
 import { Link } from 'react-router-dom'
 
-import { Box, Button, Text, useTheme } from '@chakra-ui/react'
+import { Box, Text, useTheme } from '@chakra-ui/react'
+
+import GoBack from '@/components/GoBack'
 
 type NavigateProps = {
   groupId: string
@@ -18,9 +20,7 @@ export default function Navigate({ groupId }: NavigateProps) {
       borderBottom={`1px solid ${borderColor}`}
     >
       <Link to={`/group/${groupId}`}>
-        <Button height="100%" bg="none" _hover={{ bg: 'none' }}>
-          {'<'}
-        </Button>
+        <GoBack goBack />
       </Link>
       <Text height="100%" lineHeight="2" fontWeight="bold">
         그룹 멤버 관리