diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 00000000..e1a6deea --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/x-icon.svg b/public/images/x-icon.svg new file mode 100644 index 00000000..8f4a1cbf --- /dev/null +++ b/public/images/x-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/(root)/(routes)/(auth)/login/page.tsx b/src/app/(root)/(routes)/(auth)/login/page.tsx index 712ff4ec..663bbf6f 100644 --- a/src/app/(root)/(routes)/(auth)/login/page.tsx +++ b/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
LoginPage
+interface LoginPageProps {} + +const LoginPage: FunctionComponent = ({}) => { + return ( +
+
+ +
+
+ ) } + +export default LoginPage diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx index b84b1c83..0fe1bf9f 100644 --- a/src/app/(root)/(routes)/(home)/page.tsx +++ b/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 (
hi - 로긴 - - - - - - - - Share link - - Anyone who has this link will be able to view this. - - -
-
- - -
- -
- - - - - - -
) } diff --git a/src/app/@authModal/(...)login/page.tsx b/src/app/@authModal/(...)login/page.tsx index 5bbc7b70..b37b2f02 100644 --- a/src/app/@authModal/(...)login/page.tsx +++ b/src/app/@authModal/(...)login/page.tsx @@ -1,5 +1,30 @@ -import React from 'react' +'use client' -export default function LoginModalPage() { - return
LoginModalPage
+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 = () => { + const router = useRouter() + return ( + { + if (!open) { + router.back() + } + }} + > + +
+ +
+ + + ) } + +export default LoginModalPage diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 311d1f15..95f6b0cc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -35,7 +35,7 @@ export default function RootLayout({
-
+
{children} {authModal}
diff --git a/src/components/domain/LoginForm/LoginForm.stories.tsx b/src/components/domain/LoginForm/LoginForm.stories.tsx new file mode 100644 index 00000000..4a67a72d --- /dev/null +++ b/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 + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, +} diff --git a/src/components/domain/LoginForm/LoginForm.tsx b/src/components/domain/LoginForm/LoginForm.tsx new file mode 100644 index 00000000..4e47338c --- /dev/null +++ b/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 ( +
+ nabi-logo + +
+ ) +} + +export default LoginForm diff --git a/src/components/domain/LoginForm/index.tsx b/src/components/domain/LoginForm/index.tsx new file mode 100644 index 00000000..608996c9 --- /dev/null +++ b/src/components/domain/LoginForm/index.tsx @@ -0,0 +1,3 @@ +import LoginForm from './LoginForm' + +export default LoginForm diff --git a/src/components/domain/LoginForm/section/LoginButtons.tsx b/src/components/domain/LoginForm/section/LoginButtons.tsx new file mode 100644 index 00000000..5b80d764 --- /dev/null +++ b/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 ( +
+ alert('k')} /> + alert('g')} /> +
+ ) +} + +export default LoginButtons diff --git a/src/config/assets.ts b/src/config/assets.ts index 723541cb..6e2f5033 100644 --- a/src/config/assets.ts +++ b/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 diff --git a/src/styles/globals.css b/src/styles/globals.css index 3b8dd281..63103c99 100644 --- a/src/styles/globals.css +++ b/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,