[FEAT] Login로직 구현

src/pages/Login.tsx

@@ -2,22 +2,52 @@ import styled from "styled-components";
 import { CommonInput, CommonButton } from "../styles/globalStyles";
 import { useNavigate } from "react-router";
 import { LoginSignUpContainer } from "../styles/LoginSignUp.style";
+import { useState, ChangeEvent } from "react";
 
 export default function Login() {
+  const [email, setEmail] = useState<string>("abcd");
+  const [password, setPassword] = useState<string>("dddd");
+
   const navigate = useNavigate();
 
   const goToSignUp = () => {
     navigate("/signUp");
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    switch (name) {
+      case "email":
+        setEmail(value);
+        break;
+      case "password":
+        setPassword(value);
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <LoginPageContainer>
       <h1>LOGIN</h1>
-      <CommonInput type="email" placeholder="Email" required></CommonInput>
       <CommonInput
+        id="eamil"
+        type="email"
+        name="email"
+        placeholder="Email"
+        required
+        onChange={handleChange}
+        value={email}
+      ></CommonInput>
+      <CommonInput
+        id="password"
         type="password"
+        name="password"
         placeholder="Password"
         required
+        onChange={handleChange}
+        value={password}
       ></CommonInput>
       <LoginButton>로그인</LoginButton>
       <p onClick={goToSignUp}>회원가입</p>

src/utils/pixelToRem.ts

@@ -3,3 +3,5 @@ const ROOT_FONT_SIZE = 16;
 const pixelToRem = (pixel: number): string => {
   return pixel / ROOT_FONT_SIZE + "rem";
 };
+
+export default pixelToRem;