diff --git a/src/App.tsx b/src/App.tsx index 01ffa4f..6ed091b 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> - } /> + } /> + } /> + } /> } /> } /> diff --git a/src/assets/svgs/delete-button.svg b/src/assets/svgs/delete-button.svg new file mode 100644 index 0000000..db5da2a --- /dev/null +++ b/src/assets/svgs/delete-button.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/src/assets/svgs/file-upload.svg b/src/assets/svgs/file-upload.svg new file mode 100644 index 0000000..9ac5516 --- /dev/null +++ b/src/assets/svgs/file-upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/index.js b/src/assets/svgs/index.js index 31d30c3..7462389 100644 --- a/src/assets/svgs/index.js +++ b/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'; diff --git a/src/assets/svgs/menu-button.svg b/src/assets/svgs/menu-button.svg new file mode 100644 index 0000000..59758c9 --- /dev/null +++ b/src/assets/svgs/menu-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/UI/EditModal/editModal.module.scss b/src/components/UI/EditModal/editModal.module.scss new file mode 100644 index 0000000..9ea3c92 --- /dev/null +++ b/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; + } +} diff --git a/src/components/UI/EditModal/index.tsx b/src/components/UI/EditModal/index.tsx new file mode 100644 index 0000000..aa2d7c4 --- /dev/null +++ b/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 ( +
+
+ + +
+
+ ); +}; + +export default EditModal; diff --git a/src/lib/axios.tsx b/src/lib/axios.tsx new file mode 100644 index 0000000..79ae30c --- /dev/null +++ b/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; diff --git a/src/routes/InfoPage/PostPage/index.tsx b/src/routes/InfoPage/PostPage/index.tsx new file mode 100644 index 0000000..dd16d0f --- /dev/null +++ b/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((resolve) => { + reader.onload = () => { + setImageSrc(reader.result as any); + resolve(); + console.log(reader.result); + }; + }); + }; + + const deleteFile = () => { + setImageSrc(''); + }; + + return ( +
+
+
+ + +
+ +