Feature/#71 글쓰기 페이지

src/App.tsx

@@ -25,7 +25,6 @@ export default function App(): JSX.Element {
     <Suspense fallback={<div />}>
       <Routes>
         <Route path="/" element={<DefaultLayout />}>
-          <Route path="/post" element={<Post />} />
           <Route path="/search" element={<Search />} />
           <Route path="/search/:keyword" element={<SearchDetails />} />
           <Route path="/inquiry" element={<Inquiry />} />
@@ -36,6 +35,7 @@ export default function App(): JSX.Element {
           <Route path="/setting" element={<Setting />} />
           <Route path="/setting/id-change" element={<IdChange />} />
           <Route path="/withdrawal" element={<Withdrawal />} />
+          <Route path="/post" element={<Post />} />
         </Route>
         <Route element={<AuthRoute needAuth={false} redirectRoute="/" />}>
           <Route path="/login" element={<Login />} />

src/components/MyInquiry/MyInquiry.module.scss

@@ -1,6 +1,6 @@
 $highlight: #ff7f23;
 
-.my-inquiry {
+.title {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -18,6 +18,6 @@ $highlight: #ff7f23;
   text-decoration: none;
 }
 
-.move {
+.moveIcon {
   margin-left: 9px;
 }

src/components/MyInquiry/index.tsx

@@ -1,15 +1,15 @@
 import { Link } from 'react-router-dom';
-import { ReactComponent as Move } from 'assets/svg/inquiry/myinquiry.svg';
+import { ReactComponent as MoveIcon } from 'assets/svg/inquiry/myinquiry.svg';
 import styles from './MyInquiry.module.scss';
 
 export default function MyInquiry(): JSX.Element {
   return (
     <div>
       <Link to="/myinquiry" className={styles.link}>
-        <div className={styles['my-inquiry']}>
+        <div className={styles.title}>
           나의 문의 바로가기
-          <div className={styles.move}>
-            <Move />
+          <div className={styles.moveIcon}>
+            <MoveIcon />
           </div>
         </div>
       </Link>

src/components/StarRating/StarRating.module.scss

@@ -3,7 +3,7 @@
   align-items: center;
   width: 160px;
   height: 32px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .wrapper {
@@ -14,6 +14,8 @@
   justify-content: center;
   background: none;
   border: none;
+  padding-top: 35px;
+  padding-bottom: 35px;
 
   &__star {
     transition: all 0.2s ease-out;

src/components/editor/TextEditor/AddImage/AddImage.module.scss

@@ -0,0 +1,77 @@
+.container {
+  display: flex;
+  width: 320px;
+  margin-left: 20px;
+  white-space: nowrap;
+  overflow-x: scroll;
+
+  &__item {
+    display: flex;
+    margin: 6px 2px 10px;
+    position: relative;
+  }
+
+  &__button {
+    width: 18px;
+    height: 18px;
+    margin-left: 62px;
+    border: solid 5px;
+    border-color: #ff7f23;
+    border-radius: 50%;
+    background-color: transparent;
+    z-index: 2;
+    position: absolute;
+  }
+
+  &__image {
+    display: flex;
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+    scrollbar-width: none;
+  }
+}
+
+.editor {
+  line-height: 15px;
+  height: 450px;
+  width: 357px;
+  font-size: 16px;
+  color: #222222;
+  z-index: 1;
+
+  &--withImage {
+    height: calc(100% - 220px);
+  }
+}
+
+.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;
+}
+
+.input {
+  display: none;
+}

src/components/editor/TextEditor/AddImage/ImageItem.tsx

@@ -1,39 +1,32 @@
-import { ReactComponent as Trash } from 'assets/svg/post/trash.svg';
+import { ReactComponent as Trash } from 'assets/svg/post/cancel.svg';
 import { useRef } from 'react';
-import useBooleanState from 'utils/hooks/useBooleanState';
-import useOnClickOutside from 'utils/hooks/useOnClickOutside';
-import styles from '../TextEditor.module.scss';
+import styles from './AddImage.module.scss';
 
 interface Props {
   value: string,
   onDelete: (value: string) => void,
 }
 
 export default function ImageItem({ value, onDelete }: Props) {
-  const [opened, open, close] = useBooleanState(false);
   const imageRef = useRef<HTMLInputElement>(null);
-  useOnClickOutside(imageRef, close);
 
   return (
-    <>
-      { opened && (
-        <button
-          type="button"
-          aria-label="trash"
-          className={styles['image-container__button']}
-          onClick={() => onDelete(value)}
-        >
-          <Trash />
-        </button>
-      )}
+    <div>
+      <button
+        type="button"
+        aria-label="trash"
+        className={styles.container__button}
+        onClick={() => onDelete(value)}
+      >
+        <Trash />
+      </button>
       <input
         type="image"
         alt=""
-        className={styles['image-container__image']}
+        className={styles.container__image}
         src={value}
         ref={imageRef}
-        onClick={open}
       />
-    </>
+    </div>
   );
 }

src/components/editor/TextEditor/AddImage/index.tsx

@@ -1,37 +1,53 @@
 import { ReactComponent as Picture } from 'assets/svg/post/picture.svg';
-import { useEffect } from 'react';
-import styles from '../TextEditor.module.scss';
+import { useEffect, useRef } from 'react';
+import Wysiwyg, { WysiwygType } from 'components/editor/Wysiwyg';
+import useBooleanState from 'utils/hooks/useBooleanState';
+import cn from 'utils/ts/classNames';
+import styles from './AddImage.module.scss';
 import useImageList from '../hooks/useImageList';
 import ImageItem from './ImageItem';
 
-interface Props {
-  active: () => void,
-  inActive: () => void,
-}
-
-function AddImage({ active, inActive }: Props) {
+function AddImage() {
   const { imageList, addImage, removeImage } = useImageList();
+  const wysiwygRef = useRef<WysiwygType | null>(null);
+  const [opened, active, inActive] = useBooleanState(false);
   useEffect(() => {
     if (imageList === null || imageList.length === 0) inActive();
     else active();
   }, [imageList, active, inActive]);
 
   return (
     <>
-      <button
-        type="button"
-        className={styles.item__button}
-        onClick={addImage}
-      >
-        <Picture />
-      </button>
-      <div className={styles['image-container']}>
+      <div className={styles.container}>
         { imageList?.map((value) => (
-          <div key={value} className={styles['image-container__item']}>
+          <div key={value} className={styles.container__item}>
             <ImageItem value={value} onDelete={removeImage} />
           </div>
         ))}
       </div>
+      <div
+        className={cn({
+          [styles.editor]: true,
+          [styles['editor--withImage']]: opened,
+        })}
+      >
+        <Wysiwyg ref={wysiwygRef} />
+      </div>
+      <div className={styles['button-container']}>
+        <label htmlFor="image">
+          <div className={styles['addImage-button']}>
+            <Picture />
+          </div>
+          <input
+            type="file"
+            onChange={addImage}
+            id="image"
+            className={styles.input}
+            multiple
+            accept="image/jpeg,image/gif,image/png"
+          />
+        </label>
+      </div>
     </>
   );
 }

src/components/editor/TextEditor/AddImageFile/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState, ChangeEvent } from 'react';
+import { ReactComponent as Plus } from 'assets/svg/post/picture.svg';
+import styles from './AddImageFile.module.scss';
+
+function AddImageFile() {
+  const [imageSrc, setImageSrc] = useState<string>();
+
+  const encodeFileToBase64 = (fileBlob: Blob) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(fileBlob);
+    return new Promise<void>((resolve) => {
+      reader.onload = () => {
+        setImageSrc(reader.result as string);
+        resolve();
+      };
+    });
+  };
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files && e.target.files[0];
+    if (file) {
+      encodeFileToBase64(file);
+    }
+  };
+
+  return (
+    <main>
+      <label htmlFor="image">
+        <div className={styles.getImage}>
+          <Plus className={styles.getImage__Image} />
+        </div>
+        <input
+          type="file"
+          onChange={handleFileChange}
+          id="image"
+          className={styles.input}
+          multiple
+        />
+      </label>
+      <div>
+        {imageSrc && <img src={imageSrc} alt="preview-img" width="80" height="80" className={styles.preview} />}
+      </div>
+    </main>
+  );
+}
+
+export default AddImageFile;