diff --git a/src/components/Home/SearchYoutube.tsx b/src/components/Home/SearchYoutube.tsx index 779cb9b..cdc8180 100644 --- a/src/components/Home/SearchYoutube.tsx +++ b/src/components/Home/SearchYoutube.tsx @@ -15,7 +15,8 @@ import { SearchContainer, } from '@/styles/HomepageStyle'; -import { recommendationModalState } from '@/stores/modal'; +import { recommendationModalState, errorModalState } from '@/stores/modal'; + import { modelingDataState, modelingProgressState, @@ -37,6 +38,7 @@ const SearchYoutube = ({ searchRef }: Props) => { const userToken = useRecoilValue(userTokenState); const setIsOpenModal = useSetRecoilState(recommendationModalState); + const setIsOpenErrorModal = useSetRecoilState(errorModalState); const setVideoLink = useSetRecoilState(videoLinkState); const setProgress = useSetRecoilState(modelingProgressState); const [status, setStatus] = useRecoilState(modelingStatusState); @@ -109,6 +111,7 @@ const SearchYoutube = ({ searchRef }: Props) => { setModelingData(null); } catch (e) { console.error(e); + setIsOpenErrorModal(true); } } else { navigate('/summary/guest'); diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 00d149e..b828841 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -1,5 +1,5 @@ import { Outlet, useLocation } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { isSideBarOpenState } from '@/stores/ui'; @@ -7,13 +7,17 @@ import Footer from './footer/Footer'; import Header from './header'; import SideBar from './sideBar'; import NicknameModal from '@/components/NicknameModal'; +import ErrorModal from '../modals/ErrorModal'; + import { useMemo, useEffect } from 'react'; import { userInfoState } from '@/stores/user'; +import { errorModalState } from '@/stores/modal'; const Layout = () => { const { pathname } = useLocation(); const isSideBarOpen = useRecoilValue(isSideBarOpenState); const userInfo = useRecoilValue(userInfoState); + const isErrorModalOpen = useRecoilValue(errorModalState) const isShowFooter = useMemo( () => pathname === '/' || /^(\/category)/g.test(pathname), @@ -38,6 +42,7 @@ const Layout = () => { {isShowFooter &&