Merge branch 'develop' into NABI-59

.github/workflows/pull-request.yml

@@ -32,15 +32,17 @@ jobs:
         run: npm install
 
       # 아래 단계에서 .env 파일을 생성하고 시크릿 값을 설정합니다.
-      # - name: Set Environment Variables
-      #   env:
-      #     NEXT_PUBLIC_API_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_ADDRESS }}
-      #     NEXT_PUBLIC_CHANNEL_ID: ${{ secrets.NEXT_PUBLIC_CHANNEL_ID }}
-      #     NEXT_PUBLIC_DISLIKE_CHANNEL_ID: ${{ secrets.NEXT_PUBLIC_DISLIKE_CHANNEL_ID }}
-      #   run: |
-      #     echo "NEXT_PUBLIC_API_ADDRESS=$NEXT_PUBLIC_API_ADDRESS" >> .env
-      #     echo "NEXT_PUBLIC_CHANNEL_ID=$NEXT_PUBLIC_CHANNEL_ID" >> .env
-      #     echo "NEXT_PUBLIC_DISLIKE_CHANNEL_ID=$NEXT_PUBLIC_DISLIKE_CHANNEL_ID" >> .env
+      - name: Set Environment Variables
+        env:
+          NEXT_PUBLIC_API_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_ADDRESS }}
+          NEXT_PUBLIC_API_MOCKING: ${{ secrets.NEXT_PUBLIC_API_MOCKING }}
+          NEXT_PUBLIC_API_MOCKING_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_MOCKING_ADDRESS }}
+          CHROMATIC_TOKEN: ${{ secrets.CHROMATIC_TOKEN }}
+        run: |
+          echo "NEXT_PUBLIC_API_ADDRESS=$NEXT_PUBLIC_API_ADDRESS" >> .env
+          echo "NEXT_PUBLIC_API_MOCKING=$NEXT_PUBLIC_API_MOCKING" >> .env
+          echo "NEXT_PUBLIC_API_MOCKING_ADDRESS=$NEXT_PUBLIC_API_MOCKING_ADDRESS" >> .env
+          echo "CHROMATIC_TOKEN=$CHROMATIC_TOKEN" >> .env
 
       # 빌드를 수행합니다.
       - name: Build
@@ -61,12 +63,7 @@ jobs:
             await github.pulls.createReview({
               ...context.repo,
               pull_number,
-              body : "테스트코드를 다시 확인해주세요. ",
+              body : "actions 결과를 다시 확인해주세요. -자동으로 작성됨-",
               event : "REQUEST_CHANGES"
             })
-            await github.pulls.update({
-              ...context.repo,
-              pull_number,
-              state: "closed"
-            })
         if: failure()

package.json

@@ -19,6 +19,7 @@
     "@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-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -27,6 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.291.0",
     "date-fns": "^2.30.0",
     "next": "13.5.6",
     "next-themes": "^0.2.1",

src/app/(root)/(routes)/(home)/components/TestBlock.tsx

@@ -1,25 +1,28 @@
-'use client'
-
-import React, { useEffect } from 'react'
+// 'use client'
+import React from 'react'
 import { getTest } from '@/services/test/test'
 
-// async function getTestValue() {
-//   const res = await getTest()
-//   const data = await res.json()
-//   return data
-// }
+async function getTestValue(): Promise<{ message: string } | null> {
+  try {
+    const res = await getTest()
+    const data = await res.json()
+    return data
+  } catch (e) {
+    console.log(e)
+    return null
+  }
+}
 
-export default function TestBlock() {
-  // const data = await getTestValue()
-  // console.log(data.message)
+export default async function TestBlock() {
+  const data = await getTestValue()
 
-  useEffect(() => {
-    async function fetchData() {
-      const data = await getTest()
-      console.log(await data.json())
-    }
-    fetchData()
-  }, [])
+  // useEffect(() => {
+  //   async function fetchData() {
+  //     const data = await getTest()
+  //     console.log(await data.json())
+  //   }
+  //   fetchData()
+  // }, [])
 
-  return <div>{'index '}</div>
+  return <div>{'index ' + data?.message}</div>
 }

src/app/layout.tsx

@@ -1,9 +1,11 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import Header from '@/components/domain/Header'
+import { Environment } from '@/config/environment'
 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 = {
@@ -12,6 +14,11 @@ export const metadata: Metadata = {
   viewport: 'width=device-width, initial-scale=1.0',
 }
 
+if (Environment.apiMocking() === 'enabled') {
+  console.log('Mocking enabled')
+  initMockApi()
+}
+
 export default function RootLayout({
   children,
   authModal,

src/components/domain/Header/Header.tsx

@@ -37,11 +37,11 @@ const Header = ({ isLogin = false }: HeaderProps) => {
             {/** TODO: 아바타 컴포넌트로 변경 */}
           </>
         ) : (
-          <>
-            <Button variant={'gradation'}>
-              <Link href={AppPath.login()}>로그인</Link>
-            </Button>
-          </>
+          <Button variant={'gradation'}>
+            <Link href={AppPath.login()} scroll={false}>
+              로그인
+            </Link>
+          </Button>
         )}
       </div>
     </header>

src/components/domain/LoginForm/LoginForm.tsx

@@ -1,12 +1,50 @@
+'use client'
+
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import AppPath from '@/config/appPath'
 import Assets from '@/config/assets'
+import { getGoogleLogin, getKakaoLogin } from '@/services/auth/auth'
 import LoginButtons from './section/LoginButtons'
 
 const LoginForm = () => {
+  const router = useRouter()
+  const kakaoLoginHandler = async () => {
+    try {
+      await getKakaoLogin()
+      const res = await getKakaoLogin()
+      const data = await res.json()
+      console.log(data)
+      alert('로그인 성공')
+      router.back()
+    } catch (e) {
+      console.log(e)
+      alert('로그인 실패')
+      router.push(AppPath.login(), { scroll: false })
+    }
+  }
+  const googleLoginHandler = async () => {
+    try {
+      await getKakaoLogin()
+      const res = await getGoogleLogin()
+      const data = await res.json()
+      console.log(data)
+      alert('로그인 성공')
+      router.back()
+    } catch (e) {
+      console.log(e)
+      alert('로그인 실패')
+      router.push(AppPath.login(), { scroll: false })
+    }
+  }
+
   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 />
+      <LoginButtons
+        kakaoLoginHandler={kakaoLoginHandler}
+        googleLoginHandler={googleLoginHandler}
+      />
     </section>
   )
 }

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

@@ -3,11 +3,19 @@
 import React from 'react'
 import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons'
 
-const LoginButtons = () => {
+type LoginButtonsProps = {
+  kakaoLoginHandler: () => void
+  googleLoginHandler: () => void
+}
+
+const LoginButtons = ({
+  kakaoLoginHandler,
+  googleLoginHandler,
+}: LoginButtonsProps) => {
   return (
     <section className="flex flex-col gap-2">
-      <KakaoLoginButton onClickButton={() => alert('k')} />
-      <GoogleLoginButton onClickButton={() => alert('g')} />
+      <KakaoLoginButton onClickButton={kakaoLoginHandler} />
+      <GoogleLoginButton onClickButton={googleLoginHandler} />
     </section>
   )
 }

src/components/ui/Select/Select.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './Select'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes">Grapes</SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    )
+  },
+}