design(FE): 리뷰 모달 디자인 변경 (#223)

boostcampwm-2022 · Dec 7, 2022 · 3160c30 · 3160c30
1 parent ec37e48
commit 3160c30
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git a/client/src/components/main/Modal/ReviewModal/ReviewModal.scss b/client/src/components/main/Modal/ReviewModal/ReviewModal.scss
@@ -3,12 +3,11 @@
 @import "@/styles/mixin";
 
 $code-line-width: 4rem;
-$review-code-width: calc($device-editor-width - $code-line-width);
+$review-code-width: calc($device-editor-width - $code-line-width - 8rem);
 $github-dark-font-color: #c9d1d9;
 
 .review-modal {
   display: flex;
-
   width: 100%;
   height: 100%;
 
@@ -18,6 +17,7 @@ $github-dark-font-color: #c9d1d9;
     width: $review-code-width;
     min-width: $review-code-width;
     height: 100%;
+
     background-color: $codeblock-color;
     border-radius: $radius-small;
 
@@ -30,13 +30,24 @@ $github-dark-font-color: #c9d1d9;
       margin: 0;
       overflow-x: hidden;
       overflow-y: auto;
-      font-size: $font-medium;
-      white-space: pre-wrap;
+
+      font-size: $font-large;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
 
     &--view {
       left: $code-line-width;
+      width: calc(100% - $code-line-width);
+      overflow-x: scroll;
       color: $github-dark-font-color;
+      letter-spacing: 1px;
+
+      & > code {
+        font-family: D2Coding, "D2 coding", monospace;
+      }
     }
 
     &--lines {
@@ -48,9 +59,9 @@ $github-dark-font-color: #c9d1d9;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    max-width: $device-review-max-width;
+    width: 40rem;
+    max-width: 50rem;
     height: 100%;
-    margin-left: calc($device-review-modal-gap / 2);
+    margin-left: calc($device-review-modal-gap);
   }
 }
diff --git a/client/src/components/main/Modal/ReviewModal/ReviewScroll/Review/Review.scss b/client/src/components/main/Modal/ReviewModal/ReviewScroll/Review/Review.scss
@@ -12,7 +12,7 @@ $review-form-header-height: 4rem;
 
   box-sizing: border-box;
   display: flex;
-  gap: 1.6rem;
+  gap: 1rem;
 
   width: 100%;
   height: auto;

diff --git a/client/src/components/main/Modal/ReviewModal/ReviewScroll/ReviewScroll.tsx b/client/src/components/main/Modal/ReviewModal/ReviewScroll/ReviewScroll.tsx
@@ -24,7 +24,7 @@ const ReviewScroll = ({ postId }: ReviewScrollProps): JSX.Element => {
   );
 
   return (
-    <div className="review-modal__review-container">
+    <>
       <ul className="review-list">
         {reviewInfos.map((reviewInfo: ReviewInfo) => (
           <Review key={reviewInfo.id} reviewInfo={reviewInfo} />
@@ -36,7 +36,7 @@ const ReviewScroll = ({ postId }: ReviewScrollProps): JSX.Element => {
         />
       </ul>
       <ReviewForm postId={postId} refetch={refetch} />
-    </div>
+    </>
   );
 };
 

diff --git a/client/src/hooks/useViewerScroll.ts b/client/src/hooks/useViewerScroll.ts
@@ -12,6 +12,7 @@ const useViewerScroll = (): UseEditorScroll => {
   const handleScrollChange = useCallback((): void => {
     if (lineRef.current !== null && preRef.current !== null) {
       lineRef.current.scrollTop = preRef.current.scrollTop;
+      preRef.current.scrollTop = lineRef.current.scrollTop;
     }
   }, [preRef, lineRef]);
   return { preRef, lineRef, handleScrollChange };

diff --git a/client/src/mocks/datasource/mockDataSource.ts b/client/src/mocks/datasource/mockDataSource.ts
@@ -38,7 +38,7 @@ export const posts: PostInfo[] = Array.from(Array(1024).keys()).map((id) => ({
   likeCount: id % 10,
   lineCount: 1,
   updatedAt: "2022-11-16 12:26:56.124939",
-  code: `sourcecode: ~~~~~~~~~~~~~~~~~~`,
+  code: `sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~sourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\nsourcecode: ~~~~~~~~~~~~~~~~~~\n`,
   language: `javascript`,
   isLiked: false,
 }));

diff --git a/client/src/styles/_mixin.scss b/client/src/styles/_mixin.scss
@@ -29,6 +29,9 @@
   white-space: pre-wrap;
   background-color: $codeblock-color;
   border-right: 1px solid $line-color;
+  &::-webkit-scrollbar{
+    display: none;
+  }
 }
 
 @mixin flex-middle-start {