From 5b33ad70bc16cf53b1fef8c01cc7e0c28c119821 Mon Sep 17 00:00:00 2001
From: MOON <muneon96@naver.com>
Date: Wed, 10 Jul 2024 21:27:49 +0900
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/SignIn.tsx | 50 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/pages/auth/SignIn.tsx

diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
new file mode 100644
index 00000000..488e13a0
--- /dev/null
+++ b/src/pages/auth/SignIn.tsx
@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import AuthLayout from '@/pageLayout/AuthLayout/AuthLayout';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+export default function SignIn() {
+  return (
+    <AuthLayout>
+      <header className='mb-[50px] md:mb-[60px]'>
+        <Link href='/'>
+          <Image src='/lg.svg' alt='logo' width={172} height={48} />
+        </Link>
+      </header>
+
+      <form className='flex flex-col items-center w-full px-6'>
+        <Input type='text' placeholder='이메일' className='lg:max-w-[640px] md:max-w-[384px] lg:h-16 px-4 lg:mb-4 mb-[10px] lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200' />
+        <Input
+          type='password'
+          placeholder='비밀번호'
+          className='lg:max-w-[640px] md:max-w-[384px] lg:h-16 px-4 lg:mb-6 mb-[20px] lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200'
+        />
+        <Button type='submit' className='w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 bg-black-500 text-white lg:text-xl md:text-base rounded-xl md:mb-[10px] mb-[11px]'>
+          로그인
+        </Button>
+      </form>
+
+      <div className=' flex justify-end items-center gap-2 w-full lg:max-w-[640px] md:max-w-[384px] md:px-0 px-6 md:mb-[60px] mb-[50px]'>
+        <h2 className=' text-blue-400 lg:text-xl md:text-base sm:text-sm'>회원이 아니신가요?</h2>
+        <Link href='/'>
+          <Button type='button' variant='link' className='lg:text-xl md:text-base sm:text-sm p-0 underline'>
+            가입하기
+          </Button>
+        </Link>
+      </div>
+
+      <div className='flex gap-4'>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-naver.svg' alt='naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-google.svg' alt='naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-kakao.svg' alt='naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+      </div>
+    </AuthLayout>
+  );
+}