Feat: 로그인 토큰 기능

src/components/login/Button.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom";
 
 const ButtonStyle = styled.button`
   cursor: pointer;
@@ -15,6 +16,12 @@ const ButtonStyle = styled.button`
 `;
 
 const Button = ({ handleLogin }: { handleLogin: () => void }) => {
-  return <ButtonStyle onClick={handleLogin}>로그인</ButtonStyle>;
+  const navigate = useNavigate();
+
+  const onClick = () => {
+    handleLogin();
+    navigate("/home"); // handleLogin 실행 후 네비게이트
+  };
+  return <ButtonStyle onClick={onClick}>로그인</ButtonStyle>;
 };
 export default Button;

src/components/pages/JoinPage.tsx

@@ -4,6 +4,7 @@ import styled from "@emotion/styled";
 import GotoLogin from "../join/GotoLogin";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { handleSignup } from "../../services/handleSignup";
 
 const JoinContainerStyle = styled.div`
   display: flex;
@@ -37,42 +38,7 @@ const JoinPage = () => {
   const [newPw, setNewPw] = useState<string>("");
   const [checkNewPw, setCheckNewPw] = useState<string>("");
   const [newAlias, setNewAlias] = useState<string>("");
-
-  const handleSignup = async () => {
-    const navigate = useNavigate();
-    if (newPw !== checkNewPw) {
-      alert("비밀번호가 일치하지 않습니다.");
-      return;
-    }
-    const signupData = {
-      loginId: newId,
-      username: newAlias,
-      password: newPw,
-    };
-
-    try {
-      const response = await fetch(
-        "http://13.125.208.182:8080/v1/members/join",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(signupData),
-          credentials: "include",
-        }
-      );
-      if (response.ok) {
-        alert("회원가입에 성공했습니다!");
-        navigate("/login");
-      } else {
-        const errorData = await response.json();
-        alert(`회원가입 실패: ${errorData.message}`);
-        console.log(`Error status : ${response.status}`);
-      }
-    } catch (error) {
-      console.log("회원가입 요청 중 오류 발생:", error);
-      alert("회원가입 요청 중 문제가 발생했습니다.");
-    }
-  };
+  const navigator = useNavigate();
 
   return (
     <>
@@ -89,7 +55,11 @@ const JoinPage = () => {
             checkNewPw={checkNewPw}
             setCheckNewPw={setCheckNewPw}
           />
-          <Button handleSignup={handleSignup} />
+          <Button
+            handleSignup={() =>
+              handleSignup(newId, newAlias, newPw, checkNewPw, navigator)
+            }
+          />
           <GotoLogin />
         </JoinWperStyle>
       </JoinContainerStyle>

src/components/pages/LoginPage.tsx

@@ -6,6 +6,7 @@ import Input from "../login/Input";
 import Button from "../login/Button";
 import GotoJoin from "../login/GotoJoin";
 import { useNavigate } from "react-router-dom";
+import { handleLogin } from "../../services/handleLogin";
 
 const WrapperStyle = styled.div`
   display: flex;
@@ -44,6 +45,7 @@ const LoginPage = () => {
   const [id, setId] = useState<string>("");
   const [pw, setPw] = useState<string>("");
   const [PwValid, setPwValid] = useState<boolean>(false);
+  const navigate = useNavigate();
 
   const handlePw = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -53,50 +55,6 @@ const LoginPage = () => {
     setPwValid(regex.test(value));
   };
 
-  const handleLogin = async () => {
-    const navigate = useNavigate();
-    if (!PwValid) {
-      alert(
-        "비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다."
-      );
-      return;
-    }
-    const loginId = id;
-    const password = pw;
-    const loginData = { loginId, password };
-
-    try {
-      const response = await fetch(
-        "http://13.125.208.182:8080/v1/members/login",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(loginData),
-        }
-      );
-
-      if (response.ok) {
-        const data = await response.json();
-        console.log("로그인 성공:", data);
-        if (data.accessToken) {
-          sessionStorage.setItem("accessToken", data.accessToken);
-          console.log(`Token 저장 : ${data.accessToken}`);
-          navigate("/home");
-        } else {
-          console.error("서버로부터 AccessToken을 발급받지 못했습니다.");
-        }
-      } else {
-        console.error("로그인 실패");
-        alert("로그인에 실패했습니다. 아이디 또는 비밀번호를 확인하세요.");
-      }
-    } catch (error) {
-      console.error("네트워크 에러:", error);
-      alert("서버에 연결할 수 없습니다. 다시 시도해주세요.");
-    }
-  };
-
-  console.log("로그인 페이지 렌더링");
-
   return (
     <>
       <MainContainerStyle>
@@ -109,7 +67,7 @@ const LoginPage = () => {
             handlePw={handlePw}
             pwValid={PwValid}
           />
-          <Button handleLogin={handleLogin} />
+          <Button handleLogin={() => handleLogin(id, pw, navigate)} />
         </WrapperStyle>
         <GotoJoin />
       </MainContainerStyle>

src/services/handleLogin.ts

@@ -0,0 +1,42 @@
+export const handleLogin = async (
+  id: string,
+  pw: string,
+  navigate: (path: string) => void
+) => {
+  const regex =
+    /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
+
+  if (!regex.test(pw)) {
+    alert("비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다.");
+    return;
+  }
+
+  const loginData = { loginId: id, password: pw };
+
+  try {
+    const response = await fetch("http://15.164.98.149:8080/v1/members/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(loginData),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      console.log("로그인 성공:", data);
+
+      if (data.accessToken) {
+        sessionStorage.setItem("accessToken", data.accessToken);
+        console.log(`Token 저장 : ${data.accessToken}`);
+        navigate("/home");
+      } else {
+        console.error("서버로부터 AccessToken을 발급받지 못했습니다.");
+      }
+    } else {
+      console.error("로그인 실패");
+      alert("로그인에 실패했습니다. 아이디 또는 비밀번호를 확인하세요.");
+    }
+  } catch (error) {
+    console.error("네트워크 에러:", error);
+    alert("서버에 연결할 수 없습니다. 다시 시도해주세요.");
+  }
+};

src/services/handleSignup.ts

@@ -0,0 +1,37 @@
+export const handleSignup = async (
+  newId: string,
+  newAlias: string,
+  newPw: string,
+  checkNewPw: string,
+  navigate: (path: string) => void
+) => {
+  if (newPw !== checkNewPw) {
+    alert("비밀번호가 일치하지 않습니다.");
+    return;
+  }
+  const signupData = {
+    loginId: newId,
+    username: newAlias,
+    password: newPw,
+  };
+
+  try {
+    const response = await fetch("http://15.164.98.149:8080/v1/members/join", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(signupData),
+      credentials: "include",
+    });
+    if (response.ok) {
+      alert("회원가입에 성공했습니다!");
+      navigate("/login");
+    } else {
+      const errorData = await response.json();
+      alert(`회원가입 실패: ${errorData.message}`);
+      console.log(`Error status : ${response.status}`);
+    }
+  } catch (error) {
+    console.log("회원가입 요청 중 오류 발생:", error);
+    alert("회원가입 요청 중 문제가 발생했습니다.");
+  }
+};