Merge pull request #342 from LikeLion-at-DGU/dev

🚀 Deploy

src/apis/calendar.js

@@ -40,6 +40,7 @@ export const patchPersonal = async (personalID, isCompleted, date) => {
       completed: isCompleted,
     });
     console.log(res);
+    return res;
   } catch (err) {
     throw err;
   }
@@ -55,6 +56,7 @@ export const patchRoutine = async (routineID, isCompleted, date) => {
       }
     );
     console.log(res);
+    return res;
   } catch (err) {
     throw err;
   }

src/components/CustomCalendar/CustomCalendar.jsx

@@ -4,12 +4,12 @@ import { useState, useEffect, useRef } from "react";
 import { format, addHours } from "date-fns";
 import * as S from "./style";
 import { getMonthCalendar } from "../../apis/calendar";
-import { todoStatus, day } from "@/stores/calendar";
+import { todoStatus, day, starMonth } from "@/stores/calendar";
 
 export const CustomCalendar = ({ setWeekPosition }) => {
   const [value, setValue] = useState(new Date());
   const [month, setMonth] = useState(format(new Date(), "yyyy-MM"));
-  const [data, setData] = useState([]);
+  const [data, setData] = useRecoilState(starMonth);
   const setDay = useSetRecoilState(day);
   const setStatus = useSetRecoilState(todoStatus);
   const calendarRef = useRef(null);
@@ -24,8 +24,11 @@ export const CustomCalendar = ({ setWeekPosition }) => {
     try {
       const res = await getMonthCalendar(month);
       if (res.completed_days.length > 0) {
-        setData(res.completed_days);
-        console.log(res.completed_days);
+        res.completed_days.forEach((star) => {
+          data.add(star);
+        });
+        setData(data);
+        console.log(data);
       }
     } catch (err) {
       setData([]);
@@ -34,10 +37,12 @@ export const CustomCalendar = ({ setWeekPosition }) => {
 
   useEffect(() => {
     getData();
+    handleDateChange(value);
   }, [month]);
 
   // 새로운 onChange 핸들러
   const handleDateChange = (date) => {
+    console.log(date);
     setValue(date);
     setStatus(true); // 날짜 클릭 시 상태를 true로 설정
     setTimeout(() => {
@@ -79,7 +84,7 @@ export const CustomCalendar = ({ setWeekPosition }) => {
             // 한국 시간대 적용
             const zonedDate = addHours(date, 9);
             const formattedDate = format(zonedDate, "yyyy-MM-dd");
-            if (data.includes(formattedDate)) {
+            if (data.has(formattedDate)) {
               return "highlight";
             }
           }

src/components/Todo/Item.jsx

@@ -1,14 +1,15 @@
-import React, { useEffect } from "react";
 import * as S from "./style";
 import NON_CHECK_IMG from "@/assets/images/non-check.svg";
 import CHECK_IMG from "@/assets/images/check.svg";
+import React, { useEffect } from "react";
+import { useRecoilState } from "recoil";
 import { patchPersonal, patchRoutine } from "@/apis/calendar";
 import { nowItems } from "@/stores/todo";
-import { useRecoilState } from "recoil";
+import { starMonth } from "@/stores/calendar";
 
 export const Item = ({ item, isRoutine, date }) => {
   const [checkItems, setCheckItems] = useRecoilState(nowItems);
-
+  const [star, setStar] = useRecoilState(starMonth);
   // 컴포넌트가 마운트될 때 completed 상태를 Recoil 상태에 반영
   useEffect(() => {
     const isItemChecked = checkItems.some(
@@ -32,7 +33,13 @@ export const Item = ({ item, isRoutine, date }) => {
       } else {
         res = await patchPersonal(id, currentStatus, date);
       }
-
+      if (res.data.today_completed) {
+        star.add(date);
+        setStar(star);
+      } else {
+        star.delete(date);
+        setStar(star);
+      }
       // 상태 업데이트
       setCheckItems((prevItems) => {
         const itemIndex = prevItems.findIndex(

src/stores/calendar.js

@@ -14,3 +14,8 @@ export const pMonth = atom({
   key: "pMonth",
   default: "",
 });
+
+export const starMonth = atom({
+  key: "starMonth",
+  default: new Set(),
+});