Merge pull request #306 from UPbrella/develop

Deploy: Dev
UPbrella · Dec 28, 2023 · 44d5a04 · 44d5a04
2 parents c5c9bbb + acb79ab
commit 44d5a04
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 18 deletions.
diff --git a/src/api/formApi.ts b/src/api/formApi.ts
@@ -7,6 +7,7 @@ import {
   TReturnDetail,
   TRentDetail,
   TRentPassword,
+  TRentLockerCountParams,
 } from "@/types/form/FormTypes";
 
 const API = {
@@ -17,6 +18,7 @@ const API = {
       ? `/return/form/${storeId}?salt=${salt}&signature=${signature}`
       : `/return/form/${storeId}`,
   RETURN_UMBRELLA: () => `users/loggedIn/umbrella`,
+  RENT_LOCKER_COUNT: (storeMetaId: number) => `/lockers/${storeMetaId}`,
 } as const;
 
 // 대여폼 데이터 조회
@@ -54,3 +56,11 @@ export const getReturnUmbrella = async () => {
 export const patchReturn = async (params: TReturnDetail) => {
   await $axios.patch(API.RENT(), params);
 };
+
+// 대여 시, 보관함 카운트 동기화
+export const patchLockerCount = async ({ storeMetaId, count }: TRentLockerCountParams) => {
+  const res = await $axios.patch<TApiResponse<TRentPassword>>(API.RENT_LOCKER_COUNT(storeMetaId), {
+    count,
+  });
+  return res.data.data.password;
+};
diff --git a/src/components/atoms/Form/RentModalStorageIssue/index.tsx b/src/components/atoms/Form/RentModalStorageIssue/index.tsx
@@ -1,23 +1,47 @@
+import { usePatchRentLockerCount } from "@/hooks/queries/formQueries";
 import { useState } from "react";
+import toast from "react-hot-toast";
 
 type RentModalStorageIssueProps = {
   setIsOpenStorageIssue: (value: boolean) => void;
   setLockNumber: (value: string) => void;
   setIsOpenLockPwModal: (value: boolean) => void;
+  storeId: number;
 };
 
-// TODO: 새로운 비밀번호 요청 API ?
 const RentModalStorageIssue = ({
   setIsOpenStorageIssue,
   setLockNumber,
   setIsOpenLockPwModal,
+  storeId,
 }: RentModalStorageIssueProps) => {
-  // TODO: number 저장 시 전역으로 이동
-  const [number, setNumber] = useState("");
+  const [countInput, setCountInput] = useState("");
+  const { mutate, isLoading } = usePatchRentLockerCount();
 
   // 4자리 숫자 입력
   const isNumberValid = () => {
-    return number.length === 4 && /^\d+$/.test(number);
+    return countInput.length === 4 && /^\d+$/.test(countInput);
+  };
+
+  const onClickPatchCountBtn = () => {
+    if (isNaN(Number(countInput))) {
+      toast.error("4자리 숫자만 입력해주세요.");
+      return;
+    }
+
+    mutate(
+      {
+        storeMetaId: storeId,
+        count: Number(countInput),
+      },
+      {
+        onSuccess: (password) => {
+          setLockNumber(password);
+          setIsOpenStorageIssue(false);
+          setIsOpenLockPwModal(true);
+        },
+      }
+    );
   };
 
   return (
@@ -31,18 +55,15 @@ const RentModalStorageIssue = ({
           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)}
+          onChange={(e) => setCountInput(e.target.value)}
+          disabled={isLoading}
         />
         <button
           className={`w-68 rounded-8 bg-primary-200 font-semibold text-16 leading-24 text-primary-500 px-10 ${
             isNumberValid() ? "" : "cursor-not-allowed opacity-25"
           }`}
-          disabled={!isNumberValid()}
-          onClick={() => {
-            setIsOpenStorageIssue(false);
-            setLockNumber("");
-            setIsOpenLockPwModal(true);
-          }}
+          disabled={!isNumberValid() || isLoading}
+          onClick={onClickPatchCountBtn}
         >
           확인
         </button>

diff --git a/src/components/pages/admin/locker/LockerAdminPage.tsx b/src/components/pages/admin/locker/LockerAdminPage.tsx
@@ -96,7 +96,7 @@ const LockerAdminPage = () => {
           }
         />
         <Column
-          header="비밀번호"
+          header="비밀키"
           field="secretKey"
           style={{ minWidth: "120px" }}
           body={(data: TLockersRes) => (

diff --git a/src/components/pages/admin/locker/LockerModal.tsx b/src/components/pages/admin/locker/LockerModal.tsx
@@ -40,7 +40,7 @@ const LockerModal = ({ isOpen, handleClose, storesListRes, selectedLocker }: TPr
     }
 
     if (secretKey.length < MIN_LOCKER_SECRET_KEY_COUNT) {
-      toast.error(`비밀번호는 최소 ${MIN_LOCKER_SECRET_KEY_COUNT}자 이상이여야합니다.`);
+      toast.error(`비밀키는 최소 ${MIN_LOCKER_SECRET_KEY_COUNT}자 이상이여야합니다.`);
       return;
     }
 
@@ -63,7 +63,7 @@ const LockerModal = ({ isOpen, handleClose, storesListRes, selectedLocker }: TPr
     }
 
     if (secretKey.length < MIN_LOCKER_SECRET_KEY_COUNT) {
-      toast.error(`비밀번호는 최소 ${MIN_LOCKER_SECRET_KEY_COUNT}자 이상이여야합니다.`);
+      toast.error(`비밀키는 최소 ${MIN_LOCKER_SECRET_KEY_COUNT}자 이상이여야합니다.`);
       return;
     }
 
@@ -151,9 +151,9 @@ const LockerModal = ({ isOpen, handleClose, storesListRes, selectedLocker }: TPr
           />
         </StoreFormWrapper>
 
-        <StoreFormWrapper label="보관함 비밀번호" isRequired>
+        <StoreFormWrapper label="보관함 비밀키" isRequired>
           <TextField
-            label="비밀번호"
+            label="비밀키"
             placeholder="ex.ASDF1234"
             value={secretKey}
             name="secretKey"

diff --git a/src/components/pages/rent/index.tsx b/src/components/pages/rent/index.tsx
@@ -36,7 +36,7 @@ const RentPage = () => {
   const [umbrellaUuid, setUmbrellaUuid] = useState(0);
   const [conditionReport, setConditionReport] = useState("");
   const [storeId, setStoreId] = useState(0);
-  const [lockNumber, setLockNumber] = useState(""); // TODO-Post Body
+  const [lockNumber, setLockNumber] = useState("");
   const [isOpenDepositModal, setIsOpenDepositModal] = useState(false);
   const [isOpenLockPwModal, setIsOpenLockPwModal] = useState(false);
   const [isOpenStorageIssue, setIsOpenStorageIssue] = useState(false);
@@ -207,6 +207,7 @@ const RentPage = () => {
                   setIsOpenStorageIssue={setIsOpenStorageIssue}
                   setLockNumber={setLockNumber}
                   setIsOpenLockPwModal={setIsOpenLockPwModal}
+                  storeId={storeId}
                 />
               </FormModal>
             )}

diff --git a/src/hooks/queries/formQueries.ts b/src/hooks/queries/formQueries.ts
@@ -3,8 +3,12 @@ import {
   getReturnFormData,
   getReturnFormLockData,
   getReturnUmbrella,
+  patchLockerCount,
 } from "@/api/formApi";
-import { useQuery } from "@tanstack/react-query";
+import { TCustomError } from "@/types/commonTypes";
+import { getErrorMessage } from "@/utils/error";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import toast from "react-hot-toast";
 
 export const useGetRentFormData = (umbrellaId: number) => {
   return useQuery({
@@ -41,3 +45,12 @@ export const useGetReturnUmbrella = () => {
     retry: 0,
   });
 };
+
+export const usePatchRentLockerCount = () => {
+  return useMutation({
+    mutationFn: patchLockerCount,
+    onError: (err: TCustomError) => {
+      toast.error(getErrorMessage(err));
+    },
+  });
+};
diff --git a/src/types/form/FormTypes.ts b/src/types/form/FormTypes.ts
@@ -37,3 +37,8 @@ export type TRentDetail = {
 export type TRentPassword = {
   password: string;
 };
+
+export type TRentLockerCountParams = {
+  storeMetaId: number;
+  count: number;
+};