Merge branch 'develop' into NABI-87

team-nabi · Nov 1, 2023 · 79b2426 · 79b2426
2 parents 699f8f3 + 324665d
commit 79b2426
Show file tree

Hide file tree

Showing 37 changed files with 796 additions and 17 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
-NEXT_PUBLIC_API_MOCKING=enabled # or disabled
+NEXT_PUBLIC_API_MOCKING=enabled # or disabled
+CHROMATIC_TOKEN=your-token
diff --git a/package.json b/package.json
@@ -14,12 +14,14 @@
     "chromatic": "bash ./scripts/chromatic_publish.sh"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.0.0",
     "autoprefixer": "^10.4.16",
     "class-variance-authority": "^0.7.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/google.png b/public/images/google.png
diff --git a/public/images/kakao.png b/public/images/kakao.png
diff --git a/public/images/logo.svg b/public/images/logo.svg
diff --git a/public/images/x-icon.svg b/public/images/x-icon.svg
diff --git 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 <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
diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx
@@ -1,14 +1,10 @@
-import Link from 'next/link'
-import Button from '@/components/ui/Button'
 import { DarkModeButton } from '@/components/ui/DarkModeButton'
 
 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>
     </main>
   )
 }
diff --git 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 <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
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
+import Head from 'next/head'
+import Header from '@/components/domain/Header'
 import { Environment } from '@/config/environment'
 import TanstackQueryContext from '@/contexts/TanstackQueryContext'
 import ThemeProviderContext from '@/contexts/ThemeProviderContext'
@@ -8,7 +10,7 @@ import '@/styles/globals.css'
 
 export const metadata: Metadata = {
   title: '나비장터',
-  description: 'Generated by create next app',
+  description: '물물교환 플랫폼 나비장터입니다.',
 }
 
 if (Environment.apiMocking() === 'enabled') {
@@ -25,12 +27,18 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko">
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
       <body>
         <TanstackQueryContext>
           <ThemeProviderContext>
             <Suspense>
-              {children}
-              {authModal}
+              <div className="centered-content">
+                <Header isLogin={false} />
+                {children}
+                {authModal}
+              </div>
             </Suspense>
           </ThemeProviderContext>
         </TanstackQueryContext>

diff --git a/src/components/domain/Header/Header.tsx b/src/components/domain/Header/Header.tsx
@@ -19,7 +19,7 @@ type HeaderProps = {
 
 const Header = ({ isLogin = false }: HeaderProps) => {
   return (
-    <header className="grid items-center justify-between w-full grid-cols-3 px-2 h-14 shadow-bottom bg-background-color">
+    <header className="absolute top-0 left-0 z-10 grid items-center justify-between w-full grid-cols-3 px-2 h-nav shadow-bottom bg-background-color">
       <div className="flex items-center justify-start">
         <MenuButton />
       </div>

diff --git a/src/components/domain/LoginForm/LoginForm.stories.tsx 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<typeof LoginForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+}
diff --git a/src/components/domain/LoginForm/LoginForm.tsx 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 (
+    <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
diff --git a/src/components/domain/LoginForm/index.tsx 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
@@ -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
diff --git a/src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx b/src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons'
+
+const meta = {
+  title: 'DOMAIN/LoginButtons',
+  component: KakaoLoginButton,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KakaoLoginButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+  render: () => (
+    <section className="flex flex-col gap-3">
+      <KakaoLoginButton onClickButton={() => alert('카카오 버튼')} />
+      <GoogleLoginButton onClickButton={() => alert('구글 버튼')} />
+    </section>
+  ),
+}
+
+export const Kakao: Story = {
+  render: () => <KakaoLoginButton onClickButton={() => alert('카카오 버튼')} />,
+}
+
+export const Google: Story = {
+  render: () => <GoogleLoginButton onClickButton={() => alert('구글 버튼')} />,
+}
diff --git a/src/components/domain/buttons/LoginButtons/LoginButtons.tsx b/src/components/domain/buttons/LoginButtons/LoginButtons.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Assets from '@/config/assets'
+
+const KakaoLoginButton = ({ onClickButton }: { onClickButton: () => void }) => {
+  return (
+    <Button
+      onClick={onClickButton}
+      className="relative h-10 text-black transition-all bg-kakao-color hover:brightness-90 w-80 hover:bg-kakao-color"
+    >
+      <Image
+        className="absolute flex-shrink-0 left-3"
+        src={Assets.kakaoIcon}
+        alt="카카오 로그인"
+      />
+      카카오 계정으로 시작하기
+    </Button>
+  )
+}
+
+const GoogleLoginButton = ({
+  onClickButton,
+}: {
+  onClickButton: () => void
+}) => {
+  return (
+    <Button
+      onClick={onClickButton}
+      className="relative h-10 text-black transition-all bg-white border border-gray hover:brightness-90 w-80 hover:bg-white"
+    >
+      <Image
+        className="absolute flex-shrink-0 left-3"
+        src={Assets.googleIcon}
+        alt="구글 로그인"
+      />
+      구글 계정으로 시작하기
+    </Button>
+  )
+}
+
+export { KakaoLoginButton, GoogleLoginButton }
diff --git a/src/components/domain/buttons/LoginButtons/index.tsx b/src/components/domain/buttons/LoginButtons/index.tsx
@@ -0,0 +1,3 @@
+import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons'
+
+export { KakaoLoginButton, GoogleLoginButton }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import LoginForm from './LoginForm'

		export default LoginForm
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons'

		export { KakaoLoginButton, GoogleLoginButton }