feature: add route setting and login page

src/components/api/index.js

@@ -1,6 +1,8 @@
+import { imgurImageUrl, imgurAlbumUrl } from 'constant';
+
 export default function imgurApi(query) {
   return {
-    getImgApi: () => `https://api.imgur.com/3/image/${query}`,
-    getAlbumApi: () => `https://api.imgur.com/3/album/${query}`,
+    getImgApi: () => `${imgurImageUrl}${query}`,
+    getAlbumApi: () => `${imgurAlbumUrl}${query}`,
   };
 }

src/components/layout/AccountLayout.jsx

@@ -1,11 +1,16 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import { Header, AccountNav, MainNav } from './components';
 
 function Layout() {
+  const location = useLocation();
+
   return (
     <>
-      <header>
-        <title>Account Settings</title>
-      </header>
+      <Header pathName={location.pathname} />
+
+      <MainNav />
+
+      <AccountNav />
       <main>
         <p>Welcome to Life Habits</p>
         <Outlet />

src/components/layout/Layout.jsx

@@ -1,10 +1,12 @@
 import { Header, Footer, MainNav } from './components';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 
 function Layout() {
+  const location = useLocation();
+
   return (
     <>
-      <Header />
+      <Header pathName={location.pathname} />
       <MainNav />
       <main>
         <Outlet />

src/components/layout/components/AccountNav.jsx

@@ -0,0 +1,16 @@
+import { NavLink } from 'react-router-dom';
+
+function AccountNav() {
+  return (
+    <nav className="flex gap-4 items-center justify-center bg-blue-300">
+      <NavLink className="hover:bg-pink-300 p-2" to="/account/login">
+        Login
+      </NavLink>
+      <NavLink className="hover:bg-pink-300 p-2" to="/account/sign-up">
+        Sign-up
+      </NavLink>
+    </nav>
+  );
+}
+
+export default AccountNav;

src/components/layout/components/Header.jsx

@@ -1,7 +1,8 @@
-function Header() {
+function Header(props) {
   return (
     <header>
       <h1>Header Component is here</h1>
+      <h2>here is {props.pathName || 'pathName'}</h2>
     </header>
   );
 }

src/components/layout/components/MainNav.jsx

@@ -1,19 +1,20 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 function MainNav() {
   return (
-    <nav>
-      <ul>
-        <li>
-          <Link to="/">首頁</Link>
-        </li>
-        <li>
-          <Link to="/diet">飲食紀錄</Link>
-        </li>
-        <li>
-          <Link to="/ring-fit">健身環</Link>
-        </li>
-      </ul>
+    <nav className="flex gap-4 items-center justify-center border-2 border-blue-500">
+      <NavLink className="hover:bg-pink-300 p-2" to="/home">
+        Home
+      </NavLink>
+      <NavLink className="hover:bg-pink-300 p-2" to="/diet">
+        Diet
+      </NavLink>
+      <NavLink className="hover:bg-pink-300 p-2" to="/ring-fit">
+        Ring-fit
+      </NavLink>
+      <NavLink className="hover:bg-pink-300 p-2" to="/account">
+        Account
+      </NavLink>
     </nav>
   );
 }

src/components/layout/components/index.jsx

@@ -1,5 +1,6 @@
 import Header from './Header';
 import Footer from './Footer';
 import MainNav from './MainNav';
+import AccountNav from './AccountNav';
 
-export { Header, Footer, MainNav };
+export { Header, Footer, MainNav, AccountNav };

src/components/utils/LoginValidation/CheckLogin.js

@@ -0,0 +1,19 @@
+import { getData } from './FetchData';
+
+/**
+ * 把輸入的登入資料與取得的帳戶資料做比對
+ * @param {object} formData
+ */
+async function checkAccount(formData) {
+  const account = await getData();
+
+  console.log('account: ', account);
+
+  const loginSuccess = await account.find(item => {
+    return item.email === formData.email && item.password === formData.password;
+  });
+
+  return loginSuccess;
+}
+
+export { checkAccount };