[fix] - 어드민 회원 관리 필터링 및 정렬 관련 QA 이슈 해결

src/app/(route)/admin/(with-layout)/members/[id]/point-history/page.tsx

@@ -37,15 +37,15 @@ const AdminMembersPointHistoryPage = ({ params }: Props) => {
     type: string[];
     point: string[];
   }>({
-    order: 'ASC',
+    order: 'DESC',
     type: [],
     point: ['INCREASE', 'DECREASE'],
   });
 
   const refreshHandler = () => {
     setParam({
       ...param,
-      order: 'ASC',
+      order: 'DESC',
       type: [],
       point: ['INCREASE', 'DECREASE'],
     });
@@ -104,7 +104,7 @@ const AdminMembersPointHistoryPage = ({ params }: Props) => {
           ) : data.pageInfo.totalElements <= 0 ? (
             <EmptyContainer colSpan={6} />
           ) : (
-            [...data.pointInfos].reverse().map((item, index) => {
+            data.pointInfos.map((item, index) => {
               const { totalElements } = data.pageInfo;
               const { pageSize } = data.pageInfo;
               const currentIndex = (currentPage - 1) * pageSize + index;

src/app/(route)/admin/(with-layout)/members/[id]/wk-history/page.tsx

@@ -6,7 +6,10 @@ import PaginationModule from '@/_components/common/modules/PaginationModule';
 import FilteringButtonAtom from '@/_components/common/atoms/FilteringButtonAtom';
 import { ExtensionIcon } from '@/_assets/icons';
 import SubtitleModule from '@/_components/common/modules/SubtitleModule';
-import { applyStatusList, orderList, pointOrderList } from '@/_types/adminType';
+import {
+  applyStatusListConverter,
+  wkHistoryOrderList,
+} from '@/_types/adminType';
 import { DatePickerTagType } from '@/_types/commonType';
 import RadioButtonContainer from '@/_components/common/containers/RadioButtonContainer';
 import DatePickerContainer from '@/_components/common/containers/DatePickerContainer';
@@ -20,15 +23,21 @@ import TableBodyAtom from '@/_components/common/atoms/TableBodyAtom';
 import { useGetMemberWkHistoryQuery } from '@/_hooks/admin/useGetMemberWkHistoryQuery';
 import dayjs from 'dayjs';
 
-const wkHistoryOrderList = {
-  ...orderList,
-  ...pointOrderList,
-};
-
 interface Props {
   params: { id: string };
 }
 
+const statusColors: Record<string, string> = {
+  APPLIED: 'text-positive',
+  RAFFLE_WAIT: 'text-[#00A62F]',
+  NO_WINNING: 'text-sub-300',
+  CONFIRM_WAIT: 'text-primary',
+  CANCEL: 'text-negative',
+  CONFIRM: 'text-[#007120]',
+  WAIT: 'text-[#003AD1]',
+  VISITED: 'text-sub-400',
+};
+
 const AdminMembersWkHistoryPage = ({ params }: Props) => {
   const accountId = params.id;
   const [currentPage, setCurrentPage] = useState(1);
@@ -41,7 +50,7 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
     order: string;
     type: string[];
   }>({
-    order: 'ASC',
+    order: 'createdAt,DESC',
     type: [
       'APPLIED',
       'RAFFLE_WAIT',
@@ -57,7 +66,7 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
   const refreshHandler = () => {
     setParam({
       ...param,
-      order: 'ASC',
+      order: 'createdAt,DESC',
       type: [
         'APPLIED',
         'RAFFLE_WAIT',
@@ -84,7 +93,7 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
     pageParam: {
       page: currentPage,
       size: 10,
-      sort: `createdAt,${param.order}`,
+      sort: param.order,
     },
   });
 
@@ -122,7 +131,7 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
           ) : data.pageInfo.totalElements <= 0 ? (
             <EmptyContainer colSpan={6} />
           ) : (
-            [...data.applyInfoList].reverse().map((item, index) => {
+            data.applyInfoList.map((item, index) => {
               const { totalElements, pageSize } = data.pageInfo;
               const currentIndex = (currentPage - 1) * pageSize + index;
               const descendingIndex = totalElements - currentIndex;
@@ -133,9 +142,18 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
                   <TableBodyAtom>
                     {dayjs(item.applicationDate).format('YYYY.MM.DD')}
                   </TableBodyAtom>
-                  <TableBodyAtom>{item.bettingPoint}</TableBodyAtom>
-                  <TableBodyAtom>{item.winningProbability}</TableBodyAtom>
-                  <TableBodyAtom isLast>{item.applyStatusType}</TableBodyAtom>
+                  <TableBodyAtom color="text-primaryDark">
+                    {item.bettingPoint}
+                  </TableBodyAtom>
+                  <TableBodyAtom color="text-primaryDark">
+                    {item.winningProbability}%
+                  </TableBodyAtom>
+                  <TableBodyAtom
+                    isLast
+                    color={statusColors[item.applyStatusType]}
+                  >
+                    {applyStatusListConverter[item.applyStatusType]}
+                  </TableBodyAtom>
                 </TableBodyModule>
               );
             })
@@ -181,7 +199,9 @@ const AdminMembersWkHistoryPage = ({ params }: Props) => {
         <hr className="h-[0.5px] w-full border-0 bg-sub-100" />
         <CheckboxContainer
           title="진행 상태"
-          options={Object.entries(applyStatusList) as [string, string][]}
+          options={
+            Object.entries(applyStatusListConverter) as [string, string][]
+          }
           selectedOptions={param.type}
           setSelectedOptions={(type: string[]) => setParam({ ...param, type })}
         />

src/app/(route)/admin/(with-layout)/members/page.tsx

@@ -31,13 +31,16 @@ const AdminMembersListPage = () => {
     order: 'name,ASC',
     departmentType: departmentList,
   });
+  const [searchText, setSearchText] = useState('');
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
 
-  const [selectedOption, setSelectedOption] = useState(
-    MembersSearchQueryOptions.NAME,
-  );
+  const departmentParam =
+    param.departmentType.length > 0 ? param.departmentType.join(',') : '';
 
   const { data, isLoading, error } = useGetMemberListQuery({
-    department: param.departmentType.join(','),
+    name: selectedOption === '이름' ? searchText : '',
+    accountId: selectedOption === '아이디' ? searchText : '',
+    department: departmentParam,
     pageParam: {
       page: currentPage,
       size: 10,
@@ -51,28 +54,38 @@ const AdminMembersListPage = () => {
       order: 'name,ASC',
       departmentType: departmentList,
     });
+    setSearchText('');
   };
 
   const handleSelect = (option: string) => {
-    setSelectedOption(option); // Update the selected option
+    setSelectedOption(option);
+  };
+
+  const handleSearch = (query: string) => {
+    setSearchText(query);
   };
 
   const moveToMembersDetail = (id: string) => {
     router.push(`/admin/members/${id}`);
   };
 
+  const isNoData = param.departmentType.length === 0;
+  const hasData = data && data.pageInfo.totalElements > 0;
+  const showPagination = !isNoData && hasData;
+
   return (
     <section className="flex w-full flex-col gap-y-10">
       <div className="flex w-full items-center justify-between">
         <TitleBarModule title="회원 목록" />
         <SearchingBoxModule
           options={Object.values(MembersSearchQueryOptions)}
           onSelect={handleSelect}
-          dropdownPlaceholder="검색 조건 선택"
-          selectedOption={selectedOption}
+          dropdownPlaceholder="검색 조건"
+          selectedOption={selectedOption ?? undefined}
           placeholder="검색어를 입력하세요."
           filter
           onClick={() => setIsFilteringBarOpen(true)}
+          onSearch={handleSearch}
         />
       </div>
       <FilteringBarContainer
@@ -101,21 +114,19 @@ const AdminMembersListPage = () => {
           <TableHeaderAtom isFirst width="80px">
             번호
           </TableHeaderAtom>
-          <TableHeaderAtom width="150px">이름</TableHeaderAtom>
-          <TableHeaderAtom width="150px">아이디</TableHeaderAtom>
+          <TableHeaderAtom width="200px">이름</TableHeaderAtom>
+          <TableHeaderAtom width="200px">아이디</TableHeaderAtom>
           <TableHeaderAtom>소속</TableHeaderAtom>
-          <TableHeaderAtom width="140px">보유 포인트</TableHeaderAtom>
-          <TableHeaderAtom width="120px">포인트 신청</TableHeaderAtom>
+          <TableHeaderAtom width="160px">보유 포인트</TableHeaderAtom>
+          <TableHeaderAtom width="140px">포인트 신청</TableHeaderAtom>
           <TableHeaderAtom isLast width="160px" />
         </TableHeaderModule>
         <tbody>
-          {!data ? (
-            isLoading ? (
-              <EmptyContainer colSpan={7} text="loading" />
-            ) : (
-              <EmptyContainer colSpan={7} text="no data" />
-            )
-          ) : data.pageInfo.totalElements <= 0 ? (
+          {isNoData ? (
+            <EmptyContainer colSpan={7} />
+          ) : isLoading ? (
+            <EmptyContainer colSpan={7} text="loading" />
+          ) : !hasData ? (
             <EmptyContainer colSpan={7} />
           ) : (
             data.memberInfos.map((item, index) => (
@@ -136,10 +147,10 @@ const AdminMembersListPage = () => {
           )}
         </tbody>
       </TableContainer>
-      {data && data.pageInfo.totalElements > 0 && (
+      {showPagination && (
         <div className="flex w-full items-center justify-center">
           <PaginationModule
-            totalPages={data.pageInfo.totalPages}
+            totalPages={data?.pageInfo.totalPages || 0}
             currentPage={currentPage}
             setCurrentPage={setCurrentPage}
           />

src/app/_components/common/modules/DropdownModule.tsx

@@ -23,7 +23,7 @@ const DropdownModule = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const sizeClass =
-    size === 'small' ? 'w-28' : size === 'large' ? 'w-52' : 'w-full';
+    size === 'small' ? 'w-36' : size === 'large' ? 'w-52' : 'w-full';
 
   return (
     <div>

src/app/_components/common/modules/SearchingBoxModule.tsx

@@ -14,6 +14,7 @@ interface BoxProps {
   height?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSearch?: (query: string) => void;
   options?: string[];
   onSelect?: (option: string) => void;
   dropdownPlaceholder?: string;
@@ -28,26 +29,37 @@ const SearchingBoxModule = ({
   placeholder,
   value: initialValue = '',
   onChange,
+  onSearch,
   options = [],
   onSelect = () => {},
   dropdownPlaceholder = '',
   selectedOption,
 }: BoxProps) => {
   const [value, setValue] = useState(initialValue);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
+    const newValue = e.target.value;
+    setValue(newValue);
     onChange?.(e);
   };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSearch?.(value);
+  };
+
   let widthClass = '';
 
   if (widthFull) {
     widthClass = 'w-full';
   } else {
     widthClass = filter ? 'max-w-[312px]' : 'max-w-[528px]';
   }
+
   return (
-    <div
+    <form
       className={`flex grow items-start justify-end gap-x-2.5 ${widthFull ? 'w-full' : ''}`}
+      onSubmit={handleSearch}
     >
       {options && options.length > 0 ? (
         <DropdownModule
@@ -67,14 +79,16 @@ const SearchingBoxModule = ({
           value={value || ''}
           onChange={handleChange}
         />
-        <Image
-          className="cursor-pointer"
-          src={SearchIcon}
-          alt="SearchingGlasses"
-        />
+        <button type="submit">
+          <Image
+            className="cursor-pointer"
+            src={SearchIcon}
+            alt="SearchingGlasses"
+          />
+        </button>
       </div>
       {filter && <FilteringButtonAtom onClick={onClick} />}
-    </div>
+    </form>
   );
 };
 

src/app/_constants/common.ts

@@ -13,8 +13,8 @@ export const DragDropContent = {
 
 export const PlaceOptions = ['양양', '제주도'];
 export const MembersSearchQueryOptions = {
-  NAME: '이름',
-  ID: '아이디',
+  name: '이름',
+  accountId: '아이디',
 };
 
 export const ServiceInfo = {

src/app/_hooks/admin/useGetMemberListQuery.ts

@@ -5,17 +5,32 @@ import api from '../Axios';
 export const useGetMemberListQueryKey = 'useGetMemberListQuery';
 
 export const useGetMemberListQuery = ({
+  name,
+  accountId,
   department,
   pageParam,
 }: {
-  department?: string;
+  name: string;
+  accountId: string;
+  department: string;
   pageParam: { page: number; size: number; sort?: string };
 }) => {
   return useQuery({
-    queryKey: [useGetMemberListQueryKey, department, pageParam],
+    queryKey: [
+      useGetMemberListQueryKey,
+      name,
+      accountId,
+      department,
+      pageParam,
+    ],
     queryFn: async () => {
       const res = await api.get('/api/member', {
-        params: { department, ...pageParam },
+        params: {
+          name,
+          accountId,
+          department,
+          ...pageParam,
+        },
       });
       return memberListSchema.parse(res.data.data);
     },

src/app/_types/adminType.ts

@@ -665,6 +665,13 @@ export const membersOrderList: Record<string, string> = {
   'pointQuantity,ASC': '보유 포인트 낮은순',
 };
 
+export const wkHistoryOrderList: Record<string, string> = {
+  'createdAt,DESC': '최신순',
+  'createdAt,ASC': '오래된순',
+  'usedPoint,DESC': '베팅 포인트 높은순',
+  'usedPoint,ASC': '베팅 포인트 낮은순',
+};
+
 export const rewardOrderList: Record<string, string> = {
   'createdAt,DESC': '최신순',
   'createdAt,ASC': '오래된순',