Feat/loading

src/App.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Suspense } from "react";
 import Layout from "./components/Layout";
 import routerInfo from "./shared/routing/routerInfo";
+import { Loading } from "./components/Loading";
 
 const router = createBrowserRouter([
   {
@@ -10,7 +11,13 @@ const router = createBrowserRouter([
     children: routerInfo.map(({ path, element: Element }) => ({
       path,
       element: (
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={
+            <div>
+              <Loading />
+            </div>
+          }
+        >
           <Element />
         </Suspense>
       ),

src/assets/loading.json

@@ -0,0 +1 @@
+{"v":"5.5.7","fr":60,"ip":0,"op":120,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1322.667,78],[-448,83],[-329.33299999999997,43],[-252.00000000000003,-163],[-329.327,60.223],[-240.667,-1.487],[-221.333,-2],[-230.175,2.301],[-246.349,61],[-182,-8],[-210.666,40.5],[-143.333,-8],[-97.334,0.5],[-98.75,-7.875],[-152.893,34.114000000000004],[-127.197,67.606],[-105.333,20],[-104.565,36.752],[-68.667,55],[-37,-7.75],[-15.5,-7.375],[-18.917,-7.688],[-50.167,3.5],[-41.666999999999994,58.279],[-9.224,34.585],[47.334,-144.5],[-15.333000000000002,0.5],[11.999999999999998,57.75],[62.834,36.25],[51.334,64],[128.333,-13.25],[141,56.75],[175,-5],[189.667,61],[239.66699999999997,-6.75],[303,2.25],[293,-6.75],[233.24900000000002,48.757999999999996],[293.667,53.25],[292.667,147.404],[267.016,251.94299999999998],[260,138],[338.47200000000004,23.060000000000002],[1286.671,12]],"o":[[-1322.667,78],[-388.482,66.25699999999999],[-282.66700000000003,-37],[-320.66600000000005,-163],[-249.33299999999997,61.5],[-220.667,-1.487],[-221.333,-2],[-248.667,16],[-174,61],[-218,-8],[-150,40.5],[-100,-8],[-97.334,0.5],[-145.588,-7.875],[-142.667,60],[-104.667,35.5],[-105.333,20],[-90.667,71],[-55.525999999999996,34.391999999999996],[-17.667,-7.875],[-15.5,-7.375],[-21.419,-7.469],[-50.167,50.5],[-17.999999999999996,58.279],[5.666,12.25],[-15.334000000000001,-144.5],[4.875,39.907],[37.001,57.75],[62.834,-34.625],[108.334,64],[150.333,-13.25],[149.666,56.75],[209,-5],[254.333,61],[294.667,-6.75],[303,2.25],[250.99999999999997,-6.75],[269,60.25],[293.667,3.2479999999999993],[292.667,212.5],[246.667,197],[300.09799999999996,91.122],[343.999,10],[1286.671,12]],"v":[[-1322.667,78],[-437.333,79.999],[-306,3],[-283.333,-163],[-280.667,61],[-222.196,-1.487],[-221.333,-2],[-230.175,1.491],[-216.667,61],[-200.667,-8],[-177.333,40.5],[-119.333,-8],[-97.334,0.5],[-118.917,-7.875],[-148,46.5],[-111.333,45],[-105.333,20],[-100,48],[-61.333,43.5],[-17.667,-7.75],[-15.5,-7.375],[-18.917,-7.625],[-50.167,35],[-34.306,58.279],[-8.667,33.75],[14.667,-144.5],[1.334,33],[23.333,57.75],[62.834,-17.75],[77.667,64],[139.333,-13.25],[145.333,56.75],[193.667,-5],[211.333,61],[283.667,-6.75],[303,2.25],[283.667,-6.75],[264.333,58.75],[293.667,17.25],[292.667,184.5],[253.333,215],[282.667,111.5],[342.333,13.938],[1286.671,12]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":11,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,0.749,0.7843,0.8196,0.5,0.4956,0.74,0.9844,1,0.4568,0.72,0.9832],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":2,"bm":0,"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[20.6]},{"t":119,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[81.05]},{"t":119,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true}],"ip":0,"op":120,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}

src/components/Loading/.css.ts

@@ -0,0 +1,37 @@
+import { style } from "@vanilla-extract/css";
+
+export const containerStyle = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100vh",
+  fontFamily: "Arial, sans-serif",
+});
+
+export const lottieStyle = style({
+  width: "80%",
+  height: "auto",
+});
+
+export const textStyle = style({
+  marginTop: "20px",
+  fontSize: "18px",
+  fontWeight: "bold",
+  color: "#333",
+  textAlign: "center",
+});
+
+export const responsiveTextStyle = style({
+  "@media": {
+    "screen and (max-width: 600px)": {
+      fontSize: "16px",
+    },
+    "screen and (min-width: 601px) and (max-width: 1200px)": {
+      fontSize: "17px",
+    },
+    "screen and (min-width: 1201px)": {
+      fontSize: "18px",
+    },
+  },
+});

src/components/Loading/index.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect, useRef } from "react";
+import Lottie from "lottie-light-react";
+import loadingAnimation from "../../assets/loading.json";
+import { containerStyle, lottieStyle, textStyle, responsiveTextStyle } from "./.css.ts";
+
+const loadingTexts = [
+  "페이지를 요리하는 중...",
+  "비트를 가져오는 중...",
+  "픽셀을 정렬하는 중...",
+  "아이디어를 부화하는 중...",
+  "버그를 쫓아내는 중...",
+];
+
+export function Loading() {
+  // 랜덤으로 텍스트를 고르는 함수
+  const getRandomText = () => loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
+
+  const [text, setText] = useState(getRandomText());
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const dotInterval = setInterval(() => {
+      setText((prevText) => {
+        const baseText = prevText.replace(/\.+$/, "");
+        const dots = prevText.match(/\.+$/)?.[0] || "";
+        return baseText + (dots.length >= 3 ? "" : dots + ".");
+      });
+    }, 500);
+
+    return () => {
+      clearInterval(dotInterval); // 클린업
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className={containerStyle}>
+      <Lottie animationData={loadingAnimation} className={lottieStyle} />
+      <p className={`${textStyle} ${responsiveTextStyle}`}>{text}</p>
+    </div>
+  );
+}