Merge pull request #85 from DDD-Community/style/84

[STYLE/84] 회원가입 완료 UI

src/app/(onboarding)/signup/complete/components/Buttons.tsx

@@ -1,22 +1,26 @@
 'use client'
 
 import Button from '@/components/Button'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
 export const GoToCreateBoard = () => {
   const router = useRouter()
   return (
-    <Button size="lg" onClick={() => router.push('/board/create')}>
+    <Button
+      size="lg"
+      onClick={() => router.push('/board/create')}
+      className="mb-10"
+    >
       보드 만들러 가기
     </Button>
   )
 }
 
 export const GoToMain = () => {
-  const router = useRouter()
   return (
-    <Button size="md" onClick={() => router.push('/')}>
+    <Link href="/" className="mb-5 text-sm leading-4 text-gray-400 underline">
       메인으로 가기
-    </Button>
+    </Link>
   )
 }

src/app/(onboarding)/signup/complete/page.tsx

@@ -1,11 +1,28 @@
+import Image from 'next/image'
+import ThreePolaroids from 'public/icons/threePolaroids.png'
+import CheckIcon from 'public/icons/sketch_check.svg'
 import { GoToCreateBoard, GoToMain } from './components/Buttons'
 
 const SignUpCompletePage = () => {
   return (
     <div className="mx-5 flex h-dvh flex-col items-center">
-      <h1>회원가입이 완료되었습니다!</h1>
-      <GoToCreateBoard />
+      <CheckIcon className="mt-8" />
+      <h1 className="mb-4 mt-[5px] whitespace-pre-line text-center text-2xl font-thin leading-10">
+        {'회원가입이\n 완료되었습니다!'}
+      </h1>
+      <p className="mb-[25px] text-sm">
+        보드를 만들어 친구들에게 공유해보세요!
+      </p>
+      <div className="flex flex-1 items-center">
+        <Image
+          src={ThreePolaroids}
+          priority
+          alt="polaroids icon"
+          className="px-14"
+        />
+      </div>
       <GoToMain />
+      <GoToCreateBoard />
     </div>
   )
 }