diff --git a/src/apis/dynamodb.ts b/src/apis/dynamodb.ts index cf5e7b0..bafd7d3 100644 --- a/src/apis/dynamodb.ts +++ b/src/apis/dynamodb.ts @@ -1,6 +1,17 @@ -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( `/api/dynamoDB?id=${inviteDataId}`, @@ -8,4 +19,9 @@ async function getInviteData(inviteDataId: string) { 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 index d1b0d67..9b1806e 100644 --- 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 index d0e4f6b..8aac760 100644 --- 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(""); 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 };