💄 add invitation page UI

.eslintrc.js

@@ -74,5 +74,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/non-nullable-type-assertion-style': 'off',
     '@typescript-eslint/promise-function-async': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/triple-slash-reference': 'off',
   },
 }

app/(route)/challenge/_components/ChallengeFormDialog.tsx

@@ -10,6 +10,8 @@ import BlackCloseIcon from '@/app/_components/icons/BlackCloseIcon'
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/app/_components/shared/dialog'
 import { cn } from '@/app/_styles/utils'
 
+import { share } from '../_utils'
+
 import ChallengeForm from './challenge-form-input'
 
 type Category = '자기계발' | '생활습관' | '공부' | '운동' | '기타' | '선택안함'
@@ -97,6 +99,14 @@ export default function ChallengeFormDialog() {
               'mx-auto min-h-[60px] w-[240px] rounded-lg bg-[#482BD9] text-center',
               'disabled:bg-[#A6A6A6]'
             )}
+            onClick={() => {
+              share.kakao({
+                title: '불주먹123님이 초대장을 보냈어요!',
+                description: '1:1 목표 매칭 서비스',
+                imageUrl: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/dodaldodal_square.png',
+                link: 'https://dodaldodal-frontend-vercel.app',
+              })
+            }}
           >
             함께할 친구 초대하기
           </button>

app/(route)/challenge/_components/challenge-form-input.tsx

@@ -2,7 +2,11 @@ export default function ChallengeForm({ children }: { children: React.ReactNode
   return <label className='flex flex-col gap-1'>{children}</label>
 }
 
-function Title({ title }: { title: string }) {
+interface ChallengeFormTitleProps {
+  title: string
+}
+
+function Title({ title }: ChallengeFormTitleProps) {
   return <span className='text-sm font-semibold text-[#140A29]'>{title}</span>
 }
 
@@ -15,7 +19,7 @@ function Input({ currentLength, maxLength, ...props }: ChallengeFormInputProps)
   return (
     <div className='flex w-full justify-between gap-2 rounded-lg border border-[#140A29] bg-white p-3'>
       <input
-        className='flex-1 appearance-none text-xs text-[#595959] placeholder:text-xs placeholder:text-[#A6A6A6] focus:ring-0'
+        className='flex-1 appearance-none border-none p-0 text-xs text-[#595959] placeholder:text-xs placeholder:text-[#A6A6A6] focus:ring-0'
         {...props}
       />
       <span className='text-[10px] text-[#595959]'>

app/(route)/challenge/_utils/index.ts

@@ -0,0 +1,40 @@
+export const share = {
+  kakao: ({
+    title,
+    description,
+    imageUrl,
+    link,
+  }: {
+    title: string
+    description: string
+    imageUrl: string
+    link: string
+  }) => {
+    const { Kakao } = window
+    if (!Kakao.isInitialized()) {
+      console.log('init')
+      Kakao.init('f0146584008c5fad855abb3cfad073d7')
+    }
+    Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title,
+        description,
+        imageUrl,
+        link: {
+          mobileWebUrl: link,
+          webUrl: link,
+        },
+      },
+      buttons: [
+        {
+          title: '웹으로 보기',
+          link: {
+            mobileWebUrl: link,
+            webUrl: link,
+          },
+        },
+      ],
+    })
+  },
+}

app/(route)/challenge/layout.tsx

@@ -21,6 +21,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </Header>
       {children}
       <BottomNavigation selected='challenge' />
+      <script
+        src='https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js'
+        integrity='sha384-kYPsUbBPlktXsY6/oNHSUDZoTX6+YI51f63jCPEIPFP09ttByAdxd2mEjKuhdqn4'
+        crossOrigin='anonymous'
+        defer
+      ></script>
     </main>
   )
 }

app/(route)/invitation/[id]/layout.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import Header from '@/app/_components/shared/header'
+
+export default function layout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className='h-full pt-20'>
+      <Header className='bg-dodal-main'>
+        <div className='w-9' />
+        <Header.Title>초대장 도착</Header.Title>
+        <Header.Close
+          onClick={() => {
+            window.close()
+          }}
+        />
+      </Header>
+      {children}
+    </main>
+  )
+}

app/(route)/invitation/[id]/page.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image'
+
+export default function InvitationPage() {
+  return (
+    <div className='flex min-h-[100dvh] flex-col items-center justify-center overflow-y-auto'>
+      <div className='relative aspect-[323/208] w-[323px]'>
+        <Image src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/dodals.png' fill alt='' />
+      </div>
+      <div className='mt-8 flex flex-col justify-center'>
+        <div className='text-center'>
+          <span className='text-lg text-[#8A72FF]'>별빛우주</span>
+          <span className='text-lg'>님이 초대장을 보냈어요</span>
+        </div>
+        <span className='text-center text-lg'>목표를 위해 함께 달려볼까요?</span>
+      </div>
+      <div className='mt-20 flex w-full flex-col items-center gap-3'>
+        <button className='h-[56px] w-full max-w-[326px] rounded-[50px] bg-[#482BD9] text-lg font-bold'>좋아요!</button>
+        <button className='h-[56px] w-full max-w-[326px] rounded-[50px] bg-[#595959] text-lg font-semibold'>
+          아니요, 괜찮아요
+        </button>
+      </div>
+    </div>
+  )
+}

app/_components/shared/header.tsx

@@ -3,11 +3,20 @@ import Link from 'next/link'
 import { type ButtonHTMLAttributes } from 'react'
 
 import { ROUTE } from '@/app/_constants/route'
+import { cn } from '@/app/_styles/utils'
 
-export default function Header({ children }: { children: React.ReactNode }) {
+interface HeaderProps extends React.HTMLAttributes<HTMLHeadElement> {
+  children: React.ReactNode
+  className?: string
+}
+
+export default function Header({ children, className, ...props }: HeaderProps) {
   return (
-    <header className='fixed left-0 top-8 z-10 flex h-11 w-full items-center justify-center'>
-      <div className='flex w-full max-w-lg justify-between px-4 py-1'>{children}</div>
+    <header
+      className={cn('fixed left-0 top-0 z-10 flex h-[88px] w-full items-center justify-center pt-8', className)}
+      {...props}
+    >
+      <div className='flex w-full max-w-lg items-center justify-between px-4 py-1'>{children}</div>
     </header>
   )
 }
@@ -48,9 +57,11 @@ function Title({ children }: { children: React.ReactNode }) {
   return <div className='text-2xl font-semibold text-white'>{children}</div>
 }
 
-function Close() {
+interface CloseProps extends React.HTMLAttributes<HTMLButtonElement> {}
+
+function Close({ ...props }: CloseProps) {
   return (
-    <button>
+    <button {...props}>
       <svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'>
         <path
           fillRule='evenodd'

app/_styles/globals.css

@@ -10,13 +10,11 @@ html {
 body {
   height: 100%;
 }
-
-/* reset */
-button,
+/* 
 fieldset,
 input {
   all: unset;
-}
+} */
 
 .DialogOverlay {
   background-color: rgb(0, 0, 0, 0.5);
@@ -27,7 +25,7 @@ input {
 }
 
 .DialogContent {
-  z-index: 50;
+  z-index: 51;
   display: flex;
   justify-content: center;
   align-items: center;

app/_types/additional.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+
+interface Window {
+  Kakao: any
+}