Feat: 로그인 페이지 UI 구현

components/Auth/AuthInput.tsx

@@ -0,0 +1,45 @@
+import Image from "next/image";
+import React, { InputHTMLAttributes, useState } from "react";
+
+interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  text: string;
+}
+
+const AuthInput = ({ text, type, ...props }: AuthInputProps) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const toggleClick = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+
+  return (
+    <div className="mb-6">
+      <label htmlFor={type} className="text-[14px] block mb-[12px]">
+        {text}
+      </label>
+      <div className="relative">
+        <input
+          {...props}
+          type={isPasswordVisible ? "text" : type}
+          className="w-full h-[60px] rounded-lg border border-gray300 px-[15px] py-[18px] pr-[40px] outline-purple100"
+        />
+        {type === "password" && (
+          <Image
+            src={
+              isPasswordVisible
+                ? "/icons/eyes_open.svg"
+                : "/icons/eyes_close.svg"
+            }
+            width={16}
+            height={16}
+            alt={isPasswordVisible ? "비밀번호 숨기기" : "비밀번호 보기"}
+            onClick={toggleClick}
+            className="absolute top-1/2 right-4 transform -translate-y-1/2 cursor-pointer"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AuthInput;

components/Auth/SnsLogin.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+const SnsLogin = () => {
+  return (
+    <div className="flex items-center justify-between bg-gray300 rounded-lg px-6 py-3 mt-8">
+      <span>소셜 로그인</span>
+      <div className="flex gap-4">
+        <Image src="/icons/google.svg" width="42" height="42" alt="구글" />
+        <Image
+          src="/icons/kakaotalk.svg"
+          width="42"
+          height="42"
+          alt="카카오톡"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SnsLogin;

components/Button.tsx

@@ -16,6 +16,7 @@ const Button = ({
   radius = "8px",
   color = "positive",
   size = "18px",
+  className = "",
   ...props
 }: ButtonProps) => {
   const backgroundStyle =
@@ -29,7 +30,7 @@ const Button = ({
         borderRadius: radius,
         background: backgroundStyle,
       }}
-      className={`flex justify-center ${width} ${height} ${size} items-center text-white font-[600] whitespace-nowrap hover:opacity-90`}
+      className={`flex justify-center ${width} ${height} ${size} ${className} items-center text-white font-[600] whitespace-nowrap hover:opacity-90`}
       {...props}
     >
       {children}

components/Layout/AuthLayout.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import { ReactNode } from "react";
+
+const AuthLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen">
+      <div>
+        <Image src="/icons/logo.svg" width="211" height="38" alt="로고" />
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default AuthLayout;

pages/_app.tsx

@@ -1,11 +1,15 @@
 import Header from "@/components/Layout/Header";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const hidePaths = ["/login", "/signup"];
+
   return (
     <>
-      <Header />
+      {!hidePaths.includes(router.pathname) && <Header />}
       <Component {...pageProps} />
     </>
   );

pages/login.tsx

@@ -0,0 +1,42 @@
+import AuthInput from "@/components/Auth/AuthInput";
+import SnsLogin from "@/components/Auth/SnsLogin";
+import Button from "@/components/Button";
+import AuthLayout from "@/components/Layout/AuthLayout";
+import Link from "next/link";
+
+const Login = () => {
+  return (
+    <AuthLayout>
+      <p className="mt-[16px] text-base font-normal">
+        회원이 아니신가요?{" "}
+        <Link
+          href="/signup"
+          className="cursor-pointer text-purple100 underline font-semibold"
+        >
+          회원 가입하기
+        </Link>
+      </p>
+      <form
+        className="w-full sm:max-w-[325px] md:max-w-[400px] mt-[30px]"
+        aria-labelledby="login-form"
+      >
+        <AuthInput
+          text="이메일"
+          type="text"
+          placeholder="이메일을 입력해주세요."
+        />
+        <AuthInput
+          text="비밀번호"
+          type="password"
+          placeholder="비밀번호를 입력해주세요."
+        />
+        <Button width="w-full" height="h-[53px]" className="mt-[30px]">
+          로그인
+        </Button>
+        <SnsLogin />
+      </form>
+    </AuthLayout>
+  );
+};
+
+export default Login;