Refactor/206 markdown (#212)

* feat(FE): 마크다운 blockquote 수정 * chore(FE): 테스트를 위한 기능 활성화 * feat(FE): ArticleCard에 마크다운 문법 제거, 썸네일 추가 * fix(FE): 연속으로 첨부된 이미지가 보이지 않음 * design(FE): 아이콘 정리(긴급) * chore(FE): 테스트 기능 비활성화
boostcampwm-2022 · Dec 8, 2022 · f64e745 · f64e745
1 parent 11d70e4
commit f64e745
Show file tree

Hide file tree

Showing 26 changed files with 124 additions and 74 deletions.
diff --git a/client/components/MainSection/Articlecard/index.style.ts b/client/components/MainSection/Articlecard/index.style.ts
@@ -71,16 +71,24 @@ export const ArticleContent = styled.div`
 export const Content = styled.div`
   overflow-x: hidden;
   overflow-y: hidden;
-  height: 120px;
+  height: 125px;
+  line-height: 25px;
   flex: 1;
-  display: block;
+  display: -webkit-box;
   word-break: break-all;
   padding-right: 10px;
+  word-break: break-word;
+  text-overflow: ellipsis;
+  line-clamp: 5;
+  -webkit-line-clamp: 5;
+  box-orient: vertical;
+  -webkit-box-orient: vertical;
 `;
 
-export const ArticleImage = styled.div`
+export const ArticleImageContainer = styled.div`
   width: 130px;
   height: 130px;
   background-color: ${COLORS.GRAY4};
   border: 1px solid ${COLORS.GRAY3};
+  position: relative;
 `;
diff --git a/client/components/MainSection/Articlecard/index.tsx b/client/components/MainSection/Articlecard/index.tsx
@@ -5,7 +5,7 @@ import { calcTime } from '../../../utils/calctime';
 import {
   ArticleContent,
   ArticleHeader,
-  ArticleImage,
+  ArticleImageContainer,
   Comments,
   Content,
   HeaderInfo,
@@ -22,10 +22,11 @@ interface Props {
   profileimg: string;
   nickname: string;
   author?: string;
+  thumbnail?: string | null;
 }
 
 export const ArticleCard = React.forwardRef<HTMLInputElement, Props>(
-  ({ id, description, author, nickname, date, comments, profileimg }: Props, ref) => (
+  ({ id, description, author, nickname, date, comments, profileimg, thumbnail }: Props, ref) => (
     <Link href={`/post/${id}`}>
       <Wrapper ref={ref}>
         <ArticleHeader>
@@ -40,7 +41,11 @@ export const ArticleCard = React.forwardRef<HTMLInputElement, Props>(
         </ArticleHeader>
         <ArticleContent>
           <Content>{description || '글 내용이 없어용!'}</Content>
-          <ArticleImage />
+          {thumbnail && (
+            <ArticleImageContainer>
+              <Image src={thumbnail} layout="fill" alt="post thumbnail" />
+            </ArticleImageContainer>
+          )}
         </ArticleContent>
         <hr />
       </Wrapper>
@@ -51,4 +56,5 @@ export const ArticleCard = React.forwardRef<HTMLInputElement, Props>(
 ArticleCard.defaultProps = {
   description: '',
   author: '',
+  thumbnail: null,
 };
diff --git a/client/components/MainSection/index.tsx b/client/components/MainSection/index.tsx
@@ -5,6 +5,7 @@ import { ArticlesSection, FakeButton, NewArticleSection, Placeholder, Wrapper, N
 import { MainTopBar } from '../../styles/common';
 
 import usePaginator, { NEXT } from '../../hooks/usePaginator';
+import { renderMarkdownWithoutStyle } from '../../utils/markdown';
 
 export default function MainSection() {
   const [nextCursor, setNextCursor] = useState(NEXT.START);
@@ -40,17 +41,19 @@ export default function MainSection() {
         </Link>
         <ArticlesSection>
           {pages.map((item: any, index: number) => {
+            const parsed = renderMarkdownWithoutStyle(item.description);
             if (pages.length === index + 1)
               return (
                 <ArticleCard
                   author={item.authorDetail.userid}
                   profileimg={item.authorDetail.profileimg}
                   id={item._id}
-                  description={item.description}
+                  description={parsed.content}
                   date={item.createdAt}
                   comments={item.childPosts}
                   nickname={item.authorDetail.nickname}
                   key={item._id}
+                  thumbnail={parsed.thumbnail}
                   ref={lastFollowElementRef}
                 />
               );
@@ -59,11 +62,12 @@ export default function MainSection() {
                 author={item.authorDetail.userid}
                 profileimg={item.authorDetail.profileimg}
                 id={item._id}
-                description={item.description}
+                description={parsed.content}
                 date={item.createdAt}
                 comments={item.childPosts}
                 nickname={item.authorDetail.nickname}
                 key={item._id}
+                thumbnail={parsed.thumbnail}
               />
             );
           })}

diff --git a/client/components/ReadPost/Comment/index.tsx b/client/components/ReadPost/Comment/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import Link from 'next/link';
 import UserProfile from '../../UserProfile';
-import renderMarkdown from '../../../utils/markdown';
+import { renderMarkdown } from '../../../utils/markdown';
 import { CommentItem, CommentContentBox } from './index.style';
 
 export interface commentItem {

diff --git a/client/components/ReadPost/MainPost/index.tsx b/client/components/ReadPost/MainPost/index.tsx
@@ -6,7 +6,7 @@ import { useRecoilValue } from 'recoil';
 import { httpDelete } from '../../../utils/http';
 import { authedUser } from '../../../atom';
 import type PostProps from '../../../types/Post';
-import renderMarkdown from '../../../utils/markdown';
+import { renderMarkdown } from '../../../utils/markdown';
 import UserProfile from '../../UserProfile';
 import {
   ContentBox,

diff --git a/client/components/ReadPost/ParentPost/index.tsx b/client/components/ReadPost/ParentPost/index.tsx
@@ -4,7 +4,7 @@ import { calcTime } from '../../../utils/calctime';
 import { Author, AuthorDetail, Wrapper, ContentBox, HeaderBox, ParentTree, ParentTreeContainer } from './index.style';
 import ProfileImg from '../../UserProfile/ProfileImg';
 import type { Parent } from '../../../types/Post';
-import renderMarkdown from '../../../utils/markdown';
+import { renderMarkdown } from '../../../utils/markdown';
 
 export default function ParentPost({ post }: { post: Parent }) {
   const contentRef = useRef<HTMLDivElement>(null);

diff --git a/client/components/Search/PostResult/index.tsx b/client/components/Search/PostResult/index.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import COLORS from '../../../styles/color';
 import usePaginator, { NEXT } from '../../../hooks/usePaginator';
 import { ArticleCard } from '../../MainSection/Articlecard';
+import { renderMarkdownWithoutStyle } from '../../../utils/markdown';
 
 export default function PostResult({ keyword }: { keyword: string }) {
   const [nextCursor, setNextCursor] = useState('START');
@@ -26,17 +27,19 @@ export default function PostResult({ keyword }: { keyword: string }) {
   return (
     <ResultContainer>
       {pages.map((item: any, index: number) => {
+        const parsed = renderMarkdownWithoutStyle(item.description);
         if (pages.length === index + 1)
           return (
             <ArticleCard
               author={item.authorDetail.userid}
               profileimg={item.authorDetail.profileimg}
               id={item._id}
-              description={item.description}
+              description={parsed.content}
               date={item.createdAt}
               comments={item.childPosts}
               nickname={item.authorDetail.nickname}
               key={item._id}
+              thumbnail={parsed.thumbnail}
               ref={lastFollowElementRef}
             />
           );
@@ -45,11 +48,12 @@ export default function PostResult({ keyword }: { keyword: string }) {
             author={item.authorDetail.userid}
             profileimg={item.authorDetail.profileimg}
             id={item._id}
-            description={item.description}
+            description={parsed.content}
             date={item.createdAt}
             comments={item.childPosts}
             nickname={item.authorDetail.nickname}
             key={item._id}
+            thumbnail={parsed.thumbnail}
           />
         );
       })}

diff --git a/client/components/Search/index.tsx b/client/components/Search/index.tsx
@@ -43,7 +43,7 @@ export default function SearchSection() {
     <Wrapper>
       <TopBar>
         <TopBarContainer>
-          <Image alt="search button" width={30} height={30} src="/search.svg" />
+          <Image alt="search button" width={30} height={30} src="/ico_search.svg" />
           <SearchInputBar type="text" placeholder="검색어를 입력하세요." onKeyDown={handleEnter} ref={inputRef} />
         </TopBarContainer>
       </TopBar>

diff --git a/client/components/SideBar/Menu/index.style.ts b/client/components/SideBar/Menu/index.style.ts
@@ -13,6 +13,11 @@ export const Wrapper = styled.div`
   color: ${COLORS.BLACK};
   user-select: none;
   background-color: ${COLORS.PRIMARY_LIGHT};
+  
+  &:hover {
+    font-weight: 600;
+  }
+  
   &:hover > span {
     width: 100%;
   }

diff --git a/client/components/SideBar/index.tsx b/client/components/SideBar/index.tsx
@@ -8,9 +8,9 @@ import { Setting, SideMenuBox, Wrapper } from './index.style';
 import SideBarDropdown from './SideBarDropdown';
 
 const menuList = [
-  { routeSrc: '/', imgSrc: '/home.svg', text: '홈', avatar: false },
-  { routeSrc: '/notification', imgSrc: '/announce.svg', text: '알림', avatar: false },
-  { routeSrc: '/search', imgSrc: '/search.svg', text: '검색', avatar: false },
+  { routeSrc: '/', imgSrc: '/ico_home.svg', text: '홈', avatar: false },
+  { routeSrc: '/notification', imgSrc: '/ico_notification.svg', text: '알림', avatar: false },
+  { routeSrc: '/search', imgSrc: '/ico_search.svg', text: '검색', avatar: false },
 ];
 
 type SideBarProps = {
@@ -58,7 +58,7 @@ export default function SideBar({ notiState }: React.PropsWithChildren<SideBarPr
       </SideMenuBox>
       {dropdownState && <SideBarDropdown />}
       <Setting onClick={showSettingdropdown}>
-        <Menu imgSrc="/setting.svg" text="설정" avatar={false} noti={false} />
+        <Menu imgSrc="/ico_setting.svg" text="설정" avatar={false} noti={false} />
       </Setting>
     </Wrapper>
   );

diff --git a/client/components/User/PostList/index.tsx b/client/components/User/PostList/index.tsx
@@ -3,6 +3,7 @@ import { ArticleCard } from '../../MainSection/Articlecard';
 import { PostLabel, SectionDivider } from './index.style';
 import usePaginator, { NEXT } from '../../../hooks/usePaginator';
 import { UserPostProps } from '../../../types/Post';
+import { renderMarkdownWithoutStyle } from '../../../utils/markdown';
 
 export default function PostList({ userData }: { userData: UserPostProps }) {
   const [nextCursor, setNextCursor] = useState('START');
@@ -29,17 +30,19 @@ export default function PostList({ userData }: { userData: UserPostProps }) {
       <PostLabel>게시글</PostLabel>
       <SectionDivider />
       {pages.map((item: any, index: number) => {
+        const parsed = renderMarkdownWithoutStyle(item.description);
         if (pages.length === index + 1)
           return (
             <ArticleCard
               author={item.authorDetail.userid}
               profileimg={item.authorDetail.profileimg}
               id={item._id}
-              description={item.description}
+              description={parsed.content}
               date={item.createdAt}
               comments={item.childPosts}
               nickname={item.authorDetail.nickname}
               key={item._id}
+              thumbnail={parsed.thumbnail}
               ref={lastFollowElementRef}
             />
           );
@@ -48,11 +51,12 @@ export default function PostList({ userData }: { userData: UserPostProps }) {
             author={item.authorDetail.userid}
             profileimg={item.authorDetail.profileimg}
             id={item._id}
-            description={item.description}
+            description={parsed.content}
             date={item.createdAt}
             comments={item.childPosts}
             nickname={item.authorDetail.nickname}
             key={item._id}
+            thumbnail={parsed.thumbnail}
           />
         );
       })}

diff --git a/client/components/Write/Editor/index.tsx b/client/components/Write/Editor/index.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useRecoilValue } from 'recoil';
 import { authedUser } from '../../../atom';
 import { httpPost, httpGet, httpPatch } from '../../../utils/http';
-import renderMarkdown from '../../../utils/markdown';
+import { renderMarkdown } from '../../../utils/markdown';
 import UserDropDown from './UserDropDown';
 import { getLeftWidth } from '../../../styles/theme';
 import UserProfile from '../../UserProfile';
@@ -67,6 +67,12 @@ export default function Editor({ parentPostData, modifyPostData }: Props) {
   const [inputUserId, setInputUserId] = useState<string>('');
   const [selectUser, setSelectUser] = useState<number>(0);
 
+  // 실시간 미리보기를 활성화하려면 이걸 키고 preview element의 렌더링 조건을 tabIndex === 0 으로 바꿔주세요
+  // useEffect(() => {
+  //   if (!previewRef.current) return;
+  //   previewRef.current.innerHTML = renderMarkdown(content);
+  // }, [content]);
+
   const submitHandler = async () => {
     const removeDup = new Set(mentionList);
     const target = contentRef.current;
@@ -251,7 +257,7 @@ export default function Editor({ parentPostData, modifyPostData }: Props) {
         contentRef.current.innerHTML = '<div><br/></div>';
       }
     }
-    setContent(contentRef.current.innerText.replace(/\n\n/g, '\n'));
+    setContent(contentRef.current.innerText);
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
@@ -464,7 +470,7 @@ export default function Editor({ parentPostData, modifyPostData }: Props) {
             <br />
           </div>
         </EditorTextBox>
-        <PreviewTextBox ref={previewRef} style={{ display: `${tabIndex === 1 ? 'block' : 'none'}` }} />
+        <PreviewTextBox ref={previewRef} style={{ display: `${tabIndex === 1 ? 'block' : 'none'}`, width: '50%' }} />
         <input type="file" id="fileUpload" style={{ display: 'none' }} />
         {followList.length !== 0 && (
           <UserDropDown

diff --git a/client/public/announce.svg b/client/public/announce.svg
diff --git a/client/public/home.svg b/client/public/home.svg
diff --git a/client/public/ico_comment.svg b/client/public/ico_comment.svg
diff --git a/client/public/ico_home.svg b/client/public/ico_home.svg
diff --git a/client/public/ico_notification.svg b/client/public/ico_notification.svg
diff --git a/client/public/ico_search.svg b/client/public/ico_search.svg
diff --git a/client/public/ico_setting.svg b/client/public/ico_setting.svg
diff --git a/client/public/moheyum.svg b/client/public/moheyum.svg
diff --git a/client/public/profile_img.svg b/client/public/profile_img.svg
diff --git a/client/public/search.svg b/client/public/search.svg