- 
+
+
{message}
잠시만 기다려주세요...
diff --git a/packages/user/src/components/event/racing/controls/Gauge.tsx b/packages/user/src/components/event/racing/controls/Gauge.tsx index c91a0233..1cea7f53 100644 --- a/packages/user/src/components/event/racing/controls/Gauge.tsx +++ b/packages/user/src/components/event/racing/controls/Gauge.tsx @@ -1,6 +1,5 @@ /* eslint-disable react/no-unused-prop-types */ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import Lightning from 'src/assets/icons/lighting.svg?react'; interface GaugeProps { percentage: number; @@ -19,7 +18,7 @@ const Gauge = memo((props: GaugeProps) => { return (
- 
@@ -20,34 +11,34 @@ export default function Caspers() {
function OrangeCasper() {
return (
-
+
+ 
);
}
function CreamCasper() {
return (
-
"거침없이 누구보다 빠르게"
-
+
+
+ 
+
+
);
}
function WhiteCasper() {
return (
-
"캐스퍼의 주인공은 누구?"
-
+
+
+
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
);
}
diff --git a/packages/user/src/components/home/quizHint/HintCards.tsx b/packages/user/src/components/home/quizHint/HintCards.tsx
index 8f5c605c..c37b7702 100644
--- a/packages/user/src/components/home/quizHint/HintCards.tsx
+++ b/packages/user/src/components/home/quizHint/HintCards.tsx
@@ -1,5 +1,4 @@
import { ReactElement } from 'react';
-import TalkingOrangeCasper from 'src/assets/icons/quiz-hint-casper.svg?react';
import HintCard from './HintCard.tsx';
import InfoBox from './InfoBox.tsx';
import InfoTitle from './infoTitle.tsx';
@@ -33,7 +32,7 @@ const HINT_CARDS = [
export default function HintCards() {
return (
+ 
);
}
@@ -55,7 +46,7 @@ function WhiteCasper() {
function KhakiCasper() {
return (
- 
);
}
diff --git a/packages/user/src/components/home/eventHero/racing/Effects.tsx b/packages/user/src/components/home/eventHero/racing/Effects.tsx
index ddc4f2a9..fad1449e 100644
--- a/packages/user/src/components/home/eventHero/racing/Effects.tsx
+++ b/packages/user/src/components/home/eventHero/racing/Effects.tsx
@@ -1,27 +1,16 @@
-import Light1 from 'src/assets/landing-racing/effects/light-1.svg?react';
-import Light2 from 'src/assets/landing-racing/effects/light-2.svg?react';
-import Light3 from 'src/assets/landing-racing/effects/light-3.svg?react';
-import Light4 from 'src/assets/landing-racing/effects/light-4.svg?react';
-import Light5 from 'src/assets/landing-racing/effects/light-5.svg?react';
-import Light6 from 'src/assets/landing-racing/effects/light-6.svg?react';
-import Light7 from 'src/assets/landing-racing/effects/light-7.svg?react';
-import Light8 from 'src/assets/landing-racing/effects/light-8.svg?react';
-import Sparkle1 from 'src/assets/landing-racing/effects/sparkle-1.svg?react';
-import Sparkle2 from 'src/assets/landing-racing/effects/sparkle-2.svg?react';
-
export default function Effects() {
return (
<>
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/user/src/components/home/quizHint/HintCards.tsx b/packages/user/src/components/home/quizHint/HintCards.tsx
index 8f5c605c..c37b7702 100644
--- a/packages/user/src/components/home/quizHint/HintCards.tsx
+++ b/packages/user/src/components/home/quizHint/HintCards.tsx
@@ -1,5 +1,4 @@
import { ReactElement } from 'react';
-import TalkingOrangeCasper from 'src/assets/icons/quiz-hint-casper.svg?react';
import HintCard from './HintCard.tsx';
import InfoBox from './InfoBox.tsx';
import InfoTitle from './infoTitle.tsx';
@@ -33,7 +32,7 @@ const HINT_CARDS = [
export default function HintCards() {
return (
- 
{HINT_CARDS.map((hint, index) => {
const [left, right] = determinePositions(getHintElements)(hint, index);
return
{HINT_CARDS.map((hint, index) => {
const [left, right] = determinePositions(getHintElements)(hint, index);
return event
} {label} ))} diff --git a/packages/user/src/styles/index.css b/packages/user/src/styles/index.css index 3f59b33a..63e9e233 100644 --- a/packages/user/src/styles/index.css +++ b/packages/user/src/styles/index.css @@ -10,6 +10,7 @@ format('woff2'); font-weight: 800; font-style: normal; + font-display: swap; } @font-face { @@ -17,6 +18,7 @@ src: url('/fonts/HyundaiSansHeadKRBold.woff2') format('woff2'); font-weight: 700; font-style: normal; + font-display: swap; } @font-face { @@ -24,6 +26,7 @@ src: url('/fonts/HyundaiSansHeadKRMedium.woff2') format('woff2'); font-weight: 500; font-style: normal; + font-display: swap; } @font-face { @@ -31,6 +34,7 @@ src: url('/fonts/HyundaiSansHeadKR.woff2') format('woff2'); font-weight: 400; font-style: normal; + font-display: swap; } /** default typography */ diff --git a/packages/user/src/styles/theme/animations.ts b/packages/user/src/styles/theme/animations.ts index 94c00a6b..a1ce0b25 100644 --- a/packages/user/src/styles/theme/animations.ts +++ b/packages/user/src/styles/theme/animations.ts @@ -84,9 +84,9 @@ const animation = { 'sparkle-reverse': 'sparkle-reverse 1.8s ease-in-out infinite', sparkle2: 'sparkle 2s ease-in-out infinite', rotate: 'rotate 0.3s ease-in-out', - rotate1: 'rotate1 1s ease-in-out 5 forwards', - rotate2: 'rotate2 1s ease-in-out 5 forwards', - rotate3: 'rotate3 1s ease-in-out 5 forwards', + rotate1: 'rotate1 1s ease-in-out infinite forwards', + rotate2: 'rotate2 1s ease-in-out infinite forwards', + rotate3: 'rotate3 1s ease-in-out infinite forwards', fold: 'fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards', unfold: 'unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards', 'special-my-casper': 'special-my-casper 2s infinite cubic-bezier(0.4, 0.0, 0.2, 1)',