요청주제관리 페이지 UI 수정 및 API 연동

src/app/temp-admin-topic/_components/AdminTopicBox.css.ts → src/app/admin/topics/_components/AdminTopicBox.css.ts

@@ -1,7 +1,74 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
+export const bodyRow = style([
+  fonts.Label,
+  {
+    padding: '1rem 0.5rem',
+    marginBottom: '1rem',
+    borderBottom: `1px solid ${vars.color.bluegray6}`,
+
+    display: 'grid',
+    gridTemplateColumns: 'repeat(8, 1fr)',
+    alignItems: 'center',
+
+    textAlign: 'center',
+  },
+]);
+
+export const rowItem = style({
+  gridColumn: 'span 2',
+
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
+
+export const rowText = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const buttons = style({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '0.5rem',
+
+  whiteSpace: 'nowrap',
+});
+
+const button = style({
+  padding: '0.5rem 1rem',
+  borderRadius: '4px',
+  backgroundColor: vars.color.blue,
+  color: vars.color.white,
+
+  whiteSpace: 'nowrap',
+
+  ':hover': {
+    opacity: 0.7,
+  },
+});
+
+export const variantsButton = styleVariants({
+  default: [button],
+  disabled: [
+    button,
+    {
+      opacity: 0.7,
+      cursor: 'default',
+    },
+  ],
+});
+
+export const modal = style({
+  width: '100%',
+  height: '100vh',
+  overflow: 'scroll',
+});
+
 export const container = style({
   width: '100%',
   padding: '12px',
@@ -39,28 +106,22 @@ export const buttonWrapper = style({
   gap: '10px',
 });
 
-export const button = style({
-  padding: '6px 12px',
-
-  width: '80px',
-
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  flexShrink: 0,
-
-  borderRadius: '14px',
-});
-
-export const exposeToggleButton = style([
+export const exposedButton = style([
   button,
   {
     backgroundColor: vars.color.blue,
     color: vars.color.white,
   },
 ]);
 
+export const notExposedButton = style([
+  button,
+  {
+    backgroundColor: vars.color.lightgray,
+    color: vars.color.white,
+  },
+]);
+
 export const editButton = style([
   button,
   {

src/app/admin/topics/_components/AdminTopicBox.tsx

@@ -0,0 +1,87 @@
+'use client';
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import BottomSheet from './BottomSheet';
+
+import { RequestedTopicType } from '@/lib/types/requestedTopicType';
+import editAdminTopic from '@/app/_api/adminTopics/editAdminTopic';
+import formatDate from '@/lib/utils/dateFormat';
+import getCategories from '@/app/_api/category/getCategories';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { CategoryType } from '@/lib/types/categoriesType';
+
+import * as styles from './AdminTopicBox.css';
+
+interface TopicBoxProps {
+  topic: RequestedTopicType;
+}
+
+function TopicBox({ topic }: TopicBoxProps) {
+  const queryClient = useQueryClient();
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+
+  const editTopicMutation = useMutation({
+    mutationFn: () =>
+      editAdminTopic({
+        topicId: topic?.id,
+        isExposed: !topic.isExposed,
+        title: topic?.title,
+        categoryCode: topic?.categoryCode,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAdminTopics],
+      });
+    },
+  });
+
+  const handleClickEditButton = () => {
+    setIsBottomSheetOpen(true);
+  };
+
+  const handleToggleExposeButton = () => {
+    editTopicMutation.mutate();
+  };
+
+  return (
+    <>
+      <tr className={styles.bodyRow}>
+        <td>{formatDate(topic?.createdDate)}</td>
+        <td>{topic?.categoryKorName}</td>
+        <td className={styles.rowItem}>
+          <span className={styles.rowText}>{topic?.title}</span>
+          <span className={styles.rowText}>{topic?.description}</span>
+        </td>
+        <td className={styles.buttons}>
+          <span className={styles.rowText}>{topic?.isAnonymous ? 'O' : 'X'}</span>
+        </td>
+        <td className={styles.buttons}>
+          <button className={styles.editButton} onClick={handleClickEditButton}>
+            수정하기
+          </button>
+        </td>
+        <td>
+          <select onChange={handleToggleExposeButton} value={topic?.isExposed ? '공개' : '비공개'}>
+            <option>공개</option>
+            <option>비공개</option>
+          </select>
+        </td>
+      </tr>
+
+      {isBottomSheetOpen && (
+        <BottomSheet
+          onClose={() => {
+            setIsBottomSheetOpen(false);
+          }}
+          topicTitle={topic?.title}
+          category={topic?.categoryKorName}
+          isExposed={topic?.isExposed}
+          topicId={topic?.id}
+        />
+      )}
+    </>
+  );
+}
+
+export default TopicBox;

src/app/temp-admin-topic/_components/BottomSheet.tsx → src/app/admin/topics/_components/BottomSheet.tsx

@@ -2,28 +2,26 @@
 
 import * as styles from './BottomSheet.css';
 import { MouseEventHandler, useState } from 'react';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useUser } from '@/store/useUser';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import useOnClickOutside from '@/hooks/useOnClickOutside';
 import getCategories from '@/app/_api/category/getCategories';
 import editAdminTopic from '@/app/_api/adminTopics/editAdminTopic';
 
 import { CategoryType } from '@/lib/types/categoriesType';
 import ArrowDown from '/public/icons/down_chevron.svg';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
-import Modal from '@/components/Modal/Modal';
 
 interface BottomSheetProps {
-  onClose: MouseEventHandler<HTMLDivElement>;
+  onClose: () => void;
   topicTitle: string;
   category: string;
   isExposed: boolean;
+  topicId: number;
 }
 // TODO: 컴포넌트 공통화 작업
-function BottomSheet({ onClose, topicTitle, category, isExposed }: BottomSheetProps) {
+function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: BottomSheetProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { isOn: isModalOn, handleSetOn: openModal, handleSetOff: closeModal } = useBooleanOutput(false);
+  const queryClient = useQueryClient();
 
   const [title, setTitle] = useState(topicTitle);
   const [selectedCategory, setSelectedCategory] = useState<string>(category);
@@ -35,17 +33,26 @@ function BottomSheet({ onClose, topicTitle, category, isExposed }: BottomSheetPr
     queryFn: getCategories,
   });
 
+  const convertCategoryKorNameToCode = (korName: string) => {
+    const category = categories?.find((cat) => cat.korName === korName);
+    return category ? category.code : null; // 찾지 못하면 null 반환
+  };
+
   const editTopicMutation = useMutation({
-    // mutationFn: () =>
-    //   editAdminTopic({
-    //     isExposed,
-    //     title,
-    //     categoryCode,
-    //   }),
+    mutationFn: () =>
+      editAdminTopic({
+        topicId,
+        isExposed,
+        title,
+        categoryCode: convertCategoryKorNameToCode(selectedCategory as string) || '',
+      }),
     onSuccess: () => {
       setTitle('');
       setSelectedCategory(selectedCategory);
-      openModal();
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAdminTopics],
+      });
+      onClose();
     },
     onError: (error) => {
       setErrorMessage('요청 중 오류가 발생했습니다. 다시 시도해 주세요. :(');
@@ -131,24 +138,10 @@ function BottomSheet({ onClose, topicTitle, category, isExposed }: BottomSheetPr
           </div>
 
           <button type="submit" className={styles.submitButton} disabled={!title || title.length > 30}>
-            요청 보내기
+            수정하기
           </button>
         </form>
       </div>
-      {isModalOn && (
-        <Modal handleModalClose={closeModal} size="large">
-          <div className={styles.modalText}>{`요청 주제 수정이 완료되었어요.`} </div>
-          <button
-            className={styles.modalButton}
-            onClick={() => {
-              closeModal();
-              setIsDropdownOpen(false); //실행안됨
-            }}
-          >
-            닫기
-          </button>
-        </Modal>
-      )}
     </div>
   );
 }

src/app/temp-admin-topic/page.css.ts → src/app/admin/topics/page.css.ts

@@ -3,7 +3,7 @@ import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
 export const body = style({
-  width: '100vw',
+  width: '100%',
   minHeight: '100vh',
   padding: '16px 16px 120px',
 
@@ -87,3 +87,36 @@ export const page = style([
     color: vars.color.bluegray6,
   },
 ]);
+
+export const table = style({
+  maxWidth: '850px',
+  padding: '1rem',
+
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+
+  backgroundColor: vars.color.white,
+  borderRadius: '8px',
+});
+
+export const headRow = style([
+  fonts.BodyRegular,
+  {
+    padding: '1rem 0.5rem',
+
+    display: 'grid',
+    gridTemplateColumns: 'repeat(8, 1fr)',
+    alignItems: 'center',
+
+    textAlign: 'center',
+  },
+]);
+
+export const rowItem = style({
+  gridColumn: 'span 2',
+
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});