fix(app): entry stage를 위로 재배치

This commit is contained in:
2026-03-16 14:47:54 +09:00
parent c63ddc4e98
commit fb2729193f
2 changed files with 13 additions and 13 deletions

View File

@@ -53,17 +53,17 @@ export const AppAtmosphereEntryShell = ({
onStartSession,
}: AppAtmosphereEntryShellProps) => {
return (
<div className="flex h-full flex-col justify-between pt-8 md:pt-16">
<div className="flex flex-1 flex-col justify-between">
{/* Main Focus Entry Ritual */}
<div className="flex flex-1 flex-col items-center justify-center px-4 pb-10">
<div className="flex flex-1 flex-col items-center justify-start px-4 pb-14 pt-4 md:pt-10">
{/* Inline Accessories (No overlap guarantee) */}
<div className="mb-12 flex min-h-[5rem] flex-col items-center justify-end opacity-0 animate-fade-in-up delay-150">
<div className="mb-10 flex min-h-[4rem] flex-col items-center justify-end opacity-0 animate-fade-in-up delay-150 md:mb-11">
{errorAccessory}
{!errorAccessory && topAccessory}
</div>
<div className="w-full max-w-4xl text-center opacity-0 animate-fade-in-up delay-150 mb-16">
<p className="text-xs font-bold uppercase tracking-[0.3em] text-white/40 drop-shadow-sm mb-6">
<div className="mb-14 w-full max-w-4xl text-center opacity-0 animate-fade-in-up delay-150 md:mb-16">
<p className="mb-5 text-xs font-bold uppercase tracking-[0.3em] text-white/40 drop-shadow-sm md:mb-6">
What will you focus on?
</p>
<input
@@ -82,7 +82,7 @@ export const AppAtmosphereEntryShell = ({
/>
</div>
<div className="flex w-full flex-col items-center space-y-10 opacity-0 animate-fade-in-up delay-150">
<div className="flex w-full flex-col items-center space-y-9 opacity-0 animate-fade-in-up delay-150 md:space-y-10">
<div className="flex flex-col items-center">
{/* Primary Action: Massive Custom Timer Input */}

View File

@@ -307,18 +307,18 @@ export const FocusDashboardWidget = () => {
!isCheckingSession && !currentSession && hasEnoughWeeklyData && !isReviewReturn;
return (
<div className="relative min-h-dvh overflow-hidden bg-black text-white selection:bg-white/20">
<div className="relative min-h-dvh bg-black text-white selection:bg-white/20">
{/* Background Media */}
<div
className={cn(
'absolute inset-0 bg-cover bg-center transition-transform duration-[1.5s] ease-[cubic-bezier(0.22,1,0.36,1)]',
'fixed inset-0 bg-cover bg-center transition-transform duration-[1.5s] ease-[cubic-bezier(0.22,1,0.36,1)]',
isStartingSession ? 'scale-[1.08] blur-[2px] brightness-75' : 'scale-100 blur-[60px] brightness-50',
)}
style={getSceneStageBackgroundStyle(activeScene, sceneAssetMap?.[activeScene.id])}
/>
{/* Immersive Overlay Gradients */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.85)_100%)] mix-blend-multiply pointer-events-none" />
<div className="absolute inset-0 bg-black/40 pointer-events-none" />
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.85)_100%)] mix-blend-multiply pointer-events-none" />
<div className="fixed inset-0 bg-black/40 pointer-events-none" />
{/* Header */}
<header className="absolute top-0 inset-x-0 z-50 flex items-center justify-between px-8 py-8 md:px-12 md:py-10">
@@ -345,13 +345,13 @@ export const FocusDashboardWidget = () => {
</header>
{/* Main Content Area */}
<main className="relative z-10 flex h-[100dvh] flex-col">
<main className="relative z-10 flex min-h-[100dvh] flex-col pb-8 pt-20 md:pt-24">
{isCheckingSession ? (
<div className="flex h-full items-center justify-center">
<div className="flex flex-1 items-center justify-center">
<p className="text-[15px] font-medium text-white/70 animate-pulse">Loading session...</p>
</div>
) : (
<div className="flex-1 flex flex-col h-full w-full">
<div className="flex-1 flex flex-col w-full relative">
<AppAtmosphereEntryShell
canStart={canStart}
durationDraft={durationDraft}