From 42d5b2147cb7023f623f6143b917d0b5b6e1f14c Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Wed, 15 Jan 2025 03:05:26 +0900
Subject: [PATCH 1/3] =?UTF-8?q?improve:=20=EB=B0=B0=EC=97=B4=20=EA=B8=B8?=
 =?UTF-8?q?=EC=9D=B4=201=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20checkbox=EB=A1=9C?=
 =?UTF-8?q?=20=ED=95=84=ED=84=B0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/query/getQueryList.ts       |  4 +--
 src/components/SortSelect/index.tsx | 48 +++++++++++++++++++++--------
 src/pages/query/List.tsx            | 16 +++++++++-
 src/types/params.d.ts               |  2 +-
 4 files changed, 53 insertions(+), 17 deletions(-)

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<ResponseType<QueryListResponseType>>({
     url,
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<HTMLSelectElement>) => {
+  const handleSingleCheckboxChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { checked, value } = event.target;
+    onChange(checked ? value : defaultValue || "");
+  };
+
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange(event.target.value);
   };
 
   return (
-    <div className="relative inline-block w-48">
-      <select
-        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        onChange={handleChange}
-        defaultValue={defaultValue}
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+    <div className="relative inline-block">
+      {options.length === 1 ? (
+        <div className="flex items-center space-x-4">
+          <label className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              value={options[0].value}
+              onChange={handleSingleCheckboxChange}
+              defaultChecked={defaultValue === options[0].value}
+              className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            />
+            <span>{options[0].label}</span>
+          </label>
+        </div>
+      ) : (
+        <select
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          onChange={handleSelectChange}
+          defaultValue={defaultValue}
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      )}
     </div>
   );
 }
diff --git a/src/pages/query/List.tsx b/src/pages/query/List.tsx
index ab1aeb5..1229314 100644
--- a/src/pages/query/List.tsx
+++ b/src/pages/query/List.tsx
@@ -5,9 +5,11 @@ 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 <QueryListContent />;
@@ -15,10 +17,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 +39,17 @@ const QueryListContent = () => {
 
   return (
     <List>
-      <List.Header totalCount={data.total} label="문의사항" />
+      <List.Header totalCount={data.total} label="문의사항">
+        <SortSelect
+          onChange={(value: string) => {
+            setCurrentFilter(value);
+          }}
+          options={[
+            { label: "답변 완료된 문의사항만 보기", value: "unprocessed" },
+          ]}
+          defaultValue="all"
+        />
+      </List.Header>
       <List.ColumnContainer
         headers={[
           "문의사항 번호",
diff --git a/src/types/params.d.ts b/src/types/params.d.ts
index 5b38901..443fbb8 100644
--- a/src/types/params.d.ts
+++ b/src/types/params.d.ts
@@ -13,6 +13,6 @@ export interface DetailParams {
   filter?: FilterParams;
 }
 export interface FilterParams {
-  keyword: string;
+  keyword?: string;
   status?: string;
 }

From 9b2ede5131f992f976f890b8fa68373b0cedbe89 Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Wed, 15 Jan 2025 03:05:36 +0900
Subject: [PATCH 2/3] =?UTF-8?q?test:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SortSelect/index.stories.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

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",
+  },
+};

From 48b53bf5279faf581363ab97e5b8d7b26c5d5aae Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Wed, 15 Jan 2025 03:10:35 +0900
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20Blank=20=EC=99=B8=EB=B6=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/query/List.tsx | 15 +++++----------
 src/pages/user/List.tsx  |  8 +++-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/pages/query/List.tsx b/src/pages/query/List.tsx
index 1229314..ca6263a 100644
--- a/src/pages/query/List.tsx
+++ b/src/pages/query/List.tsx
@@ -1,4 +1,3 @@
-import Blank from "../../components/fallback/Blank";
 import ErrorFallback from "../../components/fallback/ErrorFallback";
 import { Link } from "react-router-dom";
 import List from "../../components/List";
@@ -60,15 +59,11 @@ const QueryListContent = () => {
         ]}
         row={5}
       />
-      {data.inquiries.length === 0 ? (
-        <Blank />
-      ) : (
-        <List.RowContainer row={10}>
-          {data.inquiries.map((query) => (
-            <QueryListItem key={query.id} {...query} />
-          ))}
-        </List.RowContainer>
-      )}
+      <List.RowContainer row={10}>
+        {data.inquiries.map((query) => (
+          <QueryListItem key={query.id} {...query} />
+        ))}
+      </List.RowContainer>
       <Pagination
         totalPages={data.totalPage}
         currentPage={currentPage}
diff --git a/src/pages/user/List.tsx b/src/pages/user/List.tsx
index 30c3c86..f5b52b9 100644
--- a/src/pages/user/List.tsx
+++ b/src/pages/user/List.tsx
@@ -80,11 +80,9 @@ const UserListContent = () => {
       </List.Header>
       <List.ColumnContainer headers={userListColumns} row={5} />
       <List.RowContainer row={10}>
-        {!data.users || data.users.length === 0 ? (
-          <Blank />
-        ) : (
-          data.users.map((user) => <UserListItem key={user.id} {...user} />)
-        )}
+        {data.users.map((user) => (
+          <UserListItem key={user.id} {...user} />
+        ))}
       </List.RowContainer>
       <Pagination
         totalPages={data.totalPage}