Merge pull request #82 from next-petree/feat_login

Feat login

src/component/Header/Header.tsx

@@ -25,15 +25,13 @@ const Header = () => {
   const profileImg = useAppSelector(selectBreederProfile);
 
   const handleClick = async () => {
-    if(isLoggedIn) {
-      navigate("/mypage/modifyauth")
-    }
-    else {
+    if (isLoggedIn) {
+      navigate("/mypage/modifyauth");
+    } else {
       const answer = await Swal.fire({
         ...alertList.infoMessage("로그인을 먼저 진행해주세요"),
-        width: "350px",
       });
-      if(answer) navigate("/login");
+      if (answer) navigate("/login");
     }
   };
 

src/component/KakaoCallback/KakaoCallback.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { get } from "../../api/api";
 import { getToken } from "../../api/token";
@@ -20,7 +20,6 @@ interface KakaoLoginResponse {
 const KakaoCallback = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const [error, setError] = useState("");
 
   useEffect(() => {
     const code = new URL(document.location.toString()).searchParams.get("code");
@@ -37,24 +36,22 @@ const KakaoCallback = () => {
 
     try {
       const response = await get<KakaoLoginResponse>(
-        `${REACT_APP_API_URL}/oauth/kakao/callback?code=${code}`,
+        `${REACT_APP_API_URL}oauth/kakao/callback?code=${code}`,
         {
           headers: {
             Authorization: `Bearer ${token}`,
           },
         },
       );
+
       if (response.data.status === "SUCCESS") {
         localStorage.setItem("accessToken", response.data.data.accessToken);
         localStorage.setItem("refreshToken", response.data.data.refreshToken);
         navigate("/");
-      } else {
-        const errorMessage =
-          typeof response.data.data === "string"
-            ? response.data.data
-            : "로그인에 실패했습니다.";
-        await Swal.fire(alertList.errorMessage(errorMessage));
-        setError("로그인에 실패했습니다.");
+      } else if (response.data.status === "FAIL") {
+        Swal.fire(alertList.errorMessage("카카오에 연동된 계정이 없습니다."));
+        navigate("/login");
+        return;
       }
     } catch (error) {
       console.error("Kakao login error:", error);
@@ -65,12 +62,7 @@ const KakaoCallback = () => {
     }
   };
 
-  return (
-    <div>
-      카카오 로그인 중...
-      {error && <div>{error}</div>}
-    </div>
-  );
+  return <div>카카오 로그인 중...</div>;
 };
 
 export default KakaoCallback;

src/component/MyPage/Navbar/Navbar.tsx

@@ -1,10 +1,14 @@
 import { useLocation, useNavigate } from "react-router-dom";
+import Swal from "sweetalert2";
+import alertList from "../../../utils/Swal1";
+import { removeToken } from "../../../api/token";
 import {
   AuthDeleteContainer,
   CategoryContent,
   CategoryContainer,
   Main,
   NavBarContainer,
+  LogoutContainer,
 } from "./Styles1";
 
 export const NavCategory = [
@@ -38,6 +42,24 @@ const Navbar = () => {
   const DeleteAccount = () => {
     navigation("/mypage/remove-account");
   };
+
+  const handleLogout = async () => {
+    const answer = await Swal.fire(
+      alertList.doubleCheckMessage("로그아웃 하시겠습니까?"),
+    );
+
+    if (answer.isConfirmed) {
+      try {
+        removeToken("accessToken");
+        removeToken("refreshToken");
+        navigation("/");
+        Swal.fire(alertList.successMessage("로그아웃이 완료되었습니다"));
+      } catch (error) {
+        console.error("로그아웃 중 오류 발생:", error);
+      }
+    }
+  };
+
   return (
     <NavBarContainer>
       <Main>
@@ -50,9 +72,12 @@ const Navbar = () => {
             <CategoryContent>{category.name}</CategoryContent>
           </CategoryContainer>
         ))}
+        <LogoutContainer onClick={handleLogout}>
+          <CategoryContent style={{ color: "red" }}>로그아웃</CategoryContent>
+        </LogoutContainer>
       </Main>
       <AuthDeleteContainer onClick={DeleteAccount}>
-        <CategoryContent>회원 탈퇴</CategoryContent>
+        <CategoryContent>회원탈퇴</CategoryContent>
       </AuthDeleteContainer>
     </NavBarContainer>
   );

src/component/MyPage/Navbar/Styles1.ts

@@ -48,9 +48,24 @@ export const AuthDeleteContainer = styled.div`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  &:hover {
+    background-color: #f5f5f5;
+    border-radius: 0 0 20px 20px;
+  }
+`;
 
+export const LogoutContainer = styled.div`
+  width: 100%;
+  height: 8%;
+  padding: 1.5vh 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
   &:hover {
     background-color: #f5f5f5;
     border-radius: 0 0 20px 20px;
   }
 `;
+
+export const LogoutButton = styled.div``;