Merge branch 'main' of https://github.com/Skhuthon/Skhuthon_0th_TEAM0…

…4_FE
Skhuthon · Jun 29, 2024 · 4d5dfd1 · 4d5dfd1
2 parents d0edc2b + 6f54c6e
commit 4d5dfd1
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 11 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+`;