feat: team list popover add and connect to back end api

src/app/teams/[id]/panel/TeamInfoContainer.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/navigation'
 import useSWR from 'swr'
-import { useEffect } from 'react'
-import { Button, Stack, Typography } from '@mui/material'
+import { MouseEvent, useEffect, useState } from 'react'
+import { Button, Card, Popover, Stack, Typography } from '@mui/material'
 import useAxiosWithAuth from '@/api/config'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import CuAvatar from '@/components/CuAvatar'
@@ -10,15 +10,44 @@ import { ITeamInfo } from '@/types/ITeamInfo'
 import { StatusIcon, IconInfo } from './TeamInfoComponent'
 import * as style from './TeamInfoContainer.style'
 import { isAxiosError } from 'axios'
+import OthersProfile from '@/app/panel/OthersProfile'
+import { AccountBox } from '@/icons'
+
+interface ITeamMemberInfo {
+  id: number
+  name: string
+  role: string
+}
 
 const TeamInfoContainer = ({ id }: { id: number }) => {
   const axiosInstance = useAxiosWithAuth()
+  // 팀의 정보를 불러오는 API 호출
   const { data, error, isLoading } = useSWR<ITeamInfo>(
     `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/team/main/${id}`,
     (url: string) => axiosInstance(url).then((res) => res.data),
   )
+  // 팀원의 정보를 불러오는 API 호출 -> 추후 API 통합이 필요
+  const { data: memberData, isLoading: memberIsLoading } = useSWR<
+    Array<ITeamMemberInfo>
+  >(
+    `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/team/main/member/${id}`,
+    (url: string) => axiosInstance(url).then((res) => res.data),
+  )
   const { setHeaderTitle } = useHeaderStore()
   const router = useRouter()
+  // 멤버 리스트를 보여주기 위한 popover 관련 객체
+  const [popOverAnchorEl, setPopOverAnchorEl] =
+    useState<null | HTMLButtonElement>(null)
+
+  const handlePopoverOpen = (event: MouseEvent<HTMLButtonElement>) => {
+    setPopOverAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setPopOverAnchorEl(null)
+  }
+
+  const open = Boolean(popOverAnchorEl)
 
   // set header
   useEffect(() => {
@@ -73,9 +102,65 @@ const TeamInfoContainer = ({ id }: { id: number }) => {
                 <IconInfo type="LEADER" text={data.leaderName} />
                 <Stack direction={'row'} spacing={'0.5rem'}>
                   <IconInfo type="MEMBER" text={data.memberCount.toString()} />
-                  <Button>
+                  <Button onClick={handlePopoverOpen}>
                     <Typography variant="Caption">멤버 보기</Typography>
                   </Button>
+                  <Popover
+                    open={open}
+                    onClose={handlePopoverClose}
+                    anchorEl={popOverAnchorEl}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'center',
+                    }}
+                  >
+                    <Card
+                      sx={{
+                        padding: '1rem',
+                      }}
+                    >
+                      <Stack alignItems={'center'}>
+                        <Typography variant="Body1Emphasis">
+                          멤버 리스트
+                        </Typography>
+                      </Stack>
+                      <Stack>
+                        {memberIsLoading || !memberData ? (
+                          <CuCircularProgress color={'primary'} />
+                        ) : (
+                          memberData.map((member) => (
+                            <Stack key={member.id} direction={'row'}>
+                              <OthersProfile
+                                userId={member.id.toString()}
+                                name={member.name}
+                              >
+                                <Stack
+                                  direction={'row'}
+                                  spacing={'0.25rem'}
+                                  alignItems={'center'}
+                                  width={'100%'}
+                                >
+                                  {member.role === 'LEADER' && (
+                                    <AccountBox
+                                      spacing={'0.25rem'}
+                                      sx={{
+                                        width: '1rem',
+                                        color: 'text.alternative',
+                                      }}
+                                    />
+                                  )}
+                                  <Typography variant="Caption">
+                                    {member.name}
+                                  </Typography>
+                                  <Button>프로필 보기</Button>
+                                </Stack>
+                              </OthersProfile>
+                            </Stack>
+                          ))
+                        )}
+                      </Stack>
+                    </Card>
+                  </Popover>
                 </Stack>
               </Stack>
             </Stack>