Feature/login

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>

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>
   );
 };

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>
+        이미 계정이 있으신가요? &nbsp; &nbsp;
+        <UnderlinedLink onClick={handleGotoLogin}> 로그인</UnderlinedLink>
+      </GotoLoginContainer>
     </div>
   );
 };

src/components/join/Input.tsx

@@ -1,19 +1,110 @@
 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;
   flex-direction: column;
   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 && checkNewPw.length >= 1 && (
+          <div>비밀번호가 일치하지 않습니다.</div>
+        )}
+      </PwMismatchStyle>
     </InputWrapStyle>
   );
 };

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>
   );
 };

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,7 @@ 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;

src/components/login/GotoJoin.tsx

@@ -0,0 +1,36 @@
+/** @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>
+      아직 계정이 없으신가요? &nbsp;
+      <UnderlinedLink onClick={handleGotoJoin}>회원가입</UnderlinedLink>
+    </GotoJoinContainer>
+  );
+};
+
+export default GotoJoin;

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>

src/components/pages/JoinPage.tsx

@@ -2,6 +2,8 @@ import Input from "../join/Input";
 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;
@@ -31,13 +33,63 @@ 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>("");
+
+  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("회원가입 요청 중 문제가 발생했습니다.");
+    }
+  };
+
   return (
     <>
       <JoinContainerStyle>
         <h1>회원가입</h1>
         <JoinWperStyle>
-          <Input />
-          <Button />
+          <Input
+            newAlias={newAlias}
+            setNewAlias={setNewAlias}
+            newId={newId}
+            setNewId={setNewId}
+            newPw={newPw}
+            setNewPw={setNewPw}
+            checkNewPw={checkNewPw}
+            setCheckNewPw={setCheckNewPw}
+          />
+          <Button handleSignup={handleSignup} />
           <GotoLogin />
         </JoinWperStyle>
       </JoinContainerStyle>