Add footer

src/App.tsx

@@ -5,6 +5,7 @@ import Editor from './components/Editor/Editor';
 import ReactSplitPane from './components/SplitPane/SplitPane';
 import SwaggerUI from 'swagger-ui-react';
 import petStoreAPISpec from './assets/petstore.apispec.json';
+import Footer from './components/Footer/Footer';
 
 
 function App() {
@@ -41,6 +42,7 @@ function App() {
           </ReactSplitPane>
         </div>
       </div>
+      <Footer />
     </>
   )
 }

src/components/Footer/Footer.tsx

@@ -0,0 +1,12 @@
+const Footer:React.FC = ({}) => {
+    return(
+        <footer>
+            <div className="footer-wrapper">
+                <div>© 2024 Jehyun Jung.</div>
+                <div className="ms-3">You can reach me on <a href="https://www.linkedin.com/in/jehyun-jung-bb247813b/" target="_blank">LinkedIn</a> and <a href="https://github.com/congmul" target="_blank">GitHub</a>.</div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;

src/sass/components/_footer.scss

@@ -0,0 +1,11 @@
+footer{
+    height: 100%;
+    padding: 15px;
+    border-top: 1px solid #d2d2d2;
+    text-align: center;
+    .footer-wrapper{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/sass/index.scss

@@ -9,9 +9,11 @@
 @import "./components/readfile";
 @import "./components/splitPane";
 @import "./components/editor/editor";
+@import "./components/footer";
 
 .app-wrapper{
     display: flex;
+    height: calc(100vh - 55px);
     .editor-page-wrapper{
         position:relative;
         width: calc(100vw - 350px);