v0.5.1 피드백 반영 작업

frontend/components/common/Content/styled.ts

@@ -17,6 +17,7 @@ export const ContentBody = styled.div`
   > * {
     line-height: 2;
     font-weight: 400;
+    word-break: break-word;
   }
 
   h1,
@@ -56,12 +57,9 @@ export const ContentBody = styled.div`
 
   p {
     img {
-      max-width: 720px;
+      max-width: 480px;
 
       @media ${(props) => props.theme.desktop} {
-        width: 500px;
-      }
-      @media ${(props) => props.theme.tablet} {
         width: 100%;
       }
     }

frontend/components/viewer/TOC/index.tsx

@@ -10,7 +10,6 @@ import useBookmark from '@hooks/useBookmark';
 import { IBookScraps } from '@interfaces';
 import { TextMedium, TextSmall } from '@styles/common';
 import { FlexCenter, FlexSpaceBetween } from '@styles/layout';
-import { text2link } from '@utils/toc';
 
 import {
   TocWrapper,
@@ -32,8 +31,9 @@ import {
 interface TocProps {
   articleId: number;
   articleToc: {
-    title: string;
-    count: number | undefined;
+    heading: string;
+    link: string;
+    padding: number;
   }[];
   book: IBookScraps;
   isOpen: boolean;
@@ -94,11 +94,11 @@ export default function TOC({
                     {isArticleShown &&
                       articleToc.map((article) => (
                         <TocArticleTitle
-                          href={text2link(article.title).toLowerCase()}
-                          key={article.title}
-                          count={article.count}
+                          href={article.link}
+                          key={article.link}
+                          padding={article.padding}
                         >
-                          {article.title}
+                          {article.heading}
                         </TocArticleTitle>
                       ))}
                   </TocCurrentArticle>

frontend/components/viewer/TOC/styled.ts

@@ -105,13 +105,14 @@ export const TocCurrentText = styled(TextSmall)`
   cursor: 'pointer';
   font-weight: 600;
 `;
-export const TocArticleTitle = styled(Link)<{ count: number | undefined }>`
+
+export const TocArticleTitle = styled(Link)<{ padding: number }>`
   font-size: 14px;
   line-height: 20px;
   text-decoration: none;
   display: block;
   margin-bottom: 5px;
-  padding-left: ${(props) => `${props.count}px`};
+  padding-left: ${(props) => `${props.padding}px`};
 
   &:hover {
     color: var(--primary-color);

frontend/utils/highlight-keyword.tsx

@@ -4,7 +4,7 @@ const getFirstKeyword = (text: string, keywords: string[]) => {
   keywords.forEach((keyword) => {
     const index = text.toLowerCase().indexOf(keyword.toLowerCase());
 
-    if (index !== -1) keywordMap.set(index, keyword);
+    if (index !== -1) keywordMap.set(index, text.slice(index, index + keyword.length));
   });
 
   if (keywordMap.size === 0) return { keyword: '', index: -1, validKeywords: [] };
@@ -24,27 +24,21 @@ export const getTextAfterLastNewLine = (text: string, keywords: string[]) => {
 
   const newLineIndex = text.slice(0, index).lastIndexOf('\n');
 
-  return newLineIndex === -1 ? text : text.slice(newLineIndex);
+  return newLineIndex === -1 ? text.slice(0, 200) : text.slice(newLineIndex, newLineIndex + 200);
 };
 
-export const highlightKeyword = (text: string, keywords: string[], length = 0): React.ReactNode => {
-  if (length > 200) return '';
-
+export const highlightKeyword = (text: string, keywords: string[]): React.ReactNode => {
   const { keyword, index, validKeywords } = getFirstKeyword(text, keywords);
 
   if (index === -1) return text;
 
   const endIndex = index + keyword.length;
 
-  const affixText = text.slice(0, index);
-
-  const accumulatedLength = length + affixText.length + keyword.length;
-
   return (
     <>
-      {affixText}
+      {text.slice(0, index)}
       <b>{keyword}</b>
-      {highlightKeyword(text.slice(endIndex), validKeywords, accumulatedLength)}
+      {highlightKeyword(text.slice(endIndex), validKeywords)}
     </>
   );
 };

frontend/utils/toc.ts

@@ -1,27 +1,32 @@
-export const parseHeadings = (content: string) => {
-  // 게시물 본문을 줄바꿈 기준으로 나누고, 제목 요소인 것만 저장
-  const headings = content.split('\n').filter((line) => line.includes('# '));
-
-  // 예외처리 - 제목은 문자열 시작부터 #을 써야함
-  const parsedHeadings = headings
-    .filter((heading) => heading.startsWith('#'))
-    .map((heading) => {
-      // #의 갯수에 따라 제목의 크기가 달라지므로 갯수를 센다.
-      let count = heading.match(/#/g)?.length;
-
-      // 갯수에 따라 목차에 그릴때 들여쓰기 하기위해 *10을 함.
-      if (count) count *= 16;
+export const text2link = (text: string) => {
+  return `#${text
+    .replace(/ /g, '-')
+    .replace(/[^\uAC00-\uD7A30-9a-zA-Z_-]/g, '')
+    .toLowerCase()}`;
+};
 
-      // 제목의 내용물만 꺼내기 위해 '# '을 기준으로 나누고, 백틱과 공백을 없애주고 count와 묶어서 리턴
+export const parseHeadings = (content: string) => {
+  const headings = content
+    .split('\n')
+    .filter((line) => /^\s*#{1,3}/m.test(line))
+    .map((line) => {
       return {
-        title: heading.split('# ')[1].trim(),
-        count,
+        text: line.trim().split('# ')[1],
+        length: line.match(/#/g)?.length || 0,
       };
     });
 
-  return parsedHeadings;
-};
+  const parsedHeadings = headings.map(({ text, length }, index) => {
+    const currHeadingIndex = headings
+      .slice(0, index)
+      .reduce((count, { text: currText }) => (currText === text ? count + 1 : count), 0);
 
-export const text2link = (text: string) => {
-  return `#${text.replace(/ /g, '-').replace(/[^\uAC00-\uD7A30-9a-zA-Z_-]/g, '')}`;
+    return {
+      heading: text,
+      link: `${text2link(text)}${currHeadingIndex ? `-${currHeadingIndex}` : ``}`,
+      padding: length * 16,
+    };
+  });
+
+  return parsedHeadings;
 };