[Deploy/#44] 로그인 기능 추가 (#45)

src/App.tsx

@@ -14,8 +14,7 @@ const allRoutes = [
   ...homeRoutes,
   ...orderInfoRoutes,
   ...experienceOrderInfoRoutes,
-      ...adminRoutes,
-
+  ...adminRoutes,
 ];
 const router = createBrowserRouter([...allRoutes]);
 

src/apis/domains/service/useFetchDeliveryDate.ts

@@ -0,0 +1,21 @@
+import { get } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { ApiResponseType } from "@types";
+
+const getDeliveryDate = async (): Promise<number | null> => {
+  try {
+    const response = await get<ApiResponseType<number>>("api/v1/delivery/max");
+    return response.data.data;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+};
+
+export const useFetchDeliveryDate = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.DELIVERY_DATE_MAX],
+    queryFn: () => getDeliveryDate(),
+  });
+};

src/apis/queryKeys/queryKeys.ts

@@ -1,6 +1,7 @@
 export const QUERY_KEY = {
   ORDER_POST: "orderPost",
   DELIVERY_DATE: "deliveryDate",
+  DELIVERY_DATE_MAX: "deliveryDate",
   PRODUCT_LIST: "productList",
   PRODUCT_LIST_ALL: "productListAll",
   SAILED_PRODUCT: "sailedProduct",

src/components/common/CustomCalendar/CustomCalendar.tsx

@@ -1,14 +1,19 @@
 import "react-calendar/dist/Calendar.css";
 import Calendar, { CalendarProps } from "react-calendar";
 import { useState } from "react";
+import dayjs from "dayjs";
+import { useFetchDeliveryDate } from "@apis/domains/admin/useFetchDeliveryDate";
 
 interface CustomCalendarProps {
   onDateChange: (date: string) => void;
 }
 
 const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
+  const today = dayjs();
   const [date, setDate] = useState<Date | null>(new Date());
 
+  const { data: deliveryDate } = useFetchDeliveryDate();
+
   const formatDay = (_locale: string | undefined, date: Date): string =>
     date.getDate().toString();
 
@@ -98,6 +103,9 @@ const CustomCalendar = ({ onDateChange }: CustomCalendarProps) => {
         onChange={handleDateChange}
         value={date}
         formatDay={formatDay}
+        locale="ko-KR"
+        minDate={today.add(3, "day").toDate()}
+        maxDate={today.add(deliveryDate ?? 14, "day").toDate()}
       />
     </div>
   );

src/constants/routePath.ts

@@ -1,4 +1,5 @@
 const productHomePages = {
+  HOME: "/",
   PRODUCT_HOME: "/product",
 };
 

src/routes/homeRoutes.tsx

@@ -1,8 +1,13 @@
 import { routePath } from "@constants";
 import { ExperienceHome, ProductHome } from "@pages/index";
 import { RouteType } from "@types";
+import { Navigate } from "react-router-dom";
 
 const homeRoutes: RouteType[] = [
+  {
+    path: routePath.HOME,
+    element: <Navigate to={routePath.PRODUCT_HOME} />,
+  },
   {
     path: routePath.PRODUCT_HOME,
     element: <ProductHome />,