diff --git a/public/images/invite-letter.png b/public/images/invite-letter.png new file mode 100644 index 00000000..d6c41ace Binary files /dev/null and b/public/images/invite-letter.png differ diff --git a/public/images/no-invite-letter.png b/public/images/no-invite-letter.png new file mode 100644 index 00000000..0a510ba1 Binary files /dev/null and b/public/images/no-invite-letter.png differ diff --git a/src/app/(routes)/invite/[code]/layout.tsx b/src/app/(routes)/invite/[code]/layout.tsx new file mode 100644 index 00000000..342ef03e --- /dev/null +++ b/src/app/(routes)/invite/[code]/layout.tsx @@ -0,0 +1,20 @@ +import { FunctionComponent, PropsWithChildren } from 'react' +import type { Metadata } from 'next' +import Icon from '@/shared/components/custom/icon' + +export const metadata: Metadata = {} + +interface LayoutProps extends PropsWithChildren {} + +const Layout: FunctionComponent = ({ children }) => { + return ( + <> +
+ +
+ {children} + + ) +} + +export default Layout diff --git a/src/app/(routes)/invite/[code]/page.tsx b/src/app/(routes)/invite/[code]/page.tsx new file mode 100644 index 00000000..031b5419 --- /dev/null +++ b/src/app/(routes)/invite/[code]/page.tsx @@ -0,0 +1,24 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import AvailableInviteView from '@/features/invite/screen/available-invite' +import UnavailableInviteView from '@/features/invite/screen/unavailable-invite' + +interface Props { + params: { + code: string + } +} + +const InvitePage = ({ params }: Props) => { + const code = params.code + // 링크 유효기간 체크 + // 유효성에 따라 다른 page view 보여주기 + const isValid = false + + return ( +
+ {isValid ? : } +
+ ) +} + +export default InvitePage diff --git a/src/app/(routes)/invite/sign-up/layout.tsx b/src/app/(routes)/invite/sign-up/layout.tsx new file mode 100644 index 00000000..342ef03e --- /dev/null +++ b/src/app/(routes)/invite/sign-up/layout.tsx @@ -0,0 +1,20 @@ +import { FunctionComponent, PropsWithChildren } from 'react' +import type { Metadata } from 'next' +import Icon from '@/shared/components/custom/icon' + +export const metadata: Metadata = {} + +interface LayoutProps extends PropsWithChildren {} + +const Layout: FunctionComponent = ({ children }) => { + return ( + <> +
+ +
+ {children} + + ) +} + +export default Layout diff --git a/src/app/(routes)/invite/sign-up/page.tsx b/src/app/(routes)/invite/sign-up/page.tsx new file mode 100644 index 00000000..9438d559 --- /dev/null +++ b/src/app/(routes)/invite/sign-up/page.tsx @@ -0,0 +1,25 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import SocialLogin from '@/features/auth/social-login' +import Text from '@/shared/components/ui/text' + +interface Props { + searchParams?: { + code: string + } +} + +const InviteSignUpPage = ({ searchParams }: Props) => { + // 유효한 코드일 경우 전달됨 + + return ( +
+ + 3초만에 픽토스 시작하기 + + + +
+ ) +} + +export default InviteSignUpPage diff --git a/src/app/(routes)/profile/account/page.tsx b/src/app/(routes)/profile/account/page.tsx index 63662cce..e8cdefec 100644 --- a/src/app/(routes)/profile/account/page.tsx +++ b/src/app/(routes)/profile/account/page.tsx @@ -60,7 +60,7 @@ const AccountPage = async () => { 카카오 로그인 {/* 구글 로그인 */} - {/* + {/* 구글 로그인 picktoss@gmail.com diff --git a/src/features/auth/social-login/index.tsx b/src/features/auth/social-login/index.tsx new file mode 100644 index 00000000..910e63e2 --- /dev/null +++ b/src/features/auth/social-login/index.tsx @@ -0,0 +1,31 @@ +'use client' + +import Icon from '@/shared/components/custom/icon' +import { Button } from '@/shared/components/ui/button' +import Text from '@/shared/components/ui/text' +import { signIn } from 'next-auth/react' + +const SocialLogin = () => { + return ( +
+ + +
+ ) +} + +export default SocialLogin diff --git a/src/features/invite/screen/available-invite.tsx b/src/features/invite/screen/available-invite.tsx new file mode 100644 index 00000000..496216f8 --- /dev/null +++ b/src/features/invite/screen/available-invite.tsx @@ -0,0 +1,42 @@ +import { Button } from '@/shared/components/ui/button' +import Text from '@/shared/components/ui/text' +import Image from 'next/image' +import Link from 'next/link' + +const AvailableInviteView = ({ code }: { code: string }) => { + return ( + <> + + + + {'픽토스'}님이 보내신 + + + + {'픽토스'}{' '} + + PRO + {' '} + 무료 이용권 + + + + 하루 5분으로 내가 배운 것을 기억하세요
+ 노트필기, 수업 기록, 저장한 자료 등
+ 픽토스 PRO에서는 마음껏 퀴즈로 만들 수 있어요 + + + { + return ( + <> + + + + 이런! + + + + 초대장이 사라졌어요 + + + + 링크 유효기간이 만료되어, 새로운 초대 링크가 필요해요
+ 픽토스 PRO 무료 이용권을 받고 싶다면
+ 친구에게 링크를 다시 요청해보세요 + + + + + + + ) +} + +export default UnavailableInviteView diff --git a/src/shared/components/custom/icon/svg-components.tsx b/src/shared/components/custom/icon/svg-components.tsx index e1584ef2..88eb668a 100644 --- a/src/shared/components/custom/icon/svg-components.tsx +++ b/src/shared/components/custom/icon/svg-components.tsx @@ -1797,6 +1797,36 @@ export const KakaoWithBackground = ({ ...props }) => { } export const Google = ({ ...props }) => { + return ( + + + + + + + ) +} + +export const GoogleWithBackground = ({ ...props }) => { return ( = { disabled: 'text-text-disabled', right: 'text-text-right', wrong: 'text-text-wrong', - special: 'bg-gradient-to-r from-blue-400 to-orange-500 bg-clip-text text-transparent', + special: 'bg-gradient-to-r from-orange-500 to-blue-400 bg-clip-text text-transparent', } const Text = forwardRef(