✅ Test: 날짜별 일정 불러오기 테스트

src/apis/calendar.js

@@ -8,3 +8,12 @@ export const getMonthCalendar = async (month) => {
     throw err;
   }
 };
+
+export const getTodayData = async (day) => {
+  try {
+    const res = await instance.get(`/api/calendar/daily/${day}/`);
+    return res.data;
+  } catch (err) {
+    throw err;
+  }
+};

src/components/Todo/Todo.jsx

@@ -0,0 +1,36 @@
+import * as S from "./style";
+import NON_CHECK_IMG from "@/assets/images/non-check.svg";
+import { useRecoilState } from "recoil";
+import { routines, schedules } from "@/stores/todo";
+import { useEffect } from "react";
+import { getTodayData } from "@/apis/calendar";
+// 날짜 받아오기
+export const Todo = ({ day }) => {
+  const [routineData, setRoutineData] = useRecoilState(routines);
+  const [scheduleData, setScheduleData] = useRecoilState(schedules);
+  const fetchData = async () => {
+    const res = await getTodayData("2024-08-03");
+    console.log(res);
+  };
+  const submitData = async () => {};
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <S.TodoLayout>
+      <S.ListFrame>
+        <S.CheckFrame>
+          <S.ButtonView onClick={submitData}>
+            <S.ImgView src={NON_CHECK_IMG} />
+          </S.ButtonView>
+        </S.CheckFrame>
+        <S.TextFrame>
+          <S.TitleView>타이틀변수</S.TitleView>
+          <S.SubTitleView>서브타이틀변수</S.SubTitleView>
+        </S.TextFrame>
+      </S.ListFrame>
+    </S.TodoLayout>
+  );
+};
+// List 수만큼 돌리기

src/components/Todo/style.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const TodoLayout = styled.div`
+  width: 90%;
+  min-height: 250px;
+  border-radius: 15px;
+  padding: 1rem;
+  border: 1px solid #c4d9e2;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const ListFrame = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  height: 50px;
+`;
+
+export const CheckFrame = styled.div``;
+
+export const ButtonView = styled.button``;
+
+export const ImgView = styled.img``;
+
+export const TextFrame = styled.div``;
+
+export const TitleView = styled.p`
+  font-family: AppleSDGothicNeoL00;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const SubTitleView = styled.p`
+  font-family: AppleSDGothicNeoM00;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const PlusBtnFrame = styled.div``;

src/pages/TestPage/Test.jsx

@@ -0,0 +1,5 @@
+import { Todo } from "@/components/Todo/Todo";
+
+export const Test = () => {
+  return <Todo />;
+};

src/router.jsx

@@ -14,6 +14,7 @@ import SearchPage from "./pages/SearchPage/SearchPage";
 import MyPage from "./pages/MyPage/MyPage";
 import SubCategoryPage from "./pages/SubCategoryPage/SubCategoryPage";
 import SharePage from "@/pages/Share/Share";
+import { Test } from "./pages/TestPage/Test";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -75,6 +76,11 @@ const router = createBrowserRouter([
       {
         path: "/share",
         element: <SharePage />,
+        loader: loader,
+      },
+      {
+        path: "/test",
+        element: <Test />,
       },
     ],
     // errorElement: <NotFound />,

src/stores/todo.js

@@ -0,0 +1,11 @@
+import { atom } from "recoil";
+
+export const routines = atom({
+  key: "routines",
+  default: [],
+});
+
+export const schedules = atom({
+  key: "schedules",
+  default: [],
+});