diff --git a/src/_components/MaeilWiki/Home/WikiSubmitModal/index.tsx b/src/_components/MaeilWiki/Home/WikiSubmitModal/index.tsx index 4808f3a..d62fc4f 100644 --- a/src/_components/MaeilWiki/Home/WikiSubmitModal/index.tsx +++ b/src/_components/MaeilWiki/Home/WikiSubmitModal/index.tsx @@ -3,10 +3,8 @@ import Button from '@/_components/common/Button/Button'; import Modal from '@/_components/common/Modal'; import * as React from 'react'; -import { postWiki } from '../../_apis/wiki'; import { WIKI_CATEGORY, WIKI_CATEGORY_KO } from '../../_constants/wikiCategory'; import { WikiCategory } from '../../_types/wikiCategory'; -import { useMutation } from '@tanstack/react-query'; import { asterisk, categoryInputs, @@ -27,6 +25,7 @@ import { categoryLabel, } from './wikiSubmitModal.css'; import CloseIcon from '@/_assets/images/maeilWiki/closeIcon.svg'; +import { usePostWiki } from '../_hooks/usePostWiki'; export interface WikiSubmitModalProps { isOpen: boolean; @@ -39,13 +38,7 @@ export default function WikiSubmitModal({ isOpen, onClose }: WikiSubmitModalProp const [category, setCategory] = React.useState(WIKI_CATEGORY.backend); const [isAnonymous, setIsAnonymous] = React.useState(false); - const { mutate, isPending } = useMutation({ - mutationFn: postWiki, - onSuccess: () => { - window.alert('질문이 등록되었습니다!'); - window.location.reload(); - }, - }); + const { mutate, isPending } = usePostWiki(); const onChangeQuestion = (e: React.ChangeEvent) => { setQuestion(e.target.value); diff --git a/src/_components/MaeilWiki/Home/_hooks/usePostWiki.ts b/src/_components/MaeilWiki/Home/_hooks/usePostWiki.ts new file mode 100644 index 0000000..101337e --- /dev/null +++ b/src/_components/MaeilWiki/Home/_hooks/usePostWiki.ts @@ -0,0 +1,16 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useRouter } from 'next/navigation'; +import { postWiki } from '../../_apis/wiki'; + +export const usePostWiki = () => { + const router = useRouter(); + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: postWiki, + onSuccess: (createdWikiId) => { + router.push(`/wiki/${createdWikiId}`); + queryClient.invalidateQueries({ queryKey: ['wiki'] }); + }, + }); +}; diff --git a/src/_components/MaeilWiki/Wiki/wiki.css.ts b/src/_components/MaeilWiki/Wiki/wiki.css.ts index 786c750..18654d0 100644 --- a/src/_components/MaeilWiki/Wiki/wiki.css.ts +++ b/src/_components/MaeilWiki/Wiki/wiki.css.ts @@ -291,11 +291,11 @@ export const wikiCommentInputSection = style({ display: 'flex', flexDirection: 'column', gap: '2rem', - marginTop: '4rem', + marginTop: '2rem', '@media': { '(max-width: 800px)': { - marginTop: '2rem', + marginTop: '0', }, }, }); diff --git a/src/_components/MaeilWiki/_apis/wiki.ts b/src/_components/MaeilWiki/_apis/wiki.ts index 8cc6b3b..58aaf19 100644 --- a/src/_components/MaeilWiki/_apis/wiki.ts +++ b/src/_components/MaeilWiki/_apis/wiki.ts @@ -38,17 +38,17 @@ export interface PostWikiBody { questionDetail?: string; } -export const postWiki = async (body: PostWikiBody) => { +export const postWiki = async (body: PostWikiBody): Promise => { try { if (!body.question) { - return; + return null; } const res = await mainClient.request('POST', API_ROUTES.wiki, body); - res.headers.forEach(console.log); + const createdWikiId = res.headers.get('location'); - return res.headers; + return createdWikiId; } catch (error) { throw error; }