회원 상세 조회 페이지 구현 ( #issue feat/#340 )

src/components/admin/adminUserDetail/AdminUserDetail.styled.ts

@@ -0,0 +1,58 @@
+// src/components/admin/userDetail/AdminUserDetail.styled.ts
+import styled from 'styled-components';
+import { SpinnerContainer } from '../../user/mypage/Spinner.styled';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  width: 100%;
+  min-height: calc(100vh - 3rem);
+  flex: 1;
+  padding-top: 7rem;
+`;
+
+export const Spinner = styled(SpinnerContainer)``;
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 60%;
+  display: flex;
+  gap: 1rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0 10px;
+  }
+`;
+
+export const UserNameArea = styled.div``;
+
+export const UserName = styled.h3``;
+
+export const ContentHeader = styled.div`
+  margin-left: 25px;
+  padding: 24px 0 0 24px;
+`;
+
+export const BackToList = styled(Link)``;
+
+export const MainContent = styled.div`
+  height: 80%;
+  flex: 1;
+  background: ${({ theme }) => theme.color.lightgrey};
+  border: 1px solid ${({ theme }) => theme.color.grey};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const Content = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  padding: 24px;
+`;
+
+export const DetailContent = styled.div`
+  flex: 1 1 0;
+  height: 80vh;
+  overflow-y: auto;
+  border: 2px solid #f0f0f0;
+  border-radius: 30px;
+  padding: 2rem;
+`;

src/components/admin/adminUserDetail/AdminUserDetail.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import * as S from './AdminUserDetail.styled';
+import {
+  InformationCircleIcon,
+  ClipboardDocumentListIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
+import { ADMIN_ROUTE } from '../../../constants/routes';
+import { Outlet, useParams } from 'react-router-dom';
+import AdminTitle from '../../common/admin/title/AdminTitle';
+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';
+
+const AdminUserDetail = () => {
+  const { userId } = useParams();
+  const { userData, isLoading, isFetching } = useGetUserInfo(Number(userId));
+
+  if (isLoading || isFetching) {
+    return (
+      <S.Spinner>
+        <Spinner />
+      </S.Spinner>
+    );
+  }
+
+  const tabs: {
+    key: TabKey;
+    path: string;
+    label: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      key: 'basic',
+      label: '기본 정보',
+      path: `/admin/users/${userId}/${ADMIN_ROUTE.basic}`,
+      icon: <InformationCircleIcon width='17px' height='17px' />,
+    },
+    {
+      key: 'log',
+      label: '활동 알림',
+      path: `/admin/users/${userId}/${ADMIN_ROUTE.log}`,
+      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}`,
+      icon: <UserGroupIcon width='17px' height='17px' />,
+    },
+    {
+      key: 'applied',
+      label: '지원한 프로젝트',
+      path: `/admin/users/${userId}/${ADMIN_ROUTE.appliedProject}`,
+      icon: <ClipboardDocumentListIcon width='17px' height='17px' />,
+    },
+  ];
+
+  return (
+    <ScrollPreventor>
+      <S.Container>
+        <AdminTitle title='회원 상세' />
+
+        <S.Wrapper>
+          <S.MainContent>
+            <S.ContentHeader>
+              <S.BackToList to={`/admin/${ADMIN_ROUTE.users}`}>
+                목록으로 이동
+              </S.BackToList>
+            </S.ContentHeader>
+            <S.Content>
+              <Sidebar
+                menuItems={tabs}
+                nickname={userData?.nickname}
+                profileImage={userData?.profileImg}
+              />
+              <S.DetailContent>
+                <Outlet
+                  context={{
+                    userInfoData: userData,
+                  }}
+                />
+              </S.DetailContent>
+            </S.Content>
+          </S.MainContent>
+        </S.Wrapper>
+      </S.Container>
+    </ScrollPreventor>
+  );
+};
+
+export default AdminUserDetail;

src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx

@@ -27,12 +27,12 @@ const AllUserPreview = () => {
         <S.Wrapper key={user.id}>
           <S.UserArea>
             <Avatar image={user.profileImg} size='40px' />
-            <S.ContentArea to={`${ADMIN_ROUTE.allUser}/${user.id}`}>
+            <S.ContentArea to={`${ADMIN_ROUTE.users}/${user.id}`}>
               <S.NickName>{user.nickname}</S.NickName>
               <S.Email>{user.email}</S.Email>
             </S.ContentArea>
           </S.UserArea>
-          <S.MoveToUsersArea to={`${ADMIN_ROUTE.allUser}/${user.id}`}>
+          <S.MoveToUsersArea to={`${ADMIN_ROUTE.users}/${user.id}`}>
             <S.Text>상세 보기</S.Text>
             <S.Arrow src={arrow_right} />
           </S.MoveToUsersArea>

src/components/admin/userCard/UserCard.styled.ts

@@ -10,6 +10,27 @@ export const Container = styled.div`
   padding: 10px;
 `;
 
+export const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const BanArea = styled.div`
+  position: absolute;
+  top: 0px;
+  right: 0px;
+`;
+
+export const BanButton = styled.button`
+  width: 40px;
+  border: 1px solid ${({ theme }) => theme.color.lightgrey};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  background-color: ${({ theme }) => theme.color.red};
+  color: ${({ theme }) => theme.color.white};
+`;
+
 export const ProfileHeader = styled.div`
   display: flex;
   flex-direction: column;

src/components/admin/userCard/UserCard.tsx

@@ -1,20 +1,35 @@
 import React from 'react';
 import * as S from './UserCard.styled';
 import Avatar from '../../common/avatar/Avatar';
-import { type AllUser } from '../../../models/auth';
+import type { AllUser } from '../../../models/auth';
 import { formatDate } from '../../../util/formatDate';
 
 interface UserCardProps {
   userData: AllUser;
+  onBan: (userId: number) => void;
 }
 
-const UserCard = ({ userData }: UserCardProps) => {
+const UserCard = ({ userData, onBan }: UserCardProps) => {
   return (
     <S.Container>
-      <S.ProfileHeader>
-        <Avatar image={userData.profileImg} size='46px' />
-        <S.NickName>{userData.nickname}</S.NickName>
-      </S.ProfileHeader>
+      <S.Wrapper>
+        <S.ProfileHeader>
+          <Avatar image={userData.profileImg} size='46px' />
+          <S.NickName>{userData.nickname}</S.NickName>
+        </S.ProfileHeader>
+        {/* {userData.userState !== '정지' &&  */}
+
+        <S.BanArea
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onBan(userData.id);
+          }}
+        >
+          <S.BanButton>퇴출</S.BanButton>
+        </S.BanArea>
+        {/* } */}
+      </S.Wrapper>
       <S.MainContentArea>
         <S.TextLabel>이메일</S.TextLabel>
         <S.TextContent>{userData.email}</S.TextContent>

src/components/common/noContent/NoContent.tsx

@@ -17,8 +17,8 @@ export default function NoContent({ type }: NoContentProps) {
     applicants: '지원자가',
     passNonPass: '합/불합격자 리스트가',
     notification: '알림이',
-    comment: '내 댓글이',
-    inquiries: '내 문의글이',
+    comment: '댓글이',
+    inquiries: '문의글이',
   };
 
   return (

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

@@ -49,16 +49,22 @@ export const MenuList = styled.div`
 export const MenuItem = styled.div<{
   $isActive: boolean;
   $isHidden?: boolean;
+  $isAdmin?: boolean;
 }>`
   display: ${({ $isHidden }) => ($isHidden ? 'none' : 'flex')};
   align-items: center;
   padding: 0.625rem 1.25rem;
   margin: 0.5rem 0;
-  background-color: ${({ $isActive }) =>
-    $isActive ? '#f9f9f9' : 'transparent'};
+  background-color: ${({ theme, $isActive, $isAdmin }) =>
+    $isActive
+      ? $isAdmin
+        ? theme.color.white
+        : theme.color.lightgrey
+      : 'transparent'};
 
   &:hover {
-    background-color: #f9f9f9;
+    background-color: ${({ theme, $isAdmin }) =>
+      $isAdmin ? theme.color.white : theme.color.lightgrey};
   }
 
   svg {

src/components/common/sidebar/Sidebar.tsx

@@ -24,11 +24,16 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
   const location = useLocation();
   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(() => {
     const currentPath = location.pathname;
-    return menuItems.findIndex((item) => currentPath === item.path) ?? 0;
+    return (
+      menuItems.findIndex((item) => {
+        return currentPath === item.path;
+      }) ?? 0
+    );
   }, [location.pathname, menuItems]);
 
   return (
@@ -53,6 +58,7 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
               <S.MenuItem
                 $isActive={getActiveIndex() === index}
                 $isHidden={index === 2 && isDone}
+                $isAdmin={isAdmin}
               >
                 {icon && <S.IconWrapper>{icon}</S.IconWrapper>}
                 {icon && <S.Label>{label}</S.Label>}

src/components/user/mypage/ContentTab.tsx

@@ -20,6 +20,7 @@ interface ContentProps {
 export default function ContentTab({ filter, $justifyContent }: ContentProps) {
   const { pathname } = useLocation();
   const [filterId, setFilterId] = useState<number>();
+  const isAdmin = pathname.includes('/admin');
 
   function handleChangeId(id: number) {
     setFilterId(id);
@@ -59,7 +60,7 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
       {pathname.includes('inquiries') ? (
         <>
           <S.WrapperButton $height='10%'>
-            <MovedInquiredLink />
+            {!isAdmin && <MovedInquiredLink />}
           </S.WrapperButton>
           <ScrollWrapper $height='10%'>
             <S.FilterContainer>

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

@@ -1,6 +1,18 @@
-import { ACTIVITY_FILTER } from '../../../../constants/user/myPageFilter';
+import { useLocation } from 'react-router-dom';
+import {
+  ACTIVITY_FILTER,
+  ACTIVITY_FILTER_ADMIN,
+} from '../../../../constants/user/myPageFilter';
 import ContentTab from '../ContentTab';
 
 export default function ActivityLog() {
-  return <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />;
+  const { pathname } = useLocation();
+  const isAdmin = pathname.includes('/admin');
+
+  return (
+    <ContentTab
+      $justifyContent='space-around'
+      filter={isAdmin ? ACTIVITY_FILTER_ADMIN : ACTIVITY_FILTER}
+    />
+  );
 }

src/components/user/mypage/myProfile/profile/Profile.styled.ts

@@ -132,8 +132,10 @@ export const LabelBox = styled.div`
 `;
 
 export const ChartBox = styled.div`
-  width: 250px;
-  height: 250px;
+  width: 100%;
+  max-width: 250px;
+  aspect-ratio: 1 / 1;
+  margin: 0 auto;
 `;
 
 export const ExplainBox = styled.div`