2024-Saphy · 2EETY · Sep 29, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 7, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/frontend/public/android-chrome-192x192.png b/frontend/public/android-chrome-192x192.png
diff --git a/frontend/public/android-chrome-512x512.png b/frontend/public/android-chrome-512x512.png
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
diff --git a/frontend/public/favicon-16x16.png b/frontend/public/favicon-16x16.png
diff --git a/frontend/public/favicon-32x32.png b/frontend/public/favicon-32x32.png
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,13 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <title>React App</title>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Saphy</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,15 +1,21 @@
 import React from 'react';
-import './App.css';
 import './index.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import LandingPage from './pages/Landing';
+import ErrorPage from './pages/Error';
 
 function App() {
-  return (
-    <div className="text-center">
-      <header>
-        <h1>Hi</h1>
-      </header>
-    </div>
-  );
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      // element: <RootLayout />,
+      errorElement: <ErrorPage />,
+      children: [{ path: '/', element: <LandingPage /> }],
+    },
+  ]);
+
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { FaGithub, FaYoutube } from 'react-icons/fa';
+import { IoLogoInstagram } from 'react-icons/io';
+
+function Footer() {
+  const emailAddress = 'your-email@example.com';
+
+  const thisYear = () => {
+    const year = new Date().getFullYear();
+    return year;
+  };
+
+  return (
+    <footer className="bottom-0 z-10 flex h-auto w-full items-center bg-gray-900 px-56 py-10 text-white">
+      <div className="grid w-full grid-cols-3">
+        <div className="flex items-center justify-start gap-10">
+          <a
+            href="https://github.com/2024-Saphy"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white"
+            aria-label="github"
+          >
+            <FaGithub size={40} />
+          </a>
+          <a
+            href="https://www.youtube.com/yourchannel"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white"
+            aria-label="youtube"
+          >
+            <FaYoutube size={40} />
+          </a>
+          <a
+            href="https://www.instagram.com/yourchannel"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white"
+            aria-label="instagram"
+          >
+            <IoLogoInstagram size={40} />
+          </a>
+        </div>
+
+        <div className="flex items-center justify-center">
+          <p className="font-gmarketbold text-xl">SAPHY!</p>
+        </div>
+
+        <div className="flex flex-col items-center justify-end gap-1">
+          <p className="font-gmarketbold text-lg">Saphy</p>
+          <p className="text-sm">상상기업 프로젝트</p>
+          <p className="text-sm">
+            문의: &nbsp;
+            <a
+              className="underline hover:text-sky-500"
+              href={`mailto:${emailAddress}`}
+            >
+              {emailAddress}
+            </a>
+          </p>
+
+          <p className="text-sm">Copyright &copy; {thisYear()}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import { FaGithub, FaYoutube } from 'react-icons/fa';
+
+function Header() {
+  return (
+    <nav className="text-md fixed left-0 top-0 z-50 w-full rounded-b-md bg-gray-900 p-4 text-white">
+      <ul className="mx-11 flex justify-between">
+        <li className="flex items-center">
+          <Link
+            to="/"
+            className="flex transform items-center text-white transition duration-300 ease-in-out hover:scale-110 hover:text-blue-400"
+          >
+            <span className="text-xl">Saphy</span>
+          </Link>
+        </li>
+        <li className="flex items-center space-x-6">
+          <a
+            href="https://github.com/2024-Saphy"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Github"
+          >
+            <FaGithub size={30} className="hover:text-lime-200" />
+          </a>
+          <FaYoutube size={30} className="hover:text-lime-200" />
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -6,7 +6,7 @@ body {
   margin: 0;
   width: 100%;
   height: 100vh;
-  background-color: #f0fdf4;
+  background-color: white;
   font-family:
     'GmarketSansMedium',
     'GmarketSansBold',

diff --git a/frontend/src/pages/Error.jsx b/frontend/src/pages/Error.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function ErrorPage() {
+  return (
+    <main className="flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-5xl font-bold text-black">에러가 발생했습니다</h1>
+        <h2 className="text-lg text-black">페이지를 찾을 수 없습니다.</h2>
+      </div>
+    </main>
+  );
+}
+
+export default ErrorPage;
diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import MainSection from '../components/section/MainSection';
+import AboutSection from '../components/section/AboutSection';
+import FeatureSection from '../components/section/FeatureSection';
+
+function LandingPage() {
+  return (
+    <div className="grid grid-cols-1">
+      <Header />
+      <div className="relative">
+        <MainSection />
+        <AboutSection />
+        <FeatureSection />
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default LandingPage;