diff --git a/.gitignore b/.gitignore
index 2457088..5ad6d27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,4 @@ yarn-error.log*
*.tsbuildinfo
next-env.d.ts
.idea
-.gemini
+.cli
diff --git a/src/app/flight/page.tsx b/src/app/flight/page.tsx
index 22a2a36..75ef5ca 100644
--- a/src/app/flight/page.tsx
+++ b/src/app/flight/page.tsx
@@ -79,7 +79,7 @@ export default function FlightPage() {
return (
-
+
{/* UI Element 1: Label */}
@@ -115,4 +115,4 @@ export default function FlightPage() {
+ {CONSTELLATIONS.map((constellation, constellationIndex) => (
+
+
+
+ ))}
+
+
+
+
+ {route.name}
+
+
+ {route.tag}
+
+
+
+ {route.durationMinutes === 0 ? "∞" : route.durationMinutes}
+
+ {route.durationMinutes === 0 ? "" : "min"}
+
+
+
+
+ {!isCTA && (
+
+ {route.description}
+
+ )}
+
+ {isCTA && (
+
+ {route.description}
+
+ )}
+
+
+ {isCTA ? "정거장 진입 (대기)" : "바로 출항"}
+
+
- {/* Background Layer */}
- {/* Content Layer */}
-
어느 별자리로 출항할까요?
+
+ 어느 별자리로 출항할까요?
+
몰입하기 좋은 궤도입니다.
-
- {ROUTES.map((route) => (
-
-
-
-
{route.name}
-
- {route.tag}
-
-
-
{route.durationMinutes}min
-
-
{route.description}
-
- 바로 출항
-
-
- ))}
-
+
+
+
+
-
- 정거장에서 3명이 대기 중
+
+ {normalRoutes.map((route) => (
+
+ ))}
+
diff --git a/src/components/FlightBackground.tsx b/src/components/FlightBackground.tsx
index 982ae69..28f88c5 100644
--- a/src/components/FlightBackground.tsx
+++ b/src/components/FlightBackground.tsx
@@ -2,7 +2,31 @@
import { useEffect, useRef } from 'react';
-export default function FlightBackground() {
+type FlightBackgroundProps = {
+ vanishYOffset?: number;
+ centerProtectRadius?: number;
+};
+
+type Star = {
+ wx: number;
+ wy: number;
+ z: number;
+ speed: number;
+ radius: number;
+ alpha: number;
+ tailLength: number;
+};
+
+const clamp = (value: number, min: number, max: number) =>
+ Math.min(max, Math.max(min, value));
+
+const randomInRange = (min: number, max: number) =>
+ min + Math.random() * (max - min);
+
+export default function FlightBackground({
+ vanishYOffset = -64,
+ centerProtectRadius = 190,
+}: FlightBackgroundProps) {
const canvasRef = useRef
(null);
useEffect(() => {
@@ -14,9 +38,12 @@ export default function FlightBackground() {
let width = window.innerWidth;
let height = window.innerHeight;
+ let animationFrameId = 0;
- // Check prefers-reduced-motion
- const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+ let prefersReduced = motionQuery.matches;
+
+ const vanishXJitter = (Math.random() < 0.5 ? -1 : 1) * randomInRange(10, 25);
const setSize = () => {
width = window.innerWidth;
@@ -24,103 +51,262 @@ export default function FlightBackground() {
canvas.width = width;
canvas.height = height;
};
+
+ const getStarCount = () => {
+ const isMobile = width < 768;
+ const min = isMobile ? 12 : 18;
+ const max = isMobile ? 30 : 45;
+ const byArea = Math.round((width * height) / 42000);
+ return clamp(byArea, min, max);
+ };
+
+ const getVanishingPoint = () => ({
+ x: width / 2 + vanishXJitter,
+ y: height / 2 + vanishYOffset,
+ });
+
+ const createSpeed = () => {
+ const tier = Math.random();
+
+ if (tier < 0.9) return randomInRange(0.003, 0.007);
+ if (tier < 0.99) return randomInRange(0.007, 0.011);
+ return randomInRange(0.011, 0.014);
+ };
+
+ const createVisuals = () => {
+ const highlight = Math.random() < 0.16;
+ const tailRoll = Math.random();
+ const tailLength =
+ tailRoll < 0.82
+ ? randomInRange(0, 2.5)
+ : tailRoll < 0.86
+ ? randomInRange(2.5, 3.8)
+ : randomInRange(4, 10);
+
+ return {
+ radius: highlight ? randomInRange(1.2, 1.8) : randomInRange(0.7, 1.2),
+ alpha: highlight ? randomInRange(0.55, 0.85) : randomInRange(0.25, 0.55),
+ tailLength,
+ };
+ };
+
+ const createSpawnRadius = () => {
+ const roll = Math.random();
+ const maxWideRadius = Math.min(Math.max(width, height) * 0.7, 360);
+ const ringOuter = Math.min(320, maxWideRadius);
+
+ if (roll < 0.08) {
+ return randomInRange(0, 60);
+ }
+
+ if (roll < 0.8) {
+ return randomInRange(80, Math.max(80, ringOuter));
+ }
+
+ return randomInRange(120, Math.max(120, maxWideRadius));
+ };
+
+ const createStar = (isRespawn: boolean): Star => {
+ const radius = createSpawnRadius();
+ const angle = randomInRange(0, Math.PI * 2);
+ const visuals = createVisuals();
+
+ return {
+ wx: Math.cos(angle) * radius,
+ wy: Math.sin(angle) * radius,
+ z: isRespawn ? randomInRange(0.9, 1.55) : randomInRange(0.55, 1.6),
+ speed: createSpeed(),
+ radius: visuals.radius,
+ alpha: visuals.alpha,
+ tailLength: visuals.tailLength,
+ };
+ };
+
setSize();
- window.addEventListener('resize', setSize);
+ let stars: Star[] = Array.from({ length: getStarCount() }, () => createStar(false));
- // Star configuration
- const starCount = 150;
- const stars: { x: number; y: number; z: number; speed: number }[] = [];
-
- // Target point (slightly above center)
- // We will move stars away from this point.
- // Instead of full 3D, let's do a 2D split flow.
- // Stars spawn randomly.
- // If x < center, move left-down.
- // If x > center, move right-down.
-
- // Initial Spawn
- for (let i = 0; i < starCount; i++) {
- stars.push({
- x: Math.random() * width,
- y: Math.random() * height,
- z: Math.random() * 2 + 0.5, // depth/size
- speed: Math.random() * 2 + 0.5
- });
- }
+ const screenDistanceFromCenter = (x: number, y: number) => {
+ const cx = width / 2;
+ const cy = height / 2;
+ return Math.hypot(x - cx, y - cy);
+ };
- let animationFrameId: number;
+ const applyCenterProtection = (x: number, y: number, alpha: number) => {
+ const distance = screenDistanceFromCenter(x, y);
- const render = () => {
- if (!ctx) return;
- ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; // Trails
+ if (distance >= centerProtectRadius) return alpha;
+
+ const ratio = clamp(distance / centerProtectRadius, 0, 1);
+ const attenuation = 0.35 + ratio * 0.65;
+ return alpha * attenuation;
+ };
+
+ const project = (star: Star, zValue: number) => {
+ const vp = getVanishingPoint();
+ return {
+ x: vp.x + star.wx / zValue,
+ y: vp.y + star.wy / zValue,
+ };
+ };
+
+ const recycleStar = (index: number) => {
+ stars[index] = createStar(true);
+ };
+
+ const drawStar = (
+ star: Star,
+ fromX: number,
+ fromY: number,
+ toX: number,
+ toY: number,
+ ) => {
+ const visibleAlpha = applyCenterProtection(toX, toY, star.alpha);
+ const dx = toX - fromX;
+ const dy = toY - fromY;
+ const movementLength = Math.hypot(dx, dy);
+
+ if (star.tailLength < 1 || movementLength < 0.001) {
+ ctx.globalAlpha = visibleAlpha;
+ ctx.fillStyle = '#f8fbff';
+ ctx.beginPath();
+ ctx.arc(toX, toY, star.radius, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.globalAlpha = 1;
+ return;
+ }
+
+ const dirX = dx / movementLength;
+ const dirY = dy / movementLength;
+ const tailX = toX - dirX * star.tailLength;
+ const tailY = toY - dirY * star.tailLength;
+
+ const gradient = ctx.createLinearGradient(tailX, tailY, toX, toY);
+ gradient.addColorStop(0, 'rgba(248, 251, 255, 0)');
+ gradient.addColorStop(1, `rgba(248, 251, 255, ${visibleAlpha})`);
+
+ ctx.strokeStyle = gradient;
+ ctx.lineWidth = clamp(star.radius * 0.9, 0.65, 1.6);
+ ctx.beginPath();
+ ctx.moveTo(tailX, tailY);
+ ctx.lineTo(toX, toY);
+ ctx.stroke();
+
+ ctx.globalAlpha = Math.min(1, visibleAlpha + 0.08);
+ ctx.fillStyle = '#f8fbff';
+ ctx.beginPath();
+ ctx.arc(toX, toY, clamp(star.radius * 0.72, 0.6, 1.45), 0, Math.PI * 2);
+ ctx.fill();
+ ctx.globalAlpha = 1;
+ };
+
+ const drawCenterVeil = () => {
+ const vp = getVanishingPoint();
+ const veil = ctx.createRadialGradient(
+ vp.x,
+ vp.y,
+ centerProtectRadius * 0.18,
+ vp.x,
+ 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)');
+
+ ctx.fillStyle = veil;
ctx.fillRect(0, 0, width, height);
- // ctx.clearRect(0, 0, width, height); // Clear
+ };
- const targetX = width / 2;
- // targetY is virtual, above screen.
- // Movement vector:
- // Left side: dx = -speed, dy = speed
- // Right side: dx = speed, dy = speed
+ const drawVignette = () => {
+ const vignette = ctx.createRadialGradient(
+ width / 2,
+ height / 2,
+ Math.min(width, height) * 0.25,
+ width / 2,
+ 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)');
+ ctx.fillStyle = vignette;
+ ctx.fillRect(0, 0, width, height);
+ };
- ctx.fillStyle = '#ffffff';
+ const drawFrame = (moveStars: boolean) => {
+ ctx.fillStyle = 'rgba(2, 5, 10, 0.3)';
+ ctx.fillRect(0, 0, width, height);
- stars.forEach((star) => {
- // Reduced motion: very slow or static
- const moveFactor = prefersReduced ? 0.1 : 1.0;
+ drawCenterVeil();
- // Determine direction based on side
- const isLeft = star.x < targetX;
-
- // Simple perspective-ish flow
- // The further from center X, the faster dx
- // The further down, the faster dy
-
- // Let's stick to the PRD requirements:
- // Left -> Bottom-Left
- // Right -> Bottom-Right
-
- const dx = (isLeft ? -1 : 1) * star.speed * 0.5 * moveFactor;
- const dy = star.speed * moveFactor;
+ stars.forEach((star, index) => {
+ const from = project(star, star.z);
- star.x += dx;
- star.y += dy;
-
- // Reset if out of bounds
- if (star.y > height || star.x < 0 || star.x > width) {
- star.y = -10;
- star.x = Math.random() * width;
- // Bias respawn near center-top for "flow" effect?
- // Or just random top. Random top is safer for uniform coverage.
+ if (moveStars) {
+ star.z -= star.speed;
}
- const size = Math.max(0.5, star.z * (star.y / height) * 2);
- const opacity = Math.min(1, star.y / 200); // Fade in from top
+ const to = project(star, star.z);
- ctx.globalAlpha = opacity;
- ctx.beginPath();
- ctx.arc(star.x, star.y, size, 0, Math.PI * 2);
- ctx.fill();
- ctx.globalAlpha = 1.0;
+ const outOfBounds =
+ to.x < -50 || to.x > width + 50 || to.y < -50 || to.y > height + 50;
+
+ if (star.z <= 0.22 || outOfBounds) {
+ recycleStar(index);
+ return;
+ }
+
+ drawStar(star, from.x, from.y, to.x, to.y);
});
- // Draw subtle cockpit frame or vignette
- // Gradient vignette
- const gradient = ctx.createRadialGradient(width/2, height/2, height/3, width/2, height/2, height);
- gradient.addColorStop(0, 'transparent');
- gradient.addColorStop(1, 'rgba(0,0,0,0.8)');
- ctx.fillStyle = gradient;
- ctx.fillRect(0, 0, width, height);
+ drawVignette();
+ };
+ const render = () => {
+ drawFrame(true);
animationFrameId = requestAnimationFrame(render);
};
- render();
+ const renderStatic = () => {
+ ctx.clearRect(0, 0, width, height);
+ drawFrame(false);
+ };
+
+ const handleResize = () => {
+ setSize();
+ stars = Array.from({ length: getStarCount() }, () => createStar(false));
+
+ if (prefersReduced) {
+ renderStatic();
+ }
+ };
+
+ const handleMotionChange = (event: MediaQueryListEvent) => {
+ prefersReduced = event.matches;
+
+ if (prefersReduced) {
+ cancelAnimationFrame(animationFrameId);
+ renderStatic();
+ return;
+ }
+
+ render();
+ };
+
+ window.addEventListener('resize', handleResize);
+ motionQuery.addEventListener('change', handleMotionChange);
+
+ if (prefersReduced) {
+ renderStatic();
+ } else {
+ render();
+ }
return () => {
- window.removeEventListener('resize', setSize);
+ window.removeEventListener('resize', handleResize);
+ motionQuery.removeEventListener('change', handleMotionChange);
cancelAnimationFrame(animationFrameId);
};
- }, []);
+ }, [vanishYOffset, centerProtectRadius]);
return ;
}
diff --git a/src/components/LobbyBackground.tsx b/src/components/LobbyBackground.tsx
index e665728..e5e3df8 100644
--- a/src/components/LobbyBackground.tsx
+++ b/src/components/LobbyBackground.tsx
@@ -1,57 +1,330 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
export default function LobbyBackground() {
+ const [isMount, setIsMount] = useState(false);
+
+ useEffect(() => {
+ setIsMount(true);
+ }, []);
+
+ // Helper for random delay/duration style
+ const getRandomStyle = () => ({
+ animationDelay: `${Math.random() * 5}s`,
+ animationDuration: `${2 + Math.random() * 4}s`,
+ });
+
+ if (!isMount) return ;
+
return (
- {/* Orion (Approximate) - Bottom Left */}
-
-