feat: 로그인 페이지 추가

디비 연동 대기
This commit is contained in:
nalpari 2024-07-08 15:15:24 +09:00
parent 6fedf95383
commit f5cd2d6e38
3 changed files with 109 additions and 1 deletions

View File

@ -3,6 +3,7 @@ import './globals.css'
import Headers from '@/components/Headers'
import RecoilRootWrapper from './RecoilWrapper'
import UIProvider from './UIProvider'
import { headers } from 'next/headers'
const inter = Inter({ subsets: ['latin'] })
@ -12,10 +13,14 @@ export const metadata = {
}
export default function RootLayout({ children }) {
const headersList = headers()
const headerPathname = headersList.get('x-pathname') || ''
// console.log('headerPathname', headerPathname)
return (
<html lang="en">
<body className={inter.className}>
<Headers />
{headerPathname !== '/login' && <Headers />}
<RecoilRootWrapper>
<UIProvider>{children}</UIProvider>
</RecoilRootWrapper>

91
src/app/login/page.jsx Normal file
View File

@ -0,0 +1,91 @@
export default function page() {
return (
<>
<div className="flex flex-col align-center h-screen">
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<img
alt="Your Company"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
className="mx-auto h-10 w-auto"
/>
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
Sign in to your account
</h2>
</div>
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form action="#" method="POST" className="space-y-6">
<div>
<label
htmlFor="email"
className="block text-sm font-medium leading-6 text-gray-900"
>
Email address
</label>
<div className="mt-2">
<input
id="email"
name="email"
type="email"
required
autoComplete="email"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="block text-sm font-medium leading-6 text-gray-900"
>
Password
</label>
<div className="text-sm">
<a
href="#"
className="font-semibold text-indigo-600 hover:text-indigo-500"
>
Forgot password?
</a>
</div>
</div>
<div className="mt-2">
<input
id="password"
name="password"
type="password"
required
autoComplete="current-password"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Sign in
</button>
</div>
</form>
<p className="mt-10 text-center text-sm text-gray-500">
Not a member?{' '}
<a
href="#"
className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
>
Start a 14 day free trial
</a>
</p>
</div>
</div>
</div>
</>
)
}

12
src/middleware.js Normal file
View File

@ -0,0 +1,12 @@
import { NextRequest, NextResponse } from 'next/server'
export function middleware(request) {
const requestHeaders = new Headers(request.headers)
requestHeaders.set('x-pathname', request.nextUrl.pathname)
return NextResponse.next({
request: {
headers: requestHeaders,
},
})
}