Merge branch 'develop'

src/App.tsx

@@ -4,19 +4,29 @@ import {
   homeRoutes,
   orderInfoRoutes,
   adminRoutes,
+  authRoutes,
+  orderCheckRoutes,
 } from "@routes";
 import GlobalStyle from "@styles/global";
 import theme from "@styles/theme";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import PrivateRoute from "./routes/PrivateRoute/PrivateRoute";
 
 const allRoutes = [
   ...homeRoutes,
   ...orderInfoRoutes,
   ...experienceOrderInfoRoutes,
-  ...adminRoutes,
+  ...authRoutes,
+  ...orderCheckRoutes,
 ];
-const router = createBrowserRouter([...allRoutes]);
+
+const protectedRoutes = adminRoutes.map((route) => ({
+  ...route,
+  element: <PrivateRoute element={route.element} />,
+}));
+
+const router = createBrowserRouter([...allRoutes, ...protectedRoutes]);
 
 function App() {
   const queryClient = new QueryClient();

src/apis/api.ts

@@ -4,6 +4,13 @@ export const instance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_URL,
 });
 
+export const adminInstance = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+  headers: {
+    Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+  },
+});
+
 export function get<T>(...args: Parameters<typeof instance.get>) {
   return instance.get<T>(...args);
 }

src/apis/domains/admin/usePostAdminLogin.ts

@@ -0,0 +1,38 @@
+import { post } from "@apis/api";
+import { useMutation } from "@tanstack/react-query";
+import { ErrorResponse, CodeResponseType } from "@types";
+import { useNavigate } from "react-router-dom";
+
+interface LoginDataType {
+  username: string;
+  password: string;
+}
+
+const postAdminLogin = async (
+  loginData: LoginDataType
+): Promise<CodeResponseType> => {
+  try {
+    const response = await post<CodeResponseType>(
+      `/api/v1/admin/authenticate`,
+      loginData
+    );
+    return response.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    const errorData = errorResponse.response.data;
+    throw errorData;
+  }
+};
+
+export const usePostAdminLogin = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (loginData: LoginDataType) => postAdminLogin(loginData),
+    onSuccess: (data) => {
+      if (data.code === "success") {
+        localStorage.setItem("accessToken", data.code);
+        navigate("/admin");
+      }
+    },
+  });
+};

src/apis/domains/orderCheck/useFetchOrderInfoWithOrderNumber.ts

@@ -0,0 +1,25 @@
+import { get } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { ApiResponseType, OrderInfoData } from "@types";
+
+const getOrderInfo = async (
+  orderNumber: number
+): Promise<OrderInfoData | null> => {
+  try {
+    const response = await get<ApiResponseType<OrderInfoData>>(
+      `api/v1/order/${orderNumber}`
+    );
+    return response.data.data;
+  } catch {
+    return null;
+  }
+};
+
+export const useFetchOrderInfoWithOrderNumber = (orderNumber: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.ORDER_INFO_WITH_ORDER_NUMBER],
+    queryFn: () => getOrderInfo(orderNumber),
+    enabled: false,
+  });
+};

src/apis/domains/orderCheck/useFetchRecentOrderNumber.ts

@@ -0,0 +1,22 @@
+import { get } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { ApiResponseType, RecentOrderType } from "@types";
+
+const getRecentOrderNumber = async (): Promise<RecentOrderType[] | null> => {
+  try {
+    const response = await get<ApiResponseType<RecentOrderType[]>>(
+      "api/v1/order/recent"
+    );
+    return response.data.data;
+  } catch {
+    return null;
+  }
+};
+
+export const useFetchRecentOrderNumber = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.RECENT_ORDER_NUMBER],
+    queryFn: () => getRecentOrderNumber(),
+  });
+};

src/apis/domains/orderCheck/usePatchPayCancel.ts

@@ -0,0 +1,22 @@
+import { patch } from "@apis/api";
+import { useMutation } from "@tanstack/react-query";
+import { MutateResponseType } from "@types";
+
+const patchPayCancel = async (
+  orderNumber: number
+): Promise<MutateResponseType | null> => {
+  try {
+    const response = await patch<MutateResponseType>(
+      `api/v1/order/cancel/${orderNumber}`
+    );
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const usePatchPayCancel = () => {
+  return useMutation({
+    mutationFn: (orderNumber: number) => patchPayCancel(orderNumber),
+  });
+};

src/apis/domains/orderCheck/usePatchPayComplete.ts

@@ -0,0 +1,23 @@
+import { patch } from "@apis/api";
+import { useMutation } from "@tanstack/react-query";
+import { MutateResponseType } from "@types";
+
+const patchPayComplete = async (
+  orderNumber: number
+): Promise<MutateResponseType | null> => {
+  try {
+    const response = await patch<MutateResponseType>(
+      `api/v1/order/pay/${orderNumber}`
+    );
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const usePatchPayComplete = () => {
+  return useMutation({
+    mutationFn: (orderNumber: number) => patchPayComplete(orderNumber),
+    onSuccess: () => {},
+  });
+};

src/apis/queryKeys/queryKeys.ts

@@ -6,4 +6,6 @@ export const QUERY_KEY = {
   PRODUCT_LIST: "productList",
   PRODUCT_LIST_ALL: "productListAll",
   SAILED_PRODUCT: "sailedProduct",
+  ORDER_INFO_WITH_ORDER_NUMBER: "orderInfoWithOrderNumber",
+  RECENT_ORDER_NUMBER: "recentOrderNumber",
 } as const;

src/assets/svg/IcRefresh.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+const SvgIcRefresh = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path
+      fill="#EC6732"
+      d="M16 32q-6.7 0-11.35-4.65T0 16 4.65 4.65 16 0q3.45 0 6.6 1.425T28 5.5V0h4v14H18v-4h8.4a11.67 11.67 0 0 0-4.375-4.4Q19.25 4 16 4q-5 0-8.5 3.5T4 16t3.5 8.5T16 28q3.85 0 6.95-2.2T27.3 20h4.2q-1.4 5.3-5.7 8.65T16 32"
+    />
+  </svg>
+);
+export default SvgIcRefresh;

src/assets/svg/index.ts

@@ -12,3 +12,4 @@ export { default as IcFix } from "./IcFix";
 export { default as IcMainCharacter } from "./IcMainCharacter";
 export { default as IcMinus } from "./IcMinus";
 export { default as IcPlus } from "./IcPlus";
+export { default as IcRefresh } from "./IcRefresh";

src/components/common/steps/CheckInfo/CheckInfo.tsx

@@ -1,5 +1,5 @@
 import { Button, Header, ProgressBar } from "@components";
-import { ErrorType, StepProps } from "@types";
+import { StepProps } from "@types";
 import { buttonSectionStyle, layoutStyle } from "@pages/orderInfo/styles";
 import {
   checkSpanText,
@@ -28,6 +28,7 @@ const CheckInfo = ({ onNext }: StepProps) => {
     handleAddReceiver,
     setOrderNumberState,
     handleDeleteClick,
+    resetOrderPostData,
   } = useOrderPostDataChange();
   const { mutateAsync } = usePostOrder();
   const receivers = orderPostDataState.recipientInfo;
@@ -53,9 +54,13 @@ const CheckInfo = ({ onNext }: StepProps) => {
       .then((data) => {
         setOrderNumberState(data);
         onNext();
+        resetOrderPostData();
       })
-      .catch((error: ErrorType) => {
-        alert(error.message);
+      .catch(() => {
+        alert(
+          `필수 입력칸을 작성하지 않으셨습니다. \n혹은 이미 주문을 완료하지 않으셨나요?`
+        );
+        navigate(`/${category}`);
       });
   };
 

src/constants/routePath.ts

@@ -22,10 +22,20 @@ const adminPages = {
   ADMIN_TAB: "/admin/:tab",
 };
 
+const authPages = {
+  ADMIN_LOGIN: "/admin/login",
+};
+
+const orderCheckPages = {
+  ORDER_CHECK: "/order-check",
+};
+
 export default {
   ...productHomePages,
   ...experienceHomePages,
   ...orderInfoPages,
   ...experienceProductOrderInfoPages,
   ...adminPages,
+  ...authPages,
+  ...orderCheckPages,
 };

src/hooks/useOrderPostDataChange.ts

@@ -108,6 +108,16 @@ export const useOrderPostDataChange = () => {
     }
   };
 
+  const resetOrderPostData = () => {
+    setOrderPostDataState({
+      senderName: "",
+      senderPhone: "",
+      isPersonalInfoConsent: false,
+      isMarketingConsent: false,
+      recipientInfo: [],
+    });
+  };
+
   return {
     orderPostDataState,
     currentRecipientIndex,
@@ -119,5 +129,6 @@ export const useOrderPostDataChange = () => {
     orderNumberState,
     setOrderNumberState,
     handleDeleteClick,
+    resetOrderPostData,
   };
 };

src/pages/Admin/components/OrderTable/OrderTable.style.ts

@@ -64,14 +64,10 @@ export const tableStyle = (theme: Theme) => css`
   }
 
   /* 상품명 */
-  /* th:nth-of-type(4),
+  th:nth-of-type(4),
   td:nth-of-type(4) {
-  } */
-
-  /* 주소 */
-  /* th:nth-of-type(9),
-  td:nth-of-type(9) {
-  } */
+    min-width: 20rem;
+  }
 `;
 
 export const checkboxStyle = css`

src/pages/Admin/components/OrderTable/OrderTable.tsx

@@ -159,7 +159,11 @@ const OrderTable = ({ orders }: OrderTableProps) => {
                 </td>
                 <td>{order.orderReceivedDate}</td>
                 <td>{order.orderNumber}</td>
-                <td>{...order.productList}</td>
+                <td>
+                  {order.productList.map((product) => {
+                    return <div>{product}</div>;
+                  })}
+                </td>
                 <td>{order.senderName}</td>
                 <td>{order.senderPhone}</td>
                 <td>{order.recipientName}</td>

src/pages/Admin/page/AdminLogin/AdminLogin.style.ts

@@ -0,0 +1,27 @@
+import { Theme } from "@emotion/react";
+import { css } from "@emotion/react";
+import { flexGenerator } from "@styles/generator";
+
+export const loginLayout = css`
+  width: 100%;
+  height: 100dvh;
+  ${flexGenerator()};
+  padding: 0 3rem;
+`;
+
+export const formStyle = css`
+  width: 100%;
+  ${flexGenerator("column", "flex-start", "flex-start")}
+`;
+
+export const inputWrapper = css`
+  width: 100%;
+  ${flexGenerator("column", "flex-start", "flex-start")}
+  gap: 0.8rem;
+
+  margin-bottom: 2rem;
+`;
+
+export const labelStyle = (theme: Theme) => css`
+  ${theme.font["head06-b-16"]};
+`;