diff --git a/public/assets/guide-comment.png b/public/assets/guide-comment.png new file mode 100644 index 0000000..4e78dd9 Binary files /dev/null and b/public/assets/guide-comment.png differ diff --git a/public/assets/guide-logo.png b/public/assets/guide-logo.png new file mode 100644 index 0000000..a5f4695 Binary files /dev/null and b/public/assets/guide-logo.png differ diff --git a/src/App.tsx b/src/App.tsx index 990694d..cb1a2c7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ -import { useRecoilValue } from 'recoil'; +import { useEffect } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; import { ThemeProvider } from 'styled-components'; // Styles @@ -7,6 +8,14 @@ import theme from '@/styles/theme'; import GlobalStyle from '@/styles/GlobalStyle'; // Pages +import { + GuideLayout, + GuideHomePage, + GuidePage, + GuideSummaryPage, + GuideCategoryPage, + GuideSearchPage, +} from '@/pages/Guide'; import CategoryPage from '@/pages/CategoryPage'; import FindEmailPage from '@/pages/FindEmailPage'; import FindPasswordPage from '@/pages/FindPasswordPage'; @@ -22,19 +31,21 @@ import SocialAccountPage from '@/pages/SocialAccountPage'; import SummaryPage from '@/pages/SummaryPage'; // Layouts -import Layout from './components/layout/Layout'; +import Layout from '@/components/layout/Layout'; // Components -import { ToastList } from './components/common'; +import { ToastList } from '@/components/common'; + +// Hooks +import useUpdateCategories from '@/hooks/useUpdateCategories'; // Store -import { userTokenState } from './stores/user'; -import { useEffect } from 'react'; -import useUpdateCategories from './hooks/useUpdateCategories'; +import { userTokenState } from '@/stores/user'; const App = () => { const userToken = useRecoilValue(userTokenState); const { updateCategories } = useUpdateCategories(); + useEffect(() => { userToken && updateCategories(); }, [updateCategories, userToken]); @@ -74,6 +85,14 @@ const App = () => { )} + }> + } /> + } /> + } /> + } /> + } /> + + } /> } /> diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index bef8355..0022175 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/src/components/Home/InsightVideos.tsx @@ -60,7 +60,7 @@ const InsightVideos: React.FC = ({ }, [userToken]); return ( - +

이런 인사이트는 어때요?

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index cf66370..c3ade98 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -13,7 +13,7 @@ const Layout = () => { const isSideBarOpen = useRecoilValue(isSideBarOpenState); const isShowFooter = useMemo( - () => ['/'].includes(pathname) || /^\/category/g.test(pathname), + () => /^(\/|\/category|\/guide)/g.test(pathname), [pathname], ); @@ -21,10 +21,12 @@ const Layout = () => { <>
-
+
{isSideBarOpen && } - +
+ +
{isShowFooter &&