[#49][#55][#56] 팀 관리 관련

what_team_my_team/.storybook/preview.ts

@@ -1,30 +1,20 @@
-import React from 'react'
 import { Preview } from '@storybook/react'
 import '../styles/global.css'
-import Layout from '../app/layout'
-import {fn} from '@storybook/test'
+import { fn } from '@storybook/test'
 
 const preview: Preview = {
   parameters: {
-    actions: { handleClick: fn()},
+    actions: { handleClick: fn() },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
     nextjs: {
-      appDirectory: true
+      appDirectory: true,
     },
   },
 }
 
-// export const decorators = [
-//   (Story) => {
-//     return React.createElement(Layout,{
-//       children:React.createElement(Story)
-//     })
-//   }
-// ]
-
 export default preview

what_team_my_team/_components/ProfileMenu.tsx

@@ -55,7 +55,7 @@ const ProfileMenu = ({ user }: ProfileMenuProps) => {
     },
     {
       label: '팀관리',
-      href: `/profile/${user?.id}/team`,
+      href: `/profile/${user?.id}/teamManage`,
       onClick: handleItemClick,
     },
   ]

what_team_my_team/_components/ui/Avatar/Root.tsx

@@ -14,6 +14,7 @@ const AvatarRootVariants = cva(`inline-flex items-center justify-center`, {
     },
     rounded: {
       full: 'rounded-full',
+      rect: 'rounded-xl',
     },
   },
   defaultVariants: {

what_team_my_team/_components/ui/DropdownMenu/Content.tsx

@@ -37,7 +37,6 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       className={cn(
         DropdownMenuContentVariants({ colorType, animate, size }),
-        'w-48 md:w-56',
         className,
       )}
       {...props}

what_team_my_team/_lib/axios.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const baseURL =
+export const baseURL =
   process.env.NEXT_PUBLIC_API_MOCKING === 'enabled'
     ? process.env.NEXT_PUBLIC_MOCK_BASE_URL
     : process.env.NEXT_PUBLIC_BASE_URL

what_team_my_team/_mocks/datas.ts

@@ -238,6 +238,69 @@ const entireTeamData = {
   })),
 }
 
+const myTeamData = {
+  team: [
+    {
+      id: 45,
+      title: '왜적 장호정을 물리쳐라잇',
+      leader_info: {
+        name: '강태원',
+        id: 1112,
+        image_url: 'https://avatars.githubusercontent.com/u/71972587?v=4',
+        is_leader: true,
+      },
+      member_count: 1,
+    },
+    {
+      id: 44,
+      title: '왜적 장호정을 물리쳐라',
+      leader_info: {
+        name: '김연재',
+        id: 1112,
+        image_url: 'https://avatars.githubusercontent.com/u/71972587?v=4',
+        is_leader: true,
+      },
+      member_count: 1,
+    },
+  ],
+}
+
+const myTeamDetailData = {
+  title: '왜적 장호정을 물리쳐라잇',
+  leader_info: {
+    name: '일이삼',
+    student_num: '201811318',
+    id: 1112,
+    image_url: 'https://avatars.githubusercontent.com/u/71972587?v=4',
+    position: '백엔드',
+    category: '팀장',
+  },
+  members_info: Array.from({ length: 6 }, (_, idx) => ({
+    name: '장호정',
+    student_num: '2020131313',
+    id: idx,
+    image_url: 'https://avatars.githubusercontent.com/u/71972587?v=4',
+    position: '백엔드',
+    category: '게임 기획',
+  })),
+  member_count: 2,
+  team_id: 49,
+}
+const notApprovedMemberData = Array.from({ length: 4 }, (_, idx) => ({
+  id: idx,
+  team_id: 36,
+  created_at: '2024-04-26T02:24:42.910791',
+  bio: '열심히 하겠습니다!!',
+  tech: '웹',
+  user_info: {
+    id: 127,
+    name: '이경자',
+    image_url:
+      'https://wtnt-bucket.s3.ap-northeast-2.amazonaws.com/default/thumnail.jpg',
+    position: '디자이너',
+  },
+}))
+
 export {
   AssignData,
   EntireData,
@@ -249,4 +312,7 @@ export {
   MainPageProjectListData,
   assignTeamListData,
   entireTeamData,
+  myTeamData,
+  myTeamDetailData,
+  notApprovedMemberData,
 }

what_team_my_team/_mocks/handlers.ts

@@ -10,6 +10,9 @@ import {
   MainPageProjectListData,
   entireTeamData,
   assignTeamListData,
+  myTeamData,
+  myTeamDetailData,
+  notApprovedMemberData,
 } from './datas'
 
 export const handlers = [
@@ -44,9 +47,18 @@ export const handlers = [
       return HttpResponse.json(AccomplishedData)
     }
   }),
+  http.get(`*/user/profile/team-manage/detail/*`, () => {
+    return HttpResponse.json(myTeamDetailData)
+  }),
+  http.get(`*/user/profile/team-manage/*`, () => {
+    return HttpResponse.json(myTeamData)
+  }),
   http.get(`*/user/profile/*`, () => {
     return HttpResponse.json(ProfileData)
   }),
+  http.get(`*/apply/*`, () => {
+    return HttpResponse.json(notApprovedMemberData)
+  }),
   http.get(`*/team/detail/*`, () => {
     return HttpResponse.json(ProjectDetailData)
   }),

what_team_my_team/_services/mutations/useAcceptMemberWithLeader.ts

@@ -0,0 +1,20 @@
+import axiosInstance from '@/_lib/axios'
+import { useMutation } from '@tanstack/react-query'
+
+export const acceptMemberWithLeaderApi = async ({
+  requestId,
+}: {
+  requestId: number
+}) => {
+  const response = await axiosInstance.patch(`/apply/${requestId}`)
+
+  return response.data
+}
+
+export const useAcceptMemberWithLeader = () => {
+  const acceptMemberWithLeaderMutation = useMutation({
+    mutationFn: acceptMemberWithLeaderApi,
+  })
+
+  return acceptMemberWithLeaderMutation
+}

what_team_my_team/_services/mutations/useBanMemberFromProject.ts

@@ -0,0 +1,27 @@
+import axiosInstance from '@/_lib/axios'
+import { useMutation } from '@tanstack/react-query'
+
+const banMemberFromProject = async ({
+  teamId,
+  userId,
+}: {
+  teamId: string
+  userId: number
+}) => {
+  const body = {
+    ban_user: userId,
+  }
+
+  const response = await axiosInstance.delete(
+    `/user/profile/team-manage/detail/${teamId}`,
+    { data: body },
+  )
+
+  return response.data
+}
+
+export const useBanMemberFromProject = () => {
+  const mutation = useMutation({ mutationFn: banMemberFromProject })
+
+  return mutation
+}

what_team_my_team/_services/mutations/useDeleteTeamWithLeader.ts

@@ -0,0 +1,22 @@
+import axiosInstance from '@/_lib/axios'
+import { useMutation } from '@tanstack/react-query'
+
+export const deleteTeamWithLeaderApi = async ({
+  teamId,
+}: {
+  teamId: string
+}) => {
+  const response = await axiosInstance.delete(
+    `/user/profile/team-manage/${teamId}`,
+  )
+
+  return response.data
+}
+
+export const useDeleteTeamWithLeader = () => {
+  const deleteTeamWithLeaderMutation = useMutation({
+    mutationFn: deleteTeamWithLeaderApi,
+  })
+
+  return deleteTeamWithLeaderMutation
+}

what_team_my_team/_services/mutations/useLeaveTeam.ts

@@ -0,0 +1,16 @@
+import axiosInstance from '@/_lib/axios'
+import { useMutation } from '@tanstack/react-query'
+
+export const leaveTeamApi = async ({ teamId }: { teamId: string }) => {
+  const response = await axiosInstance.patch(
+    `/user/profile/team-manage/${teamId}`,
+  )
+
+  return response.data
+}
+
+export const useLeaveTeam = () => {
+  const leaveTeamMutation = useMutation({ mutationFn: leaveTeamApi })
+
+  return leaveTeamMutation
+}

what_team_my_team/_services/mutations/useRejectMemberWithLeader.ts

@@ -0,0 +1,20 @@
+import axiosInstance from '@/_lib/axios'
+import { useMutation } from '@tanstack/react-query'
+
+export const rejectMemberWithLeaderApi = async ({
+  requestId,
+}: {
+  requestId: number
+}) => {
+  const response = await axiosInstance.delete(`/apply/${requestId}`)
+
+  return response.data
+}
+
+export const useRejectMemberWithLeader = () => {
+  const rejectMemberWithLeaderMutation = useMutation({
+    mutationFn: rejectMemberWithLeaderApi,
+  })
+
+  return rejectMemberWithLeaderMutation
+}

what_team_my_team/_services/queries/useCheckLeader.ts

@@ -0,0 +1,37 @@
+import axiosInstance from '@/_lib/axios'
+import {
+  ConvertSnakeToCamel,
+  convertSnakeToCamel,
+} from '@/_utils/convertSnakeToCamel'
+import { useQuery } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+
+export interface CheckLeaderApiResponse {
+  is_leader: boolean
+}
+
+export const checkLeaderApi = async ({ teamId }: { teamId: string }) => {
+  const response = await axiosInstance.get(`/team/check-leader/${teamId}`)
+
+  return response.data
+}
+
+const IS_LEADER_KEY = 'is-leader'
+
+export const useCheckLeader = ({ teamId }: { teamId: string }) => {
+  const query = useQuery<
+    CheckLeaderApiResponse,
+    AxiosError,
+    ConvertSnakeToCamel<CheckLeaderApiResponse>
+  >({
+    queryKey: [IS_LEADER_KEY, teamId],
+    queryFn: () => checkLeaderApi({ teamId }),
+    select: (data) => {
+      const convertedData = convertSnakeToCamel(data)
+
+      return convertedData
+    },
+  })
+
+  return query
+}

what_team_my_team/_services/queries/useMyTeam.ts

@@ -0,0 +1,50 @@
+import axiosInstance from '@/_lib/axios'
+import {
+  convertSnakeToCamel,
+  ConvertSnakeToCamel,
+} from '@/_utils/convertSnakeToCamel'
+import { useQuery } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+
+export type Team = {
+  id: number
+  title: string
+  member_count: number
+  leader_info: {
+    name: string
+    id: number
+    image_url: string
+    is_leader: boolean
+  }
+}
+export type TeamCamel = ConvertSnakeToCamel<Team>
+
+const getManageTeamApi = async ({ userId }: { userId: string }) => {
+  const response = await axiosInstance.get(
+    `/user/profile/team-manage/${userId}`,
+  )
+
+  return response.data
+}
+
+const MANAGE_MY_TEAM_KEY = 'team-manage'
+
+const useMyTeam = ({ userId }: { userId: string }) => {
+  const query = useQuery<
+    { team: Team[] },
+    AxiosError,
+    ConvertSnakeToCamel<{ team: Team[] }>
+  >({
+    queryFn: () => getManageTeamApi({ userId }),
+    queryKey: [MANAGE_MY_TEAM_KEY, userId],
+    select: (data) => {
+      const camelData = convertSnakeToCamel(data)
+
+      return camelData
+    },
+  })
+
+  return query
+}
+
+export default useMyTeam