feature: removes duplicate footer components, add location conditional

src/App.tsx

@@ -1,9 +1,10 @@
-import React from "react";
-import Login from "component/login";
+import Footer from "component/shared/footer";
+import { Outlet } from "react-router-dom";
 function App() {
   return (
     <div className="w-full h-full">
-      <Login />
+      <Outlet />
+      <Footer />
     </div>
   );
 }

src/component/explore/index.tsx

@@ -1,11 +1,9 @@
-import React, { useState } from "react";
 import { ReactComponent as ArrowDown } from "assets/icon/arrowdown.svg";
 import { ReactComponent as Arrowupright } from "assets/icon/arrowupright.svg";
-import { ReactComponent as Smile } from "assets/icon/smile.svg";
 import { ReactComponent as Iconc } from "assets/icon/iconc.svg";
-import Circles from "component/shared/circles";
+import { ReactComponent as Smile } from "assets/icon/smile.svg";
 import { InteractionSecondarywhite } from "component/shared/btn";
-import Header from "component/shared/header";
+import Circles from "component/shared/circles";
 type Props = {};
 function Index({}: Props) {
   return (
@@ -63,9 +61,6 @@ function Index({}: Props) {
               </pre>
             </div>
           </div>
-          <div className=" h-[80px]">
-            <Header />
-          </div>
         </div>
       </div>
     </div>

src/component/profile/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { ReactComponent as User } from "assets/icon/profile/user.svg";
 import { ReactComponent as Setting } from "assets/icon/profile/setting.svg";
-import Footer from "./footer";
 import Invite from "./invite";
 import { Info } from "component/create/animations";
 import { photos } from "component/explore/photos";
@@ -49,7 +48,6 @@ const Index = (props: Props) => {
           <Collectiongallery />
         )}
       </div>
-      <Footer />
       {action === "user" && (
         <Info>
           <Invite setClose={setAction} />

src/component/shared/footer/FooterItem.tsx

@@ -0,0 +1,31 @@
+import {
+  PropsWithChildren
+} from "react";
+import { Link } from "react-router-dom";
+
+type Props = {
+  locationPath: string;
+  linkPath: string;
+};
+
+const FooterItem = ({
+  locationPath,
+  linkPath,
+  children,
+}: PropsWithChildren<Props>) => {
+  return (
+    <>
+      <Link to={linkPath}>
+        {locationPath === linkPath ? <SelectedCircle /> : <>{children}</>}
+      </Link>
+    </>
+  );
+};
+
+const SelectedCircle = () => {
+  return (
+    <div className="w-[24px] h-[24px] bg-white rounded-[50%] cursor-pointer" />
+  );
+};
+
+export default FooterItem;

src/component/shared/footer/index.tsx

@@ -0,0 +1,29 @@
+import { ReactComponent as Add } from "assets/icon/add.svg";
+import { ReactComponent as Profile } from "assets/icon/people.svg";
+import { ReactComponent as Circle } from "assets/icon/profile/circle.svg";
+import { useLocation } from "react-router-dom";
+import FooterItem from "./FooterItem";
+
+type Props = {};
+
+const Footer = (props: Props) => {
+  const location = useLocation();
+
+  return (
+    <div className="absolute bottom-[16px] right-[8px] left-[8px] z-40 ">
+      <div className="px-[54px] py-[24px] bg-black80 backdrop-blur-[12px] rounded-[24px] flex items-center justify-between">
+        <FooterItem linkPath="/" locationPath={location.pathname}>
+          <Circle />
+        </FooterItem>
+        <FooterItem linkPath="/create" locationPath={location.pathname}>
+          <Add className="aspect-square w-[32px] text-white" />
+        </FooterItem>
+        <FooterItem linkPath="/profile" locationPath={location.pathname}>
+          <Profile />
+        </FooterItem>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/routes/index.tsx

@@ -1,18 +1,24 @@
-import { createBrowserRouter } from "react-router-dom";
 import Create from "component/create";
-import App from "../App";
 import Explore from "component/explore";
-import Finishtemplate from "component/template/finishtemplate";
 import Profile from "component/profile";
+import Finishtemplate from "component/template/finishtemplate";
+import { createBrowserRouter } from "react-router-dom";
+import App from "../App";
 
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
-  },
-  {
-    path: "/explore",
-    element: <Explore />,
+    children: [
+      {
+        index: true,
+        element: <Explore />,
+      },
+      {
+        path: "/profile",
+        element: <Profile />,
+      },
+    ],
   },
   {
     path: "/create",

yarn.lock

@@ -2948,7 +2948,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
 
 bowser@^2.11.0:
   version "2.11.0"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  resolved "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
 brace-expansion@^1.1.7:
@@ -3143,7 +3143,7 @@ cjs-module-lexer@^1.0.0:
 
 classnames@^2.3.2:
   version "2.3.2"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
 clean-css@^5.2.2:
@@ -3316,7 +3316,7 @@ [email protected]:
 
 copy-to-clipboard@^3.3.3:
   version "3.3.3"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
   dependencies:
     toggle-selection "^1.0.6"
@@ -4647,7 +4647,7 @@ fs.realpath@^1.0.0:
 
 fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
@@ -6022,7 +6022,7 @@ jsonfile@^6.0.1:
 
 jsonp@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  resolved "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz"
   integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==
   dependencies:
     debug "^2.1.3"
@@ -6282,7 +6282,7 @@ methods@~1.1.2:
 
 mic-check@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mic-check/-/mic-check-1.1.0.tgz#7728331c7b81c3ff6b08fc5eacc07dfaf1a3b3e3"
+  resolved "https://registry.npmjs.org/mic-check/-/mic-check-1.1.0.tgz"
   integrity sha512-JpTyNPKKnrjfCkNMEzmJ81jnL4vKPnk28DcngrqUHNoHNQC5lkhMoODu5p6r/WUHo40/NtzBZjqMFy1vfhFrig==
   dependencies:
     bowser "^2.11.0"
@@ -7432,7 +7432,7 @@ prop-types@^15.8.1:
 
 prop-types@~15.7.2:
   version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
     loose-envify "^1.4.0"
@@ -7595,7 +7595,7 @@ react-is@^18.0.0:
 
 react-photo-gallery@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.yarnpkg.com/react-photo-gallery/-/react-photo-gallery-8.0.0.tgz#04ff9f902a2342660e63e6817b4f010488db02b8"
+  resolved "https://registry.npmjs.org/react-photo-gallery/-/react-photo-gallery-8.0.0.tgz"
   integrity sha512-Y9458yygEB9cIZAWlBWuenlR+ghin1RopmmU3Vice8BeJl0Se7hzfxGDq8W1armB/ic/kphGg+G1jq5fOEd0sw==
   dependencies:
     prop-types "~15.7.2"
@@ -7678,15 +7678,15 @@ [email protected]:
 
 react-share@^4.4.1:
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/react-share/-/react-share-4.4.1.tgz#4bfb0b512e26afedfea2fb66eb13c95c28fb216a"
+  resolved "https://registry.npmjs.org/react-share/-/react-share-4.4.1.tgz"
   integrity sha512-AJ9m9RiJssqvYg7MoJUc9J0D7b/liWrsfQ99ndKc5vJ4oVHHd4Fy87jBlKEQPibT40oYA3AQ/a9/oQY6/yaigw==
   dependencies:
     classnames "^2.3.2"
     jsonp "^0.2.1"
 
 react-webcam@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.0.1.tgz#8249e1d621eb4bba7e3f52135f562439d0528df3"
+  resolved "https://registry.npmjs.org/react-webcam/-/react-webcam-7.0.1.tgz"
   integrity sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==
 
 react@^18.2.0:
@@ -8637,7 +8637,7 @@ to-regex-range@^5.0.1:
 
 toggle-selection@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
   integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
 [email protected]: