feat: team member list ver pc and mobile is added

peer-42seoul · Mar 11, 2024 · 1b46d99 · 1b46d99
1 parent bdfe70a
commit 1b46d99
Show file tree

Hide file tree

Showing 2 changed files with 290 additions and 84 deletions.
diff --git a/src/app/teams/[id]/panel/TeamInfoContainer.tsx b/src/app/teams/[id]/panel/TeamInfoContainer.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/navigation'
 import useSWR from 'swr'
-import { MouseEvent, useEffect, useState } from 'react'
-import { Button, Card, Popover, Stack, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { Stack, Typography } from '@mui/material'
 import useAxiosWithAuth from '@/api/config'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import CuAvatar from '@/components/CuAvatar'
@@ -10,44 +10,87 @@ 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'
+import useMedia from '@/hook/useMedia'
+import { TeamMemberListMobile, TeamMemberListPc } from './TeamMemberList'
 
-interface ITeamMemberInfo {
+export interface ITeamMemberInfo {
   id: number
   name: string
   role: string
 }
 
 const TeamInfoContainer = ({ id }: { id: number }) => {
+  const { isPc } = useMedia()
   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)
+  // // 팀원의 정보를 불러오는 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 handlePopoverOpen = (event: MouseEvent<HTMLButtonElement>) => {
-    setPopOverAnchorEl(event.currentTarget)
-  }
+  // 테스트용 데이터
+  const mockData: Array<ITeamMemberInfo> = [
+    {
+      id: 1,
+      name: '테스트1',
+      role: 'LEADER',
+    },
+    {
+      id: 2,
+      name: '테스트2',
+      role: 'MEMBER',
+    },
+    {
+      id: 3,
+      name: '테스트3',
+      role: 'MEMBER',
+    },
+    {
+      id: 4,
+      name: '테스트4',
+      role: 'MEMBER',
+    },
+    {
+      id: 5,
+      name: '테스트5',
+      role: 'MEMBER',
+    },
+    {
+      id: 6,
+      name: '테스트6',
+      role: 'MEMBER',
+    },
+    {
+      id: 7,
+      name: '테스트7',
+      role: 'MEMBER',
+    },
+    {
+      id: 8,
+      name: '테스트8',
+      role: 'MEMBER',
+    },
+    {
+      id: 9,
+      name: '테스트9',
+      role: 'MEMBER',
+    },
+    {
+      id: 10,
+      name: '테스트10테스트10테스트10테스트10테스트10테스트10',
+      role: 'MEMBER',
+    },
+  ]
 
-  const handlePopoverClose = () => {
-    setPopOverAnchorEl(null)
-  }
-
-  const open = Boolean(popOverAnchorEl)
+  const { setHeaderTitle } = useHeaderStore()
+  const router = useRouter()
 
   // set header
   useEffect(() => {
@@ -102,65 +145,11 @@ 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 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>
+                  {isPc ? (
+                    <TeamMemberListPc members={mockData} />
+                  ) : (
+                    <TeamMemberListMobile members={mockData} />
+                  )}
                 </Stack>
               </Stack>
             </Stack>