Feat: 일정 등록 custom hook (useScheduleMutation)

src/apis/schdule.ts

@@ -0,0 +1,14 @@
+import { ScheduleData } from "@/types/schedule";
+import { http } from "./http";
+
+export const scheduleRegister = (
+  data: ScheduleData
+) => {
+  try {
+    const response = http.patch("/itemgroup.update", data);
+    return response;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};

src/app/globals.css

@@ -8,6 +8,7 @@
 html,
 body {
   max-width: 100vw;
+  height: calc(100% - 6.5rem);
   background-color: #2B2B2B;
 }
 

src/components/atoms/calendar/Calendar.tsx

@@ -18,7 +18,7 @@ const Calendar = dynamic(() => import('react-calendar'), { ssr: false }); // 지
 export interface HomeCalendarProps {
   mark?: string[];
   setCalendarOpen?: any;
-  value: Date;
+  value?: Date;
   onChange: (date: Date) => void;
 }
 
@@ -32,17 +32,18 @@ export function HomeCalendar({
   const handleDateChange = (selectedDate: any) => {
     if (selectedDate instanceof Date) {
       onChange(selectedDate);
+      setCalendarOpen && setCalendarOpen(false);
     }
   };
 
   const handleDate = (e: React.MouseEvent<HTMLButtonElement>): void => {
     const newValue = new Date();
-    if (e.currentTarget.id === "next") {
+    if (e.currentTarget.id === "next" && value) {
       // 다음달
-      onChange(moment(newValue.setMonth(value.getMonth() + 1, 1)).toDate())
-    } else if (e.currentTarget.id === "prev") {
+      onChange(moment(newValue.setMonth(value?.getMonth() + 1, 1)).toDate())
+    } else if (e.currentTarget.id === "prev" && value) {
       // 저번달
-      onChange(moment(newValue.setMonth(value.getMonth() - 1, 1)).toDate())
+      onChange(moment(newValue.setMonth(value?.getMonth() - 1, 1)).toDate())
     }
   };
 

src/components/molecules/noData/NoData.css

@@ -0,0 +1,21 @@
+.noData {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* padding-top: 3vh; */
+
+  width: 100%;
+  /* margin: 3vh 0; */
+  height: 100%;
+  padding-bottom: 5.5rem;
+}
+
+.noData__img {
+  width: 18%;
+  height: 40%;
+  min-height: 50px;
+  max-height: 80px;
+  min-width: 50px;
+  max-width: 80px;
+}

src/components/molecules/noData/NoData.tsx

@@ -0,0 +1,22 @@
+import { Text } from "@/components/atoms/text";
+import { ICONS } from "@/constants/images";
+import Image from "next/image";
+
+import { COLORS } from "@/styles";
+import "./NoData.css";
+
+export const NoData = ({ title }: { title: string }) => {
+  return(
+    <div className="noData">
+      <Image 
+        src={ICONS.nodata}
+        alt="no_data"
+        className="noData__img"
+      />
+      <Text
+        color={COLORS.white}
+        fontSize="1rem"
+      >{title}</Text>
+    </div>
+  )
+}

src/components/molecules/noData/index.ts

@@ -0,0 +1 @@
+export { NoData } from "./NoData";

src/components/molecules/scheduleBox/ScheduleBox.css

@@ -29,4 +29,105 @@
 .scheduleBox__attend {
     display: flex;
     justify-content: flex-end;
+}
+
+/* SkeletonScheduleBox */
+
+@keyframes loading {
+    0% {
+      transform: translateX(0);
+    }
+    50%,
+    100% {
+      transform: translateX(460px);
+    }
+}
+
+.skeleton-item {
+    width: 100%;
+    margin: 1rem 0;
+    /* height: 54%; */
+    /* height: 100%; */
+}
+
+
+.skeleton-info {
+    width: 100%;
+    /* height: 100%; */
+    margin: 0 auto;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    background-color: #404040;
+    border-radius: 50px;
+}
+
+
+.skeleton-name {
+    width: 15%;
+    height: 25px;
+    background-color: #5E5E5E;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-name::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E);
+    animation: loading 2s infinite linear;
+}
+
+.skeleton-email {
+    width: 40%;
+    height: 25px;
+    background-color: #5E5E5E;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+
+.skeleton-email::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E);
+    animation: loading 2s infinite linear;
+}
+
+.skeleton-attend {
+    width: 15%;
+    height: 25px;
+    background-color: #5E5E5E;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-attend::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    background: linear-gradient(to right, #5E5E5E, #666666, #5E5E5E);
+    animation: loading 2s infinite linear;
+}
+
+
+.element {
+    overflow: hidden;
+    position: relative;
 }

src/components/molecules/scheduleBox/SkeletonScheduleBox.tsx

@@ -0,0 +1,13 @@
+import "./ScheduleBox.css";
+
+export const SkeletonScheduleBox = () => {
+  return (
+    <div className="skeleton-item">
+      <div className="skeleton-info element">
+          <div className="skeleton-name"></div>
+          <div className="skeleton-email"></div>
+          <div className="skeleton-attend"></div>
+      </div>
+    </div>
+  )
+}

src/constants/images.ts

@@ -14,6 +14,7 @@ export const ICONS = {
   down: require("@/assets/images/ic_down.png"),
   search: require("@/assets/images/ic_search.png"),
   calendar: require("@/assets/images/ic_calendar.png"),
+  clock: require("@/assets/images/ic_clock.png"),
   exchange: require("@/assets/images/ic_exchange.png"),
   memberProfileNone: require("@/assets/images/ic_member_profile_none.png"),
   manager: require("@/assets/images/ic_manager.png"),
@@ -23,6 +24,7 @@ export const ICONS = {
   arrowRight: require("@/assets/images/ic_arrow_right.png"),
   back: require("@/assets/images/ic_back.png"),
   filter: require("@/assets/images/ic_filter.png"),
+  nodata: require("@/assets/images/ic_nodata.png"),
 
   floatingPlus: require("@/assets/images/Plus.png"),
   floatingLock: require("@/assets/images/ic_lock.png"),

src/features/home/SetHome.tsx

@@ -22,13 +22,14 @@ const SetHome = () => {
 
     return (
         <ScheduleContext.Provider value={{ value, onChange: setValue }}>
-            <div>
+            <div style={{ 'height': '100%', 'paddingBottom': "4.25rem" }}>
                 <ClubHeader color={true} />
                 <HomeHeader 
                     mark={mark}
                 />
                 <HomeDateWrapper 
                     dateList={data}
+                    isLoading={isLoading}
                 />
             </div>
             <Nav />

src/features/home/calendar/SetCalendarRegister.tsx

@@ -1,14 +1,54 @@
 import { Button } from "@/components/atoms/button";
 import { Wrapper } from "@/components/organisms/Wrapper";
+import { useScheduleMutation } from "@/hook/schedule/useScheduleMutation";
+import { ScheduleData } from "@/types/schedule";
+import { usePathname } from "next/navigation";
+import { useForm } from "react-hook-form";
 import CalendarRegister from "./components/CalendarRegister";
 import { CALENDAR_BTN } from "./constants/const";
 
 const SetCalendarRegister = () => {
+    const path = usePathname();
+
+    // 일정 등록 입력 폼 관리
+    const {
+        register,
+        formState: {errors},
+        handleSubmit,
+        setValue,
+    } = useForm<ScheduleData>({
+        mode: "onSubmit",
+        defaultValues: {
+            scheduleName: "",
+            scheduleDate: "",
+            scheduleTime: "",
+            schedulePlace: "",
+            scheduleContent: "",
+        },
+    });
+
+    const { mutate } = useScheduleMutation({
+        clubId: +path.split("/")[1],
+        userId: 6
+    });
+
+    const onsubmit = (data: ScheduleData) => {
+        console.log(data);
+        mutate(data);
+    };
+
     return (
-        <Wrapper isHeader={true}>
-            <CalendarRegister />
-            <Button>{CALENDAR_BTN.register}</Button>
-        </Wrapper>
+        <form onSubmit={handleSubmit(onsubmit)}>
+            <Wrapper isHeader={true}>
+                <CalendarRegister 
+                    register={register}
+                    setValue={setValue}
+                />
+                <Button 
+                    type="submit"
+                >{CALENDAR_BTN.register}</Button>
+            </Wrapper>
+        </form>
     )
 };
 

src/features/home/calendar/components/Calendar.css

@@ -176,6 +176,12 @@
     color: #fff;
 }
 
+.calendarRegister__time {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
 .calendarRegister__dateInput {
     position: relative;
     cursor: pointer;
@@ -209,7 +215,7 @@
 .calendarRegister__background__calendar {
     position: absolute;
     left: 20vw;
-    top: calc(7.5rem + 32px);
+    top: calc(11rem);
 }
 
 /* CalendarPeriod */