From 6f54c6e1da469a68c9df0d033379b81e2a773fe2 Mon Sep 17 00:00:00 2001
From: "Oh, Sukyeong" <osukyeong0109@gmail.com>
Date: Sun, 30 Jun 2024 05:39:54 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=82=B4=EA=B0=80=20=EC=93=B4=20?=
 =?UTF-8?q?=EC=9D=BC=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                |  16 +--
 src/assets/svg/Heart.svg                   |   3 +
 src/components/Calendar/Calendar/index.tsx |   1 +
 src/pages/auth/Login.tsx                   |   4 +-
 src/pages/auth/Signup.tsx                  |   6 +-
 src/pages/diary/Update.tsx                 | 141 +++++++++++++++++++++
 src/pages/mypage/list.tsx                  |  82 ++++++++++++
 7 files changed, 242 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/svg/Heart.svg
 create mode 100644 src/pages/diary/Update.tsx
 create mode 100644 src/pages/mypage/list.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0a38a59..0414c7b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -85,14 +85,14 @@ const router = createBrowserRouter(routeObjects);
 const App = () => {
   const { currentUser } = useAuth();
   const location = window.location;
-  useEffect(() => {
-    if (
-      (!currentUser || !currentUser.senderId) &&
-      !location.pathname.startsWith("/auth")
-    ) {
-      location.replace("/auth/login");
-    }
-  }, [currentUser, location]);
+  // useEffect(() => {
+  //   if (
+  //     (!currentUser || !currentUser.senderId) &&
+  //     !location.pathname.startsWith("/auth")
+  //   ) {
+  //     location.replace("/auth/login");
+  //   }
+  // }, [currentUser, location]);
 
   return <RouterProvider router={router} />;
 };
diff --git a/src/assets/svg/Heart.svg b/src/assets/svg/Heart.svg
new file mode 100644
index 0000000..33190de
--- /dev/null
+++ b/src/assets/svg/Heart.svg
@@ -0,0 +1,3 @@
+<svg width="113" height="113" viewBox="0 0 113 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.8543 28.4063C39.6263 25.6658 28.8634 30.9786 26.202 40.911C24.3661 47.7629 26.0288 54.3913 29.0007 60.3093C31.9624 66.207 36.3586 71.6692 40.4047 76.3392L47.3858 84.3966C48.1504 85.2791 49.3751 85.6072 50.4784 85.2253L60.5529 81.7379C66.392 79.7167 72.9303 77.1843 78.444 73.5576C83.9767 69.9184 88.7309 65.0094 90.5669 58.1575C93.2283 48.2251 86.5638 38.2426 76.3358 35.5021C71.0635 34.0893 65.7618 35.3184 61.5755 37.6251C59.1035 33.5343 55.1266 29.8191 49.8543 28.4063Z" fill="black"/>
+</svg>
diff --git a/src/components/Calendar/Calendar/index.tsx b/src/components/Calendar/Calendar/index.tsx
index 3243ea3..22803c8 100644
--- a/src/components/Calendar/Calendar/index.tsx
+++ b/src/components/Calendar/Calendar/index.tsx
@@ -4,6 +4,7 @@ import { Dates, YearMonthDate } from "@/types/common";
 import * as S from "./Calendar.styled";
 import PrevIcon from "@/assets/svg/icon-arrow-left.svg?react";
 import NextIcon from "@/assets/svg/icon-arrow-right.svg?react";
+import HeartIcon from "@/assets/svg/Heart.svg";
 
 export interface Props {
   dates: Dates[];
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 595b778..834702c 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -51,6 +51,7 @@ const Login = () => {
           onChangeValue={onChangeName}
           leftIcon={NameIcon}
         />
+        <br />
         <StyledInput
           type={password.type}
           value={password.value}
@@ -66,6 +67,7 @@ const Login = () => {
               })),
           }}
         />
+        <br />
         <StyledButton
           buttonColor="main"
           buttonStyle="gradient"
@@ -114,7 +116,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledH1 = styled.div`
-  padding: 50px;
+  padding: 100px;
   font-size: 60pt;
 `;
 
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index bc21a6a..b557d2b 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -60,6 +60,7 @@ const Signup = () => {
           onChangeValue={onChangeName}
           leftIcon={NameIcon}
         />
+        <br />
         <StyledInput
           type={password.type}
           value={password.value}
@@ -75,6 +76,7 @@ const Signup = () => {
               })),
           }}
         />
+        <br />
         <StyledInput
           type={passwordCheck.type}
           value={passwordCheck.value}
@@ -91,7 +93,7 @@ const Signup = () => {
               })),
           }}
         />
-
+        <br />
         <StyledButton
           buttonColor="main"
           buttonStyle="gradient"
@@ -141,7 +143,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledH1 = styled.div`
-  padding: 50px;
+  padding: 100px;
   font-size: 60pt;
 `;
 const P = styled.p`
diff --git a/src/pages/diary/Update.tsx b/src/pages/diary/Update.tsx
new file mode 100644
index 0000000..6fe204a
--- /dev/null
+++ b/src/pages/diary/Update.tsx
@@ -0,0 +1,141 @@
+import { ChangeEvent, useState, useRef, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import Toast from "@/components/common/Toast";
+import Input from "@/components/common/Input/Input";
+import Button from "@/components/common/Button";
+import TextArea from "@/components/common/Input/TextArea";
+
+const Update = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [writeState, setWriteState] = useState<"create" | "update">("create");
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [sing, setSing] = useState("");
+  const [date, setDate] = useState("");
+
+  const handleEditButton = () => {
+    mutate({
+      title: "",
+      content: "",
+      sing: "",
+      date: "",
+    });
+  };
+
+  const handleCancelButton = () => {
+    navigate(-1);
+  };
+
+  const onChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+  const onChangeContent = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const onChangeSing = (e: ChangeEvent<HTMLInputElement>) => {
+    setSing(e.target.value);
+  };
+  const onChangeDate = (e: ChangeEvent<HTMLInputElement>) => {
+    setDate(e.target.value);
+  };
+
+  useEffect(() => {
+    if (location && location.state?.update) {
+      setWriteState("update");
+      // todo : 다이어리 글 상태관리
+    } else {
+      setWriteState("create");
+    }
+  }, [location]);
+
+  return (
+    <>
+      <CreateDiv>
+        <StyledH1>일기 {writeState === "create" ? "작성" : "수정"}</StyledH1>
+        <Input
+          value={title}
+          placeholder="제목을 입력해주세요"
+          onChangeValue={onChangeTitle}
+        />
+        <br />
+        <TextArea
+          value={content}
+          placeholder="내용을 입력해주세요"
+          onChangeValue={onChangeContent}
+        />
+        <br />
+        <Input
+          value={sing}
+          placeholder="노래를 입력해주세요(선택)"
+          onChangeValue={onChangeSing}
+        />
+        <br />
+        <Input
+          value={date}
+          type="date"
+          placeholder="날짜를 입력해주세요"
+          onChangeValue={onChangeDate}
+        />
+        <br />
+        <ButtonWrapper>
+          <Button
+            buttonColor="point"
+            buttonStyle="default"
+            onClick={() => navigate(-1)}
+          >
+            취소
+          </Button>
+          <Button
+            buttonColor="main"
+            buttonStyle="default"
+            onClick={() => {
+              navigate("/");
+            }}
+            disabled={
+              !title || // 제목이 없거나
+              !content || // 내용이 없거나
+              !date // 날짜가 없을 경우
+            }
+          >
+            {writeState === "update" ? "취소하기" : "수정하기"}
+          </Button>
+        </ButtonWrapper>
+      </CreateDiv>
+    </>
+  );
+};
+
+export default Update;
+
+export const CreateDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+function mutate(arg0: {
+  title: string;
+  content: string;
+  sing: string;
+  date: string;
+}) {
+  throw new Error("Function not implemented.");
+}
+
+const StyledH1 = styled.div`
+  padding: 50px;
+  font-size: 60pt;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  width: 100%;
+`;
diff --git a/src/pages/mypage/list.tsx b/src/pages/mypage/list.tsx
new file mode 100644
index 0000000..447af50
--- /dev/null
+++ b/src/pages/mypage/list.tsx
@@ -0,0 +1,82 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { ChangeEvent, useState, useRef, useEffect } from "react";
+import styled from "styled-components";
+import HeartIcon from "@/assets/svg/Heart.svg";
+
+const list = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [title, setTitle] = useState("");
+  const [date, setDate] = useState("");
+
+  const handleEditButton = () => {
+    mutate({
+      title: "",
+      date: "",
+    });
+  };
+
+  return (
+    <>
+      <ListDiv>
+        <StyledH3>제목: {title}</StyledH3>
+        <br />
+        <StyledH5>날짜: {date}</StyledH5>
+        <div>🤍 6</div>
+        <div>💬 5</div>
+      </ListDiv>
+      <ListDiv>
+        <StyledH3>제목: {title}</StyledH3>
+        <br />
+        <StyledH5>날짜: {date}</StyledH5>
+        <div>🤍 6</div>
+        <div>💬 5</div>
+      </ListDiv>
+      <ListDiv>
+        <StyledH3>제목: {title}</StyledH3>
+        <br />
+        <StyledH5>날짜: {date}</StyledH5>
+        <div>🤍 6</div>
+        <div>💬 5</div>
+      </ListDiv>
+      <ListDiv>
+        <StyledH3>제목: {title}</StyledH3>
+        <br />
+        <StyledH5>날짜: {date}</StyledH5>
+        <div>🤍 6</div>
+        <div>💬 5</div>
+      </ListDiv>
+    </>
+  );
+};
+
+export default list;
+
+function mutate(arg0: { title: string; date: string }) {
+  throw new Error("Function not implemented.");
+}
+
+export const ListDiv = styled.div`
+  width: 100%;
+  height: 100px;
+  margin-top: 100px;
+  padding: 10px;
+  border-bottom: ${({ theme }) => theme.boxBorder.bookBorder};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const StyledH3 = styled.div`
+  margin-left: 20px;
+  padding: 10px;
+  font-size: 30pt;
+`;
+
+const StyledH5 = styled.div`
+  margin-right: 300px;
+  padding: 10px;
+  font-size: 20pt;
+`;