Merge pull request GrowthMemory#5 from seyerin/main

home화면 구현 중

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

public/dumy/wiseSaying.json

@@ -0,0 +1,4 @@
+{
+  "txt": "명언의 최대 길이는 몇자까지 하려나요 3줄 이상 나오면 꽤 별로 일 것 같은데",
+  "author": "서예린"
+}

src/components/CollectPersonalData/TermsBox.jsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import Terms from "../common/Terms";
-import { SignUpContext } from "../context/SignUpContext";
+import { SignUpContext } from "../context/context";
 import styled from "styled-components";
 
 export default function TermsBox() {

src/components/common/Button.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { IoCheckmarkOutline } from "react-icons/io5";
 import styled from "styled-components";
-import { SignUpContext } from "../context/SignUpContext";
+import { SignUpContext } from "../context/context";
 import { useNavigate } from "react-router-dom";
 export default function Button(props) {
   const {

src/components/common/Navigation.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { MdHome } from "react-icons/md";
+import { PiChartLine } from "react-icons/pi";
+import { FaCalendar } from "react-icons/fa";
+import { BsChatFill } from "react-icons/bs";
+import { IoMdSettings } from "react-icons/io";
+import { useLocation } from "react-router-dom";
+
+export default function Navigation() {
+  const location = useLocation().pathname;
+  return (
+    <Div>
+      <MdHome className={location == "/Home" ? "focus" : ""} />
+      <PiChartLine className={location == "/Report" ? "focus" : ""} />
+      <FaCalendar className={location == "/Calendar" ? "focus" : ""} />
+      <BsChatFill className={location == "/Chat" ? "focus" : ""} />
+      <IoMdSettings className={location == "/MyPage" ? "focus" : ""} />
+    </Div>
+  );
+}
+
+const Div = styled.div`
+  width: 360px;
+  height: 56px;
+  font-size: 24px;
+  color: #aeaeb2;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  .focus {
+    color: #5ac479;
+  }
+`;

src/components/common/Terms.jsx

@@ -1,7 +1,7 @@
 import { IoCheckmarkOutline } from "react-icons/io5";
 import { useContext, useEffect } from "react";
 import styled from "styled-components";
-import { SignUpContext } from "../context/SignUpContext";
+import { SignUpContext } from "../context/context";
 export default function Terms(props) {
   const { setAgreement, updateIsChecked, isChecked } =
     useContext(SignUpContext);

src/components/common/header/BackHeader.jsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from "react";
 import { RxCross1 } from "react-icons/rx";
 import styled from "styled-components";
-import { SignUpContext } from "../../context/SignUpContext";
+import { Context } from "../../context/context";
 import { BsChevronLeft } from "react-icons/bs";
 import { useLocation } from "react-router-dom";
 export default function BackHeader(props) {

src/components/common/header/HeaderBox.jsx

@@ -1,5 +1,5 @@
 import { useLocation } from "react-router-dom";
-import { SignUpContext } from "../../context/SignUpContext";
+import { Context } from "../../context/context";
 import styled from "styled-components";
 
 export default function HeaderBox({ children }) {

src/components/context/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const SignUpContext = createContext();
+
+export const HomeContext = createContext();

src/components/createName/OverlapButton.jsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { SignUpContext } from "../context/SignUpContext";
+import { SignUpContext } from "../context/context";
 import { useContext } from "react";
 
 export default function OverlapButton(props) {

src/components/createName/OverlapSpan.jsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { SignUpContext } from "../context/SignUpContext";
+import { SignUpContext } from "../context/context";
 import styled from "styled-components";
 
 export default function OverlapSpan(props) {

src/components/home/HomeHeader.jsx

@@ -0,0 +1,59 @@
+import { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+import { HomeContext } from "../context/context";
+
+export default function HomeHeader() {
+  const { retrospectionNumber, wiseSaying, setWiseSaying } =
+    useContext(HomeContext);
+
+  useEffect(() => {
+    getWiseSaying(setWiseSaying);
+  }, []);
+
+  return (
+    <Div>
+      <Span>
+        회고 <span className="dayNumber">{retrospectionNumber}</span>일차
+      </Span>
+      <Ptext>
+        {wiseSaying.txt} -{wiseSaying.author}-
+      </Ptext>
+    </Div>
+  );
+}
+
+async function getWiseSaying(setWiseSaying) {
+  try {
+    let response = await fetch(`dumy/wiseSaying.json`);
+    let data = await response.json();
+    setWiseSaying(data);
+  } catch (err) {
+    console.log("err", err);
+  }
+}
+
+const Div = styled.div`
+  margin-top: 63px;
+  width: 100%;
+  height: 100px;
+`;
+
+const Span = styled.span`
+  margin-left: 25px;
+  color: #636366;
+  font-size: 20px;
+  font-weight: 500;
+
+  .dayNumber {
+    color: #5ac479;
+    font-size: 34px;
+    font-weight: 700;
+  }
+`;
+
+const Ptext = styled.p`
+  margin: 9px 0 0 25px;
+  width: 205px;
+  color: #363639;
+  font-size: 12px;
+`;

src/components/home/Performance.jsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export default function Performance() {
+  return (
+    <Div>
+      <></>
+    </Div>
+  );
+}
+
+const Div = styled.div`
+  width: 312px;
+  height: 75px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+  background: #fff;
+`;

src/components/home/SteadyCalendar.jsx

@@ -0,0 +1,170 @@
+import styled from "styled-components";
+import * as func from "./steadyCalendarFunction";
+import { useContext, useEffect } from "react";
+import { HomeContext } from "../context/context";
+
+export default function SteadyCalendar() {
+  const { retrospectionData, setRetrospectionData, setRetrospectionNumber } =
+    useContext(HomeContext);
+  let currentYear = new Date().getFullYear();
+  let dayArr = ["S", "M", "T", "W", "T", "F", "S"];
+  let dateArr = func.createDataArr();
+  let monthArr = func.createMonthArr(dateArr);
+
+  useEffect(() => {
+    getRetrospectionData();
+  }, []);
+
+  let date = [];
+
+  retrospectionData.forEach((x) => {
+    let temp = x["날짜"].replace(/년|월|일/g, "");
+    date.push(temp.split(" "));
+  });
+
+  async function getRetrospectionData() {
+    try {
+      const response = await fetch("dumy/test.json");
+      const data = await response.json();
+      setRetrospectionData(() => {
+        let temp = data.data;
+        return temp;
+      });
+      setRetrospectionNumber(data.data.length);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  function checkFunc(n2, n, d) {
+    let mon = n;
+    if (n2 >= 3 && d < 10) mon += 2;
+    else mon += 1;
+    let check = "";
+    for (let i = 0; i < date.length; i++) {
+      if (date[i][1] == mon && date[i][2] == d && date[i][0] == currentYear) {
+        check = "check";
+        break;
+      }
+    }
+    return check;
+  }
+
+  return (
+    <Div>
+      <DayBox>
+        {dayArr.map((day, n) => (
+          <span key={day + n}>{day}</span>
+        ))}
+      </DayBox>
+      <CalenderBox className="scroll">
+        <MonthBox>
+          {monthArr.map((month, monthNum) => (
+            <Month key={month}>
+              <span>{monthNum + 1 + "월"}</span>
+              <WeekBox>
+                {month.map((week, weekNum) => (
+                  <Week key={week}>
+                    {week.map((day) => {
+                      return (
+                        <DateBox
+                          className={` m${
+                            weekNum >= 3 && day < 10
+                              ? monthNum + 2
+                              : monthNum + 1
+                          }d${day} ${checkFunc(weekNum, monthNum, day)}`}
+                          key={day}
+                        ></DateBox>
+                      );
+                    })}
+                  </Week>
+                ))}
+              </WeekBox>
+            </Month>
+          ))}
+        </MonthBox>
+      </CalenderBox>
+    </Div>
+  );
+}
+
+const Div = styled.div`
+  width: 312px;
+  height: 171px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+
+  .scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .scroll::-webkit-scrollbar-thumb {
+    background-color: #636366;
+    border-radius: 10px;
+  }
+`;
+
+const CalenderBox = styled.div`
+  width: 310px;
+  height: 170px;
+  display: flex;
+  overflow-x: scroll;
+
+  .check {
+    background-color: #5ac479;
+  }
+`;
+
+const MonthBox = styled.div`
+  margin: 8px 0 0 0;
+  width: 100%;
+  height: 152px;
+  display: flex;
+  align-items: center;
+`;
+const Month = styled.div`
+  width: auto;
+  height: 135px;
+  display: flex;
+  flex-direction: column;
+
+  span {
+    font-size: 11px;
+  }
+`;
+
+const WeekBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const Week = styled.div`
+  width: 17px;
+  height: 100%;
+`;
+
+const DateBox = styled.div`
+  margin: 2px;
+  width: 15px;
+  height: 15px;
+  border-radius: 5px;
+  background-color: #e3e3e3;
+`;
+
+const DayBox = styled.div`
+  margin: 32px 0 0 5px;
+  width: 20px;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  font-size: 11px;
+
+  span {
+    margin: 0 0 4px 0;
+  }
+`;