From 3e58329f6e6871b0930fbf77bdbf3dd61c652936 Mon Sep 17 00:00:00 2001
From: ChoiWonBeen <zad1264@naver.com>
Date: Sat, 22 Jul 2023 06:36:43 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=ED=81=B4=EB=9E=98=EC=8A=A4=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=ED=86=B5=EC=9D=BC,?=
 =?UTF-8?q?=20=EB=B6=80=EC=A0=81=EC=A0=88=ED=95=9C=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/TextEditor/AddImage/index.tsx       |  7 ++-----
 src/components/editor/TextEditor/index.tsx     | 18 +++++++++---------
 src/components/editor/Wysiwyg/Wysiwyg.scss     |  2 +-
 src/components/editor/Wysiwyg/index.tsx        |  2 +-
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/editor/TextEditor/AddImage/index.tsx b/src/components/editor/TextEditor/AddImage/index.tsx
index b14c1a5b..4f1fa845 100644
--- a/src/components/editor/TextEditor/AddImage/index.tsx
+++ b/src/components/editor/TextEditor/AddImage/index.tsx
@@ -34,15 +34,12 @@ function AddImage() {
         <Wysiwyg ref={wysiwygRef} />
       </div>
       <div className={styles['button-container']}>
-        <label htmlFor="image">
-          <div className={styles['addImage-button']}>
-            <Picture />
-          </div>
+        <label htmlFor="image" className={styles['editor__add-image']}>
+          <Picture />
           <input
             type="file"
             onChange={addImage}
             id="image"
-            className={styles.input}
             multiple
             accept="image/jpeg,image/gif,image/png"
           />
diff --git a/src/components/editor/TextEditor/index.tsx b/src/components/editor/TextEditor/index.tsx
index c5277e0d..b6eac97f 100644
--- a/src/components/editor/TextEditor/index.tsx
+++ b/src/components/editor/TextEditor/index.tsx
@@ -39,12 +39,12 @@ export default function TextEditor({ shop, getShopname }: Props) {
           저장
         </button>
       </header>
-      <title className={styles.box}>
+      <title className={styles.heading}>
         {shop == null ? (
           <div>
             <button
               type="button"
-              className={styles['box__button--add']}
+              className={styles['heading__button--add']}
             // 추후 검색 링크로 이동하는 이벤트로 변경
             // 해당 검색 링크에서 특정 상점 선택 시 getShopname함수 호출
             // 값이 null에서 string으로 변하면서 제목과 별점 생성
@@ -55,15 +55,15 @@ export default function TextEditor({ shop, getShopname }: Props) {
           </div>
         )
           : (
-            <div className={styles.box__box}>
-              <div className={styles.box__shopname}>{shop}</div>
-              <div className={styles['box__sub-title']}>음식에 대한 별점을 매겨주세요.</div>
+            <div className={styles.heading__contents}>
+              <div className={styles.heading__shopname}>{shop}</div>
+              <div className={styles['heading__sub-title']}>음식에 대한 별점을 매겨주세요.</div>
               <StarRating onClick={active} />
             </div>
           )}
       </title>
-      <span className={styles.item}>
-        <span className={styles.item__tools}>
+      <div className={styles.item}>
+        <div className={styles.item__tools}>
           <AddImage />
           {/* <SlideToolBox
             bold={() => wysiwygRef.current?.bold()}
@@ -71,8 +71,8 @@ export default function TextEditor({ shop, getShopname }: Props) {
             paragraph={() => wysiwygRef.current?.paragraph()}
             through={() => wysiwygRef.current?.through()}
           /> */}
-        </span>
-      </span>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/editor/Wysiwyg/Wysiwyg.scss b/src/components/editor/Wysiwyg/Wysiwyg.scss
index fc7f8884..e2b59dcc 100644
--- a/src/components/editor/Wysiwyg/Wysiwyg.scss
+++ b/src/components/editor/Wysiwyg/Wysiwyg.scss
@@ -1,4 +1,4 @@
-.wysiwygContainer {
+.wysiwyg-container {
   height: 100%;
   width: 100%;
 
diff --git a/src/components/editor/Wysiwyg/index.tsx b/src/components/editor/Wysiwyg/index.tsx
index fd71e441..1c8ad6ef 100644
--- a/src/components/editor/Wysiwyg/index.tsx
+++ b/src/components/editor/Wysiwyg/index.tsx
@@ -38,7 +38,7 @@ const Wysiwyg = forwardRef((_props, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="wysiwygContainer" ref={containerRef}>
+    <div className="wysiwyg-container" ref={containerRef}>
       <Editor
         initialValue=" "
         placeholder="내용을 입력해 주세요."

From bcdd6b38eeb1576b0b5df7b78ccb017739539299 Mon Sep 17 00:00:00 2001
From: ChoiWonBeen <zad1264@naver.com>
Date: Sat, 22 Jul 2023 06:37:16 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD=EC=97=90=EC=84=9C=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=B4=20?=
 =?UTF-8?q?=EC=83=9D=EA=B8=B0=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/TextEditor/TextEditor.module.scss  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/TextEditor/TextEditor.module.scss b/src/components/editor/TextEditor/TextEditor.module.scss
index e490ad16..d597522c 100644
--- a/src/components/editor/TextEditor/TextEditor.module.scss
+++ b/src/components/editor/TextEditor/TextEditor.module.scss
@@ -1,3 +1,5 @@
+@use "src/utils/styles/mediaQuery" as media;
+
 @keyframes show-out {
   from {
     opacity: 0;
@@ -10,19 +12,19 @@
 }
 
 .template {
-  display: grid;
-  grid-template-rows: 1fr 1fr 4fr;
-  height: 100vh;
+  min-height: 100vh;
+  padding-top: 70px;
+  box-sizing: border-box;
 
-  &--active {
-    grid-template-rows: 1fr 1fr 4fr;
+  @include media.media-breakpoint-down(mobile) {
+    padding-top: 40px;
   }
 }
 
 .header {
   display: flex;
   flex-direction: row;
-  margin: 70px 24px 29px 30px;
+  margin: 0 24px 29px 30px;
   justify-content: space-between;
   align-items: center;
 
@@ -64,10 +66,9 @@
   }
 }
 
-.box {
+.heading {
   display: flex;
   margin: 24px 24px 0;
-  height: calc(100% - 365px);
   flex-direction: column;
 
   &__button {
@@ -89,7 +90,7 @@
     }
   }
 
-  &__box {
+  &__contents {
     border-bottom: 0.5px solid #c4c4c4;
   }
 
@@ -129,7 +130,6 @@
   z-index: 1;
   width: 100%;
   background-color: transparent;
-  height: 574px;
 
   button {
     border: none;
@@ -139,6 +139,7 @@
   }
 
   &__tools {
+    width: 100%;
     display: flex;
     flex-direction: column;
   }

From 4331b69de53e3e112353a07ab3ae08357ddb9868 Mon Sep 17 00:00:00 2001
From: ChoiWonBeen <zad1264@naver.com>
Date: Sat, 22 Jul 2023 06:37:58 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=ED=95=98=EB=8B=A8=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TextEditor/AddImage/AddImage.module.scss  | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/editor/TextEditor/AddImage/AddImage.module.scss b/src/components/editor/TextEditor/AddImage/AddImage.module.scss
index 8a058bc3..d0384674 100644
--- a/src/components/editor/TextEditor/AddImage/AddImage.module.scss
+++ b/src/components/editor/TextEditor/AddImage/AddImage.module.scss
@@ -2,7 +2,7 @@
 
 .container {
   display: flex;
-  width: 320px;
+  width: 100%;
   white-space: nowrap;
   overflow-x: scroll;
   margin-left: 25px;
@@ -43,51 +43,45 @@
 .editor {
   line-height: 15px;
   height: 650px;
-  width: 1950px;
+  width: 100%;
   font-size: 16px;
   color: #222222;
   z-index: 1;
 
   @include media.media-breakpoint-down(mobile) {
-    width: 355px;
     height: 340px;
   }
 
   &--withImage {
     line-height: 15px;
     height: 600px;
-    width: 1950px;
+    width: 100%;
     font-size: 16px;
     color: #222222;
     z-index: 1;
 
     @include media.media-breakpoint-down(mobile) {
-      width: 355px;
       height: 260px;
     }
   }
-}
-
-.button-container {
-  display: flex;
-  flex-direction: row-reverse;
-}
 
-.addImage-button {
-  display: flex;
-  justify-content: center;
-  z-index: 2;
-  background-color: white;
-  width: 48px;
-  height: 48px;
-  align-items: center;
-  border-radius: 50px;
-  box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
-  position: relative;
-  right: 35px;
-  bottom: 55px;
-}
+  &__add-image {
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    background-color: white;
+    width: 48px;
+    height: 48px;
+    align-items: center;
+    border-radius: 50px;
+    box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
+    position: fixed;
+    right: 35px;
+    bottom: 55px;
+    cursor: pointer;
 
-.input {
-  display: none;
+    input {
+      display: none;
+    }
+  }
 }