0.5.1 배포 (#320)

boostcampwm-2022 · Dec 14, 2022 · eb65182 · eb65182
2 parents 1319489 + 3b794e9
commit eb65182
Show file tree

Hide file tree

Showing 21 changed files with 184 additions and 138 deletions.
diff --git a/frontend/components/common/Content/styled.ts b/frontend/components/common/Content/styled.ts
@@ -58,7 +58,10 @@ export const ContentBody = styled.div`
     img {
       max-width: 720px;
 
-      @media ${(props) => props.theme.mobile} {
+      @media ${(props) => props.theme.desktop} {
+        width: 500px;
+      }
+      @media ${(props) => props.theme.tablet} {
         width: 100%;
       }
     }

diff --git a/frontend/components/common/DragDrop/ListItem/index.tsx b/frontend/components/common/DragDrop/ListItem/index.tsx
@@ -101,7 +101,12 @@ export const ListItem = memo(function Scrap({
   };
 
   return (
-    <Article ref={(node) => drag(drop(node))} isShown={isContentsShown ? true : isShown}>
+    <Article
+      ref={(node) => drag(drop(node))}
+      isShown={isContentsShown ? true : isShown}
+      isEdit={isDeleteBtnShown}
+      isActive={scrapId === 0}
+    >
       <TextWapper>
         <Text>{text}</Text>
         {isOriginal && isDeleteBtnShown && <OriginalBadge>원본</OriginalBadge>}

diff --git a/frontend/components/common/DragDrop/ListItem/styled.ts b/frontend/components/common/DragDrop/ListItem/styled.ts
@@ -6,7 +6,7 @@ import { TextXSmall } from '@styles/common';
 import { Flex } from '@styles/layout';
 
 export const Text = styled.span``;
-export const Article = styled.div<{ isShown: true | false }>`
+export const Article = styled.div<{ isShown: boolean; isEdit: boolean; isActive: boolean }>`
   font-size: 14px;
   line-height: 20px;
   text-decoration: none;
@@ -15,8 +15,9 @@ export const Article = styled.div<{ isShown: true | false }>`
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--grey-02-color);
-  padding: 5px;
+  padding: ${(props) => (props.isEdit ? '5px' : '10px')};
   cursor: pointer;
+  background-color: ${(props) => (props.isActive ? 'var(--light-orange-color)' : 'none')};
 `;
 
 export const MinusButton = styled.div`

diff --git a/frontend/components/edit/ModifyModal/index.tsx b/frontend/components/edit/ModifyModal/index.tsx
@@ -14,7 +14,7 @@ import useFetch from '@hooks/useFetch';
 import { IArticle, IBook, IBookScraps, IScrap } from '@interfaces';
 import { toastSuccess } from '@utils/toast';
 
-import { ArticleWrapper, Label, ModifyModalWrapper, WarningLabel } from './styled';
+import { ArticleWrapper, DragArticleText, Label, ModifyModalWrapper, WarningLabel } from './styled';
 
 interface ModifyModalProps {
   books: IBookScraps[];
@@ -52,11 +52,11 @@ export default function ModifyModal({ books, originalArticle }: ModifyModalProps
     const itemList = [...items];
 
     if (selectedBookIndex !== originalBookId)
-      itemList.push({
+      itemList.unshift({
         id: 0,
         order: items.length + 1,
         is_original: false,
-        article: { id: 0, title: article.title },
+        article: { id: article.id, title: article.title },
       });
     return itemList;
   };
@@ -116,10 +116,13 @@ export default function ModifyModal({ books, originalArticle }: ModifyModalProps
         <WarningLabel>선택하신 책에 본 글이 스크랩되어 있습니다.</WarningLabel>
       )}
       {filteredScraps.length !== 0 && (
-        <ArticleWrapper>
-          <Label>순서 선택</Label>
-          <DragArticle isContentsShown isDeleteBtnShown={false} />
-        </ArticleWrapper>
+        <>
+          <Label>순서 수정</Label>
+          <ArticleWrapper>
+            <DragArticle isContentsShown isDeleteBtnShown={false} />
+          </ArticleWrapper>
+          <DragArticleText>드래그앤드롭으로 글의 순서를 변경할 수 있습니다.</DragArticleText>
+        </>
       )}
       <ModalButton theme="primary" onClick={handleModifyBtnClick}>
         수정하기

diff --git a/frontend/components/edit/ModifyModal/styled.ts b/frontend/components/edit/ModifyModal/styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { TextLarge, TextMedium } from '@styles/common';
+import { TextLarge, TextMedium, TextXSmall } from '@styles/common';
 
 export const ModifyModalWrapper = styled.div`
   margin-top: 32px;
@@ -14,9 +14,15 @@ export const Label = styled(TextLarge)``;
 export const ArticleWrapper = styled.div`
   width: 100%;
   height: 300px;
-  overflow: auto;
+  overflow: scroll;
+  border-top: 1px solid var(--grey-02-color);
 `;
 
 export const WarningLabel = styled(TextMedium)`
   color: var(--red-color);
 `;
+
+export const DragArticleText = styled(TextXSmall)`
+  padding: 5px;
+  text-align: center;
+`;
diff --git a/frontend/components/edit/PublishModal/index.tsx b/frontend/components/edit/PublishModal/index.tsx
@@ -14,7 +14,7 @@ import useFetch from '@hooks/useFetch';
 import { IBook, IBookScraps, IScrap } from '@interfaces';
 import { toastSuccess } from '@utils/toast';
 
-import { ArticleWrapper, Label, PublishModalWrapper } from './styled';
+import { ArticleWrapper, DragArticleText, Label, PublishModalWrapper } from './styled';
 
 interface PublishModalProps {
   books: IBookScraps[];
@@ -42,13 +42,13 @@ export default function PublishModal({ books }: PublishModalProps) {
 
   const createScrapDropdownItems = (items: IScrap[]) => {
     return [
-      ...items,
       {
         id: 0,
-        order: items.length + 1,
+        order: 0,
         is_original: true,
         article: { id: article.id, title: article.title },
       },
+      ...items,
     ];
   };
 
@@ -92,10 +92,13 @@ export default function PublishModal({ books }: PublishModalProps) {
       />
 
       {filteredScraps.length !== 0 && (
-        <ArticleWrapper>
-          <Label>순서 선택</Label>
-          <DragArticle isContentsShown isDeleteBtnShown={false} />
-        </ArticleWrapper>
+        <>
+          <Label>순서 수정</Label>
+          <ArticleWrapper>
+            <DragArticle isContentsShown isDeleteBtnShown={false} />
+          </ArticleWrapper>
+          <DragArticleText>드래그앤드롭으로 글의 순서를 변경할 수 있습니다.</DragArticleText>
+        </>
       )}
       <ModalButton theme="primary" onClick={handlePublishBtnClick}>
         발행하기

diff --git a/frontend/components/edit/PublishModal/styled.ts b/frontend/components/edit/PublishModal/styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { TextLarge } from '@styles/common';
+import { TextLarge, TextXSmall } from '@styles/common';
 
 export const PublishModalWrapper = styled.div`
   margin-top: 32px;
@@ -14,5 +14,11 @@ export const Label = styled(TextLarge)``;
 export const ArticleWrapper = styled.div`
   width: 100%;
   height: 300px;
-  overflow: auto;
+  overflow: scroll;
+  border-top: 1px solid var(--grey-02-color);
+`;
+
+export const DragArticleText = styled(TextXSmall)`
+  padding: 5px;
+  text-align: center;
 `;
diff --git a/frontend/components/search/ArticleItem/index.tsx b/frontend/components/search/ArticleItem/index.tsx
@@ -44,9 +44,7 @@ export default function ArticleItem({
             <TextXSmall>Written By</TextXSmall>
             <TextSmall>{nickname}</TextSmall>
           </ProfileDescription>
-          <ProfileImage>
-            <Image src={profileImage} alt="profile" width={72} height={72} />
-          </ProfileImage>
+          <ProfileImage src={profileImage} alt="profile" width={72} height={72} />
         </UserProfile>
       </Link>
     </ItemWrapper>

diff --git a/frontend/components/search/ArticleItem/styled.ts b/frontend/components/search/ArticleItem/styled.ts
@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 import styled from 'styled-components';
 
 import { TextMedium, TextSmall } from '@styles/common';
@@ -54,8 +56,8 @@ export const ProfileDescription = styled.div`
   }
 `;
 
-export const ProfileImage = styled.div`
+export const ProfileImage = styled(Image)`
+  border-radius: 100%;
+  object-fit: cover;
   border: 1px solid var(--grey-01-color);
-  border-radius: 36px;
-  overflow: hidden;
 `;
diff --git a/frontend/components/search/ArticleList/index.tsx b/frontend/components/search/ArticleList/index.tsx
@@ -1,5 +1,6 @@
 import ArticleItem from '@components/search/ArticleItem';
 import { IArticleBook } from '@interfaces';
+import { getTextAfterLastNewLine, highlightKeyword } from '@utils/highlight-keyword';
 import { markdown2text } from '@utils/parser';
 
 interface ArticleListProps {
@@ -8,44 +9,16 @@ interface ArticleListProps {
 }
 
 export default function ArticleList({ articles, keywords }: ArticleListProps) {
-  const highlightWord = (text: string, words: string[], isFirst = false): React.ReactNode => {
-    let wordIndexList = words.map((word) => text.toLowerCase().indexOf(word.toLowerCase()));
-
-    const filteredWords = words.filter((_, index) => wordIndexList[index] !== -1);
-    wordIndexList = wordIndexList.filter((wordIndex) => wordIndex !== -1);
-
-    if (wordIndexList.length === 0) return text;
-
-    const startIndex = Math.min(...wordIndexList);
-
-    const targetWord = filteredWords[wordIndexList.indexOf(startIndex)];
-
-    const endIndex = startIndex + targetWord.length;
-
-    let paddingIndex = 0;
-
-    if (isFirst) {
-      const regex = /\n/g;
-
-      while (regex.test(text.slice(0, startIndex))) paddingIndex = regex.lastIndex;
-    }
-
-    return (
-      <>
-        {text.slice(paddingIndex, startIndex)}
-        <b>{text.slice(startIndex, endIndex)}</b>
-        {highlightWord(text.slice(endIndex), words)}
-      </>
-    );
-  };
-
   return (
     <>
       {articles.map((article) => (
         <ArticleItem
           key={article.id}
-          title={highlightWord(article.title, keywords)}
-          content={highlightWord(markdown2text(article.content), keywords, true)}
+          title={highlightKeyword(article.title, keywords)}
+          content={highlightKeyword(
+            getTextAfterLastNewLine(markdown2text(article.content), keywords),
+            keywords
+          )}
           nickname={article.book.user.nickname}
           profileImage={article.book.user.profile_image}
           articleUrl={`/viewer/${article.book.id}/${article.id}`}

diff --git a/frontend/components/search/BookList/index.tsx b/frontend/components/search/BookList/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import Book from '@components/common/Book';
 import { IBookScraps } from '@interfaces';
+import { highlightKeyword } from '@utils/highlight-keyword';
 
 import { BookContainer, BookListWrapper } from './styled';
 
@@ -17,43 +18,12 @@ interface HighlightedBooks extends Omit<IBookScraps, 'title'> {
 export default function BookList({ books, keywords }: BookListProps) {
   const [highlightedBooks, setHighlightedBooks] = useState<HighlightedBooks[]>([]);
 
-  const highlightWord = (text: string, words: string[], isFirst = false): React.ReactNode => {
-    let wordIndexList = words.map((word) => text.toLowerCase().indexOf(word.toLowerCase()));
-
-    const filteredWords = words.filter((_, index) => wordIndexList[index] !== -1);
-    wordIndexList = wordIndexList.filter((wordIndex) => wordIndex !== -1);
-
-    if (wordIndexList.length === 0) return text;
-
-    const startIndex = Math.min(...wordIndexList);
-
-    const targetWord = filteredWords[wordIndexList.indexOf(startIndex)];
-
-    const endIndex = startIndex + targetWord.length;
-
-    let paddingIndex = 0;
-
-    if (isFirst) {
-      const regex = /(<([^>]+)>)/g;
-
-      while (regex.test(text.slice(0, startIndex))) paddingIndex = regex.lastIndex;
-    }
-
-    return (
-      <>
-        {text.slice(paddingIndex, startIndex)}
-        <b>{text.slice(startIndex, endIndex)}</b>
-        {highlightWord(text.slice(endIndex).replace(/(<([^>]+)>)/gi, ''), words)}
-      </>
-    );
-  };
-
   useEffect(() => {
     setHighlightedBooks(
       books.map((book) => {
         return {
           ...book,
-          title: highlightWord(book.title, keywords),
+          title: highlightKeyword(book.title, keywords),
         };
       })
     );

diff --git a/frontend/components/study/EditUserProfile/styled.ts b/frontend/components/study/EditUserProfile/styled.ts
@@ -23,6 +23,7 @@ export const UserThumbnail = styled(Image)`
   width: 200px;
   height: 200px;
   border-radius: 100%;
+  object-fit: cover;
   border: 1px solid var(--grey-01-color);
 `;
 

diff --git a/frontend/components/study/UserProfile/styled.ts b/frontend/components/study/UserProfile/styled.ts
@@ -21,6 +21,7 @@ export const UserThumbnail = styled(Image)`
   height: 200px;
   border-radius: 100%;
   border: 1px solid var(--grey-01-color);
+  object-fit: cover;
 `;
 
 export const UserDetailGroup = styled.div`

diff --git a/frontend/components/viewer/ArticleContent/Button/styled.ts b/frontend/components/viewer/ArticleContent/Button/styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { TextSmall } from '@styles/common';
 
 export const ViewerButton = styled.button`
-  max-width: 120px;
+  max-width: 150px;
   border-radius: 10px;
   border: 1px solid var(--grey-02-color);
   background-color: white;