[Fix/#62] QA 반영 (#64)

* fix: admin api 수정 및 어드민 로그인 기능 추가 * fix: 배송가능날짜 어드민 수정 * fix: 태블릿 뷰 정보 수정 * feat: 어드민 로그아웃 기능 추가 * feat: 주문번호 조회 상태에 따른 색상 변경
Roots-and-Fruits · Oct 10, 2024 · a1ced56 · a1ced56
1 parent 9c5762e
commit a1ced56
Show file tree

Hide file tree

Showing 25 changed files with 186 additions and 53 deletions.
diff --git a/public/svg/ic_logout.svg b/public/svg/ic_logout.svg
diff --git a/src/apis/api.ts b/src/apis/api.ts
@@ -30,3 +30,21 @@ export function patch<T>(...args: Parameters<typeof instance.patch>) {
 export function del<T>(...args: Parameters<typeof instance.delete>) {
   return instance.delete<T>(...args);
 }
+
+export function adminPost<T>(...args: Parameters<typeof adminInstance.post>) {
+  return adminInstance.post<T>(...args);
+}
+
+export function adminPut<T>(...args: Parameters<typeof adminInstance.put>) {
+  return adminInstance.put<T>(...args);
+}
+
+export function adminPatch<T>(...args: Parameters<typeof adminInstance.patch>) {
+  return adminInstance.patch<T>(...args);
+}
+
+export function adminDelete<T>(
+  ...args: Parameters<typeof adminInstance.delete>
+) {
+  return adminInstance.delete<T>(...args);
+}
diff --git a/src/apis/domains/admin/useDeleteProduct.ts b/src/apis/domains/admin/useDeleteProduct.ts
@@ -1,4 +1,4 @@
-import { del } from "@apis/api";
+import { adminDelete } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ErrorResponse, MutateResponseType } from "@types";
@@ -7,7 +7,7 @@ const deleteProduct = async (
   productIdList: number[]
 ): Promise<MutateResponseType> => {
   try {
-    const response = await del<MutateResponseType>(`api/v1/product`, {
+    const response = await adminDelete<MutateResponseType>(`api/v1/product`, {
       data: productIdList,
     });
     return response.data;

diff --git a/src/apis/domains/admin/usePatchDeliveryDate.ts b/src/apis/domains/admin/usePatchDeliveryDate.ts
@@ -1,11 +1,11 @@
-import { patch } from "@apis/api";
+import { adminPatch } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ErrorResponse, MutateResponseType } from "@types";
 
-const patchDeliveryDate = async (date: number): Promise<MutateResponseType> => {
+const patchDeliveryDate = async (date: string): Promise<MutateResponseType> => {
   try {
-    const response = await patch<MutateResponseType>(
+    const response = await adminPatch<MutateResponseType>(
       `api/v1/delivery/${date.toString()}`
     );
     return response.data;
@@ -19,7 +19,7 @@ const patchDeliveryDate = async (date: number): Promise<MutateResponseType> => {
 export const usePatchDeliveryDate = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (date: number) => patchDeliveryDate(date),
+    mutationFn: (date: string) => patchDeliveryDate(date),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.DELIVERY_DATE] });
     },

diff --git a/src/apis/domains/admin/usePatchDeliveryShipped.ts b/src/apis/domains/admin/usePatchDeliveryShipped.ts
@@ -1,4 +1,4 @@
-import { patch } from "@apis/api";
+import { adminPatch } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ErrorResponse, MutateResponseType } from "@types";
@@ -7,7 +7,7 @@ const patchDeliveryShipped = async (
   orderNumberList: number[]
 ): Promise<MutateResponseType> => {
   try {
-    const response = await patch<MutateResponseType>(
+    const response = await adminPatch<MutateResponseType>(
       `api/v1/delivery/shipped`,
       orderNumberList
     );

diff --git a/src/apis/domains/admin/usePatchProduct.ts b/src/apis/domains/admin/usePatchProduct.ts
@@ -1,11 +1,11 @@
-import { patch } from "@apis/api";
+import { adminPatch } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ErrorResponse, MutateResponseType } from "@types";
 
 const patchProduct = async (productId: number): Promise<MutateResponseType> => {
   try {
-    const response = await patch<MutateResponseType>(
+    const response = await adminPatch<MutateResponseType>(
       `api/v1/product/${productId.toString()}`
     );
     return response.data;

diff --git a/src/apis/domains/admin/usePostAdminLogin.ts b/src/apis/domains/admin/usePostAdminLogin.ts
@@ -1,4 +1,4 @@
-import { post } from "@apis/api";
+import { adminPost } from "@apis/api";
 import { useMutation } from "@tanstack/react-query";
 import { ErrorResponse, CodeResponseType } from "@types";
 import { useNavigate } from "react-router-dom";
@@ -12,7 +12,7 @@ const postAdminLogin = async (
   loginData: LoginDataType
 ): Promise<CodeResponseType> => {
   try {
-    const response = await post<CodeResponseType>(
+    const response = await adminPost<CodeResponseType>(
       `/api/v1/admin/authenticate`,
       loginData
     );
@@ -30,7 +30,7 @@ export const usePostAdminLogin = () => {
     mutationFn: (loginData: LoginDataType) => postAdminLogin(loginData),
     onSuccess: (data) => {
       if (data.code === "success") {
-        localStorage.setItem("accessToken", data.code);
+        localStorage.setItem("accessToken", data.data.token);
         navigate("/admin");
       }
     },

diff --git a/src/apis/domains/admin/usePostProduct.ts b/src/apis/domains/admin/usePostProduct.ts
@@ -1,4 +1,4 @@
-import { post } from "@apis/api";
+import { adminPost } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ErrorResponse, MutateResponseType, ProductAddType } from "@types";
@@ -7,7 +7,7 @@ const postProduct = async (
   productData: ProductAddType
 ): Promise<MutateResponseType> => {
   try {
-    const response = await post<MutateResponseType>(
+    const response = await adminPost<MutateResponseType>(
       `api/v1/product`,
       productData
     );

diff --git a/src/apis/domains/orderCheck/usePatchPayCancel.ts b/src/apis/domains/orderCheck/usePatchPayCancel.ts
@@ -1,12 +1,13 @@
-import { patch } from "@apis/api";
-import { useMutation } from "@tanstack/react-query";
+import { adminPatch } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { MutateResponseType } from "@types";
 
 const patchPayCancel = async (
   orderNumber: number
 ): Promise<MutateResponseType | null> => {
   try {
-    const response = await patch<MutateResponseType>(
+    const response = await adminPatch<MutateResponseType>(
       `api/v1/order/cancel/${orderNumber}`
     );
     return response.data;
@@ -16,7 +17,13 @@ const patchPayCancel = async (
 };
 
 export const usePatchPayCancel = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (orderNumber: number) => patchPayCancel(orderNumber),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.RECENT_ORDER_NUMBER],
+      });
+    },
   });
 };
diff --git a/src/apis/domains/orderCheck/usePatchPayComplete.ts b/src/apis/domains/orderCheck/usePatchPayComplete.ts
@@ -1,12 +1,13 @@
-import { patch } from "@apis/api";
-import { useMutation } from "@tanstack/react-query";
+import { adminPatch } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { MutateResponseType } from "@types";
 
 const patchPayComplete = async (
   orderNumber: number
 ): Promise<MutateResponseType | null> => {
   try {
-    const response = await patch<MutateResponseType>(
+    const response = await adminPatch<MutateResponseType>(
       `api/v1/order/pay/${orderNumber}`
     );
     return response.data;
@@ -16,8 +17,13 @@ const patchPayComplete = async (
 };
 
 export const usePatchPayComplete = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (orderNumber: number) => patchPayComplete(orderNumber),
-    onSuccess: () => {},
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.RECENT_ORDER_NUMBER],
+      });
+    },
   });
 };
diff --git a/src/assets/svg/IcLogout.tsx b/src/assets/svg/IcLogout.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+const SvgIcLogout = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 25"
+    {...props}
+  >
+    <mask
+      id="ic_logout_svg__a"
+      width={25}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="#D9D9D9" d="M.172.53h24v24h-24z" />
+    </mask>
+    <g mask="url(#ic_logout_svg__a)">
+      <path
+        fill="#1C1B1F"
+        d="M5.172 21.53q-.825 0-1.413-.588a1.93 1.93 0 0 1-.587-1.412v-14q0-.825.587-1.413a1.93 1.93 0 0 1 1.413-.587h7v2h-7v14h7v2zm11-4-1.375-1.45 2.55-2.55H9.172v-2h8.175l-2.55-2.55 1.375-1.45 5 5z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcLogout;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -9,6 +9,7 @@ export { default as IcComplete } from "./IcComplete";
 export { default as IcDelete } from "./IcDelete";
 export { default as IcDownload } from "./IcDownload";
 export { default as IcFix } from "./IcFix";
+export { default as IcLogout } from "./IcLogout";
 export { default as IcMainCharacter } from "./IcMainCharacter";
 export { default as IcMinus } from "./IcMinus";
 export { default as IcPlus } from "./IcPlus";

diff --git a/src/pages/Admin/page/AdminPage/AdminPage.style.ts b/src/pages/Admin/page/AdminPage/AdminPage.style.ts
@@ -42,6 +42,23 @@ export const activeTabButtonStyle = (theme: Theme) => css`
   color: ${theme.color.white};
 `;
 
+export const logoutButton = (theme: Theme) => css`
+  width: 100%;
+  ${flexGenerator()};
+  margin-top: auto;
+  margin-bottom: 2rem;
+  ${theme.font["subhead-m-18"]}
+
+  cursor: pointer;
+
+  &:hover {
+    color: ${theme.color.orange};
+    path {
+      fill: ${theme.color.orange};
+    }
+  }
+`;
+
 export const pageLayout = () => css`
   width: calc(100vw - 20rem);
   padding: 5rem 10rem;

diff --git a/src/pages/Admin/page/AdminPage/AdminPage.tsx b/src/pages/Admin/page/AdminPage/AdminPage.tsx
@@ -1,13 +1,15 @@
 import {
   activeTabButtonStyle,
   AdminLayout,
+  logoutButton,
   pageLayout,
   tabButtonStyle,
   tabTextStyle,
   tapLayoutStyle,
 } from "./AdminPage.style";
 import { useNavigate, useParams } from "react-router-dom";
 import { OrderCheck, ProductCheck, DeliveryCheck } from "..";
+import { IcLogout } from "@svg";
 
 const Admin = () => {
   const { tab = "order" } = useParams<{ tab: string }>();
@@ -19,6 +21,11 @@ const Admin = () => {
     navigate(`/admin/${event.currentTarget.name}`);
   };
 
+  const handleLogoutClick = (): void => {
+    localStorage.removeItem("accessToken");
+    navigate("/admin/login");
+  };
+
   return (
     <div css={AdminLayout}>
       <div css={tapLayoutStyle}>
@@ -44,6 +51,11 @@ const Admin = () => {
         >
           배송 가능 날짜
         </button>
+
+        <div css={logoutButton} onClick={handleLogoutClick}>
+          <IcLogout width={36} />
+          <span>로그아웃</span>
+        </div>
       </div>
 
       <div css={pageLayout}>

diff --git a/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx b/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx
@@ -13,23 +13,24 @@ import { usePatchDeliveryDate } from "@apis/domains/admin/usePatchDeliveryDate";
 const DeliveryCheck = () => {
   const { data: currentDeliveryDate, isSuccess } = useFetchDeliveryDate();
   const { mutate } = usePatchDeliveryDate();
-  const [deliveryDate, setDeliveryDate] = useState(0);
+  const [deliveryDate, setDeliveryDate] = useState("");
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.target.value);
-
-    if (value > 1) {
-      setDeliveryDate(value);
-    }
+    const value = e.target.value;
+    setDeliveryDate(value);
   };
 
   const handleButtonClick = () => {
-    mutate(deliveryDate);
+    if (Number(deliveryDate) > 1) {
+      mutate(deliveryDate);
+    } else {
+      alert("최소 2일 이상으로 설정해주세요.");
+    }
   };
 
   useEffect(() => {
     if (isSuccess && currentDeliveryDate) {
-      setDeliveryDate(currentDeliveryDate);
+      setDeliveryDate(currentDeliveryDate.toString());
     }
   }, [currentDeliveryDate, isSuccess]);
 
@@ -58,7 +59,7 @@ const DeliveryCheck = () => {
         </div>
         <p css={deliveryDateTitleStyle}>일</p>
         <div css={wrapper}>
-          {currentDeliveryDate !== deliveryDate && (
+          {currentDeliveryDate?.toString() !== deliveryDate && (
             <Button variant="fill" onClick={handleButtonClick}>
               저장
             </Button>

diff --git a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts
@@ -25,6 +25,15 @@ export const blackSpan = (theme: Theme) => css`
   ${theme.font["orderCheck-36"]}
 `;
 
+export const statusStyle = (statusStyle: string) => (theme: Theme) =>
+  css`
+    color: ${statusStyle === "결제완료"
+      ? theme.color.green
+      : statusStyle === "결제취소"
+      ? theme.color.red
+      : theme.color.orange};
+  `;
+
 export const buttonWrapper = css`
   ${flexGenerator("row", "space-between", "center")};
   width: 100%;