chore: checking progress

src/App.tsx

@@ -8,7 +8,7 @@ import RedirectPage from 'routes/LoginPage/RedirectPage';
 import MainPage from 'routes/MainPage';
 import MyPage from 'routes/MyPage';
 import QuestionPage from 'routes/QuestionPage';
-import RecruitPage from 'routes/RecruitPage';
+import MyPage from 'routes/MyPage';
 
 const App = () => {
   return (
@@ -19,7 +19,9 @@ const App = () => {
             <Route path="" element={<MainPage />} />
             <Route path="recruit" element={<RecruitPage />} />
             <Route path="info" element={<InfoPage />} />
-            <Route path="question" element={<QuestionPage />} />
+            <Route path="info/post" element={<PostPage />} />
+        <Route path="info/read" element={<ReadPage />} />
+        <Route path="question" element={<QuestionPage />} />
             <Route path="mypage" element={<MyPage />} />
           </Route>
           <Route path="login" element={<LoginPage />} />

src/assets/svgs/index.js

@@ -26,3 +26,7 @@ export { ReactComponent as LikeCheckedIcon } from './like_clicked.svg';
 export { ReactComponent as ProfileImage } from './mypageProfileImage.svg';
 export { ReactComponent as PostButton } from './postbutton.svg';
 export { ReactComponent as ProfileIcon } from './profileIcon.svg';
+
+export { ReactComponent as FileUpload } from './file-upload.svg';
+export { ReactComponent as MenuButton } from './menu-button.svg';
+export { ReactComponent as DeleteButton } from './delete-button.svg';

src/components/UI/EditModal/editModal.module.scss

@@ -0,0 +1,29 @@
+@use 'styles/constants/colors' as color;
+
+.editModal {
+  display: table;
+  align-items: center;
+  justify-content: center;
+  background-color: color.$WHITE;
+  border: 1px solid color.$GREY_SECONDARY;
+  border-radius: 8px;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 124px;
+    height: 47px;
+    font-size: 16px;
+    font-weight: 400;
+    color: color.$GREY_PRIMARY;
+  }
+
+  button:first-child {
+    border-bottom: 1px solid color.$GREY_SECONDARY;
+  }
+
+  button:last-child {
+    color: color.$RED;
+  }
+}

src/components/UI/EditModal/index.tsx

@@ -0,0 +1,24 @@
+import styles from './editModal.module.scss';
+
+type Props = {
+  modalClose: () => void;
+};
+
+const EditModal = ({ modalClose }: Props) => {
+  const onModalClose = (e: { target: any; currentTarget: any }) => {
+    if (e.target !== e.currentTarget) {
+      console.log('hi');
+      modalClose();
+    }
+  };
+  return (
+    <div>
+      <div className={styles.editModal} role="button" onClick={onModalClose} tabIndex={0}>
+        <button type="button">수정하기</button>
+        <button type="button">삭제하기</button>
+      </div>
+    </div>
+  );
+};
+
+export default EditModal;

src/lib/axios.tsx

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const Axios = axios.create({
+  baseURL: process.env.REACT_PUBLIC_BASE_URL,
+});
+
+export default Axios;

src/routes/InfoPage/PostPage/index.tsx

@@ -0,0 +1,94 @@
+import styles from './postPage.module.scss';
+import { FileUpload, DeleteButton } from 'assets/svgs';
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import Axios from 'lib/axios';
+
+interface FormType {
+  title: string;
+  content: string;
+}
+
+const PostPage = () => {
+  const [previewButton, setPreviewButton] = useState(false);
+  const [editButton, setEditButton] = useState(true);
+  const [imageSrc, setImageSrc] = useState('');
+
+  const previewSelected = () => {
+    if (previewButton === true && editButton === false) {
+      setPreviewButton(false);
+      setEditButton(true);
+    }
+  };
+
+  const editSelected = () => {
+    if (previewButton === false && editButton === true) {
+      setPreviewButton(true);
+      setEditButton(false);
+    }
+  };
+
+  const encodeFileToBase64 = (fileBlob: Blob) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(fileBlob);
+    return new Promise<void>((resolve) => {
+      reader.onload = () => {
+        setImageSrc(reader.result as any);
+        resolve();
+        console.log(reader.result);
+      };
+    });
+  };
+
+  const deleteFile = () => {
+    setImageSrc('');
+  };
+
+  return (
+    <div className={styles.postPage}>
+      <div className={styles.postBody}>
+        <div className={styles.uploadTab}>
+          <button
+            className={previewButton ? styles.unSelected : styles.selected}
+            onClick={previewSelected}
+            type="button"
+          >
+            ＜＞ Edit new file
+          </button>
+          <button className={editButton ? styles.unSelected : styles.selected} onClick={editSelected} type="button">
+            preview
+          </button>
+        </div>
+        <input placeholder="제목" />
+        <textarea placeholder="내용을 입력해주세요" />
+        <div className={styles.imageBackground}>
+          {imageSrc && (
+            <div className={styles.imageBackground}>
+              <img src={imageSrc} alt="preview-img" />
+              <DeleteButton onClick={deleteFile} />
+            </div>
+          )}
+        </div>
+        <div className={styles.fileUpload}>
+          <FileUpload />
+          <label htmlFor="file">파일 업로드</label>
+          <input
+            type="file"
+            id="file"
+            onChange={(e: any) => {
+              encodeFileToBase64(e.target.files[0]);
+            }}
+            accept="image/jpeg, image/jpg, image/png"
+          />
+        </div>
+      </div>
+      <Link to="/info/read">
+        <div className={styles.buttonBody}>
+          <button type="button">작성완료</button>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default PostPage;

src/routes/InfoPage/PostPage/postPage.module.scss

@@ -0,0 +1,122 @@
+@use 'styles/constants/colors' as color;
+
+.postPage {
+  display: table;
+  width: 820px;
+  height: 914px;
+  margin: 98px auto;
+
+  .postBody {
+    width: 820px;
+    height: 770px;
+    border: 1px solid color.$GREY_SECONDARY;
+    border-radius: 8px;
+
+    .uploadTab {
+      display: flex;
+      justify-content: space-between;
+      width: 250px;
+      margin-top: 20px;
+      margin-left: 48px;
+
+      .selected {
+        padding-bottom: 20px;
+        font-size: 20px;
+        font-weight: 600;
+        border-bottom: 4px solid color.$BLUE_PRIMARY;
+      }
+
+      .unSelected {
+        padding-bottom: 20px;
+        font-size: 20px;
+        font-weight: 400;
+        color: color.$GREY_PRIMARY;
+        border-bottom: 4px solid color.$WHITE;
+      }
+    }
+
+    input {
+      display: flex;
+      margin-top: 28px;
+      margin-left: 48px;
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    input::placeholder {
+      color: color.$GREY_PRIMARY;
+    }
+
+    textarea {
+      width: 724px;
+      height: 260px;
+      margin-top: 28px;
+      margin-left: 48px;
+      font-size: 16px;
+      font-weight: 400;
+      resize: none;
+      border: none;
+    }
+
+    textarea::placeholder {
+      color: color.$GREY_PRIMARY;
+    }
+
+    .imageBackground {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: 300px;
+      margin-left: 15px;
+
+      svg {
+        margin-left: 5px;
+      }
+    }
+
+    .fileUpload {
+      display: table;
+      width: 107px;
+      height: 21px;
+      margin-top: 23px;
+      margin-left: 689px;
+
+      label {
+        width: 107px;
+        margin-top: -2px;
+        margin-left: 4px;
+        font-size: 18px;
+        font-weight: 400;
+        color: color.$BLUE_PRIMARY;
+      }
+
+      input[type='file'] {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    }
+  }
+
+  .buttonBody {
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 180px;
+      height: 46px;
+      margin: 0 auto;
+      margin-top: 98px;
+      font-size: 24px;
+      font-weight: 600;
+      color: color.$WHITE;
+      background-color: color.$BLUE_PRIMARY;
+      border-radius: 30px;
+    }
+  }
+}