fix: i18n의 타입 수정
This commit is contained in:
@@ -1,17 +1,20 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { projectFlightStar, createVanishingPoint } from '@/features/flight-starfield/lib/projection';
|
||||
import {
|
||||
createVanishingPoint,
|
||||
projectFlightStar,
|
||||
} from "@/features/flight-starfield/lib/projection";
|
||||
import {
|
||||
createFlightStar,
|
||||
createFlightVanishXJitter,
|
||||
getFlightStarCount,
|
||||
shouldRecycleFlightStar,
|
||||
} from '@/features/flight-starfield/model/starfieldModel';
|
||||
import { FlightStar } from '@/features/flight-starfield/model/types';
|
||||
import { clamp } from '@/shared/lib/math/number';
|
||||
import { getPrefersReducedMotionMediaQuery } from '@/shared/lib/motion/prefersReducedMotion';
|
||||
} from "@/features/flight-starfield/model/starfieldModel";
|
||||
import { FlightStar } from "@/features/flight-starfield/model/types";
|
||||
import { clamp } from "@/shared/lib/math/number";
|
||||
import { getPrefersReducedMotionMediaQuery } from "@/shared/lib/motion/prefersReducedMotion";
|
||||
|
||||
export function FlightStarfieldCanvas({
|
||||
vanishYOffset = -68,
|
||||
@@ -30,7 +33,7 @@ export function FlightStarfieldCanvas({
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) return;
|
||||
|
||||
let width = window.innerWidth;
|
||||
@@ -102,7 +105,7 @@ export function FlightStarfieldCanvas({
|
||||
|
||||
if (star.tailLength < 1 || movementLength < 0.001) {
|
||||
context.globalAlpha = visibleAlpha;
|
||||
context.fillStyle = '#f8fbff';
|
||||
context.fillStyle = "#f8fbff";
|
||||
context.beginPath();
|
||||
context.arc(toX, toY, star.radius, 0, Math.PI * 2);
|
||||
context.fill();
|
||||
@@ -116,7 +119,7 @@ export function FlightStarfieldCanvas({
|
||||
const tailY = toY - directionY * star.tailLength;
|
||||
|
||||
const gradient = context.createLinearGradient(tailX, tailY, toX, toY);
|
||||
gradient.addColorStop(0, 'rgba(248, 251, 255, 0)');
|
||||
gradient.addColorStop(0, "rgba(248, 251, 255, 0)");
|
||||
gradient.addColorStop(1, `rgba(248, 251, 255, ${visibleAlpha})`);
|
||||
|
||||
context.strokeStyle = gradient;
|
||||
@@ -127,9 +130,15 @@ export function FlightStarfieldCanvas({
|
||||
context.stroke();
|
||||
|
||||
context.globalAlpha = Math.min(1, visibleAlpha + 0.08);
|
||||
context.fillStyle = '#f8fbff';
|
||||
context.fillStyle = "#f8fbff";
|
||||
context.beginPath();
|
||||
context.arc(toX, toY, clamp(star.radius * 0.72, 0.6, 1.45), 0, Math.PI * 2);
|
||||
context.arc(
|
||||
toX,
|
||||
toY,
|
||||
clamp(star.radius * 0.72, 0.6, 1.45),
|
||||
0,
|
||||
Math.PI * 2,
|
||||
);
|
||||
context.fill();
|
||||
context.globalAlpha = 1;
|
||||
};
|
||||
@@ -144,9 +153,9 @@ export function FlightStarfieldCanvas({
|
||||
vp.y,
|
||||
centerProtectRadius * 1.35,
|
||||
);
|
||||
veil.addColorStop(0, 'rgba(160, 185, 235, 0.08)');
|
||||
veil.addColorStop(0.55, 'rgba(90, 114, 170, 0.03)');
|
||||
veil.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
||||
veil.addColorStop(0, "rgba(160, 185, 235, 0.08)");
|
||||
veil.addColorStop(0.55, "rgba(90, 114, 170, 0.03)");
|
||||
veil.addColorStop(1, "rgba(0, 0, 0, 0)");
|
||||
|
||||
context.fillStyle = veil;
|
||||
context.fillRect(0, 0, width, height);
|
||||
@@ -161,14 +170,14 @@ export function FlightStarfieldCanvas({
|
||||
height / 2,
|
||||
Math.max(width, height) * 0.95,
|
||||
);
|
||||
vignette.addColorStop(0, 'rgba(0, 0, 0, 0)');
|
||||
vignette.addColorStop(1, 'rgba(0, 0, 0, 0.82)');
|
||||
vignette.addColorStop(0, "rgba(0, 0, 0, 0)");
|
||||
vignette.addColorStop(1, "rgba(0, 0, 0, 0.82)");
|
||||
context.fillStyle = vignette;
|
||||
context.fillRect(0, 0, width, height);
|
||||
};
|
||||
|
||||
const drawFrame = (moveStars: boolean) => {
|
||||
context.fillStyle = 'rgba(2, 5, 10, 0.3)';
|
||||
context.fillStyle = "rgba(2, 5, 10, 0.3)";
|
||||
context.fillRect(0, 0, width, height);
|
||||
|
||||
drawCenterVeil();
|
||||
@@ -254,8 +263,8 @@ export function FlightStarfieldCanvas({
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
motionQuery.addEventListener('change', handleMotionChange);
|
||||
window.addEventListener("resize", handleResize);
|
||||
motionQuery.addEventListener("change", handleMotionChange);
|
||||
|
||||
if (prefersReducedMotion || isPaused) {
|
||||
renderStatic();
|
||||
@@ -264,11 +273,16 @@ export function FlightStarfieldCanvas({
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
motionQuery.removeEventListener('change', handleMotionChange);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
motionQuery.removeEventListener("change", handleMotionChange);
|
||||
stopAnimation();
|
||||
};
|
||||
}, [vanishYOffset, centerProtectRadius, isPaused]);
|
||||
|
||||
return <canvas ref={canvasRef} className="fixed inset-0 z-0 bg-black pointer-events-none" />;
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="fixed inset-0 z-0 bg-black pointer-events-none"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user