open-graph-scraper 예외 추가

src/app/api/meta/route.ts

@@ -34,24 +34,34 @@ export interface Result {
   success: boolean
 }
 
-export async function POST(req: NextRequest, res: NextResponse) {
+export async function POST(req: NextRequest) {
   const { url } = await req.json()
 
+  const options = {
+    url: url,
+    peekSize: 30000000,
+  }
+
+  const getOgData = async () => {
+    try {
+      const urlData = []
+      const response = await fetch(options.url)
+      const data = await response.text()
+      const result = await ogs({ html: data })
+      urlData.push({ ...result.result, url: options.url })
+      return urlData[0].ogTitle
+    } catch (error) {
+      return NextResponse.json({ error })
+    }
+  }
+
   try {
-    return await ogs({
-      url: url,
-      peekSize: 30000000,
-    }).then((data: MetaResType) => {
-      if (data) {
-        return NextResponse.json({
-          data: data.result.ogTitle,
-          error: data.error,
-        })
-      } else {
-        return NextResponse.json({})
-      }
-    })
-  } catch ({ error }: any) {
+    const data = await getOgData()
+    if (typeof data === 'object') {
+      return NextResponse.json({ data: '' })
+    }
+    return NextResponse.json({ data })
+  } catch (error: any) {
     return NextResponse.json({ error })
   }
 }

src/components/common/LinkItem/LinkItem.tsx

@@ -27,6 +27,7 @@ import useGetMeta from '../LinkList/hooks/useGetMeta'
 import LoginModal from '../Modal/LoginModal'
 import NoneServiceModal from '../Modal/NoneServiceModal'
 import { RefetchTagsType, Tag } from '../Space/hooks/useGetTags'
+import Spinner from '../Spinner/Spinner'
 import { DELETE_TEXT } from './\bconstants'
 import useDeleteLink from './hooks/useDeleteLink'
 import useLikeLink from './hooks/useLikeLink'
@@ -95,12 +96,19 @@ const LinkItem = ({
     setUrlErrorText,
     isShowFormError,
     setIsShowFormError,
+    isMetaLoading,
     handleModalClose,
     handleChangeUrl,
     handleGetMeta,
   } = useGetMeta({ getValues, setValue, modalClose })
-  const { handleUpdateLink } = useUpdateLink({ spaceId, linkId, refetchTags })
-  const { handleDeleteLink } = useDeleteLink({ refetchTags })
+  const { isUpdateLinkLoading, handleUpdateLink } = useUpdateLink({
+    spaceId,
+    linkId,
+    refetchTags,
+  })
+  const { isDeleteLinkLoading, handleDeleteLink } = useDeleteLink({
+    refetchTags,
+  })
   const { handleSaveReadInfo } = useReadSaveLink()
   const { isLiked, likeCount, handleClickLike } = useLikeLink({
     spaceId,
@@ -365,6 +373,9 @@ const LinkItem = ({
               {DELETE_TEXT}
             </div>
           )}
+          {(isMetaLoading || isUpdateLinkLoading || isDeleteLinkLoading) && (
+            <Spinner />
+          )}
         </Modal>
       )}
       {currentModal === 'login' && (

src/components/common/LinkItem/hooks/useDeleteLink.ts

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { FetchDeleteLinkProps, fetchDeleteLink } from '@/services/link/link'
 import { useQueryClient } from '@tanstack/react-query'
 import { RefetchTagsType } from '../../Space/hooks/useGetTags'
@@ -8,17 +9,22 @@ export interface UseDeleteLinkProps {
 
 const useDeleteLink = ({ refetchTags }: UseDeleteLinkProps) => {
   const queryClient = useQueryClient()
+  const [isDeleteLinkLoading, setIsDeleteLinkLoading] = useState(false)
 
   const handleDeleteLink = async ({
     spaceId,
     linkId,
   }: FetchDeleteLinkProps) => {
+    if (isDeleteLinkLoading) return
+
+    setIsDeleteLinkLoading(true)
     await fetchDeleteLink({ spaceId, linkId })
     await queryClient.invalidateQueries({ queryKey: ['links', spaceId] })
     refetchTags?.()
+    setIsDeleteLinkLoading(false)
   }
 
-  return { handleDeleteLink }
+  return { isDeleteLinkLoading, handleDeleteLink }
 }
 
 export default useDeleteLink

src/components/common/LinkItem/hooks/useUpdateLink.ts

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { fetchUpdateLink } from '@/services/link/link'
 import { useQueryClient } from '@tanstack/react-query'
 import { RefetchTagsType } from '../../Space/hooks/useGetTags'
@@ -21,12 +22,16 @@ const useUpdateLink = ({
   refetchTags,
 }: UseUpdateLinkProps) => {
   const queryClient = useQueryClient()
+  const [isUpdateLinkLoading, setIsUpdateLinkLoading] = useState(false)
   const handleUpdateLink = async ({
     url,
     title,
     tagName,
     color = 'emerald',
   }: HandleUpdateLinkProps) => {
+    if (isUpdateLinkLoading) return
+
+    setIsUpdateLinkLoading(true)
     await fetchUpdateLink({
       spaceId,
       linkId,
@@ -37,9 +42,10 @@ const useUpdateLink = ({
     })
     await queryClient.invalidateQueries({ queryKey: ['links', spaceId] })
     refetchTags?.()
+    setIsUpdateLinkLoading(false)
   }
 
-  return { handleUpdateLink }
+  return { isUpdateLinkLoading, handleUpdateLink }
 }
 
 export default useUpdateLink

src/components/common/LinkList/LinkList.tsx

@@ -79,7 +79,7 @@ const LinkList = ({
   refetchTags,
 }: LinkListProps) => {
   const { Modal, isOpen, modalOpen, modalClose } = useModal()
-  const { handleCreateLink } = useCreateLink({
+  const { isCreateLinkLoading, handleCreateLink } = useCreateLink({
     spaceId,
     refetchTags,
   })
@@ -105,6 +105,7 @@ const LinkList = ({
     setUrlErrorText,
     isShowFormError,
     setIsShowFormError,
+    isMetaLoading,
     handleModalClose,
     handleChangeUrl,
     handleGetMeta,
@@ -258,6 +259,7 @@ const LinkList = ({
               validation={errors.tagName?.message}
             />
           </div>
+          {(isMetaLoading || isCreateLinkLoading) && <Spinner />}
         </Modal>
       )}
     </>

src/components/common/LinkList/hooks/useCreateLink.ts

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { FetchCreateLinkProps, fetchCreateLink } from '@/services/link/link'
 import { fetchGetTags } from '@/services/space/space'
 import { useQueryClient } from '@tanstack/react-query'
@@ -10,6 +11,7 @@ export interface UseCreateLinkProps {
   refetchTags?: RefetchTagsType
 }
 export interface UseCreateLinkReturnType {
+  isCreateLinkLoading: boolean
   handleCreateLink: ({
     url,
     title,
@@ -23,13 +25,17 @@ const useCreateLink = ({
   refetchTags,
 }: UseCreateLinkProps): UseCreateLinkReturnType => {
   const queryclient = useQueryClient()
+  const [isCreateLinkLoading, setIsCreateLinkLoading] = useState(false)
 
   const handleCreateLink = async ({
     url,
     title,
     tagName,
     color,
   }: FetchCreateLinkProps) => {
+    if (isCreateLinkLoading) return
+
+    setIsCreateLinkLoading(true)
     await fetchCreateLink({
       spaceId,
       url,
@@ -43,9 +49,11 @@ const useCreateLink = ({
     })
     await queryclient.invalidateQueries({ queryKey: ['links', spaceId] })
     refetchTags?.()
+    setIsCreateLinkLoading(false)
   }
 
   return {
+    isCreateLinkLoading,
     handleCreateLink,
   }
 }

src/components/common/LinkList/hooks/useGetMeta.ts

@@ -14,6 +14,7 @@ const useGetMeta = ({ getValues, setValue, modalClose }: UseGetMetaProps) => {
   const [isUrlCheck, setIsUrlCheck] = useState(false)
   const [urlErrorText, setUrlErrorText] = useState('')
   const [isShowFormError, setIsShowFormError] = useState(false)
+  const [isMetaLoading, setIsMetaLoading] = useState(false)
 
   const getIsValidUrl = () => {
     const url = getValues('url')
@@ -28,9 +29,7 @@ const useGetMeta = ({ getValues, setValue, modalClose }: UseGetMetaProps) => {
     data: string
     error: boolean
   }) => {
-    if (data) {
-      setValue('title', data)
-    }
+    setValue('title', data)
 
     if (error) {
       setUrlErrorText(LINK_FORM_VALIDATION.INCORRECT_URL)
@@ -42,11 +41,15 @@ const useGetMeta = ({ getValues, setValue, modalClose }: UseGetMetaProps) => {
   }
 
   const handleGetMeta = async ({ url }: FetchGetMetaProps) => {
+    if (isMetaLoading) return
+
     if (getIsValidUrl()) {
+      setIsMetaLoading(true)
       const { data, error } = await fetchGetMeta({
         url,
       })
       handleUrlValidation({ data, error })
+      setIsMetaLoading(false)
     } else {
       setUrlErrorText(LINK_FORM_VALIDATION.URL_INVALID_FORM)
     }
@@ -77,6 +80,7 @@ const useGetMeta = ({ getValues, setValue, modalClose }: UseGetMetaProps) => {
     setUrlErrorText,
     isShowFormError,
     setIsShowFormError,
+    isMetaLoading,
     getIsValidUrl,
     handleModalClose,
     handleChangeUrl,