Merge branch 'develop' of https://github.com/team-nabi/nabi-market-cl…

…ient into NABI-85

.env.example

@@ -1,2 +1,3 @@
+NEXT_PUBLIC_API_ADDRESS=http://localhost:3000
 NEXT_PUBLIC_API_MOCKING=enabled # or disabled
 CHROMATIC_TOKEN=your-token

package.json

@@ -21,6 +21,7 @@
     "@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",
@@ -51,7 +52,7 @@
     "@tanstack/eslint-plugin-query": "^5.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.2.33",
     "@types/react-dom": "^18",
     "@types/tailwindcss": "^3.1.0",
     "chromatic": "^7.5.4",
@@ -65,7 +66,7 @@
     "prettier": "^3.0.3",
     "storybook": "7.5.0",
     "storybook-dark-mode": "^3.0.1",
-    "typescript": "^5",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },
   "lint-staged": {

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)/components/TestBlock.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React, { useEffect } from 'react'
+// import { useApiClient } from '@/contexts/FetchContext'
+import { getTest } from '@/services/test/test'
+
+// async function getTestValue() {
+//   const res = await getTest()
+//   const data = await res.json()
+//   return data
+// }
+
+export default function TestBlock() {
+  // const data = await getTestValue()
+  // console.log(data.message)
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getTest()
+      console.log(await data.json())
+    }
+    fetchData()
+  }, [])
+
+  return <div>{'index '}</div>
+}

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

@@ -1,61 +1,12 @@
-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'
+import TestBlock from './components/TestBlock'
 
 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
+      <TestBlock />
       <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

@@ -2,22 +2,17 @@ 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 { FetchProvider } from '@/contexts/FetchContext'
+import MSWWrapper from '@/contexts/MSWWrapper'
 import TanstackQueryContext from '@/contexts/TanstackQueryContext'
 import ThemeProviderContext from '@/contexts/ThemeProviderContext'
-import { initMockApi } from '@/lib/msw/initMockApi'
 import '@/styles/globals.css'
 
 export const metadata: Metadata = {
   title: '나비장터',
   description: '물물교환 플랫폼 나비장터입니다.',
 }
 
-if (Environment.apiMocking() === 'enabled') {
-  console.log('Mocking enabled')
-  initMockApi()
-}
-
 export default function RootLayout({
   children,
   authModal,
@@ -31,17 +26,21 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <body>
-        <TanstackQueryContext>
-          <ThemeProviderContext>
-            <Suspense>
-              <div className="centered-content">
-                <Header isLogin={true} />
-                {children}
-                {authModal}
-              </div>
-            </Suspense>
-          </ThemeProviderContext>
-        </TanstackQueryContext>
+        <FetchProvider>
+          <TanstackQueryContext>
+            <MSWWrapper>
+              <ThemeProviderContext>
+                <Suspense>
+                  <div className="centered-content">
+                    <Header isLogin={false} />
+                    {children}
+                    {authModal}
+                  </div>
+                </Suspense>
+              </ThemeProviderContext>
+            </MSWWrapper>
+          </TanstackQueryContext>
+        </FetchProvider>
       </body>
     </html>
   )

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/components/ui/Tabs/Tabs.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'
+
+const meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Tabs defaultValue="offer">
+        <TabsList>
+          <TabsTrigger value="offer">오퍼하기</TabsTrigger>
+          <TabsTrigger value="poke">찔러보기</TabsTrigger>
+        </TabsList>
+        <TabsContent value="offer">
+          <div>카드1</div>
+          <div>카드2</div>
+          <div>카드3</div>
+        </TabsContent>
+        <TabsContent value="poke">
+          <div>카드4</div>
+          <div>카드5</div>
+          <div>카드6</div>
+        </TabsContent>
+      </Tabs>
+    )
+  },
+}