From a52e8d9f6573e521ad5a70a9dfa1110ef117e62e Mon Sep 17 00:00:00 2001 From: Jeje Date: Sun, 22 Sep 2024 02:13:54 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(load):=20loading=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- src/assets/loading.json | 1 + src/components/Loading/.css.ts | 37 +++++++++++++++++++++++++++ src/components/Loading/index.tsx | 43 ++++++++++++++++++++++++++++++++ 4 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 src/assets/loading.json create mode 100644 src/components/Loading/.css.ts create mode 100644 src/components/Loading/index.tsx diff --git a/src/App.tsx b/src/App.tsx index 16fc351..c3b695e 100644 --- a/src/App.tsx +++ b/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,7 @@ const router = createBrowserRouter([ children: routerInfo.map(({ path, element: Element }) => ({ path, element: ( - Loading...}> + }> ), diff --git a/src/assets/loading.json b/src/assets/loading.json new file mode 100644 index 0000000..4fcf6eb --- /dev/null +++ b/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} \ No newline at end of file diff --git a/src/components/Loading/.css.ts b/src/components/Loading/.css.ts new file mode 100644 index 0000000..4252153 --- /dev/null +++ b/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', + }, + }, +}); diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx new file mode 100644 index 0000000..fd1bab3 --- /dev/null +++ b/src/components/Loading/index.tsx @@ -0,0 +1,43 @@ +import React, { 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 ( +
+ +

+ {text} +

+
+ ); +} From d16ec09bf5703f654ced1a17916a9b9d54ede2d2 Mon Sep 17 00:00:00 2001 From: Jeje Date: Sun, 22 Sep 2024 02:14:23 +0900 Subject: [PATCH 2/3] refactor --- src/App.tsx | 10 ++++- src/components/Loading/.css.ts | 48 ++++++++++++------------ src/components/Loading/index.tsx | 64 ++++++++++++++++---------------- 3 files changed, 63 insertions(+), 59 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c3b695e..b196543 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +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"; +import { Loading } from "./components/Loading"; const router = createBrowserRouter([ { @@ -11,7 +11,13 @@ const router = createBrowserRouter([ children: routerInfo.map(({ path, element: Element }) => ({ path, element: ( - }> + + + + } + > ), diff --git a/src/components/Loading/.css.ts b/src/components/Loading/.css.ts index 4252153..adfe622 100644 --- a/src/components/Loading/.css.ts +++ b/src/components/Loading/.css.ts @@ -1,37 +1,37 @@ -import { style } from '@vanilla-extract/css'; +import { style } from "@vanilla-extract/css"; export const containerStyle = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - height: '100vh', - fontFamily: 'Arial, sans-serif', + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + height: "100vh", + fontFamily: "Arial, sans-serif", }); export const lottieStyle = style({ - width: '80%', - height: 'auto', + width: "80%", + height: "auto", }); export const textStyle = style({ - marginTop: '20px', - fontSize: '18px', - fontWeight: 'bold', - color: '#333', - textAlign: 'center', + 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', - }, + "@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", + }, + }, }); diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx index fd1bab3..9800e35 100644 --- a/src/components/Loading/index.tsx +++ b/src/components/Loading/index.tsx @@ -1,43 +1,41 @@ -import React, { 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'; +import React, { 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 getRandomText = () => loadingTexts[Math.floor(Math.random() * loadingTexts.length)]; - const [text, setText] = useState(getRandomText()); - const containerRef = useRef(null); + 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); + 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 () => { + clearInterval(dotInterval); // 클린업 + }; + }, []); - return ( -
- -

- {text} -

-
- ); + return ( +
+ +

{text}

+
+ ); } From f4d5bd33b0616cf40158ed0d0dc3ad37dce2e318 Mon Sep 17 00:00:00 2001 From: Jeje Date: Sun, 22 Sep 2024 02:17:12 +0900 Subject: [PATCH 3/3] fix --- src/components/Loading/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx index 9800e35..443a4d7 100644 --- a/src/components/Loading/index.tsx +++ b/src/components/Loading/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from "react"; +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";