관리자 "회원 전체 조회" 페이지 구현 ( issue #330 )

src/api/auth.api.ts

@@ -1,5 +1,6 @@
 import {
   ApiGetAllUsers,
+  ApiGetAllUsersPreview,
   type ApiOauth,
   type ApiVerifyNickname,
   type VerifyEmail,
@@ -8,6 +9,7 @@ import { httpClient } from './http.api';
 import { loginFormValues } from '../pages/login/Login';
 import { registerFormValues } from '../pages/user/register/Register';
 import { changePasswordFormValues } from '../pages/user/changePassword/ChangePassword';
+import { type SearchType } from '../models/search';
 
 export const postVerificationEmail = async (email: string) => {
   try {
@@ -106,9 +108,21 @@ export const getOauthLogin = async (oauthAccessToken: string) => {
   }
 };
 
-export const getAllUsers = async () => {
+export const getAllUsersPreview = async () => {
   try {
-    const response = await httpClient.get<ApiGetAllUsers>(`/users`);
+    const response = await httpClient.get<ApiGetAllUsersPreview>(
+      `/users/preview`
+    );
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getAllUsers = async (params: SearchType) => {
+  try {
+    const response = await httpClient.get<ApiGetAllUsers>(`/users`, { params });
     return response.data.data;
   } catch (e) {
     console.error(e);

src/components/admin/adminNotice/AdminNoticeList.tsx

@@ -1,38 +1,15 @@
-import { useEffect, useState } from 'react';
 import SearchBar from '../../../components/common/admin/searchBar/SearchBar';
 import * as S from './AdminNoticeList.styled';
-import type { NoticeSearch } from '../../../models/customerService';
 import { useGetNotice } from '../../../hooks/user/useGetNotice';
-import { useSearchParams } from 'react-router-dom';
 import Pagination from '../../../components/common/pagination/Pagination';
 import Spinner from '../../../components/user/mypage/Spinner';
 import NoticeItem from '../../../pages/user/customerService/notice/noticeItem/NoticeItem';
+import useSearchBar from '../../../hooks/admin/useSearchBar';
 
 export default function AdminNoticeList() {
-  const [noticeSearch, setNoticeSearch] = useState<NoticeSearch>({
-    keyword: '',
-    page: 1,
-  });
-  const [value, setValue] = useState<string>('');
-  const { noticeData, isLoading } = useGetNotice(noticeSearch);
-  const [searchParams] = useSearchParams();
-
-  useEffect(() => {
-    const searchKeyword = searchParams.get('keyword');
-
-    if (searchKeyword) {
-      setNoticeSearch((prev) => ({ ...prev, keyword: searchKeyword }));
-      setValue((prev) => (searchKeyword ? searchKeyword : prev));
-    }
-  }, [searchParams]);
-
-  const handleGetKeyword = (keyword: string) => {
-    setNoticeSearch((prev) => ({ ...prev, keyword }));
-    setValue(keyword);
-  };
-  const handleChangePagination = (page: number) => {
-    setNoticeSearch((prev) => ({ ...prev, page }));
-  };
+  const { searchUnit, value, handleGetKeyword, handleChangePagination } =
+    useSearchBar();
+  const { noticeData, isLoading } = useGetNotice(searchUnit);
 
   if (isLoading) {
     return (
@@ -48,7 +25,11 @@ export default function AdminNoticeList() {
 
   return (
     <>
-      <SearchBar onGetKeyword={handleGetKeyword} value={value} />
+      <SearchBar
+        onGetKeyword={handleGetKeyword}
+        value={value}
+        isNotice={true}
+      />
       <S.NoticeItemWrapper>
         <NoticeItem
           noticeData={noticeData.notices}
@@ -57,7 +38,7 @@ export default function AdminNoticeList() {
         />
       </S.NoticeItemWrapper>
       <Pagination
-        page={noticeSearch.page}
+        page={searchUnit.page}
         getLastPage={lastPage}
         onChangePagination={handleChangePagination}
       />

src/components/admin/mainCard/MainCard.styled.ts

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.color.grey};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
 `;
 

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import * as S from './AllUserPreview.styled';
-import { useGetAllUsers } from '../../../../hooks/admin/useGetAllUsers';
 import Avatar from '../../../common/avatar/Avatar';
 import { ADMIN_ROUTE } from '../../../../constants/routes';
 import arrow_right from '../../../../assets/ArrowRight.svg';
 import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner';
+import { useGetAllUsersPreview } from '../../../../hooks/admin/useGetAllUsersPreview';
 
 const AllUserPreview = () => {
-  const { allUserData, isLoading, isFetching } = useGetAllUsers();
+  const { allUserData, isLoading, isFetching } = useGetAllUsersPreview();
 
   if (isLoading || isFetching) {
     return <LoadingSpinner />;
@@ -17,15 +17,9 @@ const AllUserPreview = () => {
     return <S.Container>가입된 회원이 없습니다.</S.Container>;
   }
 
-  const previewList = allUserData
-    ? allUserData.length > 6
-      ? allUserData.slice(0, 4)
-      : allUserData
-    : [];
-
   return (
     <S.Container>
-      {previewList?.map((user) => (
+      {allUserData?.map((user) => (
         <S.Wrapper key={user.id}>
           <S.UserArea>
             <Avatar image={user.user.img} size='40px' />

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts

@@ -51,7 +51,8 @@ export const Divider = styled.p`
 
 export const InquiryState = styled.p<{ $isCompleted: boolean }>`
   font-size: 9px;
-  color: ${({ $isCompleted }) => ($isCompleted ? `#07DE00` : `#DE1A00`)};
+  color: ${({ theme, $isCompleted }) =>
+    $isCompleted ? theme.color.green : theme.color.red};
 `;
 
 export const MoveToInquiryArea = styled(Link)`

src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts

@@ -21,7 +21,7 @@ export const ContentArea = styled.div`
   margin-left: 16px;
 `;
 
-export const ImposedCount = styled.div`
+export const ReportedCount = styled.div`
   font-size: 9px;
   opacity: 0.5;
 `;
@@ -49,9 +49,10 @@ export const Divider = styled.p`
   margin-right: 3px;
 `;
 
-export const IsImposed = styled.p<{ $isImposed: boolean }>`
+export const IsDone = styled.p<{ $isDone: boolean }>`
   font-size: 9px;
-  color: ${({ $isImposed }) => ($isImposed ? `#07DE00` : `#DE1A00`)};
+  color: ${({ theme, $isDone }) =>
+    $isDone ? theme.color.green : theme.color.red};
 `;
 
 export const MoveToReportsArea = styled(Link)`

src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx

@@ -20,14 +20,14 @@ const ReportsPreview = () => {
           <S.ReportArea to={`${ADMIN_ROUTE.reports}/${report.id}`}>
             <Avatar image={report.user.img} size='40px' />
             <S.ContentArea>
-              <S.ImposedCount>{report.imposedCount} 번</S.ImposedCount>
+              <S.ReportedCount>{report.reportedCount} 번</S.ReportedCount>
               <S.Category>{report.category}</S.Category>
               <S.StateArea>
                 <S.ReportDate>{report.createdAt}</S.ReportDate>
                 <S.Divider>|</S.Divider>
-                <S.IsImposed $isImposed={report.isImposed}>
-                  {report.isImposed ? '검토 완료' : '검토 미완료'}
-                </S.IsImposed>
+                <S.IsDone $isDone={report.isDone}>
+                  {report.isDone ? '검토 완료' : '검토 미완료'}
+                </S.IsDone>
               </S.StateArea>
             </S.ContentArea>
           </S.ReportArea>

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

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+import { UserState } from '../../../models/auth';
+
+export const Container = styled.div`
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${({ theme }) => theme.color.grey};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  padding: 10px;
+`;
+
+export const ProfileHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const NickName = styled.p`
+  margin-top: 5px;
+`;
+
+export const MainContentArea = styled.div`
+  padding: 15px;
+`;
+
+export const TextLabel = styled.label`
+  display: inline-block;
+  font-size: 14px;
+  opacity: 0.3;
+  word-break: break-word;
+  white-space: pre-wrap;
+`;
+
+export const TextContent = styled.p<{
+  $userState?: UserState;
+}>`
+  font-size: 14px;
+  color: ${({ theme, $userState }) =>
+    $userState === UserState.ONLINE
+      ? theme.color.green
+      : $userState === UserState.OFFLINE
+      ? theme.color.blue
+      : $userState === UserState.SUSPENDED
+      ? theme.color.red
+      : theme.color.white};
+  margin-left: 15px;
+`;
+
+export const SkillTagArea = styled.div`
+  display: flex;
+  gap: 4px;
+  margin-left: 15px;
+`;
+
+export const SkillTag = styled.img`
+  width: 29px;
+  height: 29px;
+  border: 1px solid ${({ theme }) => theme.color.grey};
+  border-radius: 50%;
+`;

src/components/admin/userCard/UserCard.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import * as S from './UserCard.styled';
+import Avatar from '../../common/avatar/Avatar';
+import { type AllUser } from '../../../models/auth';
+
+interface UserCardProps {
+  userData: AllUser;
+}
+
+const UserCard = ({ userData }: UserCardProps) => {
+  return (
+    <S.Container>
+      <S.ProfileHeader>
+        <Avatar image={userData.user.img} size='46px' />
+        <S.NickName>{userData.user.nickname}</S.NickName>
+      </S.ProfileHeader>
+      <S.MainContentArea>
+        <S.TextLabel>이메일</S.TextLabel>
+        <S.TextContent>{userData.email}</S.TextContent>
+        <S.TextLabel>회원 상태</S.TextLabel>
+        <S.TextContent $userState={userData.userState}>
+          {userData.userState}
+        </S.TextContent>
+        <S.TextLabel>경고 횟수</S.TextLabel>
+        <S.TextContent>
+          {userData.reportedCount === 0
+            ? '없음'
+            : `${userData.reportedCount}번`}
+        </S.TextContent>
+        <S.TextLabel>포지션</S.TextLabel>
+        <S.TextContent>
+          {userData.position.map((position) => position.name).join(', ')}
+        </S.TextContent>
+        <S.TextLabel>대표 스킬</S.TextLabel>
+        <S.SkillTagArea>
+          {userData.skill.map((skillTag) => (
+            <S.SkillTag key={skillTag.id} src={skillTag.img} />
+          ))}
+        </S.SkillTagArea>
+        <S.TextLabel>계정 생성 날짜</S.TextLabel>
+        <S.TextContent>{userData.createdAt}</S.TextContent>
+      </S.MainContentArea>
+    </S.Container>
+  );
+};
+
+export default UserCard;

src/components/common/admin/searchBar/SearchBar.tsx

@@ -1,23 +1,26 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../../constants/user/customerService';
 import * as S from './SearchBar.styled';
 import { useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useModal } from '../../../../hooks/useModal';
+import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../../constants/user/customerService';
 import Modal from '../../modal/Modal';
 import { ADMIN_ROUTE } from '../../../../constants/routes';
 
 interface SearchBarProps {
-  onGetKeyword: (keyword: string) => void;
+  onGetKeyword: (value: string) => void;
   value: string;
+  isNotice?: boolean;
 }
 
-export default function SearchBar({ onGetKeyword, value }: SearchBarProps) {
-  const [inputValue, setInputValue] = useState<string>('');
+export default function SearchBar({
+  onGetKeyword,
+  value,
+  isNotice,
+}: SearchBarProps) {
+  const [keyword, setKeyword] = useState<string>(value);
   const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
   const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
-  const keyword = inputValue ? inputValue : value;
 
   const handleKeyword = (inputValue: string) => {
     const newSearchParams = new URLSearchParams(searchParams);
@@ -32,22 +35,21 @@ export default function SearchBar({ onGetKeyword, value }: SearchBarProps) {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (inputValue.trim() === '') {
+    if (keyword.trim() === '') {
       return handleModalOpen(MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword);
     } else {
-      onGetKeyword(inputValue);
-      handleKeyword(inputValue);
+      onGetKeyword(keyword);
+      handleKeyword(keyword);
       return;
     }
   };
 
   const handleChangeKeyword = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setInputValue(value);
+    setKeyword(e.target.value);
   };
 
   const handleClickSearchDefault = () => {
-    setInputValue('');
+    setKeyword('');
     onGetKeyword('');
     handleKeyword('');
   };
@@ -73,9 +75,11 @@ export default function SearchBar({ onGetKeyword, value }: SearchBarProps) {
         </S.AdminSearchBarInputWrapper>
         <S.AdminSearchBarButton>검색</S.AdminSearchBarButton>
       </S.AdminSearchBarWrapper>
-      <S.WriteLink to={ADMIN_ROUTE.write} state={{ form: location.pathname }}>
-        작성하기
-      </S.WriteLink>
+      {isNotice && (
+        <S.WriteLink to={ADMIN_ROUTE.write} state={{ form: location.pathname }}>
+          작성하기
+        </S.WriteLink>
+      )}
       <Modal isOpen={isOpen} onClose={handleModalClose}>
         {message}
       </Modal>

src/constants/admin/adminModal.ts

@@ -4,4 +4,5 @@ export const ADMIN_MODAL_MESSAGE = {
   writeDeleteSuccess: '삭제되었습니다.',
   writeDeleteFail: '삭제가 실패하였습니다.',
   writeError: '알수없는 에러가 발생했습니다.',
+  NO_RESULT: '결과가 존재하지 않습니다.',
 };