From d349d4a327e08c003a37601690cde06ed86c0aab Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Sun, 26 Jan 2025 15:02:29 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/Button.tsx    | 9 ++++++++-
 src/components/pages/LoginPage.tsx | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/login/Button.tsx b/src/components/login/Button.tsx
index cb2a6a7..d8aca06 100644
--- a/src/components/login/Button.tsx
+++ b/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;
diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx
index 764f691..e47ddfa 100644
--- a/src/components/pages/LoginPage.tsx
+++ b/src/components/pages/LoginPage.tsx
@@ -44,6 +44,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;
@@ -54,7 +55,6 @@ const LoginPage = () => {
   };
 
   const handleLogin = async () => {
-    const navigate = useNavigate();
     if (!PwValid) {
       alert(
         "비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다."
@@ -67,7 +67,7 @@ const LoginPage = () => {
 
     try {
       const response = await fetch(
-        "http://13.125.208.182:8080/v1/members/login",
+        "http://15.164.98.149:8080/v1/members/login",
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },

From 754e839ca31c25bda466cedd02d07c62ff1c3b4f Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Sun, 26 Jan 2025 15:41:30 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/LoginPage.tsx | 46 ++----------------------------
 src/services/handleLogin.ts        | 42 +++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 44 deletions(-)
 create mode 100644 src/services/handleLogin.ts

diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx
index e47ddfa..08f50cf 100644
--- a/src/components/pages/LoginPage.tsx
+++ b/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;
@@ -54,49 +55,6 @@ const LoginPage = () => {
     setPwValid(regex.test(value));
   };
 
-  const handleLogin = async () => {
-    if (!PwValid) {
-      alert(
-        "비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다."
-      );
-      return;
-    }
-    const loginId = id;
-    const password = pw;
-    const loginData = { loginId, password };
-
-    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("서버에 연결할 수 없습니다. 다시 시도해주세요.");
-    }
-  };
-
-  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>
diff --git a/src/services/handleLogin.ts b/src/services/handleLogin.ts
new file mode 100644
index 0000000..cc26ca3
--- /dev/null
+++ b/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("서버에 연결할 수 없습니다. 다시 시도해주세요.");
+  }
+};

From 0a633f75e2b4ff43f218737197a9b722f3fc4723 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Sun, 26 Jan 2025 16:06:42 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/JoinPage.tsx | 44 +++++--------------------------
 src/services/handleSignup.ts      | 37 ++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 37 deletions(-)
 create mode 100644 src/services/handleSignup.ts

diff --git a/src/components/pages/JoinPage.tsx b/src/components/pages/JoinPage.tsx
index aaf5f79..4765457 100644
--- a/src/components/pages/JoinPage.tsx
+++ b/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>
diff --git a/src/services/handleSignup.ts b/src/services/handleSignup.ts
new file mode 100644
index 0000000..84ebbba
--- /dev/null
+++ b/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("회원가입 요청 중 문제가 발생했습니다.");
+  }
+};