Feat: 회원가입 페이지 UI 구현

components/Auth/AuthInput.tsx

@@ -3,9 +3,10 @@ import React, { InputHTMLAttributes, useState } from "react";
 
 interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
   text: string;
+  name: string;
 }
 
-const AuthInput = ({ text, type, ...props }: AuthInputProps) => {
+const AuthInput = ({ text, name, type, ...props }: AuthInputProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const toggleClick = () => {
@@ -14,7 +15,7 @@ const AuthInput = ({ text, type, ...props }: AuthInputProps) => {
 
   return (
     <div className="mb-6">
-      <label htmlFor={type} className="text-[14px] block mb-[12px]">
+      <label htmlFor={name} className="text-[14px] block mb-[12px]">
         {text}
       </label>
       <div className="relative">

components/Layout/AuthLayout.tsx

@@ -1,11 +1,22 @@
 import Image from "next/image";
+import { useRouter } from "next/router";
 import { ReactNode } from "react";
 
 const AuthLayout = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
   return (
-    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen">
+    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen py-32">
       <div>
-        <Image src="/icons/logo.svg" width="211" height="38" alt="로고" />
+        <Image
+          className="cursor-pointer"
+          src="/icons/logo.svg"
+          width="211"
+          height="38"
+          alt="로고"
+          onClick={() => {
+            router.push("/");
+          }}
+        />
       </div>
       {children}
     </div>

pages/login.tsx

@@ -23,11 +23,13 @@ const Login = () => {
         <AuthInput
           text="이메일"
           type="text"
+          name="email"
           placeholder="이메일을 입력해주세요."
         />
         <AuthInput
           text="비밀번호"
           type="password"
+          name="password"
           placeholder="비밀번호를 입력해주세요."
         />
         <Button width="w-full" height="h-[53px]" className="mt-[30px]">

pages/signup.tsx

@@ -0,0 +1,54 @@
+import AuthInput from "@/components/Auth/AuthInput";
+import Button from "@/components/Button";
+import AuthLayout from "@/components/Layout/AuthLayout";
+import Link from "next/link";
+
+const signup = () => {
+  return (
+    <AuthLayout>
+      <p className="mt-[16px] text-base font-normal">
+        이미 회원이신가요?{" "}
+        <Link
+          href="/login"
+          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"
+          name="email"
+          placeholder="이메일을 입력해주세요."
+        />
+        <AuthInput
+          text="이름"
+          type="text"
+          name="nickname"
+          placeholder="이름을 입력해주세요."
+        />
+        <AuthInput
+          text="비밀번호"
+          type="password"
+          name="password"
+          placeholder="비밀번호를 입력해주세요."
+        />
+        <AuthInput
+          text="비밀번호 확인"
+          type="password"
+          name="passwordConfirm"
+          placeholder="비밀번호를 다시 입력해주세요."
+        />
+        <Button width="w-full" height="h-[53px]" className="mt-[30px]">
+          회원가입
+        </Button>
+      </form>
+    </AuthLayout>
+  );
+};
+
+export default signup;

styles/globals.css

@@ -10,21 +10,6 @@
   font-style: normal;
 }
 
-:root {
-  --background: #ffffff;
-  --white200: #f5f5f5;
-  --black100: #000;
-  --black200: #111322;
-  --black300: #373740;
-  --red100: #ff5b56;
-  --gray100: #f0f6ff;
-  --gray200: #e7effb;
-  --gray300: #ccd5e3;
-  --gray400: #9fa6b2;
-  --gray500: #3e3e43;
-  --purple100: #6d6afe;
-}
-
 body {
   color: var(--black100);
   background-color: var(--white100);

tailwind.config.ts

@@ -9,21 +9,21 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        black100: "var(--black100)",
-        black200: "var(--black200)",
-        black300: "var(--black300)",
-        red100: "var(--red100)",
-        gray100: "var(--gray100)",
-        gray200: "var(--gray200)",
-        gray300: "var(--gray300)",
-        gray400: "var(--gray400)",
-        gray500: "var(--gray500)",
-        purple100: "var(--purple100)",
-        white200: "var(--white200)",
+        background: "#ffffff",
+        white200: "#f5f5f5",
+        black100: "#000",
+        black200: "#111322",
+        black300: "#373740",
+        red100: "#ff5b56",
+        gray100: "#f0f6ff",
+        gray200: "#e7effb",
+        gray300: "#ccd5e3",
+        gray400: "#9fa6b2",
+        gray500: "#3e3e43",
+        purple100: "#6d6afe",
       },
       screens: {
-        sm: "375px",
+        sm: "343px",
         md: "768px",
         lg: "1200px",
       },