Merge pull request #17 from DEVOCEAN-YOUNG-404/seungjun

Seungjun
DEVOCEAN-YOUNG-404 · Aug 22, 2023 · 483d158 · 483d158
2 parents 8f659cf + d0fb927
commit 483d158
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 7 deletions.
diff --git a/front/public/index.html b/front/public/index.html
@@ -38,8 +38,8 @@
     ondragstart="return false"
   >
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="modal-root"></div>
     <div id="root"></div>
+    <div id="modal-root"></div>
 
     <!--
       This HTML file is a template.

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -6,6 +6,7 @@ import TranslatePage from "./pages/TranslatePage/TranslatePage";
 import Plugin from "./pages/PlugIn/PlugIn";
 import Login from "./pages/Auth/Login/Login";
 import SignUp from "./pages/Auth/SIgnUp/SignUp";
+import NotFound from "./pages/NotFound/NotFound";
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
           <Route path="/plugin" element={<Plugin />} />
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<SignUp />} />
+          <Route path="/*" element={<NotFound />} />
         </Routes>
       </Router>
     </RecoilRoot>

diff --git a/front/src/assets/images/404.png b/front/src/assets/images/404.png
diff --git a/front/src/components/Footer/Footer.tsx b/front/src/components/Footer/Footer.tsx
@@ -10,7 +10,7 @@ const Footer = () => {
   return (
     <div
       className={`bg-[#23A352] w-full ${
-        path === "/" ? "fixed bottom-[0px]" : ""
+        path === "/" ? "fixed bottom-[0px]" : "relative"
       } h-[130px] flex flex-row items-center justify-center`}
     >
       <img src={logo} alt="logo" className="w-auto h-[130px]" />

diff --git a/front/src/pages/NotFound/NotFound.tsx b/front/src/pages/NotFound/NotFound.tsx
@@ -0,0 +1,26 @@
+import Header from "../../components/Header/Header";
+import Footer from "../../components/Footer/Footer";
+import notfound from "../../assets/images/404.png";
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <div className="flex flex-col w-full h-[100vh]">
+      <Header />
+      <div className="flex flex-col items-center justify-center h-full">
+        <img src={notfound} alt="not found" className="w-auto h-[300px]" />
+        <p className="z-10 text-4xl font-bold text-black font-main mt-[-40px]">
+          페이지를 찾을 수 없습니다!
+        </p>
+        <Link to="/">
+          <button className="w-[300px] h-[56px] font-main bg-main-2 text-white font-bold text-xl rounded-xl mt-[40px]">
+            메인 페이지로 돌아가기
+          </button>
+        </Link>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/front/src/pages/PlugIn/PlugIn.tsx b/front/src/pages/PlugIn/PlugIn.tsx
@@ -9,7 +9,7 @@ const Plugin = () => {
   const isLogin = useRecoilValue(authState);
 
   return (
-    <div className="w-full h-[100vh] flex flex-col min-h-full">
+    <div className="flex flex-col w-full h-[100vh]">
       <Header />
       {isLogin ? <UsrOnline /> : <UsrOffline />}
       <Footer />

diff --git a/front/src/pages/PlugIn/UsrOnline.tsx b/front/src/pages/PlugIn/UsrOnline.tsx
@@ -16,13 +16,16 @@ const UsrOnline = () => {
   };
 
   return (
-    <div className="min-w-[1366px] h-[1300px] flex flex-row w-full">
+    <div className="h-full min-w-[1366px] w-full flex justify-start mt-[100px] flex-col mb-[100px]">
       {openModal && <Modal onOpenModal={onModalAlert} />}
-      <div className="w-full h-auto flex items-start justify-start mt-[100px] flex-col mb-[100px]">
+
+      <div className="flex items-start justify-start">
         <p className="h-auto text-5xl font-bold text-black font-main ml-[118px]">
           플러그인
         </p>
-        <div className="flex flex-row h-[320px] items-center justify-center w-full md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
+      </div>
+      <div className="h-full flex flex-col items-start justify-start md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
+        <div className="flex flex-row h-[320px] items-center justify-center w-full mb-[50px]">
           <div className="w-[301px] h-[320px] mt-[50px] border border-[#5865F2] flex flex-col items-center justify-center rounded-xl ">
             <img
               src={discord_blue}
@@ -79,7 +82,7 @@ const UsrOnline = () => {
             </button>
           </div>
         </div>
-        <div className="flex flex-row h-[320px] items-center justify-center w-full md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
+        <div className="flex flex-row h-[320px] items-center justify-center w-full">
           <div className="w-[301px] h-[320px] mt-[50px] border border-[#E83B6F] flex flex-col items-center justify-center rounded-xl ">
             <img
               src={instagram}