From e265dc6ed5e69e6e1827348496182facc3a6eee6 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 31 Oct 2023 15:47:22 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:tada:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20UI?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8C=85?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/logo.svg | 21 ++++++++ public/images/x-icon.svg | 6 +++ src/app/(root)/(routes)/(auth)/login/page.tsx | 17 +++++-- src/app/(root)/(routes)/(home)/page.tsx | 51 ------------------- src/app/@authModal/(...)login/page.tsx | 31 +++++++++-- src/app/layout.tsx | 2 +- .../domain/LoginForm/LoginForm.stories.tsx | 16 ++++++ src/components/domain/LoginForm/LoginForm.tsx | 14 +++++ src/components/domain/LoginForm/index.tsx | 3 ++ .../domain/LoginForm/section/LoginButtons.tsx | 15 ++++++ src/config/assets.ts | 4 ++ src/styles/globals.css | 2 +- 12 files changed, 123 insertions(+), 59 deletions(-) create mode 100644 public/images/logo.svg create mode 100644 public/images/x-icon.svg create mode 100644 src/components/domain/LoginForm/LoginForm.stories.tsx create mode 100644 src/components/domain/LoginForm/LoginForm.tsx create mode 100644 src/components/domain/LoginForm/index.tsx create mode 100644 src/components/domain/LoginForm/section/LoginButtons.tsx 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..2ae20e96 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, From 42a88686179b0df5b874644fce07fcba3283844a Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 1 Nov 2023 16:02:50 +0900 Subject: [PATCH 2/2] =?UTF-8?q?:sparkles:=20margin=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/@authModal/(...)login/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/@authModal/(...)login/page.tsx b/src/app/@authModal/(...)login/page.tsx index 2ae20e96..b37b2f02 100644 --- a/src/app/@authModal/(...)login/page.tsx +++ b/src/app/@authModal/(...)login/page.tsx @@ -19,7 +19,7 @@ const LoginModalPage: FunctionComponent = () => { }} > -
+