Feature/일기장

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -6,13 +6,13 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@toast-ui/react-editor": "^3.2.3",
     "axios": "^1.4.0",
-    "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "redux": "^4.2.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-logger": "^3.0.6",

src/App.js

@@ -2,14 +2,21 @@ import { Route, Routes } from 'react-router';
 import GlobalStyle from './styles/globalStyle';
 import Landing from './pages/Landing';
 import SignIn from './pages/SignIn';
+import Diary from './pages/Diary';
+import DiaryDetail from './pages/DiaryDetail';
 
 const App = () => {
   return (
-    <Routes>
+    <>
       <GlobalStyle />
-      <Route path="/" element={<Landing />} />
-      <Route path="/signin" element={<SignIn />} />
-    </Routes>
+      <Routes>
+        <Route path="/" element={<Landing />} />
+        <Route path="/signin" element={<SignIn />} />
+        <Route path="/diary" element={<Diary />} />
+        <Route path={"/diary/:postId"} element={<DiaryDetail />} />
+      </Routes>
+    </>
+
   );
 }
 

src/components/SearchBar.js

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+
+const SearchBar = ({ width, height, fontSize, placeholder, value, onChange }) => {
+  return (
+    <StyledSearchBar requirement={{width, height, fontSize}}>
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+    </StyledSearchBar>
+  );
+};
+
+export default SearchBar;
+
+export const StyledSearchBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: ${(props) => props.requirement.width && props.requirement.width};
+  height: ${(props) => props.requirement.height && props.requirement.height};
+  min-height: 44px;
+  min-width: 375px;
+  padding-left: 30px;
+  padding-right: 30px;
+  border-radius: 100px;
+  background: #fafafa;
+  input {
+    width: ${(props) => props.requirement.width && props.requirement.width};
+    border: none;
+    border-radius: 100px;
+    outline: none;
+    background: #fafafa;
+    font-family: Pretendard;
+    font-size: ${(props) => props.requirement.fontSize && props.requirement.fontSize};
+    min-height: 44px;
+    min-width: 375px;
+    font-weight: 400;
+    line-height: 44px;
+  }
+`;

src/components/diary/PaginationBar.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import styled from 'styled-components'
+
+const PaginationBar = ({currentPage, totalPages, setPage}) => {
+  const renderLinks = (totalPages) => {
+    const links = [];
+    for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
+      links.push(
+        <Link to={`/diary/?page=${pageNum}`} key={pageNum} className={currentPage === pageNum ? "current" : "non-current"}>
+          {pageNum}
+        </Link>
+      );
+    }
+    return links;
+  }
+
+  return (
+    <>
+      <Container>
+        {renderLinks(totalPages)}
+      </Container>
+    </>
+  )
+}
+
+export default PaginationBar
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  a {
+    padding: 0.5rem;
+    text-decoration: none;
+    color: #313338;
+  }
+  .current {
+    font-weight: 600;
+    font-size: 18px
+  }
+`;
+

src/components/diary/PostEditor.js

@@ -0,0 +1,29 @@
+import '@toast-ui/editor/dist/toastui-editor.css';
+import { Editor } from '@toast-ui/react-editor';
+
+const PostEditor = ({editorRef}) => {
+  const toolbarItems = [
+    ['heading', 'bold', 'italic', 'strike'],
+    ['hr'],
+    ['ul', 'ol', 'task'],
+    ['table', 'link'],
+    ['image'],
+    ['code'],
+    ['scrollSync'],
+  ]
+  return (
+    <>
+      <Editor
+        ref={editorRef}
+        initialValue={' '}
+        hideModeSwitch={true}
+        toolbarItems={toolbarItems}
+        height='50vh'
+        initialEditType='wysiwyg'
+        useCommandShortcut={true}
+        />
+    </>
+  )
+}
+
+export default PostEditor

src/components/diary/WritePostModal.js

@@ -0,0 +1,172 @@
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+import { ReactComponent as CloseIcon } from "../../assets/close_gray.svg";
+import PostEditor from './PostEditor';
+import { uploadPost } from '../../utils/axios';
+
+const POST_IS_EMPTY = "<p><br></p>"
+
+const WritePostModal = ({ setIsModalOpen, name}) => {
+  const ref = useRef(null);
+  const [title, setTitle] = useState("")
+
+  const handleModalClose = () => {
+    document.body.style.overflow = "unset";
+    setIsModalOpen(false);
+  };
+  const handleSubmit = () => {
+    try{
+      const editorlns = ref?.current?.getInstance();
+      const content = editorlns.getHTML();
+      const postData = {
+        "title" : title,
+        "content" : content,
+        "isAnonymous" : true,
+        "thumbnailIndex": 0, 
+      }
+    if (content === POST_IS_EMPTY) {
+      alert('내용을 입력해주세요');
+      return
+    }
+    uploadPost(postData);
+  } catch (e) {
+    console.log(e);
+    alert('다시 시도해주세요');
+    return
+  }
+  setIsModalOpen(false);
+  }
+
+  return (
+    <>
+      <ModalBackground>
+        <ModalOutlay>
+          <CloseIcon
+            className="close-button"
+            onClick={() => handleModalClose()}
+          />
+          <ModalHeader>
+            <ProfileImg />
+            <Name>{name}</Name>
+          </ModalHeader>
+          <ModalInner>
+            글 제목
+            <PostTitle value={title} placeholder="제목을 입력해주세요" onChange={(e) => {setTitle(e.currentTarget.value)}}></PostTitle>
+            <PostEditor editorRef={ref}/>
+          </ModalInner>
+          <ModalFooter>
+            <SubmitButton onClick={() => handleSubmit()}>게시물 올리기</SubmitButton>
+          </ModalFooter>
+        </ModalOutlay>
+      </ModalBackground>
+    </>
+  );
+};
+
+export default WritePostModal;
+
+const ModalBackground = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(139, 139, 139, 0.2);
+  backdrop-filter: blur(15px);
+  z-index: 999;
+  overflow: hidden;
+  transition: .5s;
+`;
+
+const ModalOutlay = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  width: 764px;
+  height: 80vh;
+  background: #ffffff;
+  border: 1px solid #fafafa;
+  box-sizing: border-box;
+  border-radius: 10px;
+  .close-button {
+    position: absolute;
+    top: 33px;
+    left: 712px;
+    color: #8b8b8b;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+  }
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  margin: 40px 45px 0px 45px;
+  height: 30px;
+`;
+
+const ProfileImg = styled.div`
+  width: 30px;
+  height: 30px;
+  border-radius: 100px;
+  background: #d2d2d2;
+`;
+
+const Name = styled.div`
+  display: flex;
+  align-items: center;
+  height: 30px;
+  font-family: Pretendard;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  margin-left: 8px;
+`;
+
+const ModalInner = styled.div`
+  margin: 18px 45px 0px 45px;
+`;
+
+const PostTitle = styled.input`
+  width: 670px;
+  outline: none;
+  border: none;
+  background: #fafafa;
+  font-size: 20px;
+  padding: 10px;
+  border-radius: 10px;
+`;
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 56px 0px 45px 0px;
+`;
+
+const SubmitButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 400px;
+  height: 48px;
+  background: #7054ff;
+  border-radius: 30px;
+  color: #ffffff;
+  font-family: Pretendard;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 16px;
+  cursor: pointer;
+`;