Feat/main gnims-project#31. 1차 - main페이지, main detail연결, 백이랑 확인

Author: Ju

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,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { __postSchedule } from "../../redux/modules/ScheduleSlice";
 import TopNavBar from "../layout/TopNavBar";
 import ScheduleModal from "../modal/ScheduleModal";
@@ -12,7 +13,7 @@ import ScheduleModal from "../modal/ScheduleModal";
 const ScheduleAdd = () => {
   //필요한 변수들
   const [selectedDate, setSelectedDate] = useState();
-  const [selectedColor, setColorSelected] = useState("");
+  const [selectedColor, setColorSelected] = useState("sora");
   const [bgColor, setBgColor] = useState("bg-sora");
   const [subject, setSubject] = useState("");
   const [content, setContent] = useState("");
@@ -21,36 +22,27 @@ const ScheduleAdd = () => {
   const [borderNam, setBorderNam] = useState("border-none");
   const [borderParang, setBorderParang] = useState("border-none");
   const [modalOpen, setModalOpen] = useState(false);
-
-  // const [schedules, setSchedules] = useState({
-  //   id: 0,
-  //   cardColor: "",
-  //   date: "",
-  //   time: "",
-  //   subject: "",
-  //   content: "",
-  //   participantsId: "",
-  // });
+  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("PARNG");
+    setColorSelected("parang");
     setBgColor("bg-parang");
     setBorderSora("border-none");
     setBorderNam("border-none");
@@ -87,7 +79,7 @@ const ScheduleAdd = () => {
         time: time,
         subject: subject,
         content: content,
-        participantsId: participantss,
+        participantsId: [3],
       };
       await dispatch(__postSchedule(newSchedule));
       setSubject("");
@@ -97,6 +89,7 @@ const ScheduleAdd = () => {
       setBgColor("bg-sora");
       alert("등록이 완료되었습니다!");
       console.log(newSchedule);
+      navigate("/main");
     } else {
       setModalOpen(true);
     }
@@ -158,7 +151,7 @@ const ScheduleAdd = () => {
               참여자 (우선 Id로 받습니다)
               <input
                 value={participants}
-                onChange={onParticipantsChangeHandler}
+                onChange={() => onParticipantsChangeHandler}
                 placeholder="함께할 친구들을 선택해주세요. (최대 4명)"
                 className="mt-4 shadow 
               hover:bg-sky-100

src/components/Schedule/ScheduleDetail.jsx

@@ -1,59 +1,88 @@
-import React, { useRef, useState } from "react";
+import axios from "axios";
+import React, { memo, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import kebab from "../../img/kebab.png";
+import BottomNavi from "../layout/BottomNavi";
+import TopNavBar from "../layout/TopNavBar";
 import KebabModal from "../modal/KebabButtonModal";
+import ScheduleDetailParticipants from "./ScheduleDetailParticipants";
 
 const ScheduleDetail = () => {
+  const pram = useParams();
   //  모달 노출시키는 여부
   const [modalOpen, setModalOpen] = useState(false);
   const showModalHandler = () => {
     setModalOpen(true);
   };
+  //id구하기
+  const { id } = useParams();
+
+  //데이터베이스를 담을 schedule변수.
+  const [schedule, setSchedule] = useState([]);
+  const fetchTodos = async () => {
+    await axios
+      //.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) => {
+        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]">
-      <div className="h-[48px]">네비바상단영역</div>
+      <TopNavBar />
       <div>
         {modalOpen && <KebabModal setModalOpen={setModalOpen} />}
         {/* bg는 유저가 등록시에 선택한 cardColor로   */}
-        <div className="h-[202px] bg-[#538EDF] pl-[18px] pt-[23px] pr-[21px] text-white">
+        <div
+          // bg-${schedule.data.cardColor}
+          className={`h-[250px] bg-${schedule.cardColor} pl-[18px] pt-[71px] pr-[21px] text-white`}
+        >
           <div className="flex flex-row-reverse">
             <img
-              className="h-[20px] w-[20px] flex "
+              className="h-[20px] flex "
               src={kebab}
               alt="케밥메뉴"
               onClick={showModalHandler}
             />
           </div>
           <div className="flex space-x-3 text-[18px] mt-[-18px] font-light ">
-            <div>23.02.06</div> <div> 오후 6:00</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-Day
+            d-
+            {schedule.dday === 0 ? <div>day</div> : <div>{schedule.dday}</div>}
           </div>
         </div>
         <div className="text-[#12396F]">
-          <div className="mt-[30px] h-[98px] ml-[20px]">
-            참여자{" "}
-            <div className="bg-[#CEE4F8] h-[50px] w-[335px] mt-[20px] p-[15px] shadow flex rounded-lg">
-              본인 포함 4명, 참여자 없으면 아예 뜨지 않습니다
-            </div>
-          </div>
+          <ScheduleDetailParticipants />
           <div className="h-[234px] mt-[30px] mb-[8px] ml-[20px]">
             일정내용{" "}
             <div className="bg-[#CEE4F8] shadow h-[186px] w-[335px] mt-[20px] p-[15px] flex rounded-lg">
-              여기에 내용이 들어갑니다
+              {schedule.content}
             </div>
           </div>
         </div>{" "}
       </div>
-      <div className="h-[50px] bg-white inset-x-0 bottom-0 flex absolute">
-        네비바하단영역
-      </div>
+      {modalOpen ? false : <BottomNavi />}
     </div>
   );
 };
 
-export default ScheduleDetail;
+export default memo(ScheduleDetail);

src/components/Schedule/ScheduleDetailParticipants.jsx

@@ -0,0 +1,49 @@
+import axios from "axios";
+import React, { memo, useCallback, useEffect, useState } from "react";
+
+const ScheduleDetailParticipants = () => {
+  const [schedule, setSchedule] = useState([]);
+
+  const fetchTodos = async () => {
+    await axios
+      .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) => {
+        setSchedule(appData.data.data);
+        console.log(schedule);
+      }, []);
+  };
+  // const a = schedule.invitees.length;
+  // const [index, setIndex] = useState("0");
+  // setIndex(id);
+  useEffect(() => {
+    fetchTodos();
+  }, []);
+  // 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.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.invitees} */}
+          </div>
+        </div>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+};
+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

@@ -6,37 +6,41 @@ import { useNavigate } from "react-router-dom";
 const TopNavBar = () => {
   const navigate = useNavigate();
   return (
-    <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={searchIcon}
-        alt="검색버튼"
-        //navigate 경로는 검색페이지루트가 정해지면 변경하면됩니다
-        onClick={() => {
-          navigate("/login");
-          console.log("검색페이지로이동");
-        }}
-      />
-      <img
-        className="h-[24px] w-[24px] flex absolute left-[293px] mt-[13px]"
-        src={plusIcon}
-        alt="추가버튼"
-        onClick={() => {
-          console.log("스케쥴추가페이지로이동!");
-          navigate("/schedule");
-        }}
-      />
-      <img
-        className="h-[24px] w-[24px] flex absolute left-[331px] mt-[13px]
+    <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={searchIcon}
+          alt="검색버튼"
+          //navigate 경로는 검색페이지루트가 정해지면 변경하면됩니다
+          onClick={() => {
+            navigate("/login");
+            console.log("검색페이지로이동");
+          }}
+        />
+        <img
+          className="h-[24px] w-[24px] flex absolute left-[293px] mt-[13px]"
+          src={plusIcon}
+          alt="추가버튼"
+          onClick={() => {
+            console.log("스케쥴추가페이지로이동!");
+            navigate("/schedule");
+          }}
+        />
+        <img
+          className="h-[24px] w-[24px] flex absolute left-[331px] mt-[13px]
       "
-        src={notifyIcon}
-        alt="알림버튼"
-        onClick={() => {
-          console.log("알림페이지로 이동");
-          navigate("/notification");
-        }}
-      />
+          src={notifyIcon}
+          alt="알림버튼"
+          onClick={() => {
+            console.log("알림페이지로 이동");
+            navigate("/notification");
+          }}
+        />
+      </div>
     </div>
   );
 };