From 667ce407b3e69548ad4a3e2e405658f3baab72fc Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 15:26:57 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Fix:=20=EC=96=B4=EB=93=9C=EB=AF=BC=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=A3=BC=EC=A0=9C=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20admin=20topics=20=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics}/_components/AdminTopicBox.css.ts | 0 .../topics}/_components/AdminTopicBox.tsx | 0 .../topics}/_components/AdminTopicMock.ts | 0 .../topics}/_components/BottomSheet.css.ts | 0 .../topics}/_components/BottomSheet.tsx | 0 .../topics}/page.css.ts | 0 src/app/admin/topics/page.tsx | 70 +++++++++++++++++- src/app/temp-admin-topic/page.tsx | 74 ------------------- 8 files changed, 69 insertions(+), 75 deletions(-) rename src/app/{temp-admin-topic => admin/topics}/_components/AdminTopicBox.css.ts (100%) rename src/app/{temp-admin-topic => admin/topics}/_components/AdminTopicBox.tsx (100%) rename src/app/{temp-admin-topic => admin/topics}/_components/AdminTopicMock.ts (100%) rename src/app/{temp-admin-topic => admin/topics}/_components/BottomSheet.css.ts (100%) rename src/app/{temp-admin-topic => admin/topics}/_components/BottomSheet.tsx (100%) rename src/app/{temp-admin-topic => admin/topics}/page.css.ts (100%) delete mode 100644 src/app/temp-admin-topic/page.tsx diff --git a/src/app/temp-admin-topic/_components/AdminTopicBox.css.ts b/src/app/admin/topics/_components/AdminTopicBox.css.ts similarity index 100% rename from src/app/temp-admin-topic/_components/AdminTopicBox.css.ts rename to src/app/admin/topics/_components/AdminTopicBox.css.ts diff --git a/src/app/temp-admin-topic/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx similarity index 100% rename from src/app/temp-admin-topic/_components/AdminTopicBox.tsx rename to src/app/admin/topics/_components/AdminTopicBox.tsx diff --git a/src/app/temp-admin-topic/_components/AdminTopicMock.ts b/src/app/admin/topics/_components/AdminTopicMock.ts similarity index 100% rename from src/app/temp-admin-topic/_components/AdminTopicMock.ts rename to src/app/admin/topics/_components/AdminTopicMock.ts diff --git a/src/app/temp-admin-topic/_components/BottomSheet.css.ts b/src/app/admin/topics/_components/BottomSheet.css.ts similarity index 100% rename from src/app/temp-admin-topic/_components/BottomSheet.css.ts rename to src/app/admin/topics/_components/BottomSheet.css.ts diff --git a/src/app/temp-admin-topic/_components/BottomSheet.tsx b/src/app/admin/topics/_components/BottomSheet.tsx similarity index 100% rename from src/app/temp-admin-topic/_components/BottomSheet.tsx rename to src/app/admin/topics/_components/BottomSheet.tsx diff --git a/src/app/temp-admin-topic/page.css.ts b/src/app/admin/topics/page.css.ts similarity index 100% rename from src/app/temp-admin-topic/page.css.ts rename to src/app/admin/topics/page.css.ts diff --git a/src/app/admin/topics/page.tsx b/src/app/admin/topics/page.tsx index 05571b1b..d8df1e71 100644 --- a/src/app/admin/topics/page.tsx +++ b/src/app/admin/topics/page.tsx @@ -1,9 +1,77 @@ // 임시 요청 주제 페이지 +'use client'; +import { useMemo } from 'react'; + +import AdminTopicBox from './_components/AdminTopicBox'; +import { useRouter } from 'next/navigation'; +import BottomSheet from './_components/BottomSheet'; +import { useInfiniteQuery } from '@tanstack/react-query'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import getAdminTopics from '@/app/_api/adminTopics/getAdminTopics'; +import { RequestedTopicType } from '@/lib/types/requestedTopicType'; +import { useUser } from '@/store/useUser'; +import LoginModal from '@/components/login/LoginModal'; +import Modal from '@/components/Modal/Modal'; +import { requestedTopicData } from './_components/AdminTopicMock'; + +import * as styles from './page.css'; export default function AdminTopicsPage() { + const router = useRouter(); + + const { user } = useUser(); + + const pages = useMemo(() => Array.from({ length: 5 }, (_, idx) => idx + 1), []); + + //요청 주제목록 무한스크롤 리액트 쿼리 함수 + // const { + // data: topicsData, + // hasNextPage, + // fetchNextPage, + // isFetching, + // } = useInfiniteQuery({ + // queryKey: [QUERY_KEYS.getAdminTopics], + // queryFn: ({ pageParam: cursorId }) => { + // return getTopics({ cursorId: cursorId }); + // }, + // initialPageParam: null, + // getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), + // }); + + const handleTopicClick = (topic: RequestedTopicType) => { + router.push(`/list/create?title=${topic.title}&category=${topic.categoryKorName}`); + }; return (
-

요청 주제 페이지

+
+ +
요청 주제 관리
+ {requestedTopicData?.map((topic, index: number) => { + return ( + { + handleTopicClick(topic); + }} + /> + ); + })} +
    + {pages.map((page) => ( +
  • + +
    • + ))} +
+
); } diff --git a/src/app/temp-admin-topic/page.tsx b/src/app/temp-admin-topic/page.tsx deleted file mode 100644 index 03a7e06c..00000000 --- a/src/app/temp-admin-topic/page.tsx +++ /dev/null @@ -1,74 +0,0 @@ -'use client'; -import { useMemo } from 'react'; - -import AdminTopicBox from './_components/AdminTopicBox'; -import * as styles from './page.css'; -import { useRouter } from 'next/navigation'; -import BottomSheet from './_components/BottomSheet'; -import { useInfiniteQuery } from '@tanstack/react-query'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import getAdminTopics from '../_api/adminTopics/getAdminTopics'; -import { RequestedTopicType } from '@/lib/types/requestedTopicType'; -import { useUser } from '@/store/useUser'; -import LoginModal from '@/components/login/LoginModal'; -import Modal from '@/components/Modal/Modal'; -import { requestedTopicData } from './_components/AdminTopicMock'; - -export default function TopicPage() { - const router = useRouter(); - - const { user } = useUser(); - - const pages = useMemo(() => Array.from({ length: 5 }, (_, idx) => idx + 1), []); - - //요청 주제목록 무한스크롤 리액트 쿼리 함수 - // const { - // data: topicsData, - // hasNextPage, - // fetchNextPage, - // isFetching, - // } = useInfiniteQuery({ - // queryKey: [QUERY_KEYS.getAdminTopics], - // queryFn: ({ pageParam: cursorId }) => { - // return getTopics({ cursorId: cursorId }); - // }, - // initialPageParam: null, - // getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), - // }); - - const handleTopicClick = (topic: RequestedTopicType) => { - router.push(`/list/create?title=${topic.title}&category=${topic.categoryKorName}`); - }; - - return ( -
- -
요청 주제 관리
- {requestedTopicData?.map((topic, index: number) => { - return ( - { - handleTopicClick(topic); - }} - /> - ); - })} -
    - {pages.map((page) => ( -
  • - -
    • - ))} -
-
- ); -} From c7c73690933e6f137cdc8799bb01935fd9d23675 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 16:04:41 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Fix:=20=EC=9D=BC=EB=B6=80=20CSS=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics/_components/AdminTopicBox.css.ts | 12 ++- .../topics/_components/AdminTopicBox.tsx | 24 ++--- src/app/admin/topics/page.css.ts | 2 +- src/app/admin/topics/page.tsx | 87 +++++++++---------- 4 files changed, 66 insertions(+), 59 deletions(-) diff --git a/src/app/admin/topics/_components/AdminTopicBox.css.ts b/src/app/admin/topics/_components/AdminTopicBox.css.ts index 6301de84..a0b53dde 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.css.ts +++ b/src/app/admin/topics/_components/AdminTopicBox.css.ts @@ -50,10 +50,10 @@ export const button = style({ flexShrink: 0, - borderRadius: '14px', + borderRadius: '4px', }); -export const exposeToggleButton = style([ +export const exposedButton = style([ button, { backgroundColor: vars.color.blue, @@ -61,6 +61,14 @@ export const exposeToggleButton = style([ }, ]); +export const notExposedButton = style([ + button, + { + backgroundColor: vars.color.lightgray, + color: vars.color.white, + }, +]); + export const editButton = style([ button, { diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx index 8182412d..deb382ed 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.tsx +++ b/src/app/admin/topics/_components/AdminTopicBox.tsx @@ -10,18 +10,18 @@ import * as styles from './AdminTopicBox.css'; interface TopicBoxProps { topic: RequestedTopicType; - onClick: () => void; } -function TopicBox({ topic, onClick }: TopicBoxProps) { +function TopicBox({ topic }: TopicBoxProps) { const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); const editTopicMutation = useMutation({ // mutationFn: () => // editAdminTopic({ - // isExposed : !topic.isExposed, + // isExposed: !topic.isExposed, // title, // categoryCode, + // topicId, // }), }); @@ -32,25 +32,27 @@ function TopicBox({ topic, onClick }: TopicBoxProps) { return (
-
+
-
{topic.categoryKorName}
-
{topic.title}
+
{topic?.categoryKorName}
+
{topic?.title}
-
{topic.description}
+
{topic?.description}
-
{topic.ownerNickname}
-
{topic.createdDate}
-
{topic.isAnonymous && '익명'}
+
{topic?.ownerNickname}
+
{topic?.createdDate}
+
{topic?.isAnonymous && '익명'}
{/* */}
- + diff --git a/src/app/admin/topics/page.css.ts b/src/app/admin/topics/page.css.ts index 8dd51d2d..5a424cd0 100644 --- a/src/app/admin/topics/page.css.ts +++ b/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', diff --git a/src/app/admin/topics/page.tsx b/src/app/admin/topics/page.tsx index d8df1e71..0046ce4b 100644 --- a/src/app/admin/topics/page.tsx +++ b/src/app/admin/topics/page.tsx @@ -1,6 +1,6 @@ // 임시 요청 주제 페이지 'use client'; -import { useMemo } from 'react'; +import { useMemo, useRef } from 'react'; import AdminTopicBox from './_components/AdminTopicBox'; import { useRouter } from 'next/navigation'; @@ -10,68 +10,65 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import getAdminTopics from '@/app/_api/adminTopics/getAdminTopics'; import { RequestedTopicType } from '@/lib/types/requestedTopicType'; import { useUser } from '@/store/useUser'; -import LoginModal from '@/components/login/LoginModal'; -import Modal from '@/components/Modal/Modal'; import { requestedTopicData } from './_components/AdminTopicMock'; +import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import * as styles from './page.css'; export default function AdminTopicsPage() { - const router = useRouter(); + //페이지네이션 코드 + // const pages = useMemo(() => Array.from({ length: 5 }, (_, idx) => idx + 1), []); - const { user } = useUser(); + //요청 주제목록 무한스크롤 리액트 쿼리 함수 + const { + data: topicsData, + hasNextPage, + fetchNextPage, + isFetching, + } = useInfiniteQuery({ + queryKey: [QUERY_KEYS.getAdminTopics], + queryFn: ({ pageParam: cursorId }) => { + return getAdminTopics({ cursorId: cursorId }); + }, + initialPageParam: null, + getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), + }); - const pages = useMemo(() => Array.from({ length: 5 }, (_, idx) => idx + 1), []); + //댓글 주요 정보 변수화 + const topics = useMemo(() => { + const totalCount = topicsData ? topicsData.pages[topicsData.pages.length - 1].totalCount : 0; + const topicsList = topicsData ? topicsData.pages.flatMap(({ topics }) => topics) : []; + return { topicsList, totalCount }; + }, [topicsData]); - //요청 주제목록 무한스크롤 리액트 쿼리 함수 - // const { - // data: topicsData, - // hasNextPage, - // fetchNextPage, - // isFetching, - // } = useInfiniteQuery({ - // queryKey: [QUERY_KEYS.getAdminTopics], - // queryFn: ({ pageParam: cursorId }) => { - // return getTopics({ cursorId: cursorId }); - // }, - // initialPageParam: null, - // getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), - // }); + //옵저버 훅 사용 + const ref = useIntersectionObserver(() => { + if (hasNextPage) { + fetchNextPage(); + } + }); + + console.log(topicsData); - const handleTopicClick = (topic: RequestedTopicType) => { - router.push(`/list/create?title=${topic.title}&category=${topic.categoryKorName}`); - }; return (
- -
요청 주제 관리
- {requestedTopicData?.map((topic, index: number) => { - return ( - { - handleTopicClick(topic); - }} - /> - ); - })} -
    +

    요청 주제 관리

    + {topics && + topics?.topicsList.map((topic: any, index: number) => { + return ; + })} + {/* 추후 페이지네이션으로 전환하기 위한 코드 */} + {/*
      {pages.map((page) => (
      • ))} -
    +
*/}
+ {/* {옵저버를 위한 요소} */} +
); } From 53ca41d4ab456215e18da217171e4ceaa10c2ec3 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 16:29:08 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Fix:=20=EC=9A=94=EC=B2=AD=20=EC=A3=BC?= =?UTF-8?q?=EC=A0=9C=20=EA=B4=80=EB=A6=AC=20=EB=A7=88=ED=81=AC=EC=97=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics/_components/AdminTopicBox.css.ts | 83 +++++++++++++++---- .../topics/_components/AdminTopicBox.tsx | 60 +++++++------- src/app/admin/topics/page.css.ts | 33 ++++++++ src/app/admin/topics/page.tsx | 20 ++++- 4 files changed, 150 insertions(+), 46 deletions(-) diff --git a/src/app/admin/topics/_components/AdminTopicBox.css.ts b/src/app/admin/topics/_components/AdminTopicBox.css.ts index a0b53dde..7e557d56 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.css.ts +++ b/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,20 +106,6 @@ export const buttonWrapper = style({ gap: '10px', }); -export const button = style({ - padding: '6px 12px', - - width: '80px', - - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - - flexShrink: 0, - - borderRadius: '4px', -}); - export const exposedButton = style([ button, { diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx index deb382ed..031e6cf2 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.tsx +++ b/src/app/admin/topics/_components/AdminTopicBox.tsx @@ -6,6 +6,7 @@ import BottomSheet from './BottomSheet'; import { RequestedTopicType } from '@/lib/types/requestedTopicType'; import editAdminTopic from '@/app/_api/adminTopics/editAdminTopic'; +import formatDate from '@/lib/utils/dateFormat'; import * as styles from './AdminTopicBox.css'; interface TopicBoxProps { @@ -25,38 +26,39 @@ function TopicBox({ topic }: TopicBoxProps) { // }), }); - const clickToggleExposeButton = () => { + const handleClickEditButton = () => { setIsBottomSheetOpen(true); - editTopicMutation.mutate(); + }; + + const handleToggleExposeButton = () => { + // editTopicMutation() }; return ( -
-
-
-
{topic?.categoryKorName}
-
{topic?.title}
-
-
-
{topic?.description}
-
-
-
{topic?.ownerNickname}
-
{topic?.createdDate}
-
{topic?.isAnonymous && '익명'}
-
- {/* */} -
-
- - -
+ <> + + {formatDate(topic?.createdDate)} + {topic?.categoryKorName} + + {topic?.title} + {topic?.description} + + + {topic?.isAnonymous ? 'O' : 'X'} + + + + + + + + + {isBottomSheetOpen && ( { @@ -67,7 +69,7 @@ function TopicBox({ topic }: TopicBoxProps) { isExposed={topic.isExposed} /> )} -
+ ); } diff --git a/src/app/admin/topics/page.css.ts b/src/app/admin/topics/page.css.ts index 5a424cd0..829142fe 100644 --- a/src/app/admin/topics/page.css.ts +++ b/src/app/admin/topics/page.css.ts @@ -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', +}); diff --git a/src/app/admin/topics/page.tsx b/src/app/admin/topics/page.tsx index 0046ce4b..6018bbed 100644 --- a/src/app/admin/topics/page.tsx +++ b/src/app/admin/topics/page.tsx @@ -15,6 +15,8 @@ import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import * as styles from './page.css'; +const TABLE_ROW = ['일시', '카테고리', '주제&소개', '요청자', '익명', '수정', '노출']; + export default function AdminTopicsPage() { //페이지네이션 코드 // const pages = useMemo(() => Array.from({ length: 5 }, (_, idx) => idx + 1), []); @@ -54,10 +56,24 @@ export default function AdminTopicsPage() {

요청 주제 관리

- {topics && + + + + {TABLE_ROW.map((item, index) => ( + + ))} + + + + {topics && topics?.topicsList.map((topic, index) => )} + +
+ {item} +
+ {/* {topics && topics?.topicsList.map((topic: any, index: number) => { return ; - })} + })} */} {/* 추후 페이지네이션으로 전환하기 위한 코드 */} {/*
    {pages.map((page) => ( From 7f27b29c53eb48c0d26faf00d236295777b99c58 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 16:53:53 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Fix:=20=ED=95=84=EC=9A=94=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/admin/topics/page.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/app/admin/topics/page.tsx b/src/app/admin/topics/page.tsx index 6018bbed..9dba1ae3 100644 --- a/src/app/admin/topics/page.tsx +++ b/src/app/admin/topics/page.tsx @@ -70,18 +70,6 @@ export default function AdminTopicsPage() { {topics && topics?.topicsList.map((topic, index) => )} - {/* {topics && - topics?.topicsList.map((topic: any, index: number) => { - return ; - })} */} - {/* 추후 페이지네이션으로 전환하기 위한 코드 */} - {/*
      - {pages.map((page) => ( -
    • - -
      • - ))} -
    */}
{/* {옵저버를 위한 요소} */}
From a28d20c251da5806acc4e60856cd6f94f4785c96 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 19:47:37 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Fix:=20=EC=9A=94=EC=B2=AD=20=EC=A3=BC?= =?UTF-8?q?=EC=A0=9C=EA=B4=80=EB=A6=AC=20=EC=88=98=EC=A0=95=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics/_components/AdminTopicBox.tsx | 20 ++++++++++++------- .../admin/topics/_components/BottomSheet.tsx | 6 ++++-- src/app/admin/topics/page.tsx | 2 -- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx index 031e6cf2..b0b90a8b 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.tsx +++ b/src/app/admin/topics/_components/AdminTopicBox.tsx @@ -7,6 +7,10 @@ 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 { @@ -19,10 +23,10 @@ function TopicBox({ topic }: TopicBoxProps) { const editTopicMutation = useMutation({ // mutationFn: () => // editAdminTopic({ + // // topicId: topic?.id, // isExposed: !topic.isExposed, - // title, - // categoryCode, - // topicId, + // title: topic?.title, + // categoryCode: topic?.categoryKorName, // }), }); @@ -31,7 +35,7 @@ function TopicBox({ topic }: TopicBoxProps) { }; const handleToggleExposeButton = () => { - // editTopicMutation() + editTopicMutation.mutate(); }; return ( @@ -64,9 +68,11 @@ function TopicBox({ topic }: TopicBoxProps) { onClose={() => { setIsBottomSheetOpen(false); }} - topicTitle={topic.title} - category={topic.categoryKorName} - isExposed={topic.isExposed} + topicTitle={topic?.title} + category={topic?.categoryKorName} + isExposed={topic?.isExposed} + // {topicI수정필요} + topicId={0} /> )} diff --git a/src/app/admin/topics/_components/BottomSheet.tsx b/src/app/admin/topics/_components/BottomSheet.tsx index 88a50c7e..4e28306f 100644 --- a/src/app/admin/topics/_components/BottomSheet.tsx +++ b/src/app/admin/topics/_components/BottomSheet.tsx @@ -19,9 +19,10 @@ interface BottomSheetProps { 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); @@ -38,6 +39,7 @@ function BottomSheet({ onClose, topicTitle, category, isExposed }: BottomSheetPr const editTopicMutation = useMutation({ // mutationFn: () => // editAdminTopic({ + // topicId // isExposed, // title, // categoryCode, @@ -131,7 +133,7 @@ function BottomSheet({ onClose, topicTitle, category, isExposed }: BottomSheetPr
diff --git a/src/app/admin/topics/page.tsx b/src/app/admin/topics/page.tsx index 9dba1ae3..b3398936 100644 --- a/src/app/admin/topics/page.tsx +++ b/src/app/admin/topics/page.tsx @@ -50,8 +50,6 @@ export default function AdminTopicsPage() { } }); - console.log(topicsData); - return (
From 923047fb8279d41f24860b5ce8534e2de531d131 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 15 Dec 2024 23:45:53 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Fix:=20=EC=9A=94=EC=B2=AD=EC=A3=BC=EC=A0=9C?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=88=98=EC=A0=95=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics/_components/AdminTopicBox.tsx | 25 ++++++---- .../admin/topics/_components/BottomSheet.tsx | 47 ++++++++----------- src/lib/types/requestedTopicType.ts | 2 + 3 files changed, 36 insertions(+), 38 deletions(-) diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx index b0b90a8b..4f69a08a 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.tsx +++ b/src/app/admin/topics/_components/AdminTopicBox.tsx @@ -1,6 +1,6 @@ 'use client'; import { useState } from 'react'; -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import BottomSheet from './BottomSheet'; @@ -18,16 +18,22 @@ interface TopicBoxProps { } 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?.categoryKorName, - // }), + mutationFn: () => + editAdminTopic({ + topicId: topic?.id, + isExposed: !topic.isExposed, + title: topic?.title, + categoryCode: topic?.categoryCode, + }), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.getAdminTopics], + }); + }, }); const handleClickEditButton = () => { @@ -71,8 +77,7 @@ function TopicBox({ topic }: TopicBoxProps) { topicTitle={topic?.title} category={topic?.categoryKorName} isExposed={topic?.isExposed} - // {topicI수정필요} - topicId={0} + topicId={topic?.id} /> )} diff --git a/src/app/admin/topics/_components/BottomSheet.tsx b/src/app/admin/topics/_components/BottomSheet.tsx index 4e28306f..8a2e25cd 100644 --- a/src/app/admin/topics/_components/BottomSheet.tsx +++ b/src/app/admin/topics/_components/BottomSheet.tsx @@ -2,8 +2,7 @@ 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'; @@ -11,11 +10,9 @@ 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; + onClose: () => void; topicTitle: string; category: string; isExposed: boolean; @@ -24,7 +21,7 @@ interface BottomSheetProps { // TODO: 컴포넌트 공통화 작업 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(category); @@ -36,18 +33,26 @@ function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: Bott 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({ - // topicId - // 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('요청 중 오류가 발생했습니다. 다시 시도해 주세요. :('); @@ -137,20 +142,6 @@ function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: Bott
- {isModalOn && ( - -
{`요청 주제 수정이 완료되었어요.`}
- - - )}
); } diff --git a/src/lib/types/requestedTopicType.ts b/src/lib/types/requestedTopicType.ts index 3d8f1264..006f5aa0 100644 --- a/src/lib/types/requestedTopicType.ts +++ b/src/lib/types/requestedTopicType.ts @@ -3,6 +3,7 @@ */ export interface RequestedTopicType { + categoryCode: string; categoryEngName: string; categoryKorName: string; title: string; @@ -12,6 +13,7 @@ export interface RequestedTopicType { ownerNickname: string; isAnonymous: boolean; isExposed: boolean; + id: number; } export interface RequestedTopicsListType { From 7c69284aa4a51b42b744a895e66c258b3082ffc9 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Sun, 5 Jan 2025 20:42:10 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topics/_components/AdminTopicBox.tsx | 16 ++-- .../topics/_components/AdminTopicMock.ts | 92 ------------------- src/app/admin/topics/page.css.ts | 63 +------------ src/app/admin/topics/page.tsx | 21 ++--- 4 files changed, 16 insertions(+), 176 deletions(-) delete mode 100644 src/app/admin/topics/_components/AdminTopicMock.ts diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx index 4f69a08a..45639e40 100644 --- a/src/app/admin/topics/_components/AdminTopicBox.tsx +++ b/src/app/admin/topics/_components/AdminTopicBox.tsx @@ -1,15 +1,13 @@ 'use client'; -import { useState } from 'react'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useMutation, 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 useBooleanOutput from '@/hooks/useBooleanOutput'; import * as styles from './AdminTopicBox.css'; @@ -19,7 +17,7 @@ interface TopicBoxProps { function TopicBox({ topic }: TopicBoxProps) { const queryClient = useQueryClient(); - const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); + const { isOn: isBottomSheetOpen, handleSetOn, handleSetOff } = useBooleanOutput(); const editTopicMutation = useMutation({ mutationFn: () => @@ -37,7 +35,7 @@ function TopicBox({ topic }: TopicBoxProps) { }); const handleClickEditButton = () => { - setIsBottomSheetOpen(true); + handleSetOn(); }; const handleToggleExposeButton = () => { @@ -54,7 +52,9 @@ function TopicBox({ topic }: TopicBoxProps) { {topic?.description} - {topic?.isAnonymous ? 'O' : 'X'} + + {topic?.isAnonymous ? `${topic?.ownerNickname}(익명 요청)` : topic?.ownerNickname} +