boostcampwm-2022 · parkhyeonki · Dec 14, 2022 · Dec 14, 2022 · Dec 14, 2022 · Dec 14, 2022
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/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;

diff --git a/frontend/components/viewer/ArticleContent/index.tsx b/frontend/components/viewer/ArticleContent/index.tsx
@@ -28,6 +28,7 @@ import {
   ArticleTitleBtnBox,
   ArticleContentsWrapper,
   ArticleMoveBtnContainer,
+  ArticleTitleWrapper,
 } from './styled';
 
 interface ArticleProps {
@@ -76,6 +77,11 @@ export default function Article({
   const handleDeleteBtnOnClick = () => {
     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);
       deleteArticle(article.id);
     }
@@ -135,36 +141,35 @@ export default function Article({
     <ArticleContainer>
       <ArticleMain ref={scrollTarget}>
         {!article.deleted_at ? (
-          <>
-            <ArticleContentsWrapper>
+          <ArticleContentsWrapper>
+            <ArticleTitleWrapper>
               <ArticleTitle>{article.title}</ArticleTitle>
-              <Content content={articleData} />
-            </ArticleContentsWrapper>
-
-            <ArticleTitleBtnBox>
-              {article.book_id !== bookId && (
-                <ArticleButton onClick={handleOriginalBtnOnClick}>
-                  <Image src={Original} alt="Original Icon" width={20} height={15} />
-                  원본 글 보기
-                </ArticleButton>
-              )}
-              {article.book_id === bookId && article.book.user.nickname === user.nickname && (
-                <>
-                  <ArticleButton onClick={handleDeleteBtnOnClick}>글 삭제</ArticleButton>
-                  <ArticleButton onClick={handleModifyBtnOnClick}>글 수정</ArticleButton>
-                </>
-              )}
-              {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} />
-                  스크랩
-                </ArticleButton>
-              )}
-            </ArticleTitleBtnBox>
-          </>
+              <ArticleTitleBtnBox>
+                {article.book_id !== bookId && (
+                  <ArticleButton onClick={handleOriginalBtnOnClick}>
+                    <Image src={Original} alt="Original Icon" width={20} height={15} />
+                    원본 글 보기
+                  </ArticleButton>
+                )}
+                {article.book_id === bookId && article.book.user.nickname === user.nickname && (
+                  <>
+                    <ArticleButton onClick={handleDeleteBtnOnClick}>글 삭제</ArticleButton>
+                    <ArticleButton onClick={handleModifyBtnOnClick}>글 수정</ArticleButton>
+                  </>
+                )}
+                {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} />
+                    스크랩
+                  </ArticleButton>
+                )}
+              </ArticleTitleBtnBox>
+            </ArticleTitleWrapper>
+            <Content content={articleData} />
+          </ArticleContentsWrapper>
         ) : (
           <div>삭제된 글입니다.</div>
         )}

diff --git a/frontend/components/viewer/ArticleContent/styled.ts b/frontend/components/viewer/ArticleContent/styled.ts
@@ -52,20 +52,21 @@ export const ArticleMain = styled(Flex)`
   }
 `;
 export const ArticleTitle = styled.h1`
-  width: 100%;
-  border-bottom: 1px solid black;
   padding: 25px 0;
   text-align: left;
   font-size: 24px;
   font-weight: 700;
 `;
 export const ArticleTitleBtnBox = styled(Flex)`
-  flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
-  border-top: 1px solid var(--grey-02-color);
   padding-top: 10px;
   margin-bottom: 30px;
+  @media ${(props) => props.theme.tablet} {
+    margin-top: 0px;
+    padding-top: 0px;
+    margin-bottom: 10px;
+  }
 `;
 export const ArticleContents = styled.div`
   margin-top: 20px;
@@ -75,3 +76,10 @@ export const ArticleContents = styled.div`
 export const ArticleContentsWrapper = styled(FlexColumn)``;
 
 export const ArticleMoveBtnContainer = styled(FlexSpaceBetween)``;
+
+export const ArticleTitleWrapper = styled(FlexSpaceBetween)`
+  border-bottom: 1px solid black;
+  @media ${(props) => props.theme.tablet} {
+    flex-direction: column;
+  }
+`;
diff --git a/frontend/components/viewer/ScrapModal/index.tsx b/frontend/components/viewer/ScrapModal/index.tsx
@@ -15,7 +15,7 @@ import useFetch from '@hooks/useFetch';
 import { IBook, IArticle, IScrap, IBookScraps } from '@interfaces';
 import { toastSuccess } from '@utils/toast';
 
-import { ArticleWrapper, Label, ScrapModalWrapper, WarningLabel } from './styled';
+import { ArticleWrapper, DragArticleText, Label, ScrapModalWrapper, WarningLabel } from './styled';
 
 interface ScrapModalProps {
   bookId: number;
@@ -48,13 +48,13 @@ export default function ScrapModal({ bookId, handleModalClose, article }: ScrapM
 
   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,
     ];
   };
 
@@ -117,10 +117,13 @@ export default function ScrapModal({ bookId, handleModalClose, article }: ScrapM
         <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={handleScrapBtnClick}>
         스크랩하기