Merge pull request #17 from catholichak2024/#16

[feat] 스플래쉬 화면

src/App.tsx

@@ -8,14 +8,15 @@ import MainScreen from './components/MainScreen';
 import HomePage from './pages/Home/Home';
 import SearchPage from './pages/SearchClass/SearchClass';
 import DetailClassPage from './pages/DetailClass/detailClass';
-
+import SplashPage from './pages/Splash/Splash';
 function App() {
   return (
     <RecoilRoot>
       <Router>
         <MainScreen>
           <ThemeProvider theme={theme}>
             <Routes>
+              <Route path="/" element={<SplashPage />} />
               <Route path="home" element={<HomePage />} />
               <Route path="searchclass" element={<SearchPage />} />
               <Route path="detailclass" element={<DetailClassPage />} />

src/assets/icon.ts

@@ -3,3 +3,5 @@ export { ReactComponent as BackArrow } from './header/backarrow.svg';
 export { ReactComponent as CatholicLogo } from './logo/catholiclogo.svg';
 export { ReactComponent as CatholicNameLogo } from './logo/catholicNameLogo.svg';
 
+//스플래쉬 페이지
+export { ReactComponent as Hayang } from './icon/hayang.svg';

src/pages/DetailClass/Styles.ts

@@ -6,7 +6,7 @@ export const Layout = styled.div`
   align-items: center;
   justify-content: center;
   height: 100vh;
-  background-color: ${({ theme }) => theme.colors.backbasic};;
+  background-color: ${({ theme }) => theme.colors.backbasic};
   color: #333;
 
   h1 {

src/pages/Splash/Splash.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as S from './Styles';
+import { Hayang } from '../../assets/icon';
+const Splash: React.FC = () => {
+  return (
+    <S.Layout>
+       <Hayang />
+    </S.Layout>
+  );
+};
+
+export default Splash;

src/pages/Splash/Styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Layout = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-item: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.white};
+`;