Merge pull request #86 from Team-INSERT/feat/ber

베르실 예약 페이지 API 완성

src/apis/httpClient/httpClient.ts

@@ -170,4 +170,5 @@ export default {
   image: new HttpClient("api/image/save", axiosConfig),
   meal: new HttpClient("api/meal", axiosConfig),
   calender: new HttpClient("api/calender", axiosConfig),
+  reserve: new HttpClient("api/ber", axiosConfig),
 };

src/assets/data/emptyReserve.ts

@@ -0,0 +1,22 @@
+const emptyReserve = {
+  reservedBerNumber: [],
+  berResList: [
+    {
+      id: 0,
+      berNumber: 0,
+      reservation: "2000-03-01",
+      reservationUsersName: "",
+      user: {
+        id: 0,
+        name: "",
+        nickname: "",
+        profileImage: "",
+        grade: 0,
+        class_number: 0,
+        student_number: 0,
+      },
+    },
+  ],
+};
+
+export default emptyReserve;

src/assets/data/index.ts

@@ -4,3 +4,4 @@ export { default as emptyClassLevel } from "./emptyClassLevel";
 export { default as emptyTimetable } from "./emptyTimetable";
 export { default as emptyInputPost } from "./emptyInputPost";
 export { default as emptyMealList } from "./emptyMealList";
+export { default as emptyReserve } from "./emptyReserve";

src/components/atoms/Select.tsx

@@ -10,7 +10,7 @@ interface ISelectProps {
   width?: string;
   handler:
     | React.Dispatch<React.SetStateAction<string>>
-    | ((props: string) => void);
+    | ((props: string | number) => void);
 }
 
 const Select = ({

src/components/common/Aside/JoinCheckBox.tsx

@@ -69,7 +69,7 @@ const CheckButton = styled.button`
     background-color: ${color.content};
 
     &:after {
-      content: "입사 완료";
+      content: "미완성 기능";
     }
   }
 `;

src/constants/key.constant.ts

@@ -8,6 +8,7 @@ const KEY = {
   BAMBOO_ADMIN: "useBambooAdmin",
   MEAL: "useMeal",
   CALENDER: "useCalender",
+  RESERVE: "useReserve",
 } as const;
 
 export default KEY;

src/interfaces/createReserve.interface.ts

@@ -0,0 +1,5 @@
+export default interface ICreateReserve {
+  berNumber: number;
+  reservationTime: string;
+  reservationUsersName: string;
+}

src/interfaces/index.ts

@@ -18,3 +18,6 @@ export type { default as IInputPost } from "./inputPost.interface";
 export type { default as IRecomment } from "./recomment.interface";
 export type { default as ICalender } from "./calender.interface";
 export type { default as IPlan } from "./plan.interface";
+export type { default as IReserve } from "./reserve.interface";
+export type { default as IReserveList } from "./reserveList.interface";
+export type { default as ICreateReserve } from "./createReserve.interface";

src/interfaces/reserve.interface.ts

@@ -0,0 +1,15 @@
+export default interface IReserve {
+  id: number;
+  berNumber: number;
+  reservation: string;
+  reservationUsersName: string;
+  user: {
+    id: number;
+    name: string;
+    nickname: string;
+    profileImage: string;
+    grade: number;
+    class_number: number;
+    student_number: number;
+  };
+}

src/interfaces/reserveList.interface.ts

@@ -0,0 +1,6 @@
+import IReserve from "./reserve.interface";
+
+export default interface IReserveList {
+  reservedBerNumber: Array<number>;
+  berResList: Array<IReserve>;
+}

src/page/reserve/index.tsx

@@ -1,27 +1,59 @@
-import { DesktopIcon } from "@/assets/icons";
 import { Column } from "@/components/Flex";
 import { Aside } from "@/components/common";
-import { flex, font } from "@/styles";
+import { color, flex, font } from "@/styles";
+import { emptyReserve } from "@/assets/data";
+import { IReserveList } from "@/interfaces";
 import React from "react";
+import dayjs from "dayjs";
 import styled from "styled-components";
-import ReserveBox from "./layouts/ReserveBox";
+import { useRecoilValue } from "recoil";
+import { reserveViewTypeStore } from "@/store/reserveViewType.store";
 import ReserveJoinBox from "./layouts/ReserveJoinBox";
+import ReserveCategories from "./layouts/ReserveCategories";
+import ReserveMap from "./layouts/ReserveMap";
+import { useReserveListQuery } from "./services/query.service";
+import ReserveList from "./layouts/ReserveList";
 
 const ReservePage = () => {
+  const reserveViewType = useRecoilValue(reserveViewTypeStore);
+  const [date, setDate] = React.useState(dayjs().format("YYYY-MM-DD"));
+  const [reserve, setReserve] = React.useState<IReserveList>(emptyReserve);
+  const { data, isSuccess, refetch } = useReserveListQuery({ date });
+
+  React.useEffect(() => {
+    refetch();
+  }, [date]);
+
+  React.useEffect(() => {
+    if (isSuccess) setReserve(data);
+  }, [data, isSuccess]);
+
   return (
     <Layout>
       <Container>
-        <Column width="100%" gap="12px">
+        <Column width="100%" gap="20px">
           <Title />
-          <ReserveBox />
-          <ReserveJoinBox />
+          <ReserveCategories />
+          <Column gap="8px">
+            <StyledTitle>조회할 날짜를 입력하세요</StyledTitle>
+            <StyledInputDate
+              type="date"
+              onChange={(e) => setDate(e.target.value)}
+              value={date}
+            />
+          </Column>
+          {reserveViewType === "신청하기" && (
+            <ReservationBox>
+              <ReserveMap reservedList={reserve?.reservedBerNumber} />
+              <ReserveJoinBox date={date} />
+            </ReservationBox>
+          )}
+          {reserveViewType === "목록 보기" && (
+            <ReserveList reserveList={reserve?.berResList} />
+          )}
         </Column>
         <Aside />
       </Container>
-      <ResponsiveBox>
-        <DesktopIcon />
-        <ResponsiveText />
-      </ResponsiveBox>
     </Layout>
   );
 };
@@ -35,10 +67,6 @@ const Container = styled.div`
   width: 76%;
   display: flex;
   gap: 8px;
-
-  @media screen and (max-width: 1136px) {
-    display: none;
-  }
 `;
 
 const Title = styled.span`
@@ -49,21 +77,24 @@ const Title = styled.span`
   }
 `;
 
-const ResponsiveBox = styled.div`
-  height: 70vh;
-  ${flex.COLUMN_CENTER};
+const ReservationBox = styled.div`
+  width: fit-content;
+  height: fit-content;
+  padding: 10px 20px;
+  ${flex.COLUMN};
   gap: 12px;
-  display: none;
+`;
 
-  @media screen and (max-width: 1136px) {
-    display: flex;
-  }
+const StyledInputDate = styled.input`
+  width: fit-content;
+  padding: 6px 16px;
+  ${font.p2};
+  background-color: ${color.white};
 `;
 
-const ResponsiveText = styled.span`
-  &:after {
-    content: "데스크톱 모드로 이용해주세요";
-  }
+const StyledTitle = styled.span`
+  ${font.p2};
+  font-weight: 500;
 `;
 
 export default ReservePage;

src/page/reserve/layouts/ReserveCategories.tsx

@@ -0,0 +1,32 @@
+import { Category } from "@/components/atoms";
+import { reserveViewTypeStore } from "@/store/reserveViewType.store";
+import React from "react";
+import { useRecoilState } from "recoil";
+import styled from "styled-components";
+
+const ReserveCategories = () => {
+  const [checked, setChecked] = useRecoilState(reserveViewTypeStore);
+
+  return (
+    <CategoryBox>
+      {["신청하기", "목록 보기"].map((title) => (
+        <Category
+          key={title}
+          id={title}
+          name="reserve"
+          checked={checked === title}
+          onClick={() => setChecked(title)}
+          label={title}
+        />
+      ))}
+    </CategoryBox>
+  );
+};
+
+const CategoryBox = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+export default ReserveCategories;