Merge pull request #66 from dnd-side-project/feat/#21

Feat/#21

src/app/page.tsx

@@ -1,5 +1,9 @@
-import Image from 'next/image'
+import GoogleLoginButton from '@/components/shared/GoogleLoginButton'
 
 export default function Home() {
-  return <main className='text-white'>SPACE D 🪐 메인</main>
+  return (
+    <main className="text-white">
+      <GoogleLoginButton />
+    </main>
+  )
 }

src/app/profile/layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+type LayoutProps = {
+  children: React.ReactNode
+}
+export default function ProfileLayout({ children }: LayoutProps) {
+  return (
+    <div className="pb-4 h-full">
+      <div className="h-[calc(100%-80px)]">{children}</div>
+    </div>
+  )
+}

src/app/profile/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function Profile() {
+  return <div className="text-onSurface-300">test</div>
+}
+
+export default Profile

src/components/common/SelectCard/index.tsx

@@ -0,0 +1,3 @@
+export default function SelectCard() {
+  return <div>SelectCard</div>
+}

src/components/domain/profile/JobGroupCard/JobGroupCard.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import JobGroup from '.'
+import JobGroupCard from '.'
+
+const meta: Meta<typeof JobGroup> = {
+  title: 'components/Profile/JobGroupCard',
+  component: JobGroupCard,
+  tags: ['autodocs'],
+  argTypes: {
+    id: {
+      description: '각 컴포넌트에 대한 ID를 추가합니다',
+    },
+    name: {
+      description: '개발자, 디자이너, 기타로 분류됩니다.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof JobGroup>
+
+export const Develop: Story = {
+  args: {
+    id: 1,
+    name: '개발자',
+  },
+  render: () => <JobGroupCard id={1} name={'개발자'} />,
+}
+
+export const Design: Story = {
+  args: {
+    id: 2,
+    name: '디자이너',
+  },
+  render: () => <JobGroupCard id={2} name={'디자이너'} />,
+}
+
+export const Etcetera: Story = {
+  args: {
+    id: 3,
+    name: '기타',
+  },
+  render: () => <JobGroupCard id={3} name={'기타'} />,
+}

src/components/domain/profile/JobGroupCard/index.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import Image from 'next/image'
+import { JobGroup } from '@/types/profile'
+
+export default function JobGroupCard({ id, name }: JobGroup) {
+  const [selected, setSelected] = useState(false)
+
+  const handleClick = () => {
+    setSelected(!selected)
+  }
+
+  return (
+    <div
+      className={`flex p-4 bg-gray-800 rounded-2xl text-onSurface-300 ${
+        selected &&
+        'bg-primary-0 text-background border-solid border-[1.5px] border-primary-400'
+      }`}
+      onClick={handleClick}
+    >
+      <Image
+        src={`/icons/job_group_0${id}.svg`}
+        alt={`job_group_${id}.svg`}
+        width={63}
+        height={63}
+      />
+      <p className="p-6 text-h2">{name}</p>
+    </div>
+  )
+}

src/components/domain/profile/chip/Chip.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ProfileChip from '.'
+import Chip from '.'
+
+const meta: Meta<typeof ProfileChip> = {
+  title: 'components/Profile/Chip',
+  component: ProfileChip,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProfileChip>
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Chip id={0} name="비공개" type="기업" />
+    </div>
+  ),
+}

src/components/domain/profile/chip/index.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { ProfileChip } from '@/types/profileChip'
+
+export default function Chip({ id, type, name }: ProfileChip) {
+  const [selected, setSelected] = useState(false)
+
+  const handleClick = () => {
+    setSelected(!selected)
+    console.log(`${type}: ${name}`)
+  }
+
+  return (
+    <div
+      className={`w-fit px-5 py-2 rounded-[0.25rem] hover:cursor-pointer ${
+        selected
+          ? 'bg-primary-400 text-background'
+          : 'border-solid border-[1.5px] border-outline text-onSurface-300'
+      }`}
+      key={id}
+      onClick={handleClick}
+    >
+      {name}
+    </div>
+  )
+}

src/components/shared/GoogleLoginButton/index.tsx

@@ -1,8 +1,42 @@
+'use client'
+
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
 
 export default function GoogleLoginButton() {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleLogin = async () => {
+    const isSignUp = false // 임시로
+    setLoading(true)
+    setError(null)
+
+    try {
+      // access token 임시로 가져오기
+      const googleAccessToken = 'my-google-access-token'
+      localStorage.setItem('accessToken', googleAccessToken)
+
+      if (isSignUp) {
+        router.push('/profile')
+      } else {
+        router.push('/home/dictionary')
+      }
+    } catch (error) {
+      console.error('[ERROR] 로그인 도중 문제가 발생했습니다.', error)
+      setError('[ERROR] 로그인에 실패했습니다.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
-    <button className="w-full py-4 px-6 rounded-lg flex justify-center bg-white">
+    <button
+      className="w-full py-4 px-6 rounded-lg flex justify-center bg-white"
+      onClick={() => handleLogin()}
+    >
       <div className="flex gap-3">
         <Image alt="google" src={'/icons/google.svg'} width={20} height={20} />
         <p className="font-medium text-black">Google로 시작하기</p>

src/types/profile.ts

@@ -0,0 +1,4 @@
+export interface JobGroup {
+  id: number
+  name: string
+}

src/types/profileChip.ts

@@ -0,0 +1,5 @@
+export interface ProfileChip {
+  id: number
+  type?: '기업' | '경력'
+  name: string
+}