diff --git a/frontend/app/(WithNavbar)/admin/[generation]/comments-disclosure/page.tsx b/frontend/app/(WithNavbar)/admin/[generation]/comments-disclosure/page.tsx new file mode 100644 index 00000000..d9d55700 --- /dev/null +++ b/frontend/app/(WithNavbar)/admin/[generation]/comments-disclosure/page.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { + getCommentsDisclosure, + postCommentsDisclosure, +} from "@/src/apis/comment"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; + +const QUERY_KEY = ["comments-disclosure"]; + +export default function CommentsDisclosurePage() { + const queryClient = useQueryClient(); + const { data, isLoading, isError } = useQuery( + QUERY_KEY, + getCommentsDisclosure + ); + + const { mutate: updateDisclosure, isLoading: isUpdating } = useMutation( + postCommentsDisclosure, + { + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: QUERY_KEY }); + }, + onError: () => { + alert("댓글 공개 상태 변경에 실패했습니다. 잠시 후 다시 시도해주세요."); + }, + } + ); + + if (isLoading) { + return
로딩중...
; + } + + if (isError || data === undefined) { + return
에러 발생
; + } + + const nextDisclosure = !data; + + return ( +
+

댓글 전체 공개 상태 관리

+
+
+ 현재 상태:{" "} + + {data ? "활성화" : "비활성화"} + +
+ +
+
+ ); +} diff --git a/frontend/components/admin/AdminTabs.tsx b/frontend/components/admin/AdminTabs.tsx index 8794b3e1..8c8785e9 100644 --- a/frontend/components/admin/AdminTabs.tsx +++ b/frontend/components/admin/AdminTabs.tsx @@ -14,6 +14,7 @@ export default function AdminTabs() { const tabs = [ { name: "멤버 권한 변경", href: `/admin/${generation}` }, { name: "지원서 on/off", href: `/admin/${generation}/on-off` }, + { name: "댓글 전체 공개 on/off", href: `/admin/${generation}/comments-disclosure` }, ]; return ( diff --git a/frontend/src/apis/comment/index.ts b/frontend/src/apis/comment/index.ts index f77c8e41..6e3e158e 100644 --- a/frontend/src/apis/comment/index.ts +++ b/frontend/src/apis/comment/index.ts @@ -107,3 +107,16 @@ export const getCommentsIsLike = async (commentId: string) => { return data; }; + +export const getCommentsDisclosure = async () => { + const { data } = await https.get(`/comments/disclosure`); + return data === true || data === "true"; +}; + +export const postCommentsDisclosure = async (isDisclosure: boolean) => { + const { data } = await https.post( + `/comments/disclosure`, + `${isDisclosure}` + ); + return data === true || data === "true"; +};