Merge branch 'develop' into feat/#29

package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.79.3",
+    "sass-embedded": "^1.79.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

src/components/FormLayout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import welcomeLogo from "../assets/welcomeLogo.svg";
+import { FormLayoutProps } from "../types/FormTypes";
+
+const FormLayout: React.FC<FormLayoutProps> = ({ title, description, children, onSubmit }) => {
+  return (
+    <div className="form-container">
+      <form onSubmit={onSubmit} className="form">
+        <h1>{title}</h1>
+        <p>{description}</p>
+        {children}
+      </form>
+      <div className="rightlogo-container">
+        <img src={welcomeLogo} alt="welcomelogo" />
+      </div>
+    </div>
+  );
+};
+
+export default FormLayout;

src/components/Input.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { InputProps } from "../types/InputTypes"; 
+const Input: React.FC<InputProps> = ({ type, id, name, placeholder, value, onChange, required = false }) => {
+  return (
+    <div className="form-group">
+      <label htmlFor={id}>{placeholder}</label>
+      <input
+        type={type}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        required={required}
+      />
+    </div>
+  );
+};
+
+export default Input;

src/components/PasswordToggle.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
+
+interface PasswordToggleProps {
+  password: string;
+  name: string;
+  placeholder: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const PasswordToggle: React.FC<PasswordToggleProps> = ({ password, name, placeholder, onChange }) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className="password-container">
+      <input
+        type={showPassword ? "text" : "password"}
+        name={name}
+        placeholder={placeholder}
+        value={password}
+        onChange={onChange}
+        required
+      />
+      <button type="button" onClick={togglePasswordVisibility}>
+        {showPassword ? <AiFillEyeInvisible /> : <AiFillEye />}
+      </button>
+    </div>
+  );
+};
+
+export default PasswordToggle;

src/hooks/useAuth.ts

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import axios from "axios";
+import { User, AuthResponse } from "../types/AuthTypes"; 
+
+const baseurl = 'https://kdt.frontend.5th.programmers.co.kr:5006';
+
+export const useAuth = () => {
+  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+
+  const api = axios.create({
+    baseURL: baseurl,
+  });
+
+  // 로그인
+  const login = async (email: string, password: string) => {
+    try {
+      const response = await api.post<AuthResponse>("/login", {
+        email,
+        password,
+      });
+      setToken(response.data.token);
+      setUser(response.data.user);
+      console.log("로그인 성공", response.data);
+    } catch (e) {
+      console.log("실패 cbcb", e);
+    }
+  };
+
+  // 회원가입
+  const signup = async (email: string, fullName: string, password: string) => {
+    try {
+      const response = await api.post<AuthResponse>("/signup", {
+        email,
+        fullName,
+        password,
+      });
+      setToken(response.data.token);
+      setUser(response.data.user);
+      console.log("회원가입 성공", response.data);
+    } catch (e) {
+      console.log("실패ㅡㅡ", e);
+    }
+  };
+  return { login, signup, token, user };
+};