뷰어페이지 스크랩 버그 수정 (#272)

backend/src/apis/scraps/scraps.controller.ts

@@ -20,7 +20,7 @@ const createScrap = async (req: Request, res: Response) => {
     }
   });
 
-  return res.status(201).send();
+  return res.status(201).send({ book_id, article_id });
 };
 
 const deleteScrap = async (req: Request, res: Response) => {

frontend/components/viewer/ScrapModal/index.tsx

@@ -1,9 +1,13 @@
+import { useRouter } from 'next/router';
+
 import { useEffect, useState } from 'react';
 
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { getUserKnottedBooksApi } from '@apis/bookApi';
 import { createScrapApi } from '@apis/scrapApi';
 import scrapState from '@atoms/scrap';
+import signInStatusState from '@atoms/signInStatus';
 import DragArticle from '@components/common/DragDrop';
 import Dropdown from '@components/common/Dropdown';
 import ModalButton from '@components/common/Modal/ModalButton';
@@ -13,20 +17,26 @@ import { IBook, IArticle, IScrap, IBookScraps } from '@interfaces';
 import { ArticleWrapper, Label, ScrapModalWrapper, WarningLabel } from './styled';
 
 interface ScrapModalProps {
-  books: IBookScraps[];
+  bookId: number;
   handleModalClose: () => void;
   article: IArticle;
 }
 
-export default function ScrapModal({ books, handleModalClose, article }: ScrapModalProps) {
+export default function ScrapModal({ bookId, handleModalClose, article }: ScrapModalProps) {
   const [selectedBookIndex, setSelectedBookIndex] = useState(-1);
   const [filteredScraps, setFilteredScraps] = useState<IScrap[]>([]);
-  const { execute: createScrap } = useFetch(createScrapApi);
+  const { data: createScrapData, execute: createScrap } = useFetch(createScrapApi);
+  const { data: books, execute: getUserKnottedBooks } =
+    useFetch<IBookScraps[]>(getUserKnottedBooksApi);
+
+  const user = useRecoilValue(signInStatusState);
 
   const [scrapList, setScrapList] = useRecoilState(scrapState);
 
   const [isSelectedBookUnavailable, setSelectedBookUnavailable] = useState(false);
 
+  const router = useRouter();
+
   const createBookDropdownItems = (items: IBook[]) =>
     items.map((item) => {
       return {
@@ -51,9 +61,20 @@ export default function ScrapModal({ books, handleModalClose, article }: ScrapMo
     return items.some((item) => item.article.id === articleId);
   };
 
-  useEffect(() => {
+  const handleScrapBtnClick = () => {
     if (selectedBookIndex === -1) return;
 
+    const scraps = scrapList.map((v, i) => ({ ...v, order: i + 1 }));
+
+    createScrap({ book_id: selectedBookIndex, article_id: article.id, scraps });
+  };
+  useEffect(() => {
+    getUserKnottedBooks(user.nickname);
+  }, [user.nickname]);
+
+  useEffect(() => {
+    if (selectedBookIndex === -1 || !books) return;
+
     const selectedBook = books.find((book) => book.id === selectedBookIndex);
 
     if (!selectedBook || checkArticleExistsInBook(article.id, selectedBook.scraps)) {
@@ -73,24 +94,23 @@ export default function ScrapModal({ books, handleModalClose, article }: ScrapMo
     setScrapList(createScrapDropdownItems(filteredScraps));
   }, [filteredScraps]);
 
-  const handleScrapBtnClick = () => {
-    if (selectedBookIndex === -1) return;
-
-    const scraps = scrapList.map((v, i) => ({ ...v, order: i + 1 }));
-
-    createScrap({ book_id: selectedBookIndex, article_id: article.id, scraps });
+  useEffect(() => {
+    if (createScrapData === undefined) return;
+    router.push(`/viewer/${bookId}/${article.id}`);
     handleModalClose();
-  };
+  }, [createScrapData]);
 
   return (
     <ScrapModalWrapper>
       <Label>책 선택</Label>
-      <Dropdown
-        label="글이 담길 책을 선택해주세요."
-        items={createBookDropdownItems(books)}
-        selectedId={selectedBookIndex}
-        handleItemSelect={(id) => setSelectedBookIndex(id)}
-      />
+      {books && (
+        <Dropdown
+          label="글이 담길 책을 선택해주세요."
+          items={createBookDropdownItems(books)}
+          selectedId={selectedBookIndex}
+          handleItemSelect={(id) => setSelectedBookIndex(id)}
+        />
+      )}
       {isSelectedBookUnavailable && (
         <WarningLabel>선택하신 책에 이미 동일한 글이 존재합니다.</WarningLabel>
       )}

frontend/pages/viewer/[...data].tsx

@@ -3,11 +3,8 @@ import { useRouter } from 'next/router';
 
 import { useEffect, useState } from 'react';
 
-import { useRecoilValue } from 'recoil';
-
 import { getArticleApi } from '@apis/articleApi';
 import { getBookApi, getUserKnottedBooksApi } from '@apis/bookApi';
-import signInStatusState from '@atoms/signInStatus';
 import GNB from '@components/common/GNB';
 import Modal from '@components/common/Modal';
 import ArticleContainer from '@components/viewer/ArticleContent';
@@ -24,27 +21,20 @@ interface ViewerProps {
 }
 
 export default function Viewer({ article }: ViewerProps) {
-  const { data: userBooks, execute: getUserKnottedBooks } = useFetch(getUserKnottedBooksApi);
   const { data: book, execute: getBook } = useFetch<IBookScraps>(getBookApi);
-
-  const user = useRecoilValue(signInStatusState);
+  const router = useRouter();
 
   const [isOpened, setIsOpened] = useState(false);
 
   const [isModalShown, setModalShown] = useState(false);
 
   const handleModalOpen = () => setModalShown(true);
   const handleModalClose = () => setModalShown(false);
-  const router = useRouter();
 
   const handleSideBarToggle = () => {
     setIsOpened((prev) => !prev);
   };
 
-  useEffect(() => {
-    getUserKnottedBooks(user.nickname);
-  }, [user.nickname]);
-
   const checkArticleAuthority = (targetBook: IBookScraps, id: number) => {
     if (targetBook.scraps.find((scrap) => scrap.article.id === id)) {
       return true;
@@ -101,9 +91,9 @@ export default function Viewer({ article }: ViewerProps) {
       ) : (
         <div>loading</div>
       )}
-      {isModalShown && (
+      {isModalShown && book && (
         <Modal title="글 스크랩하기" handleModalClose={handleModalClose}>
-          <ScrapModal books={userBooks} handleModalClose={handleModalClose} article={article} />
+          <ScrapModal bookId={book.id} handleModalClose={handleModalClose} article={article} />
         </Modal>
       )}
     </PageNoScrollWrapper>