From e047320b856531ab5e799c255e2cc4acfefce3f1 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 00:33:40 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20gotologin=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/join/GotoLogin.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/join/GotoLogin.tsx b/src/components/join/GotoLogin.tsx
index 0875bb6..6bb1c35 100644
--- a/src/components/join/GotoLogin.tsx
+++ b/src/components/join/GotoLogin.tsx
@@ -1,7 +1,36 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom";
+
+const GotoLoginContainer = styled.div`
+  font-size: 16px;
+  color: gray;
+  display: flex;
+  justify-content: center;
+`;
+
+const UnderlinedLink = styled.u`
+  color: gray;
+  cursor: pointer;
+  text-decoration: underline;
+  justify-content: center;
+
+  &:hover {
+    color: black;
+  }
+`;
+
 const GotoLogin = () => {
+  const navigate = useNavigate();
+  const handleGotoLogin = () => {
+    navigate("/login"); // 로그인 후 이동할 경로
+  };
   return (
     <div>
-      이미 계정이 있으신가요? <u>로그인</u>
+      <GotoLoginContainer>
+        이미 계정이 있으신가요?
+        <UnderlinedLink onClick={handleGotoLogin}> 로그인</UnderlinedLink>
+      </GotoLoginContainer>
     </div>
   );
 };

From 3d5621e035f9c83ce25d1523b7832df77414b03d Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 00:55:41 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20gotologin=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                        |  2 +-
 src/components/login/GotoJoin.tsx  | 35 ++++++++++++++++++++++++++++++
 src/components/pages/LoginPage.tsx |  5 ++---
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/components/login/GotoJoin.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 74e8365..b828728 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ function App() {
       <BrowserRouter>
         <NavBar />
         <Routes>
-          <Route path="/" element={<JoinPage />} />
+          <Route path="/join" element={<JoinPage />} />
           <Route path="/home" element={<HomePage />} />
           <Route path="/login" element={<LoginPage />} />
         </Routes>
diff --git a/src/components/login/GotoJoin.tsx b/src/components/login/GotoJoin.tsx
new file mode 100644
index 0000000..de249c7
--- /dev/null
+++ b/src/components/login/GotoJoin.tsx
@@ -0,0 +1,35 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom";
+
+const GotoJoinContainer = styled.div`
+  font-size: 16px;
+  color: gray;
+  display: flex;
+  justify-content: center;
+`;
+
+const UnderlinedLink = styled.u`
+  color: gray;
+  cursor: pointer;
+  text-decoration: underline;
+  justify-content: center;
+
+  &:hover {
+    color: black;
+  }
+`;
+
+const GotoJoin = () => {
+  const navigate = useNavigate();
+  const handleGotoJoin = () => {
+    navigate("/join"); // 로그인 후 이동할 경로
+  };
+  return (
+    <GotoJoinContainer>
+      <UnderlinedLink onClick={handleGotoJoin}>회원가입</UnderlinedLink>
+    </GotoJoinContainer>
+  );
+};
+
+export default GotoJoin;
diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx
index 3254b53..1151e55 100644
--- a/src/components/pages/LoginPage.tsx
+++ b/src/components/pages/LoginPage.tsx
@@ -4,6 +4,7 @@ import styled from "@emotion/styled";
 import { useState } from "react";
 import Input from "../login/Input";
 import Button from "../login/Button";
+import GotoJoin from "../login/GotoJoin";
 
 const WrapperStyle = styled.div`
   display: flex;
@@ -58,9 +59,7 @@ const LoginPage = () => {
           />
           <Button />
         </WrapperStyle>
-        <div>
-          <p> 회원가입 </p>
-        </div>
+        <GotoJoin />
       </MainContainerStyle>
     </>
   );

From 58ec70a7c44c1133b2a65594736b5c02d3cf7f81 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 11:28:15 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/join/Input.tsx     | 99 +++++++++++++++++++++++++++++--
 src/components/join/InputItem.tsx | 12 +++-
 src/components/pages/JoinPage.tsx | 16 ++++-
 3 files changed, 119 insertions(+), 8 deletions(-)

diff --git a/src/components/join/Input.tsx b/src/components/join/Input.tsx
index d2b0c21..d98df32 100644
--- a/src/components/join/Input.tsx
+++ b/src/components/join/Input.tsx
@@ -1,5 +1,17 @@
 import InputItem from "./InputItem";
 import styled from "@emotion/styled";
+import { useState } from "react";
+
+interface InputProps {
+  newPw: string;
+  setNewPw: React.Dispatch<React.SetStateAction<string>>;
+  newId: string;
+  setNewId: React.Dispatch<React.SetStateAction<string>>;
+  newAlias: string;
+  setNewAlias: React.Dispatch<React.SetStateAction<string>>;
+  checkNewPw: string;
+  setCheckNewPw: React.Dispatch<React.SetStateAction<string>>;
+}
 
 const InputWrapStyle = styled.div`
   display: flex;
@@ -7,13 +19,90 @@ const InputWrapStyle = styled.div`
   gap: 10px;
 `;
 
-const Input = () => {
+const ErrorMessageStyle = styled.div`
+  color: #ef0000;
+  font-size: 12px;
+`;
+
+const PwMismatchStyle = styled.div`
+  color: #ef0000;
+  font-size: 12px;
+`;
+
+const Input = ({
+  newId,
+  setNewId,
+  newPw,
+  setNewPw,
+  newAlias,
+  setNewAlias,
+  checkNewPw,
+  setCheckNewPw,
+}: InputProps) => {
+  const [newPwValid, setNewPwValid] = useState<boolean>(false);
+
+  const handleNewPw = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setNewPw(value);
+    const regex =
+      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
+    if (regex.test(newPw)) {
+      setNewPwValid(true);
+    } else {
+      setNewPwValid(false);
+    }
+  };
+
+  const handleNewId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setNewId(value);
+  };
+
+  const handleNewAlias = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setNewAlias(value);
+  };
+
+  const handleCheckNewPw = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setCheckNewPw(value);
+  };
+
   return (
     <InputWrapStyle>
-      <InputItem content="별명" />
-      <InputItem content="아이디" />
-      <InputItem content="비밀번호" />
-      <InputItem content="비밀번호 확인" />
+      <InputItem
+        content="별명"
+        value={newAlias}
+        onChange={handleNewAlias}
+        type="text"
+      />
+      <InputItem
+        content="아이디"
+        value={newId}
+        onChange={handleNewId}
+        type="text"
+      />
+      <InputItem
+        content="비밀번호"
+        value={newPw}
+        onChange={handleNewPw}
+        type="password"
+      />
+      <ErrorMessageStyle>
+        {!newPwValid && newPw.length > 0 && (
+          <div>영문, 숫자, 특수문자 포함 8자 이상 입력해주세요.</div>
+        )}
+      </ErrorMessageStyle>
+
+      <InputItem // 비밀 번호 다를 때 코드 추가가
+        content="비밀번호 확인"
+        value={checkNewPw}
+        onChange={handleCheckNewPw} // 변경사항 생길 것 같음
+        type="password"
+      />
+      <PwMismatchStyle>
+        {newPw != checkNewPw && <div>비밀번호가 일치하지 않습니다.</div>}
+      </PwMismatchStyle>
     </InputWrapStyle>
   );
 };
diff --git a/src/components/join/InputItem.tsx b/src/components/join/InputItem.tsx
index 2a08451..44187e4 100644
--- a/src/components/join/InputItem.tsx
+++ b/src/components/join/InputItem.tsx
@@ -2,6 +2,9 @@ import styled from "@emotion/styled";
 
 interface InputItemProps {
   content: string;
+  value?: string;
+  type: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const InputItemStyle = styled.input`
@@ -12,10 +15,15 @@ const InputItemStyle = styled.input`
   border: none;
 `;
 
-const InputItem = ({ content }: InputItemProps) => {
+const InputItem = ({ content, value, onChange, type }: InputItemProps) => {
   return (
     <div>
-      <InputItemStyle placeholder={content} />
+      <InputItemStyle
+        placeholder={content}
+        value={value}
+        onChange={onChange}
+        type={type}
+      />
     </div>
   );
 };
diff --git a/src/components/pages/JoinPage.tsx b/src/components/pages/JoinPage.tsx
index bedeb3d..5ee5bed 100644
--- a/src/components/pages/JoinPage.tsx
+++ b/src/components/pages/JoinPage.tsx
@@ -2,6 +2,7 @@ import Input from "../join/Input";
 import Button from "../join/Button";
 import styled from "@emotion/styled";
 import GotoLogin from "../join/GotoLogin";
+import { useState } from "react";
 
 const JoinContainerStyle = styled.div`
   display: flex;
@@ -31,12 +32,25 @@ const JoinWperStyle = styled.div`
 `;
 
 const JoinPage = () => {
+  const [newId, setNewId] = useState<string>("");
+  const [newPw, setNewPw] = useState<string>("");
+  const [checkNewPw, setCheckNewPw] = useState<string>("");
+  const [newAlias, setNewAlias] = useState<string>("");
   return (
     <>
       <JoinContainerStyle>
         <h1>회원가입</h1>
         <JoinWperStyle>
-          <Input />
+          <Input
+            newAlias={newAlias}
+            setNewAlias={setNewAlias}
+            newId={newId}
+            setNewId={setNewId}
+            newPw={newPw}
+            setNewPw={setNewPw}
+            checkNewPw={checkNewPw}
+            setCheckNewPw={setCheckNewPw}
+          />
           <Button />
           <GotoLogin />
         </JoinWperStyle>

From c787445074347aa8bcfef83f84bc152e7952d5f2 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 13:37:38 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20api=EB=A1=9C=20=EC=97=B0=EA=B2=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/join/Button.tsx    |  8 +++-----
 src/components/join/GotoLogin.tsx |  2 +-
 src/components/join/Input.tsx     |  4 +++-
 src/components/pages/JoinPage.tsx | 34 ++++++++++++++++++++++++++++++-
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/join/Button.tsx b/src/components/join/Button.tsx
index 55f70f8..edff9d2 100644
--- a/src/components/join/Button.tsx
+++ b/src/components/join/Button.tsx
@@ -7,11 +7,9 @@ const ButtonWrapStyle = styled.div`
   border-radius: 10px;
   height: 50px;
 
-  border: 3px solid skyblue;
-
   display: flex;
   justify-content: center;
-  margin-top: 30px;
+  margin-top: 15px;
 `;
 
 const ButtonStyle = styled.button`
@@ -23,10 +21,10 @@ const ButtonStyle = styled.button`
   border: none;
 `;
 
-const Button = () => {
+const Button = ({ handleSignup }: { handleSignup: () => void }) => {
   return (
     <ButtonWrapStyle>
-      <ButtonStyle>회원가입</ButtonStyle>
+      <ButtonStyle onClick={handleSignup}>회원가입</ButtonStyle>
     </ButtonWrapStyle>
   );
 };
diff --git a/src/components/join/GotoLogin.tsx b/src/components/join/GotoLogin.tsx
index 6bb1c35..322f8af 100644
--- a/src/components/join/GotoLogin.tsx
+++ b/src/components/join/GotoLogin.tsx
@@ -28,7 +28,7 @@ const GotoLogin = () => {
   return (
     <div>
       <GotoLoginContainer>
-        이미 계정이 있으신가요?
+        이미 계정이 있으신가요? &nbsp; &nbsp;
         <UnderlinedLink onClick={handleGotoLogin}> 로그인</UnderlinedLink>
       </GotoLoginContainer>
     </div>
diff --git a/src/components/join/Input.tsx b/src/components/join/Input.tsx
index d98df32..2d4dff2 100644
--- a/src/components/join/Input.tsx
+++ b/src/components/join/Input.tsx
@@ -101,7 +101,9 @@ const Input = ({
         type="password"
       />
       <PwMismatchStyle>
-        {newPw != checkNewPw && <div>비밀번호가 일치하지 않습니다.</div>}
+        {newPw != checkNewPw && checkNewPw.length >= 1 && (
+          <div>비밀번호가 일치하지 않습니다.</div>
+        )}
       </PwMismatchStyle>
     </InputWrapStyle>
   );
diff --git a/src/components/pages/JoinPage.tsx b/src/components/pages/JoinPage.tsx
index 5ee5bed..22f5263 100644
--- a/src/components/pages/JoinPage.tsx
+++ b/src/components/pages/JoinPage.tsx
@@ -36,6 +36,38 @@ const JoinPage = () => {
   const [newPw, setNewPw] = useState<string>("");
   const [checkNewPw, setCheckNewPw] = useState<string>("");
   const [newAlias, setNewAlias] = useState<string>("");
+
+  const handleSignup = async () => {
+    if (newPw !== checkNewPw) {
+      alert("비밀번호가 일치하지 않습니다.");
+      return;
+    }
+    const signupData = {
+      id: newId,
+      password: newPw,
+      alias: newAlias,
+    };
+
+    try {
+      const response = await fetch("http://members/join", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(signupData),
+      });
+
+      if (response.ok) {
+        alert("회원가입에 성공했습니다!");
+        window.location.href = "/login";
+      } else {
+        const errorData = await response.json();
+        alert(`회원가입 실패: ${errorData.message}`);
+      }
+    } catch (error) {
+      console.error("회원가입 요청 중 오류 발생:", error);
+      alert("회원가입 요청 중 문제가 발생했습니다.");
+    }
+  };
+
   return (
     <>
       <JoinContainerStyle>
@@ -51,7 +83,7 @@ const JoinPage = () => {
             checkNewPw={checkNewPw}
             setCheckNewPw={setCheckNewPw}
           />
-          <Button />
+          <Button handleSignup={handleSignup} />
           <GotoLogin />
         </JoinWperStyle>
       </JoinContainerStyle>

From 39d8229f9600f92cd42c65e28ef439635d990678 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 14:21:21 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20API?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/Button.tsx    |  9 ++----
 src/components/login/GotoJoin.tsx  |  3 +-
 src/components/login/Input.tsx     | 21 +++---------
 src/components/pages/LoginPage.tsx | 52 ++++++++++++++++++++++++++----
 4 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/components/login/Button.tsx b/src/components/login/Button.tsx
index 7862b3e..065fb0a 100644
--- a/src/components/login/Button.tsx
+++ b/src/components/login/Button.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { useNavigate } from "react-router-dom"; // navigate 훅 사용
 
 const ButtonStyle = styled.button`
   cursor: pointer;
@@ -15,12 +14,8 @@ const ButtonStyle = styled.button`
   margin-top: 30px;
 `;
 
-const Button = () => {
-  const navigate = useNavigate();
-  const handleContinueLogin = () => {
-    navigate("/home"); // 로그인 후 이동할 경로
-  };
-  return <ButtonStyle onClick={handleContinueLogin}>로그인</ButtonStyle>;
+const Button = ({ handleLogin }: { handleLogin: () => void }) => {
+  return <ButtonStyle onClick={handleLogin}>로그인</ButtonStyle>;
 };
 
 export default Button;
diff --git a/src/components/login/GotoJoin.tsx b/src/components/login/GotoJoin.tsx
index de249c7..d1368e1 100644
--- a/src/components/login/GotoJoin.tsx
+++ b/src/components/login/GotoJoin.tsx
@@ -23,10 +23,11 @@ const UnderlinedLink = styled.u`
 const GotoJoin = () => {
   const navigate = useNavigate();
   const handleGotoJoin = () => {
-    navigate("/join"); // 로그인 후 이동할 경로
+    navigate("/home"); // 로그인 후 이동할 경로
   };
   return (
     <GotoJoinContainer>
+      아직 계정이 없으신가요? &nbsp;
       <UnderlinedLink onClick={handleGotoJoin}>회원가입</UnderlinedLink>
     </GotoJoinContainer>
   );
diff --git a/src/components/login/Input.tsx b/src/components/login/Input.tsx
index 5ced8da..b6a0792 100644
--- a/src/components/login/Input.tsx
+++ b/src/components/login/Input.tsx
@@ -2,14 +2,14 @@
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import InputItem from "./InputItem";
-import { useState } from "react";
 
 interface InputProps {
   id: string;
   setId: React.Dispatch<React.SetStateAction<string>>;
   pw: string;
-  setPw: React.Dispatch<React.SetStateAction<string>>;
-  handlePw?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  setPw?: React.Dispatch<React.SetStateAction<string>>;
+  handlePw: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  pwValid: boolean;
 }
 
 const InputStyle = styled.div`
@@ -29,20 +29,7 @@ const ErrorMessageStyle = styled.div`
   font-size: 12px;
 `;
 
-const Input = ({ id, setId, pw, setPw }: InputProps) => {
-  const [pwValid, setPwValid] = useState<boolean>(false);
-
-  const handlePw = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPw(e.target.value);
-    const regex =
-      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
-    if (regex.test(pw)) {
-      setPwValid(true);
-    } else {
-      setPwValid(false);
-    }
-  };
-
+const Input = ({ id, setId, pw, pwValid, handlePw }: InputProps) => {
   return (
     <InputStyle>
       <InputWrapStyle>
diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx
index 1151e55..01f61f5 100644
--- a/src/components/pages/LoginPage.tsx
+++ b/src/components/pages/LoginPage.tsx
@@ -38,13 +38,53 @@ const MainContainerStyle = styled.div`
     width: auto;
   }
 `;
+
 const LoginPage = () => {
   const [id, setId] = useState<string>("");
   const [pw, setPw] = useState<string>("");
-  //   const handlePw = (e: React.ChangeEvent<HTMLInputElement>) => {
-  //     setPw(e.target.value);
-  //   };
+  const [PwValid, setPwValid] = useState<boolean>(false);
+
+  const handlePw = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setPw(value);
+    const regex =
+      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
+    setPwValid(regex.test(value));
+  };
+
+  const handleLogin = async () => {
+    if (!PwValid) {
+      alert(
+        "비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다."
+      );
+      return;
+    }
+
+    const loginData = { id, pw };
+
+    try {
+      const response = await fetch("http://members/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(loginData),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log("로그인 성공:", data);
+        window.location.href = "/home";
+      } else {
+        console.error("로그인 실패");
+        alert("로그인에 실패했습니다. 아이디 또는 비밀번호를 확인하세요.");
+      }
+    } catch (error) {
+      console.error("네트워크 에러:", error);
+      alert("서버에 연결할 수 없습니다. 다시 시도해주세요.");
+    }
+  };
+
   console.log("로그인 페이지 렌더링");
+
   return (
     <>
       <MainContainerStyle>
@@ -54,10 +94,10 @@ const LoginPage = () => {
             id={id}
             setId={setId}
             pw={pw}
-            setPw={setPw}
-            //   handlePw={handlePw}
+            handlePw={handlePw}
+            pwValid={PwValid}
           />
-          <Button />
+          <Button handleLogin={handleLogin} />
         </WrapperStyle>
         <GotoJoin />
       </MainContainerStyle>

From 905933b80b6c0f55bd8ca5f55ed7d6516273d2c5 Mon Sep 17 00:00:00 2001
From: shinwokkang <120699742+shinwokkang@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:24:56 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=9C,=20=ED=86=A0=ED=81=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/Button.tsx    |  1 -
 src/components/login/GotoJoin.tsx  |  2 +-
 src/components/pages/JoinPage.tsx  | 26 ++++++++++++++++----------
 src/components/pages/LoginPage.tsx | 28 ++++++++++++++++++++--------
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/login/Button.tsx b/src/components/login/Button.tsx
index 065fb0a..cb2a6a7 100644
--- a/src/components/login/Button.tsx
+++ b/src/components/login/Button.tsx
@@ -17,5 +17,4 @@ const ButtonStyle = styled.button`
 const Button = ({ handleLogin }: { handleLogin: () => void }) => {
   return <ButtonStyle onClick={handleLogin}>로그인</ButtonStyle>;
 };
-
 export default Button;
diff --git a/src/components/login/GotoJoin.tsx b/src/components/login/GotoJoin.tsx
index d1368e1..9fea33a 100644
--- a/src/components/login/GotoJoin.tsx
+++ b/src/components/login/GotoJoin.tsx
@@ -23,7 +23,7 @@ const UnderlinedLink = styled.u`
 const GotoJoin = () => {
   const navigate = useNavigate();
   const handleGotoJoin = () => {
-    navigate("/home"); // 로그인 후 이동할 경로
+    navigate("/join"); // 로그인 후 이동할 경로
   };
   return (
     <GotoJoinContainer>
diff --git a/src/components/pages/JoinPage.tsx b/src/components/pages/JoinPage.tsx
index 22f5263..aaf5f79 100644
--- a/src/components/pages/JoinPage.tsx
+++ b/src/components/pages/JoinPage.tsx
@@ -3,6 +3,7 @@ import Button from "../join/Button";
 import styled from "@emotion/styled";
 import GotoLogin from "../join/GotoLogin";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 const JoinContainerStyle = styled.div`
   display: flex;
@@ -38,32 +39,37 @@ const JoinPage = () => {
   const [newAlias, setNewAlias] = useState<string>("");
 
   const handleSignup = async () => {
+    const navigate = useNavigate();
     if (newPw !== checkNewPw) {
       alert("비밀번호가 일치하지 않습니다.");
       return;
     }
     const signupData = {
-      id: newId,
+      loginId: newId,
+      username: newAlias,
       password: newPw,
-      alias: newAlias,
     };
 
     try {
-      const response = await fetch("http://members/join", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(signupData),
-      });
-
+      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("회원가입에 성공했습니다!");
-        window.location.href = "/login";
+        navigate("/login");
       } else {
         const errorData = await response.json();
         alert(`회원가입 실패: ${errorData.message}`);
+        console.log(`Error status : ${response.status}`);
       }
     } catch (error) {
-      console.error("회원가입 요청 중 오류 발생:", error);
+      console.log("회원가입 요청 중 오류 발생:", error);
       alert("회원가입 요청 중 문제가 발생했습니다.");
     }
   };
diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx
index 01f61f5..764f691 100644
--- a/src/components/pages/LoginPage.tsx
+++ b/src/components/pages/LoginPage.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import Input from "../login/Input";
 import Button from "../login/Button";
 import GotoJoin from "../login/GotoJoin";
+import { useNavigate } from "react-router-dom";
 
 const WrapperStyle = styled.div`
   display: flex;
@@ -53,26 +54,37 @@ const LoginPage = () => {
   };
 
   const handleLogin = async () => {
+    const navigate = useNavigate();
     if (!PwValid) {
       alert(
         "비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다."
       );
       return;
     }
-
-    const loginData = { id, pw };
+    const loginId = id;
+    const password = pw;
+    const loginData = { loginId, password };
 
     try {
-      const response = await fetch("http://members/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(loginData),
-      });
+      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);
-        window.location.href = "/home";
+        if (data.accessToken) {
+          sessionStorage.setItem("accessToken", data.accessToken);
+          console.log(`Token 저장 : ${data.accessToken}`);
+          navigate("/home");
+        } else {
+          console.error("서버로부터 AccessToken을 발급받지 못했습니다.");
+        }
       } else {
         console.error("로그인 실패");
         alert("로그인에 실패했습니다. 아이디 또는 비밀번호를 확인하세요.");