✨ Feat: 문의사항 페이지 및 답변 폼 추가

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<ResponseType<QueryType>>({ url });
   return response.data;

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<ResponseType<QueryListResponseType>>({
     url,

src/api/query/index.d.ts

@@ -1,5 +1,17 @@
+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" | "createdDate"
+>;

src/api/query/postQueryAnswer.ts

@@ -0,0 +1,21 @@
+import fetchData from "../fetchData";
+import { z } from "zod";
+
+export const PostQueryAnswerSchema = z.object({
+  answer: z
+    .string()
+    .min(10, { message: "10글자 이상의 답변변을 입력해주세요." }),
+});
+
+export type PostQueryAnswerBodyType = z.infer<typeof PostQueryAnswerSchema>;
+
+export default async function postQueryAnswer(
+  id: number,
+  body: PostQueryAnswerBodyType
+) {
+  const url = `/admin-support/inquiries/${id}`;
+
+  const response = await fetchData({ url, method: "POST", body });
+
+  return response;
+}

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 (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

src/hooks/useLocationId.ts

@@ -0,0 +1,12 @@
+import { DefaultPaths } from "../router/paths";
+import { getParamsFromPath } from "../lib/path.utils";
+import { useLocation } from "react-router-dom";
+
+const useLocationId = () => {
+  const { pathname } = useLocation();
+  const id = +getParamsFromPath(DefaultPaths.QUERY.DETAIL, pathname).id;
+
+  return id;
+};
+
+export default useLocationId;

src/pages/query/Detail.tsx

@@ -1,54 +1,65 @@
-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 QueryAnswerForm from "./QueryAnswerForm";
+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 (
-    <UIErrorBoundary>
-      <APIErrorProvider>
-        <APILoadingProvider>
-          <QueryDetailContent />
-        </APILoadingProvider>
-      </APIErrorProvider>
-    </UIErrorBoundary>
-  );
+  return <QueryDetailContent />;
 }
 
 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 <LoadingFallback />;
   }
   if (error instanceof Error) {
-    setAPIError(error.message);
-    return;
+    return <ErrorFallback />;
+  }
+
+  if (!data) {
+    return null;
   }
 
   return (
     <article className="flex flex-col gap-[20px]">
       <h3 className="text-2xl">문의사항 세부사항</h3>
       <div className="flex flex-col gap-[20px] relative max-w-[1200px]">
-        <div className="grid grid-cols-2">
+        <div className="grid grid-cols-4">
           <ItemContainer label="문의사항 ID">
             <div>{data?.id}</div>
           </ItemContainer>
+          <ItemContainer label="문의사항 유형">
+            <div>{data?.type}</div>
+          </ItemContainer>
+          <ItemContainer label="문의사항 작성 유저 닉네임">
+            <div>{data.user.nickname}</div>
+          </ItemContainer>
+          <ItemContainer label="문의사항 작성 유저 이메일">
+            <div>{data.user.email}</div>
+          </ItemContainer>
         </div>
+        <ItemContainer label="문의사항 내용">
+          <div dangerouslySetInnerHTML={{ __html: data.content }} />
+        </ItemContainer>
       </div>
+      {data?.answer ? (
+        <ItemContainer label="문의사항 답변 내용">
+          <div>{data.answer}</div>
+        </ItemContainer>
+      ) : (
+        <QueryAnswerForm />
+      )}
     </article>
   );
 }

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 (
-    <UIErrorBoundary>
-      <QueryListContent />
-    </UIErrorBoundary>
-  );
+  return <QueryListContent />;
 }
 
 const QueryListContent = () => {
@@ -40,14 +35,22 @@ const QueryListContent = () => {
 
   return (
     <List>
-      <List.Header totalCount={data.total} label="공지사항" />
-
-      <List.ColumnContainer headers={[]} row={5} />
-      {data.quleroquisDto.length === 0 ? (
+      <List.Header totalCount={data.total} label="문의사항" />
+      <List.ColumnContainer
+        headers={[
+          "문의사항 번호",
+          "문의사항 제목",
+          "작성자명",
+          "작성일",
+          "답변여부",
+        ]}
+        row={5}
+      />
+      {data.inquiries.length === 0 ? (
         <Blank />
       ) : (
         <List.RowContainer row={10}>
-          {data.quleroquisDto.map((query) => (
+          {data.inquiries.map((query) => (
             <QueryListItem key={query.id} {...query} />
           ))}
         </List.RowContainer>
@@ -63,13 +66,23 @@ const QueryListContent = () => {
 
 type QueryListItemProps = QueryListType;
 
-const QueryListItem = ({ id }: QueryListItemProps) => {
+const QueryListItem = ({
+  id,
+  title,
+  user,
+  createdDate,
+  processed,
+}: QueryListItemProps) => {
   return (
     <Link
       to={`/queries/${id}`}
       className="grid grid-cols-5 items-center h-[50px] m-[10px] hover:bg-lightGray rounded-[8px]"
     >
       <div className="text-center">{id}</div>
+      <div className="text-center">{title}</div>
+      <div className="text-center">{user.nickname}</div>
+      <div className="text-center">{createdDate}</div>
+      <div className="text-center">{processed ? "완료" : "미완료"}</div>
     </Link>
   );
 };

src/pages/query/QueryAnswerForm.tsx

@@ -0,0 +1,39 @@
+import { Button } from "../../components/ui/button";
+import { Textarea } from "../../components/ui/textarea";
+import postQueryAnswer from "../../api/query/postQueryAnswer";
+import useLocationId from "../../hooks/useLocationId";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+
+export default function QueryAnswerForm() {
+  const id = useLocationId();
+  const [answerContent, setAnserContent] = useState("");
+  const mutation = useMutation({
+    mutationFn: () => postQueryAnswer(id, { answer: answerContent }),
+    onSuccess: () => {
+      console.log("답변 완료");
+    },
+    onError: (error: Error) => {
+      console.error("업로드 실패:", error);
+    },
+  });
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    mutation.mutate();
+  };
+
+  return (
+    <form className="flex flex-col gap-[20px]" onSubmit={onSubmit}>
+      <label>문의사항 답변 내용</label>
+      <Textarea
+        value={answerContent}
+        onChange={(e) => {
+          setAnserContent(e.target.value);
+        }}
+      />
+      <Button type="submit">답변 완료</Button>
+    </form>
+  );
+}

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),
     }),
 };

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: <div>문의사항 리스트 페이지</div>,
+        element: <QueryList />,
       },
       {
         path: DefaultPaths.QUERY.DETAIL,
-        element: <div>문의사항 리스트 페이지</div>,
+        element: <QueryDetail />,
       },
       {
         path: DefaultPaths.VERSION,

src/types/params.d.ts

@@ -14,4 +14,5 @@ export interface DetailParams {
 }
 export interface FilterParams {
   keyword: string;
+  status?: string;
 }