emotion diary : global settings

emotiondiary/src/App.css

@@ -1,3 +1,102 @@
-.App {
-  padding: 20px;
+@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap");
+
+body {
+  background-color: #f6f6f6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Nanum Pen Script", cursive;
+  min-height: 100vh;
+  margin: 0px;
+}
+
+@media (min-width: 650px) {
+  .App {
+    width: 640px;
+  }
+}
+
+@media (max-width: 650px) {
+  .App {
+    width: 90vw;
+  }
+}
+
+#root {
+  background-color: white;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.App {
+  min-height: 100vh;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+/* My Button */
+
+.MyButton {
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  font-size: 18px;
+  white-space: nowrap;
+
+  font-family: "Nanum Pen Script", cursive;
+}
+
+.MyButton_default {
+  background-color: #ececec;
+  color: black;
+}
+
+.MyButton_positive {
+  background-color: #64c964;
+  color: white;
+}
+
+.MyButton_negative {
+  background-color: #fd565f;
+  color: white;
+}
+
+/* HEADER */
+
+header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+header > div {
+  display: flex;
+}
+
+header .head_text {
+  width: 50%;
+  font-size: 25px;
+  justify-content: center;
+}
+
+header .head_btn_left {
+  width: 25%;
+  justify-content: start;
+}
+
+header .head_btn_right {
+  width: 25%;
+  justify-content: end;
+}
+
+header button {
+  font-family: "Nanum Pen Script", cursive;
 }

emotiondiary/src/App.js

@@ -1,10 +1,104 @@
 import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import Home from "./pages/Home";
+import New from "./pages/New";
+import Edit from "./pages/Edit";
+import Diary from "./pages/Diary";
+import React, { useReducer, useRef } from "react";
+
+const reducer = (state, action) => {
+  let newState = [];
+
+  switch (action.type) {
+    case "INIT": {
+      return action.data;
+    }
+    case "CREATE": {
+      newState = [action.data, ...state];
+      break;
+    }
+    case "REMOVE": {
+      newState = state.filter((it) => it.id !== action.targetId);
+      break;
+    }
+    case "EDIT": {
+      newState = state.map((it) =>
+        it.id === action.data.id ? { ...action.data } : it
+      );
+      break;
+    }
+    default:
+      return state;
+  }
+
+  return newState;
+};
+
+export const DiaryStateContext = React.createContext();
+export const DiaryDispatchContext = React.createContext();
 
 function App() {
+  const [data, dispatch] = useReducer(reducer, []);
+
+  const dataId = useRef(0);
+
+  // CREATE
+  const onCreate = (date, content, emotion) => {
+    dispatch({
+      type: "CREATE",
+      data: {
+        id: dataId.current,
+        date: new Date(date).getTime(),
+        content,
+        emotion,
+      },
+    });
+    dataId.current += 1;
+  };
+
+  // REMOVE
+  const onRemove = (targetId) => {
+    dispatch({
+      type: "REMOVE",
+      targetId,
+    });
+  };
+
+  // EDIT
+  const onEdit = (targetId, date, content, emotion) => {
+    dispatch({
+      type: "EDIT",
+      data: {
+        id: targetId,
+        date: new Date(date).getTime(),
+        content,
+        emotion,
+      },
+    });
+  };
+
   return (
-    <div className="App">
-      <h2>Emotion Diary</h2>
-    </div>
+    <DiaryStateContext.Provider value={data}>
+      <DiaryDispatchContext.Provider
+        value={{
+          onCreate,
+          onEdit,
+          onRemove,
+        }}
+      >
+        <BrowserRouter>
+          <div className="App">
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/new" element={<New />} />
+              <Route path="/edit" element={<Edit />} />
+              <Route path="/diary/:id" element={<Diary />} />
+            </Routes>
+          </div>
+        </BrowserRouter>
+      </DiaryDispatchContext.Provider>
+    </DiaryStateContext.Provider>
   );
 }
 

emotiondiary/src/components/MyButton.js

@@ -0,0 +1,18 @@
+const MyButton = ({ text, type, onClick }) => {
+  const btnType = ["positive", "negative"].includes(type) ? type : "default";
+
+  return (
+    <button
+      className={["MyButton", `MyButton_${btnType}`].join(" ")}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+MyButton.defaultProps = {
+  type: "default",
+};
+
+export default MyButton;

emotiondiary/src/components/MyHeader.js

@@ -0,0 +1,11 @@
+const MyHeader = ({ headText, leftChild, rightChild }) => {
+  return (
+    <header>
+      <div className="head_btn_left">{leftChild}</div>
+      <div className="head_text">{headText}</div>
+      <div className="head_btn_right">{rightChild}</div>
+    </header>
+  );
+};
+
+export default MyHeader;

emotiondiary/src/index.js

@@ -5,7 +5,7 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

emotiondiary/src/pages/Diary.js

@@ -0,0 +1,15 @@
+import { useParams } from "react-router-dom";
+
+const Diary = () => {
+  const { id } = useParams();
+  console.log(id);
+
+  return (
+    <div>
+      <h1>Diary</h1>
+      <p>이곳은 일기 상세 페이지 입니다.</p>
+    </div>
+  );
+};
+
+export default Diary;

emotiondiary/src/pages/Edit.js

@@ -0,0 +1,24 @@
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+const Edit = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const id = searchParams.get("id");
+  const mode = searchParams.get("mode");
+  console.log(id);
+  console.log(mode);
+
+  return (
+    <div>
+      <h1>Edit</h1>
+      <p>이곳은 일기 수정 페이지 입니다.</p>
+      <button onClick={() => setSearchParams({ who: "kkk" })}>바꾸기</button>
+
+      <button onClick={() => navigate("/")}>홈으로</button>
+      <button onClick={() => navigate(-1)}>뒤로가기</button>
+    </div>
+  );
+};
+
+export default Edit;

emotiondiary/src/pages/Home.js

@@ -0,0 +1,10 @@
+const Home = () => {
+  return (
+    <div>
+      <h1>Home</h1>
+      <p>이곳은 홈 입니다.</p>
+    </div>
+  );
+};
+
+export default Home;

emotiondiary/src/pages/New.js

@@ -0,0 +1,10 @@
+const New = () => {
+  return (
+    <div>
+      <h1>New</h1>
+      <p>이곳은 일기 작성 페이지 입니다.</p>
+    </div>
+  );
+};
+
+export default New;