fix : router error 수정

DSM-PICK · Mar 14, 2024 · 4bda389 · 4bda389
2 parents 701b83e + 92cda3f
commit 4bda389
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 96 deletions.
diff --git a/src/apis/outList/list.ts b/src/apis/outList/list.ts
@@ -480,7 +480,7 @@ export const AddSchedule = () => {
     mutationFn: async (param: addSchedule) => {
       try {
         const response = await instance.post(
-          "/schedule/month",
+          "/schedule/create",
           {
             name: param.name,
             date: param.date,

diff --git a/src/app/WeekendMeals/page.tsx b/src/app/WeekendMeals/page.tsx
@@ -119,13 +119,12 @@ const WeekendMeals: React.FC<classmealProps> = ({ grade, classNumber }) => {
               </div>
             </div>
             <div className=" overflow-scroll scrollbar-hide flex flex-col gap-3">
-              {/*컴포넌트는 만들었으나 api연결할때 오는 값보고 넣을 예정 */}
               {checkMeal?.map((item, index) => (
                 <Classmeals
                   key={index}
                   number={setStudentNum(item)}
                   name={item.name}
-                  state={item.status || "NO"} // status가 없는 경우 기본값 설정
+                  state={item.status || "NO"}
                 />
               ))}
             </div>
@@ -143,7 +142,7 @@ const WeekendMeals: React.FC<classmealProps> = ({ grade, classNumber }) => {
                   key={index}
                   number={setStudentNum(item)}
                   name={item.name}
-                  state={item.status || "QUIET"} // status가 없는 경우 기본값 설정
+                  state={item.status || "QUIET"}
                 />
               ))}
             </div>

diff --git a/src/app/components/common/Button.tsx b/src/app/components/common/Button.tsx
@@ -64,7 +64,7 @@ const Button: React.FC<ButtonProp> = ({
       case "large":
         return "w-50 h-12 text-Button-L";
       case "medium":
-        return "w-42 h-13 text-Button-M";
+        return "w-42 min-w-20 h-13 text-Button-M";
       case "small":
         return "w-38 h-12 text-Button-S";
       case "extraSmall":

diff --git a/src/app/components/common/calendar/schedule/page.tsx b/src/app/components/common/calendar/schedule/page.tsx
@@ -1,38 +1,31 @@
 "use client";
-import Calendarmold from "react-calendar";
-import "../style/style.css";
+import React, { useEffect, useState } from "react";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import "../style/style.css";
+import Calendar from "react-calendar";
 import { GetSchdule } from "@/apis/outList/list";
+import Modal from "../../modal/page";
 
-interface calendarProp {
+interface CalendarProps {
   onClick: (date: Date) => void;
   onChange: (date: Date) => void;
 }
 
-interface data {
+interface Schedule {
   id: string;
   event_name: string;
   month: number;
-  day: number;
+  day: number; // day 필드를 문자열로 변경
 }
 
-const ScheduleCalendar = ({ onClick, onChange }: calendarProp) => {
+const ScheduleCalendar: React.FC<CalendarProps> = ({ onClick, onChange }) => {
   const [modal, setModal] = useState<boolean>(false);
   const [selectDate, setSelectDate] = useState<Date | null>(null);
-  const [monthdata, setData] = useState<data[]>([]);
+  const [monthData, setMonthData] = useState<Schedule[]>([]);
   const { mutate: scheduleMutate } = GetSchdule();
 
   const currentYear = new Date().getFullYear();
 
-  const handleModalCancel = () => {
-    setModal(false);
-  };
-
-  const handleModalConfirm = () => {
-    setModal(false);
-  };
-
   const scheduleData = async (selectDate: Date | null) => {
     const formattedDate = moment(selectDate).format("MMMM");
 
@@ -45,7 +38,7 @@ const ScheduleCalendar = ({ onClick, onChange }: calendarProp) => {
         {
           onSuccess: (data) => {
             console.log("success");
-            setData(data);
+            setMonthData(data);
             console.log(data);
           },
           onError: (error) => {
@@ -65,54 +58,74 @@ const ScheduleCalendar = ({ onClick, onChange }: calendarProp) => {
     scheduleData(currentDate);
   }, []);
 
+  const handleModalCancel = () => {
+    setModal(false);
+  };
+
+  const handleModalConfirm = () => {
+    setModal(false);
+    scheduleData(selectDate); // 모달에서 일정이 추가되었으므로 스케줄 데이터를 다시 불러옴
+  };
+
   return (
-    <Calendarmold
-      prev2Label={null}
-      onClickMonth={(date) => {
-        onChange(date);
-      }}
-      onActiveStartDateChange={({ activeStartDate }) =>
-        scheduleData(activeStartDate)
-      }
-      onClickDay={(date) => {
-        setSelectDate(date);
-        setModal(true);
-        onClick(date);
-      }}
-      next2Label={null}
-      calendarType="gregory"
-      formatDay={(locale, date) =>
-        date.toLocaleString("en", { day: "numeric" })
-      }
-      tileContent={({ date }) => {
-        const formattedDate = moment(date).format("YYYY-MM-DD");
+    <>
+      <Calendar
+        prev2Label={null}
+        onClickMonth={(date) => {
+          onChange(date);
+        }}
+        onActiveStartDateChange={({ activeStartDate }) =>
+          scheduleData(activeStartDate)
+        }
+        onClickDay={(date) => {
+          setSelectDate(date);
+          setModal(true);
+          onClick(date);
+        }}
+        next2Label={null}
+        calendarType="gregory"
+        formatDay={(locale, date) =>
+          date.toLocaleString("en", { day: "numeric" })
+        }
+        tileContent={({ date }) => {
+          const formattedDate = moment(date).format("M-D");
 
-        if (monthdata) {
-          const dateData = monthdata.filter(
-            (item) =>
-              `${currentYear.toString()}-${item.month}-${item.day}` ===
-              formattedDate
-          );
-          if (dateData.length > 0) {
-            return (
-              <>
-                {dateData.map((item, index) => (
-                  <div
-                    key={index}
-                    className="bg-white flex px-2 py-1 shadow-md rounded gap-2 w-full"
-                  >
-                    <div className="h-auto rounded w-0.5 bg-primary-200"></div>
-                    <div className="text-black text-Button-ES">
-                      {item.event_name}
-                    </div>
-                  </div>
-                ))}
-              </>
+          if (monthData) {
+            const dateData = monthData.filter(
+              (item) => formattedDate === `${item.month}-${item.day}`
             );
+
+            if (dateData.length > 0) {
+              return (
+                <>
+                  {dateData.map((item, index) => (
+                    <div
+                      key={index}
+                      className="bg-white flex px-2 py-1 shadow-md rounded gap-2 w-full"
+                    >
+                      <div className="h-auto rounded w-0.5 bg-primary-200"></div>
+                      <div className="text-black text-Button-ES">
+                        {item.event_name}
+                      </div>
+                    </div>
+                  ))}
+                </>
+              );
+            }
           }
-        }
-      }}
-    />
+        }}
+      />
+      {modal && (
+        <Modal
+          date={selectDate}
+          type="addSchedule"
+          heading1="새로운 일정"
+          buttonMessage="추가"
+          onCancel={handleModalCancel}
+          onConfirm={handleModalConfirm}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -69,9 +69,9 @@ const Main = () => {
   }, []);
 
   return (
-    <div className="bg-primary-1200 h-full">
+    <div className="w-full h-full">
       <Header />
-      <div className=" 3xl:px-100 py-20 px-72 flex flex-col gap-17">
+      <div className="bg-primary-1200  3xl:px-100 mxl:px-72 py-20 px-44 min-w-max flex flex-col gap-17">
         <div className=" flex flex-col gap-5">
           <div className=" font-sans text-heading5 text-neutral-300">
             {today.getMonth() + 1}월 {today.getDate()}일 {getWeekDay()}요일

diff --git a/src/app/notice/page.tsx b/src/app/notice/page.tsx
@@ -64,17 +64,6 @@ const Schedule = () => {
         </div>
         <ScheduleCalendar onClick={handleChangeTeacher} onChange={() => {}} />
         <div className="absolute top-40 text-heading4">일정 관리</div>
-        {modal && (
-          <Modal
-            date={selectedDate}
-            type="addSchedule"
-            heading1="새로운 일정"
-            buttonMessage="추가"
-            onCancel={handleModalCancel}
-            onConfirm={handleModalConfirm}
-            scheduleData={scheduleData} // scheduleData를 Modal 컴포넌트로 전달
-          />
-        )}
       </div>
     </div>
   );

diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx
@@ -199,7 +199,7 @@ const OutAccept = () => {
           <Link href="/main">홈</Link> &gt; 외출 수락
         </div>
         <div className="flex justify-between">
-          <div className="flex font-sans text-heading4 text-gray-900 gap-4 items-center">
+          <div className="flex font-sans mxl:text-heading4 text-heading6-M text-gray-900 gap-4 items-center">
             외출 수락
             <div className="text-neutral-200 text-heading5">
               {getFullToday()}

diff --git a/src/app/outList/page.tsx b/src/app/outList/page.tsx
@@ -85,14 +85,14 @@ const OutList = () => {
   return (
     <div className="h-dvh">
       <Header />
-      <div className="flex flex-col gap-7 px-100 py-16 h-90%">
-        <div className="text-neutral-200 text-sub-title3-B">
+      <div className="flex flex-col gap-7 min-w-max mxl:px-100 px-64 py-16 h-90%">
+        <div className=" text-neutral-200 text-sub-title3-B">
           <Link href="/main">홈</Link> &gt; 외출자 목록
         </div>
         <div className="flex justify-between">
-          <div className="flex font-sans text-heading4 text-gray-900 gap-4 items-center">
+          <div className="flex font-sans  mxl:text-heading4 text-heading6-M text-gray-900 gap-4 items-center">
             외출자 목록
-            <div className="text-neutral-200 text-heading5">
+            <div className="text-neutral-200 mxl:text-heading5 text-heading6-M">
               {getFullToday()}
             </div>
           </div>
@@ -102,11 +102,9 @@ const OutList = () => {
               secondChildren="조기귀가"
               onClick={onClickTab}
             />
-            <Button
-              colorType="ghost"
-              buttonSize="small"
-              onClick={reason}
-            >사유보기</Button>
+            <Button colorType="ghost" buttonSize="small" onClick={reason}>
+              사유보기
+            </Button>
           </div>
         </div>
         <div className="w-auto rounded-xl bg-primary-1200 h-full px-10 py-10">

diff --git a/src/app/outList/reason/page.tsx b/src/app/outList/reason/page.tsx
@@ -86,9 +86,9 @@ const Reason = () => {
     setSelectedTab(tab);
     if (tab) {
       setSelectedTab(tab);
-      ReturnHomeData();
-    } else {
       Outdata();
+    } else {
+      ReturnHomeData();
     }
   };
 
@@ -105,11 +105,11 @@ const Reason = () => {
         <div className="text-neutral-200 text-sub-title3-B">
           <Link href="/main">홈</Link> &gt;
           <Link href="/outList">외출자 목록</Link> &gt;
-          {selectedTab ? "조기 귀가 사유" : "외출자 사유"}
+          {selectedTab ? "외출자 사유" : " 조기 귀가 사유"}
         </div>
         <div className="flex justify-between">
           <div className="flex font-sans text-heading4 text-gray-900 gap-4 items-center">
-            {selectedTab ? "조기 귀가 사유" : "외출자 사유"}
+            {selectedTab ? "외출자 사유" : "조기 귀가 사유"}
             <div className="text-neutral-200 text-heading5">
               {getFullToday()}
             </div>
@@ -125,22 +125,22 @@ const Reason = () => {
         <div className="w-auto rounded-xl bg-primary-1200 h-full px-10 py-10 overflow-y-scroll scrollbar-hide">
           {selectedTab ? (
             <div className="flex flex-wrap gap-5 justify-between">
-              {homeData.map((item, index) => (
+              {data.map((item, index) => (
                 <ReasonList
                   key={index}
                   time={item.start_time}
+                  endTime={item.end_time}
                   student={student(item)}
                   why={item.reason}
                 />
               ))}
             </div>
           ) : (
             <div className="flex flex-wrap gap-5 justify-between">
-              {data.map((item, index) => (
+              {homeData.map((item, index) => (
                 <ReasonList
                   key={index}
                   time={item.start_time}
-                  endTime={item.end_time}
                   student={student(item)}
                   why={item.reason}
                 />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -334,6 +334,7 @@ const config: Config = {
       },
       screens: {
         "3xl": "1850px",
+        mxl: "1650px",
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -334,6 +334,7 @@ const config: Config = { @@
           },
           screens: {
             "3xl": "1850px",
+            mxl: "1650px",
           },
         },
       },
@@ Expand Down @@