design(FE): 에디터 모달 쪽 디자인 변경 (#223)

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/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/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/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/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/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");