Merge pull request #36 from haruharuganda/dev

Feat/main #31

Author: AngelaChaejung

src/api/ScheduleApi.jsx

@@ -0,0 +1,13 @@
+import { instance } from "../shared/AxiosInstance";
+
+export const ScheduleApi = {
+  getSccheduleApi: (payload) => {
+    console.log(payload);
+    const data = instance.get(`/users/${payload}/events`);
+    return data;
+  },
+  postScheduleApi: (payload) => {
+    const data = instance.post("/events", payload);
+    return data;
+  },
+};

src/components/Schedule/ScheduleAdd.jsx

@@ -2,19 +2,19 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch } from "react-redux";
-import { __AddSchedule } from "../../redux/modules/ScheduleSlice";
-import { instance } from "../../shared/AxiosInstance";
-import BottomNavi from "../layout/BottomNavi";
+import { useNavigate } from "react-router-dom";
+import { __postSchedule } from "../../redux/modules/ScheduleSlice";
 import TopNavBar from "../layout/TopNavBar";
 import ScheduleModal from "../modal/ScheduleModal";
+import BottomNavi from "../layout/BottomNavi";
 //네비바테스트 후 TopNavBar지워야합니다
 // CSS Modules, react-datepicker-cssmodules.css
 // import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 
 const ScheduleAdd = () => {
   //필요한 변수들
   const [selectedDate, setSelectedDate] = useState();
-  const [selectedColor, setColorSelected] = useState("SORA");
+  const [selectedColor, setColorSelected] = useState("sora");
   const [bgColor, setBgColor] = useState("bg-sora");
   const [subject, setSubject] = useState("");
   const [content, setContent] = useState("");
@@ -24,26 +24,27 @@ const ScheduleAdd = () => {
   const [borderParang, setBorderParang] = useState("border-none");
   const [modalOpen, setModalOpen] = useState(false);
 
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const today = new Date().toISOString().slice(0, 10);
 
   //색상지정시 카드의 백그라운드컬러가 바뀌면서 selectedColor에 값이 입혀진다.
   const eventHandlerSora = () => {
-    setColorSelected("SORA");
+    setColorSelected("sora");
     setBgColor("bg-sora");
     setBorderSora("border-white");
     setBorderNam("border-none");
     setBorderParang("border-none");
   };
   const eventHandlerNam = () => {
-    setColorSelected("NAM");
+    setColorSelected("nam");
     setBgColor("bg-nam");
     setBorderSora("border-none");
     setBorderNam("border-white");
     setBorderParang("border-none");
   };
   const eventHandlerParang = () => {
-    setColorSelected("PARANG");
+    setColorSelected("parang");
     setBgColor("bg-parang");
     setBorderSora("border-none");
     setBorderNam("border-none");
@@ -82,16 +83,17 @@ const ScheduleAdd = () => {
         time: time,
         subject: subject,
         content: content,
-        participantsId: participantss,
+        participantsId: [3],
       };
-      await dispatch(__AddSchedule(newSchedule));
+      await dispatch(__postSchedule(newSchedule));
       setSubject("");
       setContent("");
       setParticipants("");
       setSelectedDate("");
       setBgColor("bg-sora");
       alert("등록이 완료되었습니다!");
       console.log(newSchedule);
+      navigate("/main");
     } else {
       setModalOpen(true);
     }

src/components/Schedule/ScheduleDetail.jsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import kebab from "../../img/kebab.png";
 import BottomNavi from "../layout/BottomNavi";
@@ -8,6 +8,7 @@ import KebabModal from "../modal/KebabButtonModal";
 import ScheduleDetailParticipants from "./ScheduleDetailParticipants";
 
 const ScheduleDetail = () => {
+  const pram = useParams();
   //  모달 노출시키는 여부
   const [modalOpen, setModalOpen] = useState(false);
   const showModalHandler = () => {
@@ -20,24 +21,29 @@ const ScheduleDetail = () => {
   const [schedule, setSchedule] = useState([]);
   const fetchTodos = async () => {
     await axios
-      // .get(`https://eb.jxxhxxx.shop/events-${id}`, {
-      .get("http://localhost:3001/todos", {
+      //.get`https://eb.jxxhxxx.shop/v2/events/5`, {
+      .get(`https://eb.jxxhxxx.shop/v2/events/${id}`, {
+        // .get("http://localhost:3001/todos", {
+
         headers: {
           Authorization: localStorage.getItem("Authorization"),
         },
       })
       .then((appData) => {
-        //useparam으로 id찾는게 가능해지면 data[index]로 처리.
-        setSchedule(appData.data[1]);
+
+        setSchedule(appData.data.data);
       }, []);
   };
+  // const subject = schedule.data.subject;
 
   // const [index, setIndex] = useState("0");
   // setIndex(id);
   useEffect(() => {
     fetchTodos();
   }, [id]);
   console.log(schedule);
+  const time = schedule.time?.split(":", 2).join(":");
+
 
   return (
     <div className="bg-[#EDF7FF] h-[734px] width-[375px]">
@@ -46,7 +52,7 @@ const ScheduleDetail = () => {
         {modalOpen && <KebabModal setModalOpen={setModalOpen} />}
         {/* bg는 유저가 등록시에 선택한 cardColor로   */}
         <div
-          // ${schedule[0].cardColor}
+          // bg-${schedule.data.cardColor}
           className={`h-[250px] bg-${schedule.cardColor} pl-[18px] pt-[71px] pr-[21px] text-white`}
         >
           <div className="flex flex-row-reverse">
@@ -58,13 +64,15 @@ const ScheduleDetail = () => {
             />
           </div>
           <div className="flex space-x-3 text-[18px] mt-[-18px] font-light ">
-            <div>{schedule.date}</div> <div> {schedule.time}</div>{" "}
+            <div>{schedule.date}</div> <div> {time}</div>{" "}
+
           </div>
           <div className="mt-[28px] font-semibold text-[24px]">
             {schedule.subject}
           </div>{" "}
           <div className="place-content-end font-light flex text-[18px] mt-[70px]">
-            D-{schedule.dday}
+            d-
+            {schedule.dday === 0 ? <div>day</div> : <div>{schedule.dday}</div>}
           </div>
         </div>
         <div className="text-[#12396F]">
@@ -77,7 +85,7 @@ const ScheduleDetail = () => {
           </div>
         </div>{" "}
       </div>
-      <BottomNavi />
+      {modalOpen ? false : <BottomNavi />}
     </div>
   );
 };

src/components/Schedule/ScheduleDetailParticipants.jsx

@@ -6,38 +6,51 @@ const ScheduleDetailParticipants = () => {
 
   const fetchTodos = async () => {
     await axios
-      // .get(`https://eb.jxxhxxx.shop/events-${id}`, {
-      .get("http://localhost:3001/todos", {
+
+      .get(`https://eb.jxxhxxx.shop/v2/events/5`, {
+        // .get(`https://eb.jxxhxxx.shop/events/${id}`, {
+        // .get("http://localhost:3001/todos", {
+
         headers: {
           Authorization: localStorage.getItem("Authorization"),
         },
       })
       .then((appData) => {
-        //useparam으로 id찾는게 가능해지면 data[index]로 처리.
-        setSchedule(appData.data[1]);
+
+        setSchedule(appData.data.data);
+        console.log(schedule);
       }, []);
   };
+  // const a = schedule.invitees.length;
 
   // const [index, setIndex] = useState("0");
   // setIndex(id);
   useEffect(() => {
     fetchTodos();
-    // console.log(schedule.joiner.split(","));
-    // console.log(joiners);
   }, []);
+  // console.log(schedule);
+  // console.log(schedule.invitees.length);
+  // console.log(schedule.invitees);
+  // console.log(a.length);
+  const invitees = schedule.invitees;
+  console.log(schedule);
+  console.log(invitees);
   return (
     <div>
-      {schedule.joiner !== "" ? (
+      {schedule.invitees.length !== 1 ? (
         <div className="mt-[30px] h-[98px] ml-[20px]">
           참여자{" "}
           <div className="bg-[#CEE4F8] h-[50px] w-[335px] mt-[20px] p-[15px] shadow flex rounded-lg">
-            {schedule.joiner}
+            {/* {schedule.invitees} */}
           </div>
         </div>
       ) : (
-        false
+        <div />
+
       )}
     </div>
   );
 };
-export default memo(ScheduleDetailParticipants);
+
+export default ScheduleDetailParticipants;
+

src/components/layout/Layout.jsx

@@ -18,8 +18,8 @@ const Container = styled.div`
   top: "calc(50% - 167px/2)";
   -ms-overflow-style: none;
   background-color: #edf7ff;
-
   font-family: Pretendard-Regular;
+ 
   //스크롤창 숨기기
   overflow-y: scroll;
   /* IE and Edge */
@@ -28,6 +28,7 @@ const Container = styled.div`
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
+
   }
   @media screen and (max-width: 768px) {
     width: 375px;

src/components/layout/TopNavBar.jsx

@@ -3,13 +3,14 @@ import searchIcon from "../../img/searchIcon.png";
 import plusIcon from "../../img/plusIcon.png";
 import notifyIcon from "../../img/notifyIcon.png";
 import { useNavigate } from "react-router-dom";
+
 const TopNavBar = () => {
   const navigate = useNavigate();
   return (
-    <div className="relative">
-      <div className="h-[48px] w-screen top-0 fixed bg-white opacity-80 flex ">
-        <div className="h-[48px] w-[217px] text-white bg-textNavy text-[40px] pl-4">
-          GNIMS
+    <div className="fixed">
+      <div className="h-[48px] w-screen absolute bg-white opacity-80 flex  ">
+        <div className="h-[48px] w-[217px] bg-slate-600">
+          GNIMS로고들어갈자리
         </div>
         <img
           className="h-[24px] w-[24px] flex absolute left-[255px] mt-[13px]"

src/components/main/Main.jsx

@@ -4,38 +4,45 @@ import frends from "../../img/Friends.png";
 import Vector from "../../img/Vector.png";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { __getSchedule } from "../../redux/modules/ScheduleSlice";
+import MainScheduleCards from "./MainScheduleCards";
 
 const Main = () => {
-  const navigate = useNavigate;
-  const [profileImg, setProfileImg] = useState("");
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { schedules } = useSelector((state) => state.ScheduleSlice);
+  const [profileImg, setProfileImg] = useState(defaultprofileImg);
   const [nickName, setNickname] = useState("");
   const [email, setEmail] = useState("");
 
   useEffect(() => {
     const getnickName = window.localStorage.getItem("nickname");
     const getprofilImg = window.localStorage.getItem("profileImage");
-    const getEmail = window.localStorage.getItem("nickname");
-
-    if (nickName && getEmail) {
+    const getEmail = window.localStorage.getItem("email");
+    const userId = window.localStorage.getItem("userId");
+    if (getnickName && getEmail) {
+      setNickname(() => getnickName);
       setEmail(() => getEmail);
-      if (getprofilImg === undefined) {
-        setProfileImg(profileImg);
+      if (getprofilImg) {
+        setProfileImg(getprofilImg);
       }
+      dispatch(__getSchedule(userId));
     } else {
-      navigate("/login");
+      navigate(`/login`);
     }
+  }, [dispatch, navigate, email]);
 
-    console.log(getprofilImg);
-  }, []);
-
+  console.log(schedules);
+ 
   return (
-    <div className="container md ">
+    <div className="container md">
       <div className="grid grid-flow-row ml-[20px] mr-[20px]">
         <div className="mt-[78px] w-full h-[80px] bg-[#FFFFFF]">
           <div className="flex flex-row gap-[10px]">
             <div className="p-[10px]">
               <img
-                className="h-[60px] w-[60px]"
+                className="h-[60px] w-[60px]  rounded-full"
                 src={profileImg}
                 alt="프로필이미지"
               />
@@ -47,50 +54,16 @@ const Main = () => {
             </div>
           </div>
         </div>
-        <div className="mt-[28px] rounded-[10px]">
-          <div className=" w-[335px] h-[180px] bg-[#538EDF] rounded-[10px]  pt-[20px] pl-[22px] ">
-            <div className=" text-[#ffff]">
-              <div className="grid grid-flow-row gap-[19px]">
-                <div className="flex flex-row h-[21px] gap-[22px] text-[18px] font-[400]">
-                  <div>23.02.06</div>
-                  <div>오후 6:00</div>
-                </div>
-                <div className="grid grid-flow-row gap-[17px]">
-                  <div className="text-[18px] font-[700]">
-                    <div>선희랑 마라탕 먹으러가기</div>
-                  </div>
-                  <div className="flex flex-row gap-[20px]">
-                    <div className="flex -space-x-5 overflow-hidden">
-                      <div className="flex  rounded-full border-white border-2">
-                        <img
-                          className="inline-block h-[40px] w-[40px] rounded-full ring-2 "
-                          src={profileImg}
-                          alt="프로필이미지"
-                        ></img>
-                      </div>
-                      <div className="flex  rounded-full border-white border-2">
-                        <img
-                          className="h-[40px] w-[40px] inline-block rounded-full ring-2"
-                          src={profileImg}
-                          alt="프로필이미지"
-                        ></img>
-                      </div>
-                      <div className="flex  rounded-full border-white border-2">
-                        <img
-                          className="h-[40px] w-[40px] inline-block rounded-full ring-2"
-                          src={profileImg}
-                          alt="프로필이미지"
-                        ></img>
-                      </div>
-                    </div>
-                    <div className="flex items-center">이재헌님 외 2명</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center h-[40px] w-full rigth-0 ">
-              <div className="text-[#FFFFFF] font-[400] text-[18px]">D-DAY</div>
-            </div>
+        <div>
+          <div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
+            {schedules.map((list) => {
+              return (
+                <MainScheduleCards
+                  key={list.eventId}
+                  schedules={list}
+                />
+              );
+            })}
           </div>
         </div>
       </div>