Merge pull request #72 from DDD-Community/feature/69

[FEATURE/69] 카카오 로그인

package.json

@@ -27,6 +27,8 @@
     "browser-image-compression": "^2.0.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "next": "14.2.4",
+    "next-auth": "^5.0.0-beta.20",
+    "path-to-regexp": "^7.1.0",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18",
     "react-dom": "^18",

src/app/(board)/board/create/page.tsx

@@ -1,8 +1,8 @@
-import PolaboLogo from 'public/images/polabo_logo.png'
 import Image from 'next/image'
+import PolaboLogo from 'public/images/polabo_logo.png'
+import BoardAvailabilityCheckModal from './components/BoardAvailabilityCheckModal'
 import BoardNameForm from './components/BoardNameForm'
 import BoardNameRecommendations from './components/BoardNameRecommendations'
-import BoardAvailabilityCheckModal from './components/BoardAvailabilityCheckModal'
 
 const CreateBoardPage = () => {
   return (

src/app/(home)/components/CreateBoardBtn.tsx

@@ -2,20 +2,38 @@
 
 import Button from '@/components/Button'
 import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useSession } from 'next-auth/react'
+import GoToLoginModal from './GoToLoginModal'
 
 const CreateBoardBtn = () => {
   const router = useRouter()
+  const [loginModalOpen, setLoginModalOpen] = useState(false)
+
+  const { status } = useSession()
+
+  const handleClick = () => {
+    if (status === 'authenticated') {
+      router.push('/board/create')
+    } else {
+      setLoginModalOpen(true)
+    }
+  }
 
   return (
-    <Button
-      size="lg"
-      className="mb-3 shadow-[0px_0px_20px_0px_rgba(255,255,255,0.6)]"
-      onClick={() => {
-        router.push('/board/create')
-      }}
-    >
-      시작하기
-    </Button>
+    <>
+      <Button
+        size="lg"
+        className="mb-3 shadow-[0px_0px_20px_0px_rgba(255,255,255,0.6)]"
+        onClick={handleClick}
+      >
+        시작하기
+      </Button>
+      <GoToLoginModal
+        isOpen={loginModalOpen}
+        onClose={() => setLoginModalOpen(false)}
+      />
+    </>
   )
 }
 

src/app/(home)/components/GoToLoginModal.tsx

@@ -0,0 +1,26 @@
+import Modal from '@/components/Modal'
+import { useRouter } from 'next/navigation'
+import SurprisedIcon from 'public/icons/surprised.svg'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const GoToLoginModal = ({ isOpen, onClose }: ModalProps) => {
+  const router = useRouter()
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.CenterModal icon={<SurprisedIcon />}>
+        <Modal.Title>로그인 후 이용 가능합니다.</Modal.Title>
+        <Modal.Content>지금 폴라보와 함께 추억을 담아보세요!</Modal.Content>
+        <Modal.CenterConfirm
+          confirmText="확인"
+          onConfirm={() => router.push('/login')}
+        />
+      </Modal.CenterModal>
+    </Modal>
+  )
+}
+
+export default GoToLoginModal

src/app/(home)/page.tsx

@@ -1,9 +1,10 @@
+import Image from 'next/image'
 import PolaroidsIcon from 'public/icons/home_polaroids.svg'
 import PolaboLogo from 'public/images/polabo_logo.png'
 import Image from 'next/image'
 import Hamburger from '@/components/HamburgerMenu'
-import CreateBoardBtn from './components/CreateBoardBtn'
 import CopyLinkBtn from './components/CopyLinkBtn'
+import CreateBoardBtn from './components/CreateBoardBtn'
 import TotalCount from './components/TotalCount'
 
 const HomePage = () => {

src/app/(onboarding)/login/components/KakaoLogin.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import Button from '@/components/Button'
+import { signIn } from 'next-auth/react'
+import KakaoIcon from 'public/icons/kakao.svg'
+
+const KakaoLogin = () => {
+  return (
+    <Button
+      size="lg"
+      className="mb-4 flex cursor-pointer items-center justify-center gap-[9px] bg-kakao font-semiBold text-gray-950 shadow-button active:bg-[#FEE500] active:bg-gradient-to-t active:from-[rgba(0,0,0,0.10)] active:to-[rgba(0,0,0,0.10)]"
+      onClick={async () => {
+        await signIn('kakao')
+      }}
+    >
+      <KakaoIcon />
+      카카오로 시작하기
+    </Button>
+  )
+}
+
+export default KakaoLogin

src/app/(onboarding)/login/components/Policy.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+const LinkTo = ({ text, link }: { text: string; link: string }) => (
+  <Link href={link} className="border-b border-gray-400 font-bold">
+    {text}
+  </Link>
+)
+
+const Policy = () => {
+  return (
+    <div className="text-center text-xxs text-gray-400">
+      <div>
+        시작하기 버튼을 누르시면 POLABO의
+        <LinkTo text="서비스 이용약관" link="" />과
+      </div>
+      <div>
+        <LinkTo text="개인정보 처리방침" link="" />에 동의하게 됩니다.
+      </div>
+    </div>
+  )
+}
+
+export default Policy