diff --git a/public/images/google-icon.png b/public/images/google-icon.png new file mode 100644 index 0000000..40e9fba Binary files /dev/null and b/public/images/google-icon.png differ diff --git a/public/images/kakao-icon.png b/public/images/kakao-icon.png new file mode 100644 index 0000000..55b2433 Binary files /dev/null and b/public/images/kakao-icon.png differ diff --git a/public/images/naver-icon.png b/public/images/naver-icon.png new file mode 100644 index 0000000..2a1521c Binary files /dev/null and b/public/images/naver-icon.png differ diff --git a/src/app/page.tsx b/src/app/page.tsx index adaba08..63e66a7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,122 @@ +'use client' + +import { useEffect, useState } from 'react' +import SplashLogo from '@/components/Icons/SplashLogo' +import SplashTop from '@/components/Icons/SplashTop' +import SplashBottom from '@/components/Icons/SplashBottom' +import { AnimatePresence, color, motion } from 'framer-motion' +import { useRouter } from 'next/navigation' + export default function Home() { + const [isSplash, setIsSplash] = useState(true) + const [logoColor, setlogoColor] = useState('white') + const [splashBoxColor, setSplashBoxColor] = useState('#31313B') + const router = useRouter() + + useEffect(() => { + const timer = setTimeout(() => { + setIsSplash(false) + setSplashBoxColor('#F3F3F4') + }, 1000) + + const logotimer = setTimeout(() => { + setlogoColor('#1A1A25') + }, 1500) + + return () => { + clearTimeout(timer) + clearTimeout(logotimer) + } + }, []) + + const handleSocialLogin = async (social: string) => { + router.push(`https://cnergy.p-e.kr/v1/oauth/${social}`) + } + return ( -
- hi~ +
+ + + + + + + + + + + + {!isSplash && ( + <> +

+ 여기에는 캐치프레이즈가 들어갑니다 +

+ + + + + + + + + )}
) } diff --git a/src/components/Icons/SplashBottom.tsx b/src/components/Icons/SplashBottom.tsx new file mode 100644 index 0000000..f2e4cec --- /dev/null +++ b/src/components/Icons/SplashBottom.tsx @@ -0,0 +1,29 @@ +import { SVGProps } from 'react' + +interface SplashBottomProps extends SVGProps { + elementColor?: string +} + +export default function SplashBottom({ + elementColor = '#F3F3F4', + ...props +}: SplashBottomProps) { + return ( + + + + + + + + + + ) +} diff --git a/src/components/Icons/SplashLogo.tsx b/src/components/Icons/SplashLogo.tsx new file mode 100644 index 0000000..c4b89d0 --- /dev/null +++ b/src/components/Icons/SplashLogo.tsx @@ -0,0 +1,166 @@ +import { SVGProps } from 'react' + +interface SplashLogoProps extends SVGProps { + firstPieceColor?: string +} + +export default function SplashLogo({ + firstPieceColor, + ...props +}: SplashLogoProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/Icons/SplashTop.tsx b/src/components/Icons/SplashTop.tsx new file mode 100644 index 0000000..d21e456 --- /dev/null +++ b/src/components/Icons/SplashTop.tsx @@ -0,0 +1,62 @@ +import { SVGProps } from 'react' + +interface SplashTopProps extends SVGProps { + elementColor?: string +} + +export default function SplashTop({ + elementColor = '#F3F3F4', + ...props +}: SplashTopProps) { + return ( + + + + + + + + ) +} diff --git a/tailwind.config.ts b/tailwind.config.ts index da01dba..610ea4d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -32,6 +32,7 @@ const config: Config = { system_red: '#FF5D5E', system_blue: '#528DFF', accent_100: '#FF4F38', + primary_foundation_100: '#1A1A25', primary_foundation_40: '#A3A3A8', primary_foundation_10: '#E9E9EA', primary_foundation_50: '#8D8D92', @@ -49,9 +50,9 @@ const config: Config = { spacing: px0To500, borderRadius: { ...px0To100, button: 6 }, }, - }, - fontFamily: { - pretendard: 'var(--pretendard)', + fontFamily: { + pretendard: ['var(--pretendard)'], + }, }, plugins: [], }