refactor: 리펙토링 진행 중

index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AM 정보 공유</title>
-  <meta property="og:title" content="AMaze 일기장" />
+  <title>AM 지식 공유</title>
+  <meta property="og:title" content="AMaze 지식 포스팅" />
   <meta property="og:description" content="새로움 배움을 나눠보아요" />
   <meta property="og:image" content="/src/assets/thumbnail.png" />
 </head>

src/App.jsx

@@ -30,8 +30,8 @@ function reducer(state, action) {
   return nextState
 }
 
-export const DiaryStateContext = createContext();
-export const DiaryDispatchContext = createContext();
+export const PostStateContext = createContext();
+export const PostDispatchContext = createContext();
 
 function App() {
   const [isLoading, setIsLoading] = useState(true);
@@ -105,8 +105,8 @@ function App() {
 
   return (
     <>
-      <DiaryStateContext.Provider value={data}>
-        <DiaryDispatchContext.Provider value={{
+      <PostStateContext.Provider value={data}>
+        <PostDispatchContext.Provider value={{
           onCreate, onDelete, onUpdate
         }}>
           <Routes>
@@ -116,8 +116,8 @@ function App() {
             <Route path="/edit/:id" element={<Edit />} />
             <Route path="*" element={<Notfound />} />
           </Routes>
-        </DiaryDispatchContext.Provider>
-      </DiaryStateContext.Provider>
+        </PostDispatchContext.Provider>
+      </PostStateContext.Provider>
     </>
   )
 }

src/components/PostList.jsx

@@ -1,6 +1,6 @@
 import Button from "./Button";
 import { useNavigate } from 'react-router-dom'
-import DiaryItem from "./PostItem";
+import PostItem from "./PostItem";
 import "./css/PostList.css";
 import { useState } from 'react'
 
@@ -37,7 +37,7 @@ const PostList = ({ data }) => {
       <div className="list_wrapper">
         {sortedDate.map((item) => {
           return (
-            <DiaryItem key={item.id} {...item} />
+            <PostItem key={item.id} {...item} />
           )
         })}
       </div>

src/components/css/Button.css

@@ -3,8 +3,9 @@
   border : none;
   border-radius: 10px;
   cursor: pointer;
-  padding: 10px 20px;
+  padding: 15px 20px;
   white-space: nowrap;
+  font-family: ;
 }
 
 .Button_POSITIVE {

src/components/css/PostItem.css

@@ -3,7 +3,7 @@
   gap: 15px;
   justify-content: space-between;
   padding: 15px 0px;
-  border-bottom: 1px solid rgb(236,236,236);
+  border-bottom: 2px solid rgb(236,236,236);
 }
 
 .PostItem .img_section {
@@ -27,6 +27,12 @@
 .PostItem .info_section {
   flex : 1; 
 }
+@media screen and (max-width: 650px) {
+  .PostItem .info_section {
+    flex: 1;
+    max-width: 300px;
+  }
+}
 
 .PostItem .info_section .created_date {
   font-weight: bold;
@@ -35,6 +41,9 @@
 
 .PostItem .info_section .content {
   font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .PostItem .button_section {

src/hooks/usePost.jsx

@@ -0,0 +1,24 @@
+import { useContext, useState, useEffect } from 'react'
+import { PostStateContext } from '../App';
+import { useNavigate } from 'react-router-dom';
+
+const usePost = (id) => {
+  const data = useContext(PostStateContext);
+  const [curPostItem, setCurPostItem] = useState();
+  const nav = useNavigate();
+
+  useEffect(() => {
+    const currentPostItem = data.find((item) => String(item.id) === String(id))
+
+    if (!currentPostItem) {
+      window.alert("존재하지 않는 포스트입니다");
+      nav("/", { replace: true })
+    }
+    setCurPostItem(currentPostItem)
+
+  }, [id])
+
+  return curPostItem
+}
+
+export default usePost;

src/index.css

@@ -16,7 +16,7 @@ html, body {
 
 #root {
   background-color: white;
-  max-width: 600px;
+  max-width: 700px;
   width: 100%;
   margin: 0 auto;
   min-height: 100vh;

src/pages/Edit.jsx

@@ -4,15 +4,15 @@ import Header from '../components/Header'
 import Editor from '../components/Editor'
 import Button from '../components/Button'
 import { useContext, useState } from 'react'
-import { DiaryDispatchContext } from '../App'
-import useDiary from '../hooks/useDiary'
+import { PostDispatchContext } from '../App'
+import usePost from '../hooks/usePost'
 
 const Edit = () => {
   const param = useParams();
   const nav = useNavigate();
-  const { onDelete, onUpdate } = useContext(DiaryDispatchContext);
+  const { onDelete, onUpdate } = useContext(PostDispatchContext);
 
-  const curDiaryItem = useDiary(param.id)
+  const curDiaryItem = usePost(param.id)
 
 
   const onClickDelete = () => {

src/pages/Home.jsx

@@ -1,7 +1,7 @@
 import Header from '../components/Header'
 import Button from '../components/Button';
 import { useState, useContext } from 'react'
-import { DiaryStateContext } from '../App';
+import { PostStateContext } from '../App';
 
 import PostList from '../components/PostList'
 
@@ -13,7 +13,7 @@ const getMonthlyData = (pivotDate, data) => {
 }
 const Home = () => {
   const [pivotDate, setPivatDate] = useState(new Date());
-  const data = useContext(DiaryStateContext);
+  const data = useContext(PostStateContext);
 
   const monthlyData = getMonthlyData(pivotDate, data);
 
@@ -28,8 +28,8 @@ const Home = () => {
     <div>
       <Header
         title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`}
-        leftChild={<Button text={"<"} onClick={onDecreaseMouth} />}
-        rightChild={<Button text={">"} onClick={onIncreaseMouth} />}
+        leftChild={<Button text={"◀"} onClick={onDecreaseMouth} />}
+        rightChild={<Button text={"▶"} onClick={onIncreaseMouth} />}
       />
       <PostList data={monthlyData} />
     </div>

src/pages/New.jsx

@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import Header from "../components/Header";
 import Button from "../components/Button";
 import Editor from "../components/Editor";
-import { DiaryDispatchContext } from "../App";
+import { PostDispatchContext } from "../App";
 import { useContext } from "react";
 
 const New = () => {
   const nav = useNavigate()
-  const { onCreate } = useContext(DiaryDispatchContext)
+  const { onCreate } = useContext(PostDispatchContext)
 
   const onSubmit = (input) => {
     onCreate(input.createdDate.getTime(), input.logoId, input.content);

src/pages/Post.jsx

@@ -2,20 +2,20 @@ import { useParams, useNavigate } from 'react-router-dom'
 import Header from '../components/Header';
 import Button from '../components/Button';
 import Viewer from '../components/Viewer'
-import useDiary from '../hooks/useDiary';
+import usePost from '../hooks/usePost';
 import { getStringedDate } from '../utils/getStringedDate';
 
 const Post = () => {
   const param = useParams();
   const nav = useNavigate();
 
 
-  const curDiaryItem = useDiary(param.id)
+  const curPostItem = usePost(param.id)
 
-  if (!curDiaryItem) {
+  if (!curPostItem) {
     return <div>데이터 로딩중...!</div>
   }
-  const { createdDate, logoId, content } = curDiaryItem;
+  const { createdDate, logoId, content } = curPostItem;
   const title = getStringedDate(new Date(createdDate))