Merge pull request #319 from kss761036/Next-김승석-sprint11

[김승석] Sprint11

Author: withyj-codeit

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "next": "14.2.23",
     "react": "^18",

package.json

@@ -4,16 +4,18 @@ interface Props {
   type: string;
   placeholder: string;
   value?: string;
+  name?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const FormInput = ({ type, placeholder, value, onChange }: Props) => {
+const FormInput = ({ type, placeholder, value, name, onChange }: Props) => {
   return (
     <input
       className={styles.input}
       type={type}
       placeholder={placeholder}
       value={value}
+      name={name}
       onChange={onChange}
     />
   );

public/assets/img/icon_google.svg

@@ -38,6 +38,7 @@
 }
 .header .my {
   margin-left: auto;
+  cursor: pointer;
 }
 
 @media (max-width: 744px) {

public/assets/img/icon_kakao.svg

@@ -1,7 +1,30 @@
 import Link from "next/link";
 import styles from "./header-layout.module.css";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
 export default function HeaderLayout() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    if (accessToken) {
+      setIsLoggedIn(true);
+    }
+  }, [router.pathname]);
+
+  const onLogout: React.MouseEventHandler<HTMLDivElement> = () => {
+    const result = confirm("로그아웃 하시겠습니까?");
+    if (result) {
+      localStorage.removeItem("accessToken");
+      localStorage.removeItem("refreshToken");
+      localStorage.removeItem("user");
+      setIsLoggedIn(false);
+    } else {
+      return;
+    }
+  };
   return (
     <header className={styles.header}>
       <div className="inner">
@@ -27,9 +50,15 @@ export default function HeaderLayout() {
             <Link href="">중고마켓</Link>
           </li>
         </ul>
-        <Link className={styles.my} href="">
-          <img src="/assets/img/icon_my.svg" alt="마이페이지" />
-        </Link>
+        {isLoggedIn ? (
+          <div className={styles.my} onClick={onLogout}>
+            <img src="/assets/img/icon_my.svg" alt="마이페이지" />
+          </div>
+        ) : (
+          <Link href="/login" className={`btn ${styles.my}`}>
+            로그인
+          </Link>
+        )}
       </div>
     </header>
   );

src/components/form/form-input.tsx

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const Instance = axios.create({
+  baseURL: "https://panda-market-api.vercel.app",
+});
+
+export default Instance;
+export { axios };

src/components/header-layout.module.css

@@ -3,6 +3,5 @@ import dayjs from "dayjs";
 export default function formatDate(dateString: string) {
   const isoDate = new Date(dateString);
   const formattedDate = dayjs(isoDate).format("YYYY. MM. DD");
-
   return formattedDate;
 }

src/components/header-layout.tsx

@@ -34,8 +34,6 @@ export default function Page() {
       setBestPageSize(3);
     }
   }, [isMo, isTa]);
-
-
   const onSortToggle = () => {
     setSortState(!sortState);
   };
@@ -93,13 +91,11 @@ export default function Page() {
     setTimeout(() => {
       setSearch("");
     }, 100);
-
   };
 
   const ref = useOutsideClick(() => {
     setSortState(false);
   });
-
   const handleScroll = () => {
     const bottom =
       window.innerHeight + document.documentElement.scrollTop ===
@@ -132,7 +128,6 @@ export default function Page() {
         <div className={styles.boart_common_title}>
           <div className="common_title">게시글</div>
           <Link className="btn" href="/addboard">
-
             글쓰기
           </Link>
         </div>