Merge pull request #13 from GDSC-snowflowerthon/feat/#8

[#8] home api 연결

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.5",
     "date-fns": "^3.2.0",
     "iconify": "^1.4.0",
     "jotai": "^2.6.1",

src/api/axios.jsx

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL,
+});
+
+export default instance;

src/components/Calendar/Cells.jsx

@@ -12,15 +12,14 @@ import { useEffect, useRef, useState } from "react";
 import COLORS from "../../styles/colors";
 import { useAtom } from "jotai";
 import { modalState } from "../../atoms/modalState";
-
+import axios from "../../api/axios";
+import { DateConverter } from "../utils/DateConverter";
 const Cells = ({ currentMonth, selectedDate, onDateClick, schedule }) => {
   const monthStart = startOfMonth(currentMonth);
   const monthEnd = endOfMonth(monthStart);
   const startDate = startOfWeek(monthStart);
   const endDate = endOfWeek(monthEnd);
   const [data, setData] = useState([]);
-  const [selectday, setSelectday] = useState(new Date());
-  const [state, setState] = useState(false);
   const statedayRef = useRef("");
   const [isOpen, setIsOpen] = useAtom(modalState);
 
@@ -30,17 +29,26 @@ const Cells = ({ currentMonth, selectedDate, onDateClick, schedule }) => {
   let formatDate = "";
 
   useEffect(() => {
-    schedule.map((el) => {
-      setData((prev) => [el.day, ...prev]);
-    });
-  }, [schedule]);
+    axios
+      .get(`users/home/1/2024/${currentMonth.getMonth() + 1}`)
+      .then((res) => {
+        console.log(res.data.result.monthlyTumbles);
+        setData(res.data.result.monthlyTumbles);
+      });
+  }, []);
+
+  const SetColorDate = (targetDate) => {
+    const isDateInData = data.some((item) => item.createdDate === targetDate);
+    return isDateInData;
+  };
 
   while (day <= endDate) {
     for (let i = 0; i < 7; i++) {
       formatDate = format(day, "d");
       const cloneDay = day;
       statedayRef.current = day.toDateString();
       const string = cloneDay.toDateString();
+      const calDate = DateConverter(string);
       days.push(
         <Container>
           <CellBox
@@ -56,7 +64,9 @@ const Cells = ({ currentMonth, selectedDate, onDateClick, schedule }) => {
                     }`}
             onClick={() => {
               onDateClick(cloneDay);
-              setIsOpen(!isOpen);
+              if (!SetColorDate(calDate)) {
+                setIsOpen(!isOpen);
+              }
             }}
           >
             <Square>
@@ -66,7 +76,7 @@ const Cells = ({ currentMonth, selectedDate, onDateClick, schedule }) => {
                     ? "text not-valid"
                     : ""
                 }`}
-                use={true}
+                use={SetColorDate(calDate)}
               />
             </Square>
             <span

src/components/Diary.jsx

@@ -2,28 +2,26 @@ import styled from "styled-components";
 import COLORS from "../styles/colors";
 import { useState } from "react";
 
-const Diary = ({ date }) => {
-  const [sizeState, setSizeState] = useState([true, false, false]);
-
+const Diary = ({ menu, Tsize, discountPrice }) => {
   const size = ["S", "M", "L"];
 
   return (
     <DiaryWrapper>
       <Box>
         <InfoTitleBox>메뉴</InfoTitleBox>
-        <InfoDetailBox>자바칩 프라푸치노</InfoDetailBox>
+        <InfoDetailBox>{menu}</InfoDetailBox>
       </Box>
       <Box>
         <InfoTitleBox>사이즈</InfoTitleBox>
         <SizeBox>
           {size.map((el, idx) => {
-            return <SizeBtn state={sizeState[idx]}>{el}</SizeBtn>;
+            return <SizeBtn state={size[idx] === Tsize}>{el}</SizeBtn>;
           })}
         </SizeBox>
       </Box>
       <Box>
         <InfoTitleBox>할인 금액</InfoTitleBox>
-        <InfoMoneyBox>원</InfoMoneyBox>
+        <InfoMoneyBox>{discountPrice}원</InfoMoneyBox>
       </Box>
     </DiaryWrapper>
   );

src/components/utils/DateConverter.jsx

@@ -0,0 +1,10 @@
+export const DateConverter = (dateString) => {
+  const originalDate = new Date(dateString);
+  const formattedDate = `${originalDate.getFullYear()}-${(
+    originalDate.getMonth() + 1
+  )
+    .toString()
+    .padStart(2, "0")}-${originalDate.getDate().toString().padStart(2, "0")}`;
+
+  return formattedDate;
+};