chore: 충돌해결

backend/src/apis/books/books.service.ts

@@ -20,6 +20,7 @@ const searchBooks = async ({ query, userId, take, page }: SearchBooks) => {
         select: {
           id: true,
           order: true,
+          is_original: true,
           article: {
             select: {
               id: true,
@@ -76,7 +77,9 @@ const getBook = async (bookId: number, userId: number) => {
       scraps: {
         orderBy: { order: 'asc' },
         select: {
+          id: true,
           order: true,
+          is_original: true,
           article: {
             select: {
               id: true,

backend/src/apis/index.ts

@@ -42,6 +42,7 @@ router.post('/bookmarks', guard, catchAsync(bookmarksController.createBookmark))
 router.delete('/bookmarks/:bookmarkId', catchAsync(bookmarksController.deleteBookmark));
 
 router.get('/scraps', catchAsync(scrapsController.getScraps));
+router.patch('/scraps', catchAsync(guard), catchAsync(scrapsController.updateScrapsOrder));
 router.post('/scraps', catchAsync(scrapsController.createScrap));
 router.delete('/scraps/:scrapId', guard, catchAsync(scrapsController.deleteScrap));
 

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

@@ -36,8 +36,19 @@ const getScraps = async (req: Request, res: Response) => {
   return res.status(200).send(scraps);
 };
 
+const updateScrapsOrder = async (req: Request, res: Response) => {
+  const scraps = req.body;
+
+  scraps.forEach(async (scrap: IScrap) => {
+    await scrapsService.updateScrapOrder(scrap);
+  });
+
+  res.status(200).send(scraps);
+};
+
 export default {
   createScrap,
   deleteScrap,
   getScraps,
+  updateScrapsOrder,
 };

frontend/apis/scrapApi.ts

@@ -1,3 +1,4 @@
+import { IScrap } from '@interfaces';
 import api from '@utils/api';
 
 export const getScrapsApi = async () => {
@@ -30,3 +31,9 @@ export const deleteScrapApi = async (scrapId: string) => {
 
   return response.data;
 };
+export const updateScrapsOrderApi = async (data: IScrap[]) => {
+  const url = `/api/scraps`;
+  const response = await api({ url, method: 'PATCH', data });
+
+  return response.data;
+};

frontend/components/common/Book/index.tsx

@@ -1,13 +1,10 @@
-import Image from 'next/image';
-
 import InactiveBookmarkIcon from '@assets/ico_bookmark_black.svg';
 import ActiveBookmarkIcon from '@assets/ico_bookmark_grey_filled.svg';
-import MoreContentsIcon from '@assets/ico_more_contents.svg';
 import sampleImage from '@assets/img_sample_thumbnail.jpg';
 import useBookmark from '@hooks/useBookmark';
 import { IBookScraps } from '@interfaces';
 import { TextLarge, TextXSmall, TextSmall } from '@styles/common';
-import { FlexCenter, FlexSpaceBetween } from '@styles/layout';
+import { FlexSpaceBetween } from '@styles/layout';
 
 import {
   BookWrapper,

frontend/components/common/Content/index.tsx

@@ -1,5 +1,7 @@
 import { ContentBody, ContentTitle, ContentWrapper } from './styled';
 
+import 'highlight.js/styles/github.css';
+
 interface ContentProps {
   title?: string;
   content: string;

frontend/components/common/Content/styled.ts

@@ -68,8 +68,6 @@ export const ContentBody = styled.div`
   blockquote {
     margin: 24px 0;
     padding: 24px 16px;
-    /* background-color: var(--light-orange-color); */
-    /* border-radius: 4px; */
     border-left: 8px solid var(--light-orange-color);
   }
 
@@ -90,6 +88,7 @@ export const ContentBody = styled.div`
 
     code {
       padding: 0;
+      white-space: pre-wrap;
     }
   }
 `;

frontend/components/study/BookListTab/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useRecoilState } from 'recoil';
 

frontend/components/viewer/ArticleContent/index.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { deleteArticleApi } from '@apis/articleApi';
+import { deleteScrapApi, updateScrapsOrderApi } from '@apis/scrapApi';
 import LeftBtnIcon from '@assets/ico_leftBtn.svg';
 import Original from '@assets/ico_original.svg';
 import RightBtnIcon from '@assets/ico_rightBtn.svg';
@@ -45,6 +46,9 @@ export default function Article({
   const user = useRecoilValue(signInStatusState);
 
   const { data: deleteArticleData, execute: deleteArticle } = useFetch(deleteArticleApi);
+  const { execute: deleteScrap } = useFetch(deleteScrapApi);
+  const { data: updateScrapsData, execute: updateScrapsOrder } = useFetch(updateScrapsOrderApi);
+
   const router = useRouter();
 
   const handleOriginalBtnOnClick = () => {
@@ -65,13 +69,21 @@ export default function Article({
 
   const handleDeleteBtnOnClick = () => {
     if (window.confirm('해당 글을 삭제하시겠습니까?')) {
+      const curScrap = scraps.find((scrap) => scrap.article.id === article.id);
+      deleteScrap(curScrap?.id);
       deleteArticle(article.id);
     }
   };
 
   const handleScrapDeleteBtnOnClick = () => {
     if (window.confirm('해당 글을 책에서 삭제하시겠습니까?')) {
-      //
+      const curScrap = scraps.find((scrap) => scrap.article.id === article.id);
+      if (!curScrap) return;
+      const newScraps = scraps
+        .filter((scrap) => scrap.id !== curScrap.id)
+        .map((v, i) => ({ ...v, order: i + 1 }));
+      updateScrapsOrder(newScraps);
+      deleteScrap(curScrap.id);
     }
   };
 
@@ -83,6 +95,16 @@ export default function Article({
     if (deleteArticleData !== undefined) router.push('/');
   }, [deleteArticleData]);
 
+  useEffect(() => {
+    if (updateScrapsData === undefined) return;
+
+    if (updateScrapsData.length !== 0) {
+      router.push(`/viewer/${bookId}/${updateScrapsData[0].article.id}`);
+      return;
+    }
+    router.push('/');
+  }, [updateScrapsData]);
+
   return (
     <ArticleContainer>
       {article.id === scraps.at(0)?.article.id ? null : (
@@ -112,9 +134,9 @@ export default function Article({
                 <ArticleButton onClick={handleModifyBtnOnClick}>글 수정</ArticleButton>
               </>
             )}
-            {/* {article.book_id !== bookId && bookAuthor === user.nickname && (
+            {article.book_id !== bookId && bookAuthor === user.nickname && (
               <ArticleButton onClick={handleScrapDeleteBtnOnClick}>스크랩 삭제</ArticleButton>
-            )} */}
+            )}
             {user.id !== 0 && (
               <ArticleButton onClick={handleScrapBtnClick}>
                 <Image src={Scrap} alt="Scrap Icon" width={20} height={15} />

frontend/package.json

@@ -24,6 +24,7 @@
     "dotenv-webpack": "^8.0.1",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
+    "highlight.js": "^11.7.0",
     "immutability-helper": "^3.1.1",
     "next": "13.0.3",
     "next-sitemap": "^3.1.32",
@@ -34,6 +35,7 @@
     "react-dom": "18.2.0",
     "react-toastify": "^9.1.1",
     "recoil": "^0.7.6",
+    "rehype-highlight": "^6.0.0",
     "rehype-parse": "^8.0.4",
     "rehype-remark": "^9.1.2",
     "rehype-stringify": "^9.0.3",

frontend/pages/search.tsx

@@ -139,7 +139,10 @@ export default function Search() {
       return {
         ...article,
         title: highlightWord(article.title, keywords),
-        content: highlightWord(article.content, keywords),
+        content: highlightWord(
+          article.content.slice(0, 400).replace(/(<([^>]+)>)/gi, ''),
+          keywords
+        ),
       };
     });