"관리자 회원 상세 조회 페이지" API 연결 ( feat/#348 )

src/api/activityLog.api.ts

@@ -1,4 +1,3 @@
-import { ApiAllInquiries } from '../models/admin/mainPreview';
 import type { ApiMyComments, ApiMyInquiries } from './../models/activityLog';
 import { httpClient } from './http.api';
 

src/api/admin/user.api.ts

@@ -0,0 +1,48 @@
+import { ApiUserApplicantsData } from '../../models/admin/userDetail/userDetail.applicants';
+import { ApiUserProjectDataResponse } from '../../models/admin/userDetail/userProjectData';
+import { httpClient } from '../http.api';
+
+export const postBanUser = async (id: string) => {
+  try {
+    await httpClient.post(`/ban/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const postWarningUser = async (id: string) => {
+  try {
+    await httpClient.post(`/warning/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getUserApplicants = async (
+  projectId: number,
+  applicantId: number
+) => {
+  try {
+    const response = await httpClient.get<ApiUserApplicantsData>(
+      `/admin/project/${projectId}/full?applicantId=${applicantId}`
+    );
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getUserProjectData = async (userId: number) => {
+  try {
+    const response = await httpClient.get<ApiUserProjectDataResponse>(
+      `/users/${userId}/projects`
+    );
+    return response.data.data.appliedProjects;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/admin/userActivity.api.ts

@@ -0,0 +1,14 @@
+import { httpClient } from '../http.api';
+import { ApiUserActivityResponse } from '../../models/admin/userDetail/userActivity';
+
+export const getUserActivityData = async (userId: number) => {
+  try {
+    const response = await httpClient.get<ApiUserActivityResponse>(
+      `/users/${userId}/activities`
+    );
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/mypage.api.ts

@@ -72,7 +72,7 @@ export const getMyAppliedStatusList = async () => {
       '/user/applications'
     );
 
-    return response.data;
+    return response.data.data;
   } catch (error) {
     console.error('내가 지원한 프로젝트 리스트: ', error);
     throw error;

src/components/admin/adminUserDetail/AdminUserDetail.tsx

@@ -12,14 +12,19 @@ import useGetUserInfo from '../../../hooks/admin/useGetUserInfo';
 import Spinner from '../../user/mypage/Spinner';
 import Sidebar from '../../common/sidebar/Sidebar';
 import ScrollPreventor from '../../common/modal/ScrollPreventor';
-
-type TabKey = 'basic' | 'log' | 'inquiry' | 'joined' | 'created' | 'applied';
+import useGetUserProjectData from '../../../hooks/admin/useGetUserProjectData';
+import { TabKey } from '../../../models/admin/userDetail/routing';
 
 const AdminUserDetail = () => {
   const { userId } = useParams();
   const { userData, isLoading, isFetching } = useGetUserInfo(Number(userId));
+  const {
+    userData: projectData,
+    isLoading: projectLoading,
+    isFetching: projectFetching,
+  } = useGetUserProjectData(Number(userId));
 
-  if (isLoading || isFetching) {
+  if (isLoading || isFetching || projectLoading || projectFetching) {
     return (
       <S.Spinner>
         <Spinner />
@@ -34,9 +39,9 @@ const AdminUserDetail = () => {
     icon: React.ReactNode;
   }[] = [
     {
-      key: 'basic',
+      key: 'profile',
       label: '기본 정보',
-      path: `/admin/users/${userId}/${ADMIN_ROUTE.basic}`,
+      path: `/admin/users/${userId}`,
       icon: <InformationCircleIcon width='17px' height='17px' />,
     },
     {
@@ -46,23 +51,11 @@ const AdminUserDetail = () => {
       icon: <ClipboardDocumentListIcon width='17px' height='17px' />,
     },
     {
-      key: 'joined',
-      label: '참여 프로젝트',
-      path: `/admin/users/${userId}/${ADMIN_ROUTE.joinedProject}`,
-      icon: <UserGroupIcon width='17px' height='17px' />,
-    },
-    {
-      key: 'created',
-      label: '기획 프로젝트',
-      path: `/admin/users/${userId}/${ADMIN_ROUTE.createdProject}`,
+      key: 'projects',
+      label: '지원/참여/기획한 프로젝트',
+      path: `/admin/users/${userId}/${ADMIN_ROUTE.projects}`,
       icon: <UserGroupIcon width='17px' height='17px' />,
     },
-    {
-      key: 'applied',
-      label: '지원한 프로젝트',
-      path: `/admin/users/${userId}/${ADMIN_ROUTE.appliedProject}`,
-      icon: <ClipboardDocumentListIcon width='17px' height='17px' />,
-    },
   ];
 
   return (
@@ -88,6 +81,7 @@ const AdminUserDetail = () => {
                 <Outlet
                   context={{
                     userInfoData: userData,
+                    projectData,
                   }}
                 />
               </S.DetailContent>

src/components/common/sidebar/Sidebar.styled.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const Container = styled.div<{ $isAdmin: boolean }>`
+export const Container = styled.div<{ $isAdmin: boolean | undefined }>`
   display: flex;
   flex-direction: column;
   border: 2px solid #f0f0f0;

src/components/common/sidebar/Sidebar.tsx

@@ -22,9 +22,9 @@ interface SidebarProps {
 const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const location = useLocation();
+  const isAdmin = useAuthStore().userData?.admin;
   const isUserPage = location.pathname.includes('/user');
   const isManagePage = location.pathname.includes('/manage');
-  const isAdmin = location.pathname.includes('/admin');
 
   const isMyProfile = isLoggedIn && !isUserPage && !isManagePage;
   const getActiveIndex = useCallback(() => {

src/components/user/mypage/ContentTab.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
-import { ROUTES } from '../../../constants/routes';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
+import useAuthStore from '../../../store/authStore';
+import { ADMIN_ROUTE, ROUTES } from '../../../constants/routes';
 
 interface Filter {
   title: string;
@@ -19,29 +20,35 @@ interface ContentProps {
 
 export default function ContentTab({ filter, $justifyContent }: ContentProps) {
   const { pathname } = useLocation();
+  const isAdmin = useAuthStore().userData?.admin;
   const [filterId, setFilterId] = useState<number>();
-  const isAdmin = pathname.includes('/admin');
 
-  function handleChangeId(id: number) {
-    setFilterId(id);
-  }
   useEffect(() => {
     if (
       pathname.includes(ROUTES.notificationsAppliedProjects) ||
-      pathname.includes(ROUTES.activityInquiries)
+      pathname.includes(ROUTES.activityInquiries) ||
+      pathname.includes(ADMIN_ROUTE.appliedProject)
     ) {
       return setFilterId(1);
-    } else if (pathname.includes(ROUTES.notificationsCheckedApplicants)) {
+    } else if (
+      pathname.includes(ROUTES.notificationsCheckedApplicants) ||
+      pathname.includes(ADMIN_ROUTE.joinedProject)
+    ) {
       return setFilterId(2);
     } else if (
-      pathname.includes(`${ROUTES.myPageNotifications}/${ROUTES.comments}`)
+      pathname.includes(`${ROUTES.myPageNotifications}/${ROUTES.comments}`) ||
+      pathname.includes(ADMIN_ROUTE.createdProject)
     ) {
       return setFilterId(3);
     } else {
       return setFilterId(0);
     }
   }, [setFilterId, pathname]);
 
+  function handleChangeId(id: number) {
+    setFilterId(id);
+  }
+
   return (
     <S.Container>
       <S.FilterWrapper $justifyContent={$justifyContent}>
@@ -51,6 +58,7 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
             to={filter.url}
             onClick={() => handleChangeId(filter.id as number)}
           >
+            {' '}
             <S.WrapperTitle $selected={filter?.id === filterId}>
               <S.FilterTitle>{filter.title}</S.FilterTitle>
             </S.WrapperTitle>
@@ -64,7 +72,7 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
           </S.WrapperButton>
           <ScrollWrapper $height='10%'>
             <S.FilterContainer>
-              <Outlet />
+              <Outlet context={{ filterId }} />
             </S.FilterContainer>
           </ScrollWrapper>
         </>

src/components/user/mypage/activityLog/ActivityLog.tsx

@@ -1,13 +1,12 @@
-import { useLocation } from 'react-router-dom';
 import {
   ACTIVITY_FILTER,
   ACTIVITY_FILTER_ADMIN,
 } from '../../../../constants/user/myPageFilter';
 import ContentTab from '../ContentTab';
+import useAuthStore from '../../../../store/authStore';
 
 export default function ActivityLog() {
-  const { pathname } = useLocation();
-  const isAdmin = pathname.includes('/admin');
+  const isAdmin = useAuthStore().userData?.admin;
 
   return (
     <ContentTab

src/components/user/mypage/activityLog/commentsActivity/CommentsActivity.tsx

@@ -3,10 +3,18 @@ import Spinner from '../../Spinner';
 import CommentActivity from './commentActivity/CommentActivity';
 import * as S from './CommentsActivity.styled';
 import NoContent from '../../../../common/noContent/NoContent';
-import { useGetMyComments } from '../../../../../hooks/user/useGetMyComments';
+import useGetUserActivity from '../../../../../hooks/admin/useGetAllUserActivity';
+import { useParams } from 'react-router-dom';
+import { MyComments } from '../../../../../models/activityLog';
+import { UserComment } from '../../../../../models/admin/userDetail/userActivity';
 
 export default function CommentsActivity() {
-  const { myCommentsData, isLoading } = useGetMyComments();
+  const { userId } = useParams();
+
+  const { userActivityData, isLoading } = useGetUserActivity(
+    Number(userId),
+    'comments'
+  );
 
   if (isLoading) {
     return (
@@ -16,21 +24,27 @@ export default function CommentsActivity() {
     );
   }
 
-  if (!myCommentsData || myCommentsData.length === 0) {
+  if (
+    !userActivityData ||
+    !Array.isArray(userActivityData) ||
+    userActivityData.length === 0
+  ) {
     return (
       <S.WrapperNoContentAppliedProjects data-type='noContent'>
         <NoContent type='comment' />
       </S.WrapperNoContentAppliedProjects>
     );
   }
 
+  const commentsData = userActivityData as MyComments[] | UserComment[];
+
   return (
     <S.Container>
       <S.CommentsWrapper>
-        {myCommentsData.map((list, idx: number) => (
+        {commentsData.map((list: MyComments | UserComment, idx: number) => (
           <Fragment key={list.id}>
             <CommentActivity list={list} />
-            {idx !== myCommentsData.length - 1 && (
+            {idx !== commentsData.length - 1 && (
               <S.CommentBorder></S.CommentBorder>
             )}
           </Fragment>

src/components/user/mypage/activityLog/inquiries/Inquiries.tsx

@@ -1,12 +1,18 @@
-import { useGetMyInquiries } from '../../../../../hooks/user/useGetMyInquiries';
+import { useParams } from 'react-router-dom';
+import useGetUserActivity from '../../../../../hooks/admin/useGetAllUserActivity';
 import ContentBorder from '../../../../common/contentBorder/ContentBorder';
 import NoContent from '../../../../common/noContent/NoContent';
 import Spinner from '../../Spinner';
 import * as S from './Inquiries.styled';
 import Inquiry from './inquiry/Inquiry';
+import { MyInquiries } from '../../../../../models/activityLog';
 
 export default function Inquiries() {
-  const { myInquiriesData, isLoading } = useGetMyInquiries();
+  const { userId } = useParams();
+  const { userActivityData, isLoading } = useGetUserActivity(
+    Number(userId),
+    'inquiries'
+  );
 
   if (isLoading) {
     return (
@@ -16,13 +22,15 @@ export default function Inquiries() {
     );
   }
 
-  if (!myInquiriesData || myInquiriesData?.length === 0)
+  if (!userActivityData || userActivityData?.length === 0)
     return (
       <S.WrapperNoContentAppliedProjects data-type='noContent'>
         <NoContent type='inquiries' />
       </S.WrapperNoContentAppliedProjects>
     );
 
+  const myInquiriesData = userActivityData as MyInquiries[];
+
   return (
     <S.container>
       <S.InquiriesContainer>

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import type { MyInquiries } from '../../../../../../models/activityLog';
 import * as S from './Inquiry.styled';
 import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';

src/components/user/mypage/notifications/appliedProjects/AppliedProjects.tsx

@@ -1,13 +1,17 @@
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import * as S from './AppliedProjects.styled';
 import Spinner from '../../Spinner';
 import AppliedProjectsStatus from './appliedProjectsStatus/AppliedProjectsStatus';
 import NoContent from '../../../../common/noContent/NoContent';
-import { useMyAppliedStatusList } from '../../../../../hooks/user/useMyInfo';
 import { ROUTES } from '../../../../../constants/routes';
+import useGetUserProjectData from '../../../../../hooks/admin/useGetUserProjectData';
 
 export default function AppliedProjects() {
-  const { myAppliedStatusListData, isLoading } = useMyAppliedStatusList();
+  const { userId } = useParams();
+
+  const { userData: userProjectData, isLoading } = useGetUserProjectData(
+    Number(userId)
+  );
 
   if (isLoading) {
     return (
@@ -17,7 +21,7 @@ export default function AppliedProjects() {
     );
   }
 
-  if (!myAppliedStatusListData || myAppliedStatusListData.length === 0) {
+  if (!userProjectData || userProjectData.length === 0) {
     return (
       <S.WrapperNoContentAppliedProjects data-type='noContent'>
         <NoContent type='projects' />
@@ -28,7 +32,7 @@ export default function AppliedProjects() {
   return (
     <S.container>
       <S.Wrapper>
-        {myAppliedStatusListData.map((data) => (
+        {userProjectData.map((data) => (
           <Link key={data.id} to={`${ROUTES.projectDetail}/${data.id}`}>
             <AppliedProjectsStatus list={data} />
           </Link>