Merge pull request #20 from team-nabi/NABI-75

🎉 로그인 UI 생성 및 라우팅 설정

src/app/(root)/(routes)/(auth)/login/page.tsx

@@ -1,5 +1,16 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
+import LoginForm from '@/components/domain/LoginForm'
 
-export default function LoginPage() {
-  return <div>LoginPage</div>
+interface LoginPageProps {}
+
+const LoginPage: FunctionComponent<LoginPageProps> = ({}) => {
+  return (
+    <div className="h-screen">
+      <section className="flex items-center justify-center h-full ">
+        <LoginForm />
+      </section>
+    </div>
+  )
 }
+
+export default LoginPage

src/app/(root)/(routes)/(home)/page.tsx

@@ -1,61 +1,10 @@
-import Link from 'next/link'
-import Button from '@/components/ui/Button'
 import { DarkModeButton } from '@/components/ui/DarkModeButton'
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogClose,
-} from '@/components/ui/Dialog'
-import Input from '@/components/ui/Input'
-import Label from '@/components/ui/Label'
 
 export default function HomePage() {
   return (
     <main className="flex flex-col items-center justify-between min-h-screen p-24 text-4xl font-bold text-text-color bg-background-color">
       hi
       <DarkModeButton />
-      <Link href={'/login'}>로긴</Link>
-      <Button variant={'gradation'}>버튼</Button>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="primary">Share</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Share link</DialogTitle>
-            <DialogDescription>
-              Anyone who has this link will be able to view this.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex items-center space-x-2">
-            <div className="grid flex-1 gap-2">
-              <Label htmlFor="link" className="sr-only">
-                Link
-              </Label>
-              <Input
-                id="link"
-                defaultValue="https://ui.shadcn.com/docs/installation"
-                readOnly
-              />
-            </div>
-            <Button type="submit" className="px-3">
-              <span className="sr-only">Copy</span>
-            </Button>
-          </div>
-          <DialogFooter className="sm:justify-start">
-            <DialogClose asChild>
-              <Button type="button" variant="secondary">
-                Close
-              </Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </main>
   )
 }

src/app/@authModal/(...)login/page.tsx

@@ -1,5 +1,30 @@
-import React from 'react'
+'use client'
 
-export default function LoginModalPage() {
-  return <div className="bg-slate-400">LoginModalPage</div>
+import { FunctionComponent } from 'react'
+import { useRouter } from 'next/navigation'
+import LoginForm from '@/components/domain/LoginForm'
+import { Dialog, DialogContent } from '@/components/ui/Dialog'
+
+interface LoginModalPageProps {}
+
+const LoginModalPage: FunctionComponent<LoginModalPageProps> = () => {
+  const router = useRouter()
+  return (
+    <Dialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          router.back()
+        }
+      }}
+    >
+      <DialogContent className="sm:max-w-[425px]">
+        <section className="py-4 my-20">
+          <LoginForm />
+        </section>
+      </DialogContent>
+    </Dialog>
+  )
 }
+
+export default LoginModalPage

src/app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
           <ThemeProviderContext>
             <Suspense>
               <div className="centered-content">
-                <Header isLogin={true} />
+                <Header isLogin={false} />
                 {children}
                 {authModal}
               </div>

src/components/domain/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import LoginForm from './LoginForm'
+
+const meta = {
+  title: 'DOMAIN/LoginForm',
+  component: LoginForm,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof LoginForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+}

src/components/domain/LoginForm/LoginForm.tsx

@@ -0,0 +1,14 @@
+import Image from 'next/image'
+import Assets from '@/config/assets'
+import LoginButtons from './section/LoginButtons'
+
+const LoginForm = () => {
+  return (
+    <section className="flex flex-col items-center justify-center w-full h-full gap-4">
+      <Image className="mb-20" src={Assets.logo} alt="nabi-logo" />
+      <LoginButtons />
+    </section>
+  )
+}
+
+export default LoginForm

src/components/domain/LoginForm/index.tsx

@@ -0,0 +1,3 @@
+import LoginForm from './LoginForm'
+
+export default LoginForm

src/components/domain/LoginForm/section/LoginButtons.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import React from 'react'
+import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons'
+
+const LoginButtons = () => {
+  return (
+    <section className="flex flex-col gap-2">
+      <KakaoLoginButton onClickButton={() => alert('k')} />
+      <GoogleLoginButton onClickButton={() => alert('g')} />
+    </section>
+  )
+}
+
+export default LoginButtons

src/config/assets.ts

@@ -1,13 +1,17 @@
 import AlarmIcon from '/public/images/bell.svg'
 import GoogleIcon from '/public/images/google.png'
 import KakaoIcon from '/public/images/kakao.png'
+import Logo from '/public/images/logo.svg'
 import MenuIcon from '/public/images/menu-icon.svg'
+import XIcon from '/public/images/x-icon.svg'
 
 const Assets = {
   menuIcon: MenuIcon,
   alarmIcon: AlarmIcon,
   googleIcon: GoogleIcon,
   kakaoIcon: KakaoIcon,
+  logo: Logo,
+  xIcon: XIcon,
 } as const
 
 export default Assets

src/styles/globals.css

@@ -12,7 +12,7 @@
 
 @layer base {
   .centered-content {
-    @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto;
+    @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto p-2 pt-16;
   }
 
   :root,