Merge pull request #89 from BCSDLab/feature/#81_수정

Feature/#81 PR 수정

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

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

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

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,24 +55,24 @@ 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()}
             heading={() => wysiwygRef.current?.heading()}
             paragraph={() => wysiwygRef.current?.paragraph()}
             through={() => wysiwygRef.current?.through()}
           /> */}
-        </span>
-      </span>
+        </div>
+      </div>
     </div>
   );
 }

src/components/editor/Wysiwyg/Wysiwyg.scss

@@ -1,4 +1,4 @@
-.wysiwygContainer {
+.wysiwyg-container {
   height: 100%;
   width: 100%;
 

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="내용을 입력해 주세요."