[Fix/#48] qa 반영 (#49)

* feat: 파비콘 수정 * fix: 주문 금액 합계 주문별로 수정 * design: green 색상 추가 * feat: 관리자 주문조회 페이지 발송완료 버튼 구현 * feat: 엑셀 추츨 기능 추가 * feat: 주문번호 출력 * design: 주문조회 테이블 스타일 수정 * fix: QA반영(라이팅, 금액표기, 테이블 스타일) * feat: 체험/판매 상품 그룹화 * fix: 주문 조회 필터링 오류 수정 * feat: 주문삭제 로직 추가 * feat: 약관 내용 추가
Roots-and-Fruits · Sep 29, 2024 · b782759 · b782759
1 parent 855b340
commit b782759
Show file tree

Hide file tree

Showing 38 changed files with 741 additions and 185 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link
       rel="stylesheet"
       as="style"

diff --git a/package.json b/package.json
@@ -23,7 +23,8 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
     "react-select": "^5.8.1",
-    "react-switch": "^7.0.0"
+    "react-switch": "^7.0.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/svg/ic_close.svg b/public/svg/ic_close.svg
diff --git a/public/svg/ic_delete.svg b/public/svg/ic_delete.svg
diff --git a/public/svg/ic_download.svg b/public/svg/ic_download.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/apis/domains/admin/useFetchOrders.ts b/src/apis/domains/admin/useFetchOrders.ts
@@ -37,7 +37,7 @@ const getOrders = async (query: queryType): Promise<Order[] | null> => {
 
 export const useFetchOrders = (query: queryType) => {
   return useQuery({
-    queryKey: [QUERY_KEY.SAILED_PRODUCT, query],
+    queryKey: [QUERY_KEY.ORDER_LIST, query],
     queryFn: () => getOrders(query),
   });
 };
diff --git a/src/apis/domains/admin/usePatchDeliveryShipped.ts b/src/apis/domains/admin/usePatchDeliveryShipped.ts
@@ -0,0 +1,31 @@
+import { patch } from "@apis/api";
+import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ErrorResponse, MutateResponseType } from "@types";
+
+const patchDeliveryShipped = async (
+  orderNumberList: number[]
+): Promise<MutateResponseType> => {
+  try {
+    const response = await patch<MutateResponseType>(
+      `api/v1/delivery/shipped`,
+      orderNumberList
+    );
+    return response.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    const errorData = errorResponse.response.data;
+    throw errorData;
+  }
+};
+
+export const usePatchDeliveryShipped = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (orderNumberList: number[]) =>
+      patchDeliveryShipped(orderNumberList),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ORDER_LIST] });
+    },
+  });
+};
diff --git a/src/apis/domains/service/usePostOrder.ts b/src/apis/domains/service/usePostOrder.ts
@@ -1,18 +1,18 @@
 import { post } from "@apis/api";
 import { QUERY_KEY } from "@apis/queryKeys/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ErrorResponse, MutateResponseType } from "@types";
+import { ErrorResponse, OrderNumberType } from "@types";
 import { OrderPostDataType } from "src/stores/orderPostData";
 
 const postOrder = async (
   orderPostState: OrderPostDataType
-): Promise<MutateResponseType> => {
+): Promise<number> => {
   try {
-    const response = await post<MutateResponseType>(
+    const response = await post<OrderNumberType>(
       "api/v1/order",
       orderPostState
     );
-    return response.data;
+    return response.data.data;
   } catch (error) {
     const errorResponse = error as ErrorResponse;
     const errorData = errorResponse.response.data;

diff --git a/src/apis/queryKeys/queryKeys.ts b/src/apis/queryKeys/queryKeys.ts
@@ -1,5 +1,6 @@
 export const QUERY_KEY = {
   ORDER_POST: "orderPost",
+  ORDER_LIST: "orderList",
   DELIVERY_DATE: "deliveryDate",
   DELIVERY_DATE_MAX: "deliveryDate",
   PRODUCT_LIST: "productList",

diff --git a/src/assets/svg/IcClose.tsx b/src/assets/svg/IcClose.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+const SvgIcClose = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <mask
+      id="ic_close_svg__a"
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+    </mask>
+    <g mask="url(#ic_close_svg__a)">
+      <path
+        fill="#1C1B1F"
+        d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcClose;
diff --git a/src/assets/svg/IcDelete.tsx b/src/assets/svg/IcDelete.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+const SvgIcDelete = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <mask
+      id="ic_delete_svg__a"
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+    </mask>
+    <g mask="url(#ic_delete_svg__a)">
+      <path
+        fill="#1C1B1F"
+        d="M7 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .824-.587 1.413A1.93 1.93 0 0 1 17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcDelete;
diff --git a/src/assets/svg/IcDownload.tsx b/src/assets/svg/IcDownload.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+const SvgIcDownload = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 17 16"
+    {...props}
+  >
+    <mask
+      id="ic_download_svg__a"
+      width={17}
+      height={16}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="#D9D9D9" d="M.5 0h16v16H.5z" />
+    </mask>
+    <g mask="url(#ic_download_svg__a)">
+      <path
+        fill="#EC6732"
+        d="M8.5 10.667 5.167 7.333l.933-.966L7.834 8.1V2.667h1.333V8.1L10.9 6.367l.934.966zm-4 2.666q-.55 0-.941-.391A1.28 1.28 0 0 1 3.167 12v-2H4.5v2h8v-2h1.334v2q0 .55-.392.942a1.28 1.28 0 0 1-.942.391z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcDownload;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -4,7 +4,10 @@ export { default as IcBack } from "./IcBack";
 export { default as IcCheckbox } from "./IcCheckbox";
 export { default as IcCheckedTrue } from "./IcCheckedTrue";
 export { default as IcClipboardCopy } from "./IcClipboardCopy";
+export { default as IcClose } from "./IcClose";
 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 IcMainCharacter } from "./IcMainCharacter";
 export { default as IcMinus } from "./IcMinus";

diff --git a/src/components/common/Button/Button.style.ts b/src/components/common/Button/Button.style.ts
@@ -53,6 +53,16 @@ export const buttonVariant = {
     color: ${theme.color.white};
     background-color: ${theme.color.orange};
   `,
+  delete: (theme: Theme) => css`
+    width: 100%;
+    height: 3rem;
+
+    border: 1px solid ${theme.color.orange};
+    border-radius: 4px;
+
+    ${theme.font["pretendard-01"]}
+    color: ${theme.color.orange};
+  `,
 };
 
 export const disabledStyle = (theme: Theme) => css`

diff --git a/src/components/common/steps/CheckInfo/CheckInfo.style.ts b/src/components/common/steps/CheckInfo/CheckInfo.style.ts
@@ -24,15 +24,9 @@ export const senderSection = (theme: Theme) => css`
 export const senderSectionLeft = (theme: Theme) => css`
   ${flexGenerator("column", "start", "start")}
   gap: 0.4rem;
-  color: ${theme.color.black};
-
-  span:nth-of-type(1) {
-    ${theme.font["head03-b-15"]}
-  }
-
-  span:nth-of-type(2),
-  span:nth-of-type(3) {
-    ${theme.font["subhead-n-16"]}
+  span {
+    ${theme.font["subhead-n-16"]};
+    color: ${theme.color.black};
   }
 `;
 
@@ -49,65 +43,55 @@ export const receiverListSection = css`
   margin-bottom: 2rem;
 `;
 
-export const orderItemWrapper = (theme: Theme) => css`
-  ${flexGenerator("column", "start", "start")};
-  gap: 0.7rem;
+export const orderItemWrapper = css`
   width: 100%;
-
-  span:nth-of-type(1) {
-    ${theme.font["head03-b-15"]}
-    color: ${theme.color.black};
-  }
 `;
 
 export const orderItemInfoWrapper = (theme: Theme) => css`
   ${flexGenerator("column", "start", "start")};
   gap: 2.5rem;
   width: 100%;
+  margin-top: 1rem;
   padding: 2rem;
   position: relative;
 
   border: 1px solid ${theme.color.midgray2};
   border-radius: 10px;
 
   background-color: ${theme.color.background};
+`;
 
-  div:nth-of-type(1) {
-    ${flexGenerator("column", "start", "start")};
-    gap: 0.4rem;
-    ${theme.font["subhead-n-16"]};
-  }
+export const closeIconStyle = css`
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
 
-  div:nth-of-type(2) {
-    ${flexGenerator("column", "start", "start")};
-    gap: 1rem;
+  width: 2.4rem;
+  height: 2.4rem;
 
-    div:nth-of-type(1) {
-      ${flexGenerator("column", "start", "start")};
-      gap: 0.4rem;
+  cursor: pointer;
+`;
 
-      span {
-        ${theme.font["subhead-n-16"]};
-      }
-    }
+export const infoContainer = (theme: Theme) => css`
+  ${flexGenerator("column", "start", "start")};
+  gap: 0.4rem;
+  span {
+    ${theme.font["subhead-n-16"]};
   }
+`;
 
-  div:nth-of-type(3) {
-    ${flexGenerator("column", "start", "start")};
-    gap: 1rem;
-
-    span:nth-of-type(2) {
-      ${theme.font["subhead-n-16"]};
-    }
+export const editButtonWrapper = (theme: Theme) => css`
+  width: 100%;
+  button {
+    background-color: ${theme.color.background};
   }
 `;
 
 export const productInfoWrapper = css`
   ${flexGenerator("row", "start", "center")}
 `;
 
-export const fixButtonSpanStyle = css`
-  position: absolute;
-  top: 2rem;
-  right: 2rem;
+export const head03Style = (theme: Theme) => css`
+  ${theme.font["head03-b-15"]}
+  color: ${theme.color.black};
 `;