이미지 클릭 시 리뷰 모달 오픈 및 리뷰모달 글쓰기 모달 전체적인 스타일 변경

client/src/App.scss

@@ -15,6 +15,11 @@
 @import "@/styles/global-style";
 @import "@/styles/theme";
 
+* {
+  padding: 0;
+  margin: 0;
+}
+
 html,
 body {
   height: 100%;

client/src/components/commons/ProgressiveImage/ProgressiveImage.tsx

@@ -9,6 +9,7 @@ interface ProgressiveImageProps {
   width: number | "100%";
   height: number | "100%";
   alt: string;
+  handleClickImage?: () => void;
 }
 
 const ProgressiveImage = ({
@@ -18,6 +19,7 @@ const ProgressiveImage = ({
   width,
   height,
   alt,
+  handleClickImage,
 }: ProgressiveImageProps): JSX.Element => {
   const { observeImage } = useImageIntersect();
 
@@ -26,6 +28,7 @@ const ProgressiveImage = ({
       ref={observeImage}
       className={`progressive-image ${className}`}
       src={placeholder}
+      onClick={handleClickImage}
       data-lazysrc={src}
       width={width}
       height={height}

client/src/components/main/Modal/ModalContainer/ModalContainer.scss

@@ -1,21 +1,15 @@
 @import "@/styles/theme";
+@import "@/styles/responsive";
 @import "@/styles/global-style";
 @import "@/styles/animation";
 
 .modal-container {
-  // root 의 가운데 정렬
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $modal-content-z-index;
+  z-index: $modal-content-z-index !important;
   box-sizing: border-box;
-
   display: flex;
-  width: 100%;
+  width: fit-content;
   max-width: $desktop-main-width;
-  height: 100%;
-
+  height: 80%;
   // 모달 내용들은 공통으로 2rem 패딩 내에 존재
   padding: 2rem;
   margin: 0 auto;

client/src/components/main/Modal/ModalWrapper/CommonModalWrapper.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, MouseEvent } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 
 import ModalContainer from "@/components/main/Modal/ModalContainer/ModalContainer";
 import useCommonModalStore from "@/store/useCommonModalStore";
+import { isCloseModalElement } from "@/utils/dom";
 
 import "./ModalWrapper.scss";
 
@@ -12,16 +14,22 @@ const CommonModalWrapper = (): JSX.Element => {
   ]);
 
   const clickWrapperBackGround = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
+    (e: MouseEvent<HTMLDivElement | SVGSVGElement>) => {
+      if (!isCloseModalElement(e.target as HTMLElement)) return;
       closeModal();
     },
     []
   );
 
   return modalContent !== null ? (
     <>
-      <div className="modal-background" onClick={clickWrapperBackGround} />
-      <ModalContainer content={modalContent} />
+      <div className="modal-background" onClick={clickWrapperBackGround}>
+        <CloseIcon
+          className="modal-close-button"
+          onClick={clickWrapperBackGround}
+        />
+        <ModalContainer content={modalContent} />
+      </div>
     </>
   ) : (
     <></>

client/src/components/main/Modal/ModalWrapper/ModalWrapper.scss

@@ -1,9 +1,26 @@
 @import "@/styles/_global-style.scss";
+@import "@/styles/theme.scss";
+@import "@/styles/responsive";
 
 .modal-background {
   position: absolute;
   top: 0;
   z-index: $modal-background-z-index !important;
+  display: flex;
+  align-items: center;
   width: 100vw;
   height: 100vh;
+  min-height: 100vh;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.modal-close-button {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  z-index: $modal-content-z-index;
+  font-size: 2rem;
+  color: $line-color;
+  cursor: pointer;
+  transform: scale(2);
 }

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);
   }
 }

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;

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>
+    </>
   );
 };
 

client/src/components/main/Modal/WriteModal/SnapShotNav/SnapShotNav.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   flex-grow: 1;
   align-items: center;
-  width: auto !important;
+  width: 35rem !important;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
@@ -14,16 +14,16 @@
   box-shadow: $shadow-box;
 
   &__item {
-    width: 40rem;
-    height: 40rem;
+    width: 30rem;
+    height: 30rem;
     margin: 1rem 0;
 
     &--img {
-      width: 40rem;
-      height: 40rem;
+      width: 100%;
+      height: 100%;
       cursor: pointer;
       border-radius: $radius-medium;
-      object-fit: cover;
+      object-fit: contain;
     }
   }
   @media screen and (max-width: 720px) {

client/src/components/main/Modal/WriteModal/WriteModal.scss

@@ -6,4 +6,7 @@
   gap: 1rem;
   width: 100%;
   height: 100%;
+  @media screen and (max-width: 720px) {
+    flex-direction: column;
+  }
 }

client/src/components/main/PostScroll/Post/PostImageSlider/PostImageSlider.scss

@@ -8,6 +8,7 @@
   &--image {
     width: inherit;
     height: inherit;
+    cursor: pointer;
     object-fit: cover; // 가로-세로 비율 맞춰서 꽉 차게
   }
 }

client/src/components/main/PostScroll/Post/PostImageSlider/PostImageSlider.tsx

@@ -3,11 +3,18 @@ import React, { useContext } from "react";
 import { PostContext } from "@/components/main/PostScroll/Post/Post";
 import ProgressiveImage from "@/components/commons/ProgressiveImage/ProgressiveImage";
 import codePlaceholder from "@/assets/progressive-image.jpg";
+import useCommonModalStore from "@/store/useCommonModalStore";
+import ReviewModal from "@/components/main/Modal/ReviewModal/ReviewModal";
 
 import "./PostImageSlider.scss";
 
 const PostImageSlider = (): JSX.Element => {
-  const { images } = useContext(PostContext);
+  const { images, id: postId, code, language } = useContext(PostContext);
+  const [openModal] = useCommonModalStore((state) => [state.openModal]);
+
+  const handleClickImage = (): void => {
+    openModal(<ReviewModal postId={postId} code={code} language={language} />);
+  };
 
   return (
     <div className="post__image-slider">
@@ -18,6 +25,7 @@ const PostImageSlider = (): JSX.Element => {
         width="100%"
         height="100%"
         alt="이미지 설명"
+        handleClickImage={handleClickImage}
       />
     </div>
   );

client/src/constants/options.ts

@@ -19,13 +19,12 @@ export const LANGUAGES = [
 export const DEFAULT_LANGUAGE = "JavaScript";
 
 export const IMAGE_OPTIONS = {
-  width: 400,
-  height: 400,
+  width: 600,
+  height: 600,
   bgcolor: "#292c33",
   style: {
     display: "flex",
-    justifyContent: "center",
     alignItems: "center",
-    paddingInline: "15px",
+    paddingInline: "16px",
   },
 };

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 };

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,
 }));

client/src/styles/_global-style.scss

@@ -33,14 +33,13 @@ $desktop-main-width: $main-nav-width + $main-post-bar-width + $main-gap +
  */
 
 $default-z-index: 0;
-$modal-background-z-index: 1;
-$modal-content-z-index: 2;
-$modal-upper-z-index: 3;
+$modal-background-z-index: 20000;
+$modal-content-z-index: 20001;
+$modal-upper-z-index: 20002;
 
 /**
  * editor
  */
-
 $editing-form-width: 72rem;
 $device-editor-width: 64rem; // device 최대 너비가 69.5rem - 6:4정도 유지를 위해 40rem 선정
 $line-width: 4rem;

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 {

client/src/utils/dom.ts

@@ -0,0 +1,4 @@
+export const isCloseModalElement = (element: HTMLElement): boolean =>
+  element.matches(".modal-background") ||
+  element.matches(".modal-close-button") ||
+  element.matches("path");