Merge pull request #2 from SWM-FIRE/FIRE-130-폴더-구조-설계

FIRE-130 - FIRE-130-폴더-구조-설계

src/App.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import styled from 'styled-components';
+import Layout from './components/layout/Layout';
+import MainPage from './pages/MainPage';
 
 function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<TestContainer />} />
+        <Route path="/" element={<Layout />}>
+          <Route index element={<MainPage />} />
+        </Route>
         <Route path="/test2" element={<TestContainer2 />} />
         <Route path="/test3" element={<TestContainer3 />} />
       </Routes>
     </BrowserRouter>
   );
 }
 
-const TestContainer = styled.div`
-  width: 100vw;
-  height: 100vh;
-  background-color: lightcyan;
-`;
 const TestContainer2 = styled.div`
   width: 100vw;
   height: 100vh;

src/components/layout/Footer.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export default function Footer() {
+  return (
+    <FooterWrapper>
+      <Container>
+        <span>&copy; {new Date().getFullYear()} by FIRE </span>
+      </Container>
+    </FooterWrapper>
+  );
+}
+
+const FooterWrapper = styled.footer`
+  width: 100%;
+  bottom: 0;
+`;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 2rem;
+  span {
+    font-size: 1.5rem;
+  }
+`;

src/components/layout/Layout.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
+import Footer from './Footer';
+
+export default function Layout() {
+  return (
+    <Container>
+      <Outlet />
+      <Footer />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+`;

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import GlobalStyle from './Styles/GlobalStyle';
+import GlobalStyle from './styles/GlobalStyle';
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/MainPage.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export default function MainPage() {
+  return <Container />;
+}
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-color: lightskyblue;
+`;

src/styles/GlobalStyle.tsx

@@ -0,0 +1,79 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+    * {
+        box-sizing: border-box;
+    }
+
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font-family: sans-serif;
+        vertical-align: baseline;
+    }
+
+    input {
+        font-family: sans-serif;
+    }
+
+    button {
+        font-family: sans-serif;
+    }
+
+    html {
+        font-size: 62.5%;
+    }
+
+    html, body, #root {
+        min-height: 100%;
+    }
+
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+        display: block;
+    }
+
+    body {
+        line-height: 1;
+    }
+
+    ol, ul, li {
+        list-style: none;
+    }
+
+    blockquote, q {
+        quotes: none;
+    }
+
+    blockquote::before, blockquote::after,
+    q::before, q::after {
+        content: '';
+        content: none;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    /* a {
+        text-decoration: none;
+        color: inherit;
+    } */
+`;
+
+export default GlobalStyle;