diff --git a/src/api/query/getQueryList.ts b/src/api/query/getQueryList.ts index 689d0f7..5fb32db 100644 --- a/src/api/query/getQueryList.ts +++ b/src/api/query/getQueryList.ts @@ -10,8 +10,8 @@ export type QueryListResponseType = { export default async function getQueryList(params: ListParams) { const { page, perPage } = params.pagination; - const filter = "all"; - const url = `/admin-support/inquiries?page=${page}&limit=${perPage}&filter=${filter}`; + const filter = params.filter?.status ?? "all"; + const url = `/admin-support/inquiries?page=${page}&limit=${perPage}&status=${filter}`; const response = await fetchData>({ url, diff --git a/src/components/SortSelect/index.stories.tsx b/src/components/SortSelect/index.stories.tsx index 9acfb8f..d3fddf5 100644 --- a/src/components/SortSelect/index.stories.tsx +++ b/src/components/SortSelect/index.stories.tsx @@ -25,3 +25,10 @@ export const Default: SortSelectStory = { defaultValue: "name", }, }; + +export const CheckBox: SortSelectStory = { + args: { + options: [{ value: "unread", label: "안읽은 메시지만 보기" }], + defaultValue: "all", + }, +}; diff --git a/src/components/SortSelect/index.tsx b/src/components/SortSelect/index.tsx index aec9b92..d5469b6 100644 --- a/src/components/SortSelect/index.tsx +++ b/src/components/SortSelect/index.tsx @@ -14,23 +14,45 @@ export default function SortSelect({ onChange, defaultValue, }: SortSelectProps) { - const handleChange = (event: React.ChangeEvent) => { + const handleSingleCheckboxChange = ( + event: React.ChangeEvent + ) => { + const { checked, value } = event.target; + onChange(checked ? value : defaultValue || ""); + }; + + const handleSelectChange = (event: React.ChangeEvent) => { onChange(event.target.value); }; return ( -
- +
+ {options.length === 1 ? ( +
+ +
+ ) : ( + + )}
); } diff --git a/src/pages/query/List.tsx b/src/pages/query/List.tsx index ab1aeb5..ca6263a 100644 --- a/src/pages/query/List.tsx +++ b/src/pages/query/List.tsx @@ -1,13 +1,14 @@ -import Blank from "../../components/fallback/Blank"; import ErrorFallback from "../../components/fallback/ErrorFallback"; import { Link } from "react-router-dom"; import List from "../../components/List"; import LoadingFallback from "../../components/fallback/LoadingFallback"; import Pagination from "../../components/Pagination"; import { QueryListType } from "../../api/query"; +import SortSelect from "../../components/SortSelect"; import queryQueryOptions from "../../queries/queryQueryOptions"; import usePagination from "../../components/Pagination/usePagination"; import { useQuery } from "@tanstack/react-query"; +import { useState } from "react"; export default function QueryList() { return ; @@ -15,10 +16,12 @@ export default function QueryList() { const QueryListContent = () => { const { currentPage, handlePaginationEvent } = usePagination(); + const [currentFilter, setCurrentFilter] = useState("all"); const { data, error, isLoading } = useQuery({ ...queryQueryOptions.getQueryList({ pagination: { page: currentPage, perPage: 10 }, + filter: { status: currentFilter }, }), }); @@ -35,7 +38,17 @@ const QueryListContent = () => { return ( - + + { + setCurrentFilter(value); + }} + options={[ + { label: "답변 완료된 문의사항만 보기", value: "unprocessed" }, + ]} + defaultValue="all" + /> + { ]} row={5} /> - {data.inquiries.length === 0 ? ( - - ) : ( - - {data.inquiries.map((query) => ( - - ))} - - )} + + {data.inquiries.map((query) => ( + + ))} + { - {!data.users || data.users.length === 0 ? ( - - ) : ( - data.users.map((user) => ) - )} + {data.users.map((user) => ( + + ))}