Merge pull request #309 from UPbrella/release-dev

Deploy: Release

index.html

@@ -61,7 +61,10 @@
     ></script>
 
     <!-- Google Search Console -->
+    <!-- prod -->
     <meta name="google-site-verification" content="Mo9YbI4CJNYoxU0553ZfKGfRKaqppv0qHZURHEOBcW8" />
+    <!-- dev -->
+    <meta name="google-site-verification" content="NVD0ArwvaFaD5fdvJVnH1rko0N-IB8D89wX6BS9-aPU" />
     <!-- Google Search Console End -->
 
     <!-- Naver Search Advisor -->

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;
+};

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>

src/components/pages/admin/locker/LockerAdminPage.tsx

@@ -96,7 +96,7 @@ const LockerAdminPage = () => {
           }
         />
         <Column
-          header="비밀번호"
+          header="비밀키"
           field="secretKey"
           style={{ minWidth: "120px" }}
           body={(data: TLockersRes) => (

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"

src/components/pages/admin/rent/RentHistoryPage.tsx

@@ -134,11 +134,9 @@ const RentHistoryPage = () => {
             const minWidth = RENT_ADMIN_TABLE[field].width ?? "130px";
             const header = RENT_ADMIN_TABLE[field].label;
             const dropDownOptions = RENT_ADMIN_TABLE[field].options;
-            const sortable = !RENT_ADMIN_TABLE[field].notSort;
 
             return (
               <Column
-                sortable={sortable}
                 key={key}
                 style={{ minWidth }}
                 field={field}
@@ -248,13 +246,12 @@ export const RENT_ADMIN_TABLE: Record<
     label: string;
     width?: number;
     options?: { label: string; value: boolean }[];
-    notSort?: boolean;
   }
 > = {
   id: { label: "일련 번호", width: 100 },
   name: { label: "이름" },
   phoneNumber: { label: "전화번호", width: 150 },
-  rentStoreName: { label: "대여 지점", notSort: true },
+  rentStoreName: { label: "대여 지점" },
   rentAt: { label: "대여 날짜", width: 150 },
   umbrellaUuid: { label: "우산 고유 번호" },
   elapsedDay: { label: "대여 경과 일수" },
@@ -268,17 +265,16 @@ export const RENT_ADMIN_TABLE: Record<
   },
   refundCompleted: {
     label: "보증금 환급 여부",
-    notSort: true,
     width: 150,
     options: [
       { label: "환급 완료", value: true },
       { label: "미완료", value: false },
     ],
   },
-  bank: { label: "환급 은행", notSort: true },
-  accountNumber: { label: "환급 계좌 번호", width: 150, notSort: true },
+  bank: { label: "환급 은행" },
+  accountNumber: { label: "환급 계좌 번호", width: 150 },
   returnAt: { label: "반납 날짜", width: 150 },
-  returnStoreName: { label: "반납 지점", notSort: true },
+  returnStoreName: { label: "반납 지점" },
   totalRentalDay: { label: "총 대여 기간" },
-  etc: { label: "비고", notSort: true },
+  etc: { label: "비고" },
 };

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);
@@ -118,7 +118,7 @@ const RentPage = () => {
             setIsOpenLockPwModal(true);
           } else {
             setIsRent(true);
-            toast.success("대여 완료되었습니다.");
+            toast.success("우산 대여 완료!");
           }
         },
       }
@@ -207,6 +207,7 @@ const RentPage = () => {
                   setIsOpenStorageIssue={setIsOpenStorageIssue}
                   setLockNumber={setLockNumber}
                   setIsOpenLockPwModal={setIsOpenLockPwModal}
+                  storeId={storeId}
                 />
               </FormModal>
             )}

src/components/pages/return/index.tsx

@@ -182,7 +182,7 @@ const ReturnPage = () => {
         },
         onSuccess: () => {
           setIsReturn(true);
-          toast.success("반납 완료되었습니다.");
+          toast.success("우산 반납 완료!");
           return;
         },
       }

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));
+    },
+  });
+};

src/main.tsx

@@ -1,18 +1,26 @@
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 import "./index.css";
 import "@/styles/fonts/font.css";
+import "primereact/resources/themes/lara-light-indigo/theme.css"; //theme
+import "primereact/resources/primereact.min.css"; //core css
+import "primeicons/primeicons.css";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { Suspense } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material";
 import { Global, css } from "@emotion/react";
 import { RecoilRoot } from "recoil";
-import { Suspense } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Toaster } from "react-hot-toast";
+import { ToastPosition, Toaster } from "react-hot-toast";
 import { HelmetProvider } from "react-helmet-async";
-import "primereact/resources/themes/lara-light-indigo/theme.css"; //theme
-import "primereact/resources/primereact.min.css"; //core css
-import "primeicons/primeicons.css";
+import { isMobile } from "react-device-detect";
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    kakao: any;
+  }
+}
 
 const globalStyles = css`
   * {
@@ -37,13 +45,6 @@ const theme = createTheme({
   },
 });
 
-declare global {
-  interface Window {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    kakao: any;
-  }
-}
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -55,25 +56,35 @@ const queryClient = new QueryClient({
   },
 });
 
+const toastProps = {
+  position: (isMobile ? "bottom-center" : "top-center") as ToastPosition,
+  options: {
+    icon: null,
+    style: {
+      padding: "12px 16px",
+      color: "#fff",
+      background: "#111111",
+      fontSize: "15px",
+      fontWeight: "400",
+      width: "320px",
+    },
+    duration: 3000,
+    error: {
+      style: {
+        background: "#E05938",
+      },
+    },
+  },
+};
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <BrowserRouter>
     <RecoilRoot>
       <Suspense>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
             <HelmetProvider>
-              <Toaster
-                position="top-center"
-                toastOptions={{
-                  style: { padding: "16px", color: "#fff", background: "#5DCF17" },
-                  duration: 3000,
-                  error: {
-                    style: {
-                      background: "#FF513E",
-                    },
-                  },
-                }}
-              />
+              <Toaster position={toastProps.position} toastOptions={toastProps.options} />
               <Global styles={globalStyles} />
               <App />
             </HelmetProvider>

src/types/form/FormTypes.ts

@@ -37,3 +37,8 @@ export type TRentDetail = {
 export type TRentPassword = {
   password: string;
 };
+
+export type TRentLockerCountParams = {
+  storeMetaId: number;
+  count: number;
+};