From 34e88d3d1087bc29b9c2fd507398eb036e65b22f Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 4 Jan 2025 20:03:30 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9D=98=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B0=8F=20=EB=94=94?= =?UTF-8?q?=ED=85=8C=EC=9D=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/query/getQueryDetail.ts | 2 +- src/api/query/getQueryList.ts | 4 +-- src/api/query/index.d.ts | 15 ++++++++- src/pages/query/Detail.tsx | 53 +++++++++++++++++--------------- src/pages/query/List.tsx | 31 +++++++++++-------- src/queries/queryQueryOptions.ts | 5 +-- src/router/router.tsx | 6 ++-- src/types/params.d.ts | 1 + 8 files changed, 71 insertions(+), 46 deletions(-) diff --git a/src/api/query/getQueryDetail.ts b/src/api/query/getQueryDetail.ts index b47209f..55de5c6 100644 --- a/src/api/query/getQueryDetail.ts +++ b/src/api/query/getQueryDetail.ts @@ -4,7 +4,7 @@ import { ResponseType } from ".."; import fetchData from "../fetchData"; export default async function getQueryDetail(params: DetailParams) { - const url = `/admin-support/queries/${params.id}`; + const url = `/admin-support/inquiries/${params.id}`; const response = await fetchData>({ url }); return response.data; diff --git a/src/api/query/getQueryList.ts b/src/api/query/getQueryList.ts index 8a05d08..689d0f7 100644 --- a/src/api/query/getQueryList.ts +++ b/src/api/query/getQueryList.ts @@ -5,13 +5,13 @@ import { QueryListType } from "."; import fetchData from "../fetchData"; export type QueryListResponseType = { - quleroquisDto: QueryListType[]; + inquiries: QueryListType[]; } & ResponsePaginationType; export default async function getQueryList(params: ListParams) { const { page, perPage } = params.pagination; const filter = "all"; - const url = `/admin-support/notices?page=${page}&limit=${perPage}&filter=${filter}`; + const url = `/admin-support/inquiries?page=${page}&limit=${perPage}&filter=${filter}`; const response = await fetchData>({ url, diff --git a/src/api/query/index.d.ts b/src/api/query/index.d.ts index 657cc65..7805a1f 100644 --- a/src/api/query/index.d.ts +++ b/src/api/query/index.d.ts @@ -1,5 +1,18 @@ +import { AuthorType } from ".."; + export type QueryType = { id: number; + createdDate: "2025-01-04T19:38:11.707+09:00"; + processed: boolean; + title: string; + user: AuthorType; + answer: null | string; + type: "기술 지원 관련"; + content: string; }; -export type QueryListType = QueryType; +export type QueryListType = Pick< + QueryType, + "id" | "title" | "processed", + "user" +>; diff --git a/src/pages/query/Detail.tsx b/src/pages/query/Detail.tsx index 660cc04..3b3f13b 100644 --- a/src/pages/query/Detail.tsx +++ b/src/pages/query/Detail.tsx @@ -1,53 +1,56 @@ -import APIErrorProvider, { - useAPIError, -} from "../../components/fallback/APIErrorProvider"; -import APILoadingProvider, { - useAPILoading, -} from "../../components/fallback/APILoadingProvider"; - +import { DefaultPaths } from "../../router/paths"; +import ErrorFallback from "../../components/fallback/ErrorFallback"; import ItemContainer from "../../components/Detail/ItemContainer"; -import UIErrorBoundary from "../../components/fallback/UIErrorBoundary"; +import LoadingFallback from "../../components/fallback/LoadingFallback"; +import { getParamsFromPath } from "../../lib/path.utils"; import queryQueryOptions from "../../queries/queryQueryOptions"; +import { useLocation } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; export default function QueryDetail() { - return ( - - - - - - - - ); + return ; } function QueryDetailContent() { - const { setAPIError } = useAPIError(); - const { setAPILoading } = useAPILoading(); + const { pathname } = useLocation(); + const id = +getParamsFromPath(DefaultPaths.QUERY.DETAIL, pathname).id; const { data, error, isLoading } = useQuery({ - ...queryQueryOptions.getQueryDetail({ id: 1 }), + ...queryQueryOptions.getQueryDetail({ id }), }); if (isLoading) { - setAPILoading(); - return; + return ; } if (error instanceof Error) { - setAPIError(error.message); - return; + return ; + } + + if (!data) { + return null; } return (

문의사항 세부사항

-
+
{data?.id}
 + +
{data?.type}
+ + +
{data.user.nickname}
+ + +
{data.user.email}
+
+ +
+
); diff --git a/src/pages/query/List.tsx b/src/pages/query/List.tsx index f705a6c..e710eb1 100644 --- a/src/pages/query/List.tsx +++ b/src/pages/query/List.tsx @@ -5,17 +5,12 @@ import List from "../../components/List"; import LoadingFallback from "../../components/fallback/LoadingFallback"; import Pagination from "../../components/Pagination"; import { QueryListType } from "../../api/query"; -import UIErrorBoundary from "../../components/fallback/UIErrorBoundary"; import queryQueryOptions from "../../queries/queryQueryOptions"; import usePagination from "../../components/Pagination/usePagination"; import { useQuery } from "@tanstack/react-query"; export default function QueryList() { - return ( - - - - ); + return ; } const QueryListContent = () => { @@ -40,14 +35,16 @@ const QueryListContent = () => { return ( - - - - {data.quleroquisDto.length === 0 ? ( + + + {data.inquiries.length === 0 ? ( ) : ( - {data.quleroquisDto.map((query) => ( + {data.inquiries.map((query) => ( ))} @@ -63,13 +60,21 @@ const QueryListContent = () => { type QueryListItemProps = QueryListType; -const QueryListItem = ({ id }: QueryListItemProps) => { +const QueryListItem = ({ + id, + title, + user, + createdDate, +}: QueryListItemProps) => { return (
{id}
+
{title}
+
{user.nickname}
+
{createdDate}
); }; diff --git a/src/queries/queryQueryOptions.ts b/src/queries/queryQueryOptions.ts index f29f7e0..062c1f6 100644 --- a/src/queries/queryQueryOptions.ts +++ b/src/queries/queryQueryOptions.ts @@ -11,13 +11,14 @@ const queryQueryOptions = { "query", "list", params.pagination.page, - params.filter?.keyword, + params.pagination.perPage, + params.filter?.status, ], queryFn: () => getQueryList(params), }), getQueryDetail: (params: DetailParams) => queryOptions({ - queryKey: ["query", params.id], + queryKey: ["query", "detail", params.id], queryFn: () => getQueryDetail(params), }), }; diff --git a/src/router/router.tsx b/src/router/router.tsx index 9290d21..d9c65d6 100644 --- a/src/router/router.tsx +++ b/src/router/router.tsx @@ -16,6 +16,8 @@ import MyPage from "../pages/my"; import NotFound from "../pages/errors/NotFound"; import NoticeDetail from "../pages/notice/Detail"; import NoticeList from "../pages/notice/List"; +import QueryDetail from "../pages/query/Detail"; +import QueryList from "../pages/query/List"; import RegisterPage from "../pages/auth/Regsiter"; import ReportList from "../pages/report/List"; import ThemeList from "../pages/theme/List"; @@ -101,11 +103,11 @@ const router = createBrowserRouter([ }, { path: DefaultPaths.QUERY.LIST, - element:
문의사항 리스트 페이지
, + element: , }, { path: DefaultPaths.QUERY.DETAIL, - element:
문의사항 리스트 페이지
, + element: , }, { path: DefaultPaths.VERSION, diff --git a/src/types/params.d.ts b/src/types/params.d.ts index 24f9427..5b38901 100644 --- a/src/types/params.d.ts +++ b/src/types/params.d.ts @@ -14,4 +14,5 @@ export interface DetailParams { } export interface FilterParams { keyword: string; + status?: string; } From f36f30c9627a198ff3babfe5771e29bfb06dbb59 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 4 Jan 2025 20:06:28 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20shadcn-ui=20textarea=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/textarea.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/ui/textarea.tsx diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx new file mode 100644 index 0000000..4d858bb --- /dev/null +++ b/src/components/ui/textarea.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Textarea = React.forwardRef< + HTMLTextAreaElement, + React.ComponentProps<"textarea"> +>(({ className, ...props }, ref) => { + return ( +