관리자 "회원 전체 조회" 페이지 구현 ( 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 { 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/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/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,9 @@ 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: ${({ $isDone }) => ($isDone ? `#07DE00` : `#DE1A00`)};
 `;
 
 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,60 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #000000;
+  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?: '접속 중' | '오프라인' | '정지';
+}>`
+  font-size: 14px;
+  color: ${({ $userState }) =>
+    $userState === '접속 중'
+      ? `#39E81E`
+      : $userState === '오프라인'
+      ? `#2560E8`
+      : $userState === '정지'
+      ? `#E8000C`
+      : `#000000`};
+  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 #ccc;
+  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 { 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 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.styled.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const AdminSearchBarContainer = styled.form`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+`;
+
+export const AdminSearchBarWrapper = styled.div`
+  display: flex;
+  width: 70%;
+  justify-content: space-between;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border: 1px solid ${({ theme }) => theme.color.deepGrey};
+  border-radius: ${({ theme }) => theme.borderRadius.large} 0 0
+    ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const AdminSearchBarInput = styled.input`
+  width: 100%;
+  font-size: 1.3rem;
+`;
+
+export const AdminSearchBarBackIcon = styled.button`
+  svg {
+    width: 1.5rem;
+  }
+`;
+
+export const AdminSearchBarButton = styled.button`
+  width: 10%;
+  border: 1px solid ${({ theme }) => theme.color.navy};
+  background: ${({ theme }) => theme.color.navy};
+  border-radius: 0 ${({ theme }) => theme.borderRadius.large}
+    ${({ theme }) => theme.borderRadius.large} 0;
+  font-size: 1.3rem;
+  color: ${({ theme }) => theme.color.white};
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+`;

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

@@ -0,0 +1,75 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import * as S from './SearchBar.styled';
+import { useState } from 'react';
+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';
+
+interface SearchBarProps {
+  onGetKeyword: (value: string) => void;
+  value: string;
+}
+
+export default function SearchBar({ onGetKeyword, value }: SearchBarProps) {
+  const [keyword, setKeyword] = useState<string>('');
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handleKeyword = (inputValue: string) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    if (inputValue === '') {
+      newSearchParams.delete('keyword');
+    } else {
+      newSearchParams.set('keyword', inputValue);
+    }
+    setSearchParams(newSearchParams);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (keyword.trim() === '') {
+      return handleModalOpen(MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword);
+    } else {
+      onGetKeyword(keyword);
+      handleKeyword(keyword);
+      return;
+    }
+  };
+
+  const handleChangeKeyword = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setKeyword(value);
+  };
+
+  const handleClickSearchDefault = () => {
+    setKeyword('');
+    onGetKeyword('');
+    handleKeyword('');
+  };
+
+  return (
+    <S.AdminSearchBarContainer onSubmit={handleSubmit}>
+      <S.AdminSearchBarWrapper>
+        <S.AdminSearchBarInput
+          placeholder={MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword}
+          value={keyword ? keyword : value}
+          onChange={handleChangeKeyword}
+        />
+        {value && (
+          <S.AdminSearchBarBackIcon
+            type='button'
+            onClick={handleClickSearchDefault}
+          >
+            <XMarkIcon />
+          </S.AdminSearchBarBackIcon>
+        )}
+      </S.AdminSearchBarWrapper>
+      <S.AdminSearchBarButton>검색</S.AdminSearchBarButton>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    </S.AdminSearchBarContainer>
+  );
+}

src/hooks/admin/useGetAllUsers.ts

@@ -1,15 +1,16 @@
 import { useQuery } from '@tanstack/react-query';
 import { UserData } from '../queries/user/keys';
 import { getAllUsers } from '../../api/auth.api';
+import { SearchType } from '../../models/search';
 
-export const useGetAllUsers = () => {
+export const useGetAllUsers = (searchUnit: SearchType) => {
   const {
     data: allUserData,
     isLoading,
     isFetching,
   } = useQuery({
-    queryKey: [UserData.allUser],
-    queryFn: () => getAllUsers(),
+    queryKey: [UserData.allUser, searchUnit.keyword, searchUnit.page],
+    queryFn: () => getAllUsers(searchUnit),
   });
 
   return { allUserData, isLoading, isFetching };

src/hooks/admin/useGetAllUsersPreview.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { UserData } from '../queries/user/keys';
+import { getAllUsersPreview } from '../../api/auth.api';
+
+export const useGetAllUsersPreview = () => {
+  const {
+    data: allUserData,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: [UserData.allUserPreview],
+    queryFn: () => getAllUsersPreview(),
+    select: (allUsers) => allUsers.slice(0, 5),
+  });
+
+  return { allUserData, isLoading, isFetching };
+};