REFACTOR: 직원초대정보 post 플로우 수정

the-kingdoms · Jul 12, 2024 · f46ed42 · f46ed42
1 parent b25be35
commit f46ed42
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 50 deletions.
diff --git a/src/apis/dynamodb.ts b/src/apis/dynamodb.ts
@@ -1,11 +1,27 @@
-import { InviteResponse } from "@/screen/manage/ShareLink";
+import { InviteSchedule } from "@/data/inviteSchedule";
 import axios from "axios";
 
+export interface InviteResponse {
+  id: string;
+  inviteData: InviteDataType;
+}
+interface InviteDataType {
+  storeId: string;
+  position: string;
+  schedule: InviteSchedule;
+  createdAt: string;
+}
+
 async function getInviteData(inviteDataId: string) {
   const { data } = await axios.get<InviteResponse>(
     `/api/dynamoDB?id=${inviteDataId}`,
   );
   return data;
 }
 
-export { getInviteData };
+async function postInviteData(body: InviteResponse) {
+  const { data } = await axios.post("/api/dynamoDB", body);
+  return data;
+}
+
+export { getInviteData, postInviteData };
diff --git a/src/hooks/query/dynamodb.ts b/src/hooks/query/dynamodb.ts
@@ -1,6 +1,7 @@
-import { getInviteData } from "@/apis/dynamodb";
+import { InviteResponse, getInviteData, postInviteData } from "@/apis/dynamodb";
 import { myAtom } from "@/data/global";
-import { useQuery } from "@tanstack/react-query";
+import { copyLink } from "@/libs/copy";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 
 function useGetInviteData() {
@@ -15,4 +16,14 @@ function useGetInviteData() {
   return { data, isSuccess };
 }
 
-export { useGetInviteData };
+function usePostInviteData(inviteId: string) {
+  const { mutate, isSuccess } = useMutation({
+    mutationKey: ["getInviteData"],
+    mutationFn: (body: InviteResponse) => postInviteData(body),
+    onSuccess: () => copyLink(inviteId),
+  });
+
+  return { mutate, isSuccess };
+}
+
+export { useGetInviteData, usePostInviteData };
diff --git a/src/screen/manage/ShareLink.tsx b/src/screen/manage/ShareLink.tsx
@@ -1,31 +1,17 @@
 import { storeIdAtom } from "@/data/global";
 import {
-  InviteSchedule,
   inviteScheduleAtom,
   selectedPositionAtom,
 } from "@/data/inviteSchedule";
-import copy from "@/libs/copy";
+import { usePostInviteData } from "@/hooks/query/dynamodb";
 import { copyLink } from "@/libs/copy";
 import { createRandomString } from "@/libs/createRandomId";
 import FlexBox from "@modules/layout/FlexBox";
-import axios from "axios";
 import dayjs from "dayjs";
 import { useAtom } from "jotai";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
-export interface InviteResponse {
-  id: string;
-  inviteData: InviteDataType;
-}
-
-interface InviteDataType {
-  storeId: string;
-  position: string;
-  schedule: InviteSchedule;
-  createdAt: string;
-}
-
 function ShareLink() {
   const [inviteId, setInviteId] = useState<string>("");
   const [linkCopied, setLinkCopied] = useState(false);
@@ -34,38 +20,14 @@ function ShareLink() {
   const [selectedPosition] = useAtom(selectedPositionAtom);
   const [storeId] = useAtom(storeIdAtom);
 
+  const { mutate, isSuccess } = usePostInviteData(inviteId);
+
   if (!inviteId) setInviteId(createRandomString(8));
 
   const handleCopyLink = () => {
-    const link = `${window.location.origin}/?id=${inviteId}`;
-    copy(
-      link,
-      () => {
-        setLinkCopied(true);
-      },
-      err => {
-        console.log("링크를 복사하는데 실패했습니다: ", err);
-      },
-    );
     copyLink(inviteId, () => setLinkCopied(true));
   };
 
-  const sendInviteToDB = async () => {
-    const inviteData: InviteDataType = {
-      storeId,
-      position: selectedPosition,
-      schedule: inviteSchedule,
-      createdAt: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    };
-    const data = {
-      id: inviteId,
-      inviteData,
-    };
-    try {
-      await axios.post("/api/dynamoDB", data);
-      handleCopyLink();
-    } catch (error) {
-      alert("초대링크 생성에 실패했습니다.");
   useEffect(() => {
     let timer: NodeJS.Timeout | undefined;
     if (isSuccess || linkCopied) {
@@ -74,11 +36,25 @@ function ShareLink() {
         setShowToastMsg(false);
       }, 2000);
     }
-  };
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [isSuccess, linkCopied]);
 
   useEffect(() => {
-    sendInviteToDB();
-  }, []);
+    if (inviteId.length > 0) {
+      const inviteData = {
+        id: inviteId,
+        inviteData: {
+          storeId,
+          position: selectedPosition,
+          schedule: inviteSchedule,
+          createdAt: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        },
+      };
+      mutate(inviteData);
+    }
+  }, [inviteId]);
 
   return (
     <>
@@ -119,4 +95,3 @@ function ShareLink() {
 }
 
 export default ShareLink;
-export type { InviteDataType };