recommend page

src/components/App.jsx

@@ -2,10 +2,10 @@ import { Route, Routes } from "react-router-dom";
 import Layout from "./Layout";
 import RegisterPage from "pages/RegisterPage";
 import LoginPage from "pages/LoginPage";
-import Recommend from "pages/Recommend";
 import Training from "pages/Training";
 import HomePage from "pages/HomePage";
 import DictionaryPage from "pages/DictionaryPage";
+import RecommendPage from "pages/RecommendPage";
 
 export const App = () => {
   return (
@@ -16,7 +16,7 @@ export const App = () => {
         <Route path="/" element={<Layout />}>
           <Route index element={<HomePage />} />
           <Route path="dictionary" element={<DictionaryPage />} />
-          <Route path="recommend" element={<Recommend />} />
+          <Route path="recommend" element={<RecommendPage />} />
           <Route path="training" element={<Training />} />
         </Route>
       </Routes>

src/components/Recommend/Recommend.jsx

@@ -0,0 +1,15 @@
+import Dashboard from "components/Dashboard/Dashboard";
+import React from "react";
+import { Container } from "./Recommend.styled";
+
+const Recommend = () => {
+  return (
+    <>
+      <Container>
+        <Dashboard />
+      </Container>
+    </>
+  );
+};
+
+export default Recommend;

src/components/Recommend/Recommend.styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { CommonContainer } from "styles/GlobalStyles";
+
+export const Container = styled(CommonContainer)`
+  padding-top: 32px;
+  padding-bottom: 48px;
+  background: ${({ theme }) => theme.colors.background};
+
+  @media only screen and (min-width: 768px) {
+    padding-top: 80px;
+  }
+`;

src/pages/RecommendPage.jsx

@@ -0,0 +1,12 @@
+import Recommend from "components/Recommend/Recommend";
+import React from "react";
+
+const RecommendPage = () => {
+  return (
+    <>
+      <Recommend />
+    </>
+  );
+};
+
+export default RecommendPage;