feat: 스플래시 페이지 구현

스플래시 화면 구현, 해당 과정에서 폰트적용이 안돼 폰트 적용 부분도 수정함

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 (
-    <div className="text-[#444444] flex justify-center items-center h-screen">
-      hi~
+    <div className=" flex justify-center items-center w-screen h-screen">
+      <motion.div
+        className=" relative w-full h-full bg-primary_foundation_100"
+        initial={{ opacity: 1 }}
+        animate={{
+          opacity: 1,
+          backgroundColor: isSplash ? '#1A1A25' : '#ffffff',
+        }}
+        transition={{ duration: 0.5 }}
+      >
+        <SplashLogo
+          className="absolute left-[127px] top-[248px] z-50"
+          firstPieceColor={logoColor}
+        />
+
+        <motion.div
+          initial={{ x: 0, y: -200, opacity: 1 }}
+          animate={{ x: 0, y: 0, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <SplashTop
+            elementColor={splashBoxColor}
+            className="absolute right-0 top-[186px]"
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ x: 0, y: 553, opacity: 1 }}
+          animate={{
+            x: 0,
+            y: 264,
+            opacity: 1,
+            backgroundColor: splashBoxColor,
+          }}
+          transition={{ duration: 0.5 }}
+        >
+          <SplashBottom
+            elementColor={splashBoxColor}
+            className="absolute left-0"
+          />
+        </motion.div>
+      </motion.div>
+      {!isSplash && (
+        <>
+          <p className="z-50 font-semibold absolute top-[388px]">
+            여기에는 캐치프레이즈가 들어갑니다
+          </p>
+
+          <motion.div
+            className="absolute bottom-80"
+            initial={{ y: 300, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <button
+              onClick={() => handleSocialLogin('kakao')}
+              className="bg-[#FFE819] w-[342px] h-[56px] flex justify-center items-center rounded-12 text-black font-semibold mb-10"
+            >
+              <img src="/images/kakao-icon.png" alt="Kakao" className="mr-8" />
+              카카오로 시작하기
+            </button>
+            <button
+              onClick={() => handleSocialLogin('naver')}
+              className="bg-[#03C75A] w-[342px] h-[56px] flex justify-center items-center rounded-12 text-white font-semibold mb-10"
+            >
+              <img src="/images/naver-icon.png" alt="Naver" className="mr-8" />
+              네이버로 시작하기
+            </button>
+
+            <button
+              onClick={() => handleSocialLogin('google')}
+              className="bg-white border w-[342px] h-[56px] flex justify-center items-center rounded-12 text-black font-semibold mb-10"
+            >
+              <img
+                src="/images/google-icon.png"
+                alt="Google"
+                className="mr-8"
+              />
+              구글로 시작하기
+            </button>
+          </motion.div>
+        </>
+      )}
     </div>
   )
 }

src/components/Icons/SplashBottom.tsx

@@ -0,0 +1,29 @@
+import { SVGProps } from 'react'
+
+interface SplashBottomProps extends SVGProps<SVGSVGElement> {
+  elementColor?: string
+}
+
+export default function SplashBottom({
+  elementColor = '#F3F3F4',
+  ...props
+}: SplashBottomProps) {
+  return (
+    <svg
+      width="292"
+      height="291"
+      viewBox="0 0 292 291"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect y="194" width="97" height="97" fill={elementColor} />
+      <rect y="97" width="97" height="97" fill={elementColor} />
+      <rect x="97" y="194" width="98" height="97" fill={elementColor} />
+      <rect x="97" y="97" width="98" height="97" fill={elementColor} />
+      <rect x="97" width="98" height="97" fill={elementColor} />
+      <rect x="195" y="194" width="97" height="97" fill={elementColor} />
+      <rect width="98" height="97" fill={elementColor} />
+    </svg>
+  )
+}

src/components/Icons/SplashLogo.tsx

@@ -0,0 +1,166 @@
+import { SVGProps } from 'react'
+
+interface SplashLogoProps extends SVGProps<SVGSVGElement> {
+  firstPieceColor?: string
+}
+
+export default function SplashLogo({
+  firstPieceColor,
+  ...props
+}: SplashLogoProps) {
+  return (
+    <svg
+      width="135"
+      height="130"
+      viewBox="0 0 135 130"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="80.4658"
+        y="33.0205"
+        width="13.0343"
+        height="26.0411"
+        fill="#FF4F38"
+      />
+      <g filter="url(#filter0_d_32_15599)">
+        <rect
+          x="67.4863"
+          y="20"
+          width="13.0068"
+          height="13.0206"
+          fill="#FF4F38"
+        />
+        <rect
+          x="80.4932"
+          y="20"
+          width="13.0068"
+          height="13.0206"
+          fill="#FF4F38"
+        />
+        <rect
+          x="80.4932"
+          y="33.0205"
+          width="13.0068"
+          height="13.0206"
+          fill="#FF4F38"
+        />
+        <rect
+          x="80.4932"
+          y="46.041"
+          width="13.0068"
+          height="13.0206"
+          fill="#FF4F38"
+        />
+        <rect
+          x="54.4795"
+          y="20"
+          width="13.0068"
+          height="13.0206"
+          fill="#FF4F38"
+        />
+      </g>
+      <rect
+        x="41.5"
+        y="46.041"
+        width="26.0686"
+        height="13.0206"
+        fill={firstPieceColor}
+      />
+      <rect
+        x="67.4771"
+        y="72"
+        width="12.9885"
+        height="12.9931"
+        transform="rotate(180 67.4771 72)"
+        fill={firstPieceColor}
+      />
+      <rect
+        x="54.4888"
+        y="72"
+        width="12.9885"
+        height="12.9931"
+        transform="rotate(180 54.4888 72)"
+        fill={firstPieceColor}
+      />
+      <rect
+        x="54.4888"
+        y="59.0068"
+        width="12.9885"
+        height="12.9931"
+        transform="rotate(180 54.4888 59.0068)"
+        fill={firstPieceColor}
+      />
+      <rect
+        x="67.5688"
+        y="46.041"
+        width="26.0686"
+        height="13.0206"
+        transform="rotate(180 67.5688 46.041)"
+        fill={firstPieceColor}
+      />
+      <rect
+        x="80.4658"
+        y="71.9453"
+        width="13.0343"
+        height="12.8835"
+        transform="rotate(180 80.4658 71.9453)"
+        fill={firstPieceColor}
+      />
+      <path
+        d="M0 124.165C4.47414 124.126 9.02678 124.048 13.5402 123.815V115.762H18.6423V123.503C23.3126 123.153 27.9045 122.648 32.1824 121.831V126.499C22.253 128.366 10.8321 128.755 0 128.833V124.165ZM1.17741 117.785V113.117C6.43649 112.533 13.5402 107.281 13.5402 102.458V101.368H1.56987V96.778H30.6126V101.368H18.6423V102.458C18.6423 106.892 25.589 110.977 31.005 111.016V115.684C26.0599 115.684 19.231 112.805 16.209 108.682C13.3047 113.506 6.12251 117.318 1.17741 117.785Z"
+        fill={firstPieceColor}
+      />
+      <path
+        d="M33.7492 111.094C41.8341 111.094 48.2706 106.542 48.2706 101.602V101.213H34.5342V96.778H53.3727V100.279C53.3727 109.81 44.3459 115.529 33.7492 115.529V111.094ZM35.3191 125.834V121.311C40.3839 121.311 54.5108 117.551 63.5769 115.529V130H58.4748V121.053C51.0571 122.375 41.7268 125.274 35.3191 125.834ZM58.4748 114.984V96H63.5769V103.002H67.5015V107.67H63.5769V113.934C61.9285 114.362 60.0446 114.712 58.4748 114.984Z"
+        fill={firstPieceColor}
+      />
+      <path
+        d="M67.4985 124.165C71.9726 124.126 76.5252 124.048 81.0386 123.815V115.762H86.1407V123.503C90.8111 123.153 95.403 122.648 99.6809 121.831V126.499C89.7514 128.366 78.3306 128.755 67.4985 128.833V124.165ZM68.6759 117.785V113.117C73.935 112.533 81.0386 107.281 81.0386 102.458V101.368H69.0683V96.778H98.111V101.368H86.1407V102.458C86.1407 106.892 93.0874 110.977 98.5035 111.016V115.684C93.5584 115.684 86.7294 112.805 83.7074 108.682C80.8032 113.506 73.621 117.318 68.6759 117.785Z"
+        fill="#FF4F38"
+      />
+      <path
+        d="M101.248 111.094C109.333 111.094 115.769 106.542 115.769 101.602V101.213H102.033V96.778H120.871V100.279C120.871 109.81 111.844 115.529 101.248 115.529V111.094ZM102.818 125.878V121.365C112.377 120.491 122.009 117.551 131.075 115.529V130H125.973V121.053C118.556 122.375 111.002 124.774 102.818 125.878ZM125.973 114.984V96H131.075V103.002H135V107.67H131.075V113.934C129.427 114.362 127.543 114.712 125.973 114.984Z"
+        fill="#FF4F38"
+      />
+      <defs>
+        <filter
+          id="filter0_d_32_15599"
+          x="34.4795"
+          y="0"
+          width="79.0205"
+          height="79.0615"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 0.311 0 0 0 0 0.22 0 0 0 0.5 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_32_15599"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_32_15599"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}

src/components/Icons/SplashTop.tsx

@@ -0,0 +1,62 @@
+import { SVGProps } from 'react'
+
+interface SplashTopProps extends SVGProps<SVGSVGElement> {
+  elementColor?: string
+}
+
+export default function SplashTop({
+  elementColor = '#F3F3F4',
+  ...props
+}: SplashTopProps) {
+  return (
+    <svg
+      width="293"
+      height="291"
+      viewBox="0 0 293 291"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="293"
+        y="97"
+        width="97"
+        height="97"
+        transform="rotate(180 293 97)"
+        fill={elementColor}
+      />
+      <rect
+        x="196"
+        y="97"
+        width="98"
+        height="97"
+        transform="rotate(180 196 97)"
+        fill={elementColor}
+      />
+      <rect
+        x="98"
+        y="97"
+        width="98"
+        height="97"
+        transform="rotate(180 98 97)"
+        fill={elementColor}
+      />
+      <rect
+        x="293"
+        y="194"
+        width="98"
+        height="97"
+        transform="rotate(180 293 194)"
+        fill={elementColor}
+      />
+      <rect
+        x="293"
+        y="291"
+        width="98"
+        height="97"
+        transform="rotate(180 293 291)"
+        fill={elementColor}
+      />
+    </svg>
+  )
+}