Merge pull request #296 from UPbrella/develop

Deploy: Dev
UPbrella · Dec 26, 2023 · beeec57 · beeec57
2 parents 7545885 + 03fbc1c
commit beeec57
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 147 deletions.
diff --git a/src/api/formApi.ts b/src/api/formApi.ts
@@ -40,8 +40,8 @@ export const getReturnFormLockData = async (storeId: number, salt: string, signa
 
 // 우산 대여 신청
 export const postRent = async (params: TRentDetail) => {
-  const data = await $axios.post<TApiResponse<TRentPassword>>(API.RENT(), params);
-  return data;
+  const res = await $axios.post<TApiResponse<TRentPassword | null>>(API.RENT(), params);
+  return res.data;
 };
 
 // 사용자가 빌린 우산 조회

diff --git a/src/components/atoms/Form/RentModalAccount/index.tsx b/src/components/atoms/Form/RentModalAccount/index.tsx
@@ -7,32 +7,20 @@ export type RentModalAccountProps = {
   conditionReport?: string;
   storeId: number;
   onClickPostBtn: () => void;
-  setLockNumber: (value: string) => void;
-  lockNumber: string;
-  setIsOpenDepositModal: (value: boolean) => void;
 };
 
 const RentModalAccount = ({
   handleCloseDepositModal,
   storeName,
   umbrellaUuid,
   onClickPostBtn,
-  setLockNumber,
-  lockNumber,
-  setIsOpenDepositModal,
 }: RentModalAccountProps) => {
   const BANK_NAME = "카카오뱅크";
   const ACCOUNT_NUMBER = "7979-86-64503";
   const ACCOUNT_NAME = "이지우";
 
   const copyAccountToClipboard = () => {
     onClickPostBtn(); // 보관함이 있는 경우 이 시점에 비밀번호 설정
-    setLockNumber("1234"); // TODO 비밀번호 API 통신
-
-    if (lockNumber) {
-      setIsOpenDepositModal(true);
-    }
-
     handleCloseDepositModal(); // (1) 보증금 입금 안내 모달 close
     navigator.clipboard.writeText(BANK_NAME + " " + ACCOUNT_NUMBER);
   };

diff --git a/src/components/atoms/Form/RentModalStorageIssue/index.tsx b/src/components/atoms/Form/RentModalStorageIssue/index.tsx
@@ -6,6 +6,7 @@ type RentModalStorageIssueProps = {
   setIsOpenLockPwModal: (value: boolean) => void;
 };
 
+// TODO: 새로운 비밀번호 요청 API ?
 const RentModalStorageIssue = ({
   setIsOpenStorageIssue,
   setLockNumber,
@@ -21,13 +22,13 @@ const RentModalStorageIssue = ({
 
   return (
     <div className="w-full p-10">
-      <div className="text-18 font-bold leading-24 text-black mb-16">불편을 드려 죄송합니다 😢</div>
-      <div className="text-14 leading-20 text-gray-700 mb-16">
+      <div className="mb-16 font-bold text-black text-18 leading-24">불편을 드려 죄송합니다 😢</div>
+      <div className="mb-16 text-gray-700 text-14 leading-20">
         보관함 화면 좌측 상단에 표기된 4자리 숫자를 입력해주시면 다른 비밀번호를 안내드릴게요!
       </div>
       <div className="flex h-48">
         <input
-          className="w-full rounded-8 border border-gray-300 text-black text-15 leading-22 placeholder:text-gray-400 pl-12 mr-4 focus:border-gray-600 focus:outline-none"
+          className="w-full pl-12 mr-4 text-black border border-gray-300 rounded-8 text-15 leading-22 placeholder:text-gray-400 focus:border-gray-600 focus:outline-none"
           maxLength={4}
           placeholder="4자리 숫자를 입력해주세요"
           onChange={(e) => setNumber(e.target.value)}

diff --git a/src/components/pages/admin/umbrella/UI/UmbrellaExcelButton.tsx b/src/components/pages/admin/umbrella/UI/UmbrellaExcelButton.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@mui/material";
+import { useGetUmbrellas } from "@/hooks/queries/umbrellaQueries";
+import {
+  UMBRELLA_TABLE,
+  downloadUmbrellaDataExcel,
+} from "@/components/pages/admin/umbrella/helper";
+
+type TProps = {
+  storeId: number;
+  totalCount?: number;
+  isLoading: boolean;
+  storeName: string;
+};
+
+const UmbrellaExcelButton = ({ storeId, totalCount, isLoading, storeName }: TProps) => {
+  const { data: umbrellaRes } = useGetUmbrellas({
+    page: 0,
+    storeId,
+    size: isLoading ? undefined : totalCount,
+  });
+
+  // 한글 매핑
+  const onClickExcelBtn = () => {
+    if (umbrellaRes)
+      downloadUmbrellaDataExcel(
+        storeName,
+        umbrellaRes.map((e) => ({
+          [UMBRELLA_TABLE.id.label]: e.id,
+          [UMBRELLA_TABLE.historyId.label]: e.historyId ?? "-",
+          [UMBRELLA_TABLE.storeMetaId.label]: e.storeMetaId,
+          [UMBRELLA_TABLE.uuid.label]: e.uuid,
+          [UMBRELLA_TABLE.rentable.label]: e.rentable ? "O" : "X",
+          [UMBRELLA_TABLE.etc.label]: e.etc,
+        }))
+      );
+  };
+
+  return (
+    <Button
+      disabled={!umbrellaRes}
+      size="large"
+      className="!mb-16 w-[180px]"
+      variant="outlined"
+      onClick={onClickExcelBtn}
+    >
+      우산 목록 다운로드
+    </Button>
+  );
+};
+
+export default UmbrellaExcelButton;
diff --git a/src/components/pages/admin/umbrella/UI/UmbrellaModal.tsx b/src/components/pages/admin/umbrella/UI/UmbrellaModal.tsx
@@ -31,9 +31,21 @@ type TProps = {
   storeRes: TAdminStoreDetail[];
   umbrellaRes?: TUmbrellaRes;
   storeId: number;
+  paginationParams: {
+    storeId: number;
+    page: number;
+    size: number;
+  };
 };
 
-const UmbrellaModal = ({ isOpen, handleClose, storeRes, umbrellaRes, storeId }: TProps) => {
+const UmbrellaModal = ({
+  isOpen,
+  handleClose,
+  storeRes,
+  umbrellaRes,
+  storeId,
+  paginationParams,
+}: TProps) => {
   // client
   const [isReadOnly, setIsReadOnly] = useState(!!umbrellaRes);
   const [umbrellaData, setUmbrellaData] = useState(convertUmbrellaData(umbrellaRes));
@@ -91,10 +103,17 @@ const UmbrellaModal = ({ isOpen, handleClose, storeRes, umbrellaRes, storeId }:
           onSuccess: () => {
             handleClose();
             Promise.all([
-              queryClient.invalidateQueries([...UMBRELLAS_QUERY_KEYS.getUmbrellas(storeFilter)]),
-              queryClient.invalidateQueries([
-                ...UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeFilter),
-              ]),
+              queryClient.invalidateQueries(
+                UMBRELLAS_QUERY_KEYS.getUmbrellas({
+                  page: paginationParams.page,
+                  size: paginationParams.size,
+                  storeId: 0,
+                })
+              ),
+              queryClient.invalidateQueries(UMBRELLAS_QUERY_KEYS.getUmbrellas(paginationParams)),
+              queryClient.invalidateQueries(
+                UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeFilter)
+              ),
             ]);
           },
         }
@@ -117,10 +136,15 @@ const UmbrellaModal = ({ isOpen, handleClose, storeRes, umbrellaRes, storeId }:
         onSuccess: () => {
           handleClose();
           Promise.all([
-            queryClient.invalidateQueries([...UMBRELLAS_QUERY_KEYS.getUmbrellas(storeFilter)]),
-            queryClient.invalidateQueries([
-              ...UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeFilter),
-            ]),
+            queryClient.invalidateQueries(
+              UMBRELLAS_QUERY_KEYS.getUmbrellas({
+                page: paginationParams.page,
+                size: paginationParams.size,
+                storeId: 0,
+              })
+            ),
+            queryClient.invalidateQueries(UMBRELLAS_QUERY_KEYS.getUmbrellas(paginationParams)),
+            queryClient.invalidateQueries(UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeFilter)),
           ]);
         },
       }

diff --git a/src/components/pages/admin/umbrella/UmbrellaAdminPage.tsx b/src/components/pages/admin/umbrella/UmbrellaAdminPage.tsx
@@ -4,18 +4,15 @@ import UmbrellaModal from "@/components/pages/admin/umbrella/UI/UmbrellaModal";
 import {
   UMBRELLA_STATISTICS_TABLE,
   UMBRELLA_TABLE,
-  downloadUmbrellaDataExcel,
 } from "@/components/pages/admin/umbrella/helper";
 import useModalStatus from "@/hooks/custom/useModalStatus";
 import { usePaginator } from "@/hooks/custom/usePaginator";
 import { useGetStores } from "@/hooks/queries/storeQueries";
 import {
   UMBRELLAS_QUERY_KEYS,
   useDeleteUmbrellas,
-  useGetUmbrellas,
   useGetUmbrellasStatistics,
-  useGetUmbrellasStatisticsStore,
-  useGetUmbrellasStore,
+  useGetUmbrellas,
 } from "@/hooks/queries/umbrellaQueries";
 import { TUmbrellaRes, TUmbrellaStatisticsRes } from "@/types/admin/umbrellaTypes";
 import { TCustomError } from "@/types/commonTypes";
@@ -26,6 +23,7 @@ import { Paginator } from "primereact/paginator";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { useQueryClient } from "@tanstack/react-query";
+import UmbrellaExcelButton from "@/components/pages/admin/umbrella/UI/UmbrellaExcelButton";
 
 const UmbrellaAdminPage = () => {
   // client
@@ -38,29 +36,25 @@ const UmbrellaAdminPage = () => {
     rows: 10,
   });
   const [selectedUmbrellaRes, setSelectedUmbrellaRes] = useState<TUmbrellaRes>();
+  const IsAllStore = storeFilter === "all";
+  const paginationParams = {
+    storeId: IsAllStore ? 0 : storeFilter,
+    page,
+    size: 10,
+  };
 
   // server
   const queryClient = useQueryClient();
   const { data: storeRes, isLoading: isStoreLoading } = useGetStores();
-  const { data: allUmbrellaRes } = useGetUmbrellas({ page, size });
-  const { data: storeUmbrellaRes } = useGetUmbrellasStore({
-    storeId: storeFilter === "all" ? 0 : storeFilter,
-    page,
-    size: 10,
-  });
-  const { data: allUmbrellaStatistics } = useGetUmbrellasStatistics();
-  const { data: storeUmbrellaStatistics } = useGetUmbrellasStatisticsStore(
-    storeFilter === "all" ? 0 : storeFilter
-  );
   const { mutate: deleteMutate, isLoading: isDeleteMutating } = useDeleteUmbrellas();
-
-  const umbrellasRes = storeFilter === "all" ? allUmbrellaRes : storeUmbrellaRes;
-  const umbrellaStatisticsRes =
-    storeFilter === "all" ? allUmbrellaStatistics : storeUmbrellaStatistics;
+  const { data: umbrellaRes, isFetching: isUmbrellasLoading } = useGetUmbrellas(paginationParams);
+  const { data: umbrellaStatistics, isFetching: isStatisticsLoading } = useGetUmbrellasStatistics(
+    IsAllStore ? 0 : storeFilter
+  );
 
   const standard = () => {
     if (storeRes) {
-      return storeFilter === "all" ? "전체" : storeRes.find((e) => e.id === storeFilter)?.name;
+      return IsAllStore ? "전체" : storeRes.find((e) => e.id === storeFilter)?.name;
     }
   };
 
@@ -71,15 +65,13 @@ const UmbrellaAdminPage = () => {
 
   const onClickRemoveButton = (umbrellaId: number) => {
     if (window.confirm(`${umbrellaId} 번 우산을 삭제하시겠습니까?`)) {
-      const storeId = storeFilter === "all" ? undefined : storeFilter;
+      const storeId = IsAllStore ? undefined : storeFilter;
 
       deleteMutate(umbrellaId, {
         onSuccess: () => {
           Promise.all([
-            queryClient.invalidateQueries([...UMBRELLAS_QUERY_KEYS.getUmbrellas(storeId)]),
-            queryClient.invalidateQueries([
-              ...UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeId),
-            ]),
+            queryClient.invalidateQueries(UMBRELLAS_QUERY_KEYS.getUmbrellas(paginationParams)),
+            queryClient.invalidateQueries(UMBRELLAS_QUERY_KEYS.getUmbrellasStatistics(storeId)),
           ]);
         },
         onError: (err) => {
@@ -115,7 +107,6 @@ const UmbrellaAdminPage = () => {
           />
         </div>
         <div>
-          {/* TODO: Prime 칼라 변경 */}
           <Button
             disabled={!storeRes}
             className="w-[150px]"
@@ -130,12 +121,12 @@ const UmbrellaAdminPage = () => {
       </div>
 
       {/* 우산 대여 정보 현황 */}
-      {umbrellaStatisticsRes && standard() && (
+      {umbrellaStatistics && standard() && (
         <div>
           <Typography className="!mb-16" variant="h5">
             {`"${standard()}" 우산 대여 정보`}
           </Typography>
-          <CssDataTable value={[umbrellaStatisticsRes]}>
+          <CssDataTable value={[umbrellaStatistics]}>
             {Object.keys(UMBRELLA_STATISTICS_TABLE).map((key) => {
               const field = key as keyof TUmbrellaStatisticsRes;
               return (
@@ -152,17 +143,22 @@ const UmbrellaAdminPage = () => {
       )}
 
       {/* 우산 관리 테이블 */}
-      {umbrellasRes && storeRes && (
+      {umbrellaRes && storeRes && (
         <>
           <div>
             <Typography className="!mb-16" variant="h5">
               {"우산 관리 테이블"}
             </Typography>
-            <UmbrellaExcelButton />
+            <UmbrellaExcelButton
+              storeId={IsAllStore ? 0 : storeFilter}
+              totalCount={umbrellaStatistics?.totalUmbrellaCount}
+              isLoading={isStatisticsLoading || isUmbrellasLoading}
+              storeName={storeRes.find((e) => e.id === storeFilter)?.name ?? "전체"}
+            />
             <CssDataTable
               rowHover
               showGridlines
-              value={umbrellasRes}
+              value={umbrellaRes}
               emptyMessage={"결과가 없습니다."}
               style={{
                 cursor: "pointer",
@@ -222,7 +218,7 @@ const UmbrellaAdminPage = () => {
               first={first}
               rows={size}
               pageLinkSize={5}
-              totalRecords={umbrellaStatisticsRes?.totalUmbrellaCount}
+              totalRecords={umbrellaStatistics?.totalUmbrellaCount}
               onPageChange={onPageChange}
             />
           </div>
@@ -235,46 +231,12 @@ const UmbrellaAdminPage = () => {
           handleClose={handleCloseModal}
           umbrellaRes={selectedUmbrellaRes}
           storeRes={storeRes}
-          storeId={storeFilter === "all" ? 0 : storeFilter}
+          storeId={IsAllStore ? 0 : storeFilter}
+          paginationParams={paginationParams}
         />
       )}
     </div>
   );
 };
 
 export default UmbrellaAdminPage;
-
-const UmbrellaExcelButton = () => {
-  const { data: allUmbrellaStatistics } = useGetUmbrellasStatistics();
-  const { data: allUmbrellaRes, isLoading } = useGetUmbrellas({
-    page: 0,
-    size: allUmbrellaStatistics?.totalUmbrellaCount,
-  });
-
-  // 한글 매핑
-  const onClickExcelBtn = () => {
-    if (allUmbrellaRes)
-      downloadUmbrellaDataExcel(
-        allUmbrellaRes.map((e) => ({
-          [UMBRELLA_TABLE.id.label]: e.id,
-          [UMBRELLA_TABLE.historyId.label]: e.historyId ?? "-",
-          [UMBRELLA_TABLE.storeMetaId.label]: e.storeMetaId,
-          [UMBRELLA_TABLE.uuid.label]: e.uuid,
-          [UMBRELLA_TABLE.rentable.label]: e.rentable ? "O" : "X",
-          [UMBRELLA_TABLE.etc.label]: e.etc,
-        }))
-      );
-  };
-
-  return (
-    <Button
-      disabled={isLoading || !allUmbrellaStatistics}
-      size="large"
-      className="!mb-16 w-[180px]"
-      variant="outlined"
-      onClick={onClickExcelBtn}
-    >
-      우산 목록 다운로드
-    </Button>
-  );
-};