Feat/ScheduleDetail/Error Debugging

Author: AngelaChaejung

src/components/Schedule/ScheduleDetail.jsx

@@ -22,7 +22,6 @@ const ScheduleDetail = () => {
     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"),
         },
@@ -31,14 +30,25 @@ const ScheduleDetail = () => {
         setSchedule(appData.data.data);
       }, []);
   };
+  const time = schedule.time?.split(":", 2).join(":");
+
   // 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(":");
+
+  const numberOfJoiner = schedule.invitees.length;
+  console.log(numberOfJoiner);
+
+  const joinerList = [];
+  for (let i = 0; i < numberOfJoiner; i++) {
+    joinerList.push(
+      <div className="ml-[5px]">{schedule.invitees[i].username}</div>
+    );
+  }
 
   return (
     <div className="bg-[#EDF7FF] h-[734px] width-[375px]">
@@ -59,7 +69,7 @@ const ScheduleDetail = () => {
             />
           </div>
           <div className="flex space-x-3 text-[18px] mt-[-18px] font-light ">
-            <div>{schedule.date}</div> <div> {time}</div>{" "}
+            <div>{schedule.date}</div> <div> {time}</div>
           </div>
           <div className="mt-[28px] font-semibold text-[24px]">
             {schedule.subject}
@@ -70,7 +80,18 @@ const ScheduleDetail = () => {
           </div>
         </div>
         <div className="text-[#12396F]">
-          <ScheduleDetailParticipants />
+          <div>
+            {numberOfJoiner !== 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">
+                  {joinerList}
+                </div>
+              </div>
+            ) : (
+              <div />
+            )}
+          </div>
           <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">

src/components/Schedule/ScheduleDetailParticipants.jsx

@@ -1,43 +1,39 @@
 import axios from "axios";
 import React, { memo, useCallback, useEffect, useState } from "react";
 
-const ScheduleDetailParticipants = () => {
-  const [schedule, setSchedule] = useState([]);
+const ScheduleDetailParticipants = (numberOfJoiner, joinerList) => {
+  // 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");
+  // 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);
+  //     }, []);
+  // };
   // setIndex(id);
   useEffect(() => {
-    fetchTodos();
+    // 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);
+  // console.log(schedule);
+
   return (
     <div>
-      {[schedule.invitees].length !== 1 ? (
+      {numberOfJoiner !== 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} */}
+            {/* {joinerList} */}
           </div>
         </div>
       ) : (

src/components/layout/BottomNavi.jsx

@@ -8,7 +8,7 @@ const BottomNavi = () => {
   const navigate = useNavigate();
   return (
     <div className="relative">
-      <div className="fixed top-[617px] w-[375px] h-[50px] bg-white opacity-80">
+      <div className="fixed bottom-0 min-w-[375px] h-[50px] bg-white opacity-80">
         <div className="flex gap-[77px] pt-[13px] justify-center">
           <div
             onClick={() => {