feat(app): atmosphere entry shell 고급화
This commit is contained in:
@@ -5,12 +5,14 @@ import { getSceneCardPhotoUrl } from '@/entities/scene';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import type { AtmosphereOption } from '../model/atmosphereEntry';
|
||||
|
||||
const shellCardClass =
|
||||
'rounded-[2rem] border border-white/12 bg-[#0f1115]/26 shadow-[0_24px_60px_rgba(3,7,18,0.32)] backdrop-blur-xl';
|
||||
const inputShellClass =
|
||||
'w-full rounded-[1.5rem] border border-white/14 bg-white/[0.06] px-5 py-4 text-white outline-none transition focus:border-white/24 focus:bg-white/[0.09]';
|
||||
const stageShellClass =
|
||||
'relative overflow-hidden rounded-[2.35rem] border border-white/12 bg-[linear-gradient(160deg,rgba(9,13,20,0.54)_0%,rgba(9,13,20,0.2)_52%,rgba(9,13,20,0.48)_100%)] shadow-[0_26px_90px_rgba(3,7,18,0.34)] backdrop-blur-[26px]';
|
||||
const fieldShellClass =
|
||||
'w-full rounded-[1.45rem] border border-white/12 bg-[linear-gradient(180deg,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0.05)_100%)] px-5 py-4 text-white outline-none transition focus:border-white/24 focus:bg-white/[0.1]';
|
||||
const reviewDockClass =
|
||||
'group relative overflow-hidden rounded-[1.65rem] border border-white/12 bg-[linear-gradient(145deg,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0.04)_100%)] px-5 py-4 backdrop-blur-xl transition hover:border-white/18 hover:bg-white/[0.1]';
|
||||
const primaryButtonClass =
|
||||
'inline-flex items-center justify-center rounded-full border border-white/16 bg-white/[0.14] px-6 py-3 text-sm font-medium text-white transition hover:bg-white/[0.18] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-48';
|
||||
'inline-flex min-h-[3.65rem] items-center justify-center rounded-full border border-white/14 bg-white/[0.16] px-6 text-[15px] font-medium tracking-[-0.01em] text-white shadow-[0_10px_22px_rgba(5,10,20,0.24)] transition hover:bg-white/[0.2] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-50';
|
||||
|
||||
interface AppAtmosphereEntryShellProps {
|
||||
canStart: boolean;
|
||||
@@ -64,167 +66,246 @@ export const AppAtmosphereEntryShell = ({
|
||||
onStartSession,
|
||||
}: AppAtmosphereEntryShellProps) => {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.18fr)_minmax(19rem,0.82fr)]">
|
||||
<section className={cn(shellCardClass, 'px-6 py-6 md:px-8 md:py-8')}>
|
||||
<div className="space-y-3">
|
||||
<h1 className="text-[2rem] font-light leading-[1.04] tracking-[-0.045em] text-white md:text-[2.75rem]">
|
||||
이번엔 무엇을 붙잡을까요?
|
||||
</h1>
|
||||
<p className="max-w-[34rem] text-[15px] leading-[1.7] text-white/68 md:text-[15.5px]">
|
||||
목표는 한 줄이면 충분해요. 얼마나 붙잡을지와 어떤 분위기로 들어갈지만 정하면 바로
|
||||
집중 화면으로 이어집니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6 md:space-y-7">
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(20rem,0.92fr)_minmax(0,1.08fr)]">
|
||||
<section className={cn(stageShellClass, 'px-6 py-6 md:px-8 md:py-8')}>
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-28 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.18),rgba(255,255,255,0)_64%)]" />
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 w-40 bg-[linear-gradient(270deg,rgba(255,255,255,0.06),rgba(255,255,255,0))]" />
|
||||
|
||||
<div className="mt-8 space-y-5">
|
||||
<label className="block space-y-2.5">
|
||||
<span className="text-[12px] font-medium uppercase tracking-[0.16em] text-white/46">
|
||||
이번 목표
|
||||
</span>
|
||||
<input
|
||||
ref={goalInputRef}
|
||||
value={goalDraft}
|
||||
onChange={(event) => onGoalChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
onStartSession();
|
||||
}
|
||||
}}
|
||||
placeholder={goalPlaceholder}
|
||||
className={cn(
|
||||
inputShellClass,
|
||||
'text-[1.12rem] font-light tracking-[-0.025em] placeholder:text-white/34 md:text-[1.34rem]',
|
||||
)}
|
||||
autoFocus
|
||||
/>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div className="max-w-[30rem] space-y-3">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.28em] text-white/46">
|
||||
Focus Entry
|
||||
</p>
|
||||
<h1 className="max-w-[13ch] text-[2.45rem] font-light leading-[0.96] tracking-[-0.055em] text-white md:text-[3.65rem]">
|
||||
이번 세션을
|
||||
<br />
|
||||
어떤 온도로 열까요?
|
||||
</h1>
|
||||
<p className="max-w-[30rem] text-[14px] leading-[1.72] text-white/64 md:text-[14.5px]">
|
||||
목표는 한 줄이면 충분합니다. 걸릴 시간을 적고, 오늘의 atmosphere 하나만 고르면
|
||||
바로 공간 안으로 들어갈 수 있어요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
|
||||
<div className="hidden min-w-[11.5rem] rounded-[1.4rem] border border-white/10 bg-white/[0.05] px-4 py-4 text-right xl:block">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.2em] text-white/42">
|
||||
선택한 Atmosphere
|
||||
</p>
|
||||
<p className="mt-3 text-[1rem] font-medium tracking-[-0.03em] text-white/90">
|
||||
{selectedAtmosphere.name}
|
||||
</p>
|
||||
<p className="mt-2 text-[12px] leading-[1.6] text-white/52">
|
||||
{selectedAtmosphere.soundLabel}
|
||||
<br />
|
||||
{selectedAtmosphere.caption}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 space-y-5 border-t border-white/10 pt-6">
|
||||
<label className="block space-y-2.5">
|
||||
<span className="text-[12px] font-medium uppercase tracking-[0.16em] text-white/46">
|
||||
{durationInputLabel}
|
||||
<span className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/42">
|
||||
이번 목표
|
||||
</span>
|
||||
<div className="relative">
|
||||
<input
|
||||
value={durationDraft}
|
||||
onChange={(event) => onDurationChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
onStartSession();
|
||||
}
|
||||
}}
|
||||
inputMode="numeric"
|
||||
placeholder={durationPlaceholder}
|
||||
className={cn(
|
||||
inputShellClass,
|
||||
'pr-12 text-[1.02rem] font-medium tracking-[-0.02em] placeholder:text-white/30',
|
||||
)}
|
||||
/>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-5 flex items-center text-sm text-white/48">
|
||||
분
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[12px] leading-[1.6] text-white/48">{durationHelper}</p>
|
||||
<input
|
||||
ref={goalInputRef}
|
||||
value={goalDraft}
|
||||
onChange={(event) => onGoalChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
onStartSession();
|
||||
}
|
||||
}}
|
||||
placeholder={goalPlaceholder}
|
||||
className={cn(
|
||||
fieldShellClass,
|
||||
'text-[1.16rem] font-light tracking-[-0.032em] placeholder:text-white/28 md:text-[1.42rem]',
|
||||
)}
|
||||
autoFocus
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap gap-2 md:max-w-[14.5rem] md:justify-end">
|
||||
{durationSuggestions.map((minutes) => (
|
||||
<button
|
||||
key={minutes}
|
||||
type="button"
|
||||
onClick={() => onSelectDuration(minutes)}
|
||||
className={cn(
|
||||
'rounded-full border border-white/12 bg-white/[0.05] px-3 py-1.5 text-[12px] font-medium text-white/76 transition hover:border-white/20 hover:bg-white/[0.08] hover:text-white',
|
||||
durationDraft === String(minutes) && 'border-white/28 bg-white/[0.13] text-white',
|
||||
)}
|
||||
>
|
||||
{minutes}분
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-5 lg:grid-cols-[minmax(0,0.88fr)_minmax(14rem,0.72fr)]">
|
||||
<div className="space-y-2.5">
|
||||
<label className="block space-y-2.5">
|
||||
<span className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/42">
|
||||
{durationInputLabel}
|
||||
</span>
|
||||
<div className="relative">
|
||||
<input
|
||||
value={durationDraft}
|
||||
onChange={(event) => onDurationChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
onStartSession();
|
||||
}
|
||||
}}
|
||||
inputMode="numeric"
|
||||
placeholder={durationPlaceholder}
|
||||
className={cn(
|
||||
fieldShellClass,
|
||||
'pr-14 text-[1.04rem] font-medium tracking-[-0.02em] placeholder:text-white/30',
|
||||
)}
|
||||
/>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-5 flex items-center text-sm text-white/46">
|
||||
분
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<p className="text-[12px] leading-[1.65] text-white/46">{durationHelper}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 pt-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/40">
|
||||
Selected Atmosphere
|
||||
</p>
|
||||
<p className="text-[14px] font-medium text-white/84">{selectedAtmosphere.name}</p>
|
||||
<p className="text-[12px] text-white/52">
|
||||
{selectedAtmosphere.soundLabel} · {selectedAtmosphere.caption}
|
||||
</p>
|
||||
<div className="space-y-2.5">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/42">
|
||||
빠른 선택
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{durationSuggestions.map((minutes) => (
|
||||
<button
|
||||
key={minutes}
|
||||
type="button"
|
||||
onClick={() => onSelectDuration(minutes)}
|
||||
className={cn(
|
||||
'rounded-[1.1rem] border border-white/12 bg-white/[0.05] px-3 py-3 text-[12px] font-medium text-white/74 transition hover:border-white/18 hover:bg-white/[0.09] hover:text-white',
|
||||
durationDraft === String(minutes) &&
|
||||
'border-white/24 bg-white/[0.14] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]',
|
||||
)}
|
||||
>
|
||||
{minutes}분
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onStartSession}
|
||||
disabled={!canStart}
|
||||
className={primaryButtonClass}
|
||||
>
|
||||
{isStartingSession ? startButtonLoadingLabel : startButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sessionLookupError ? (
|
||||
<p className="text-sm text-amber-100/80">{sessionLookupError}</p>
|
||||
) : null}
|
||||
<div className="grid gap-4 border-t border-white/10 pt-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
|
||||
<div className="space-y-3">
|
||||
<div className="rounded-[1.45rem] border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.03)_100%)] px-4 py-4">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
|
||||
현재 선택
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<span className="text-[1rem] font-medium tracking-[-0.03em] text-white/90">
|
||||
{selectedAtmosphere.name}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/12 bg-white/[0.08] px-2.5 py-1 text-[11px] text-white/66">
|
||||
{selectedAtmosphere.soundLabel}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-3 max-w-[28rem] text-[12px] leading-[1.65] text-white/54">
|
||||
{selectedAtmosphere.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{sessionLookupError ? (
|
||||
<p className="text-[13px] leading-[1.6] text-amber-100/84">{sessionLookupError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onStartSession}
|
||||
disabled={!canStart}
|
||||
className={primaryButtonClass}
|
||||
>
|
||||
{isStartingSession ? startButtonLoadingLabel : startButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{reviewEntry ? (
|
||||
<div className="border-t border-white/10 pt-5">
|
||||
<div className={reviewDockClass}>{reviewEntry}</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<div className={cn(shellCardClass, 'overflow-hidden')}>
|
||||
<div
|
||||
className="relative min-h-[18rem] bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(180deg, rgba(5,10,18,0.08) 0%, rgba(5,10,18,0.74) 100%), url('${getSceneCardPhotoUrl(selectedAtmosphere.scene)}')`,
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),rgba(255,255,255,0)_42%)]" />
|
||||
<div className="absolute inset-x-0 bottom-0 p-5">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/52">
|
||||
Selected Atmosphere
|
||||
<aside className={cn(stageShellClass, 'min-h-[29rem]')}>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(180deg, rgba(7,10,16,0.08) 0%, rgba(7,10,16,0.46) 46%, rgba(7,10,16,0.88) 100%), url('${getSceneCardPhotoUrl(selectedAtmosphere.scene)}')`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.2),rgba(255,255,255,0)_36%)]" />
|
||||
<div className="absolute inset-y-0 left-0 w-[52%] bg-[linear-gradient(90deg,rgba(5,8,14,0.56)_0%,rgba(5,8,14,0.22)_56%,rgba(5,8,14,0)_100%)]" />
|
||||
|
||||
<div className="relative flex min-h-[29rem] h-full flex-col justify-between p-6 md:p-7">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="rounded-full border border-white/14 bg-white/[0.08] px-3 py-1.5 text-[11px] font-medium tracking-[0.14em] text-white/76">
|
||||
Atmosphere Preview
|
||||
</div>
|
||||
<div className="rounded-full border border-white/14 bg-black/10 px-3 py-1.5 text-[11px] text-white/70 backdrop-blur-md">
|
||||
{selectedAtmosphere.caption}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[28rem] space-y-4">
|
||||
<div className="space-y-3">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/46">
|
||||
선택한 장면
|
||||
</p>
|
||||
<h2 className="mt-2 text-[1.28rem] font-medium tracking-[-0.03em] text-white">
|
||||
<h2 className="text-[2rem] font-light leading-[0.95] tracking-[-0.05em] text-white md:text-[2.85rem]">
|
||||
{selectedAtmosphere.name}
|
||||
</h2>
|
||||
<p className="mt-2 max-w-[22rem] text-[13px] leading-[1.65] text-white/72">
|
||||
<p className="max-w-[26rem] text-[14px] leading-[1.72] text-white/72">
|
||||
{selectedAtmosphere.description}
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<span className="rounded-full border border-white/16 bg-white/[0.08] px-3 py-1 text-[11px] text-white/74">
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-[1.35rem] border border-white/12 bg-white/[0.07] px-4 py-4 backdrop-blur-xl">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.18em] text-white/42">
|
||||
Sound
|
||||
</p>
|
||||
<p className="mt-3 text-[13px] font-medium text-white/84">
|
||||
{selectedAtmosphere.soundLabel}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/16 bg-white/[0.08] px-3 py-1 text-[11px] text-white/74">
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-[1.35rem] border border-white/12 bg-white/[0.07] px-4 py-4 backdrop-blur-xl">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.18em] text-white/42">
|
||||
Scene
|
||||
</p>
|
||||
<p className="mt-3 text-[13px] font-medium text-white/84">
|
||||
{selectedAtmosphere.scene.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-[1.35rem] border border-white/12 bg-white/[0.07] px-4 py-4 backdrop-blur-xl">
|
||||
<p className="text-[10px] font-medium uppercase tracking-[0.18em] text-white/42">
|
||||
Best For
|
||||
</p>
|
||||
<p className="mt-3 text-[13px] font-medium text-white/84">
|
||||
{selectedAtmosphere.scene.recommendedTime}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{reviewEntry}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/42">
|
||||
Atmosphere
|
||||
</p>
|
||||
<h2 className="mt-2 text-[1.2rem] font-medium tracking-[-0.03em] text-white md:text-[1.4rem]">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="max-w-[44rem]">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.22em] text-white/42">
|
||||
Atmosphere Library
|
||||
</p>
|
||||
<h2 className="mt-3 text-[1.42rem] font-medium tracking-[-0.04em] text-white md:text-[1.9rem]">
|
||||
{atmosphereTitle}
|
||||
</h2>
|
||||
<p className="mt-2 max-w-[42rem] text-[13px] leading-[1.7] text-white/60 md:text-[13.5px]">
|
||||
<p className="mt-3 text-[13px] leading-[1.7] text-white/58 md:text-[13.5px]">
|
||||
{atmosphereBody}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[12px] text-white/42 md:text-right">
|
||||
총 {atmosphereOptions.length}개의 Atmosphere
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[12px] text-white/40 lg:text-right">
|
||||
총 {atmosphereOptions.length}개의 curated atmosphere
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
|
||||
{atmosphereOptions.map((option) => {
|
||||
@@ -236,41 +317,49 @@ export const AppAtmosphereEntryShell = ({
|
||||
type="button"
|
||||
onClick={() => onSelectAtmosphere(option.id)}
|
||||
className={cn(
|
||||
'group relative min-h-[12.5rem] overflow-hidden rounded-[1.65rem] border text-left transition duration-300 ease-out',
|
||||
'group relative min-h-[14rem] overflow-hidden rounded-[1.65rem] border text-left transition duration-300 ease-out',
|
||||
isSelected
|
||||
? 'border-white/28 shadow-[0_16px_36px_rgba(2,6,23,0.22)]'
|
||||
: 'border-white/10 hover:border-white/18',
|
||||
? 'border-white/26 shadow-[0_18px_42px_rgba(2,6,23,0.24)]'
|
||||
: 'border-white/10 hover:border-white/18 hover:shadow-[0_14px_34px_rgba(2,6,23,0.18)]',
|
||||
)}
|
||||
aria-pressed={isSelected}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transition duration-500 ease-out group-hover:scale-[1.04]"
|
||||
className="absolute inset-0 bg-cover bg-center transition duration-500 ease-out group-hover:scale-[1.035]"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(180deg, rgba(7,10,14,0.08) 0%, rgba(7,10,14,0.88) 100%), url('${getSceneCardPhotoUrl(option.scene)}')`,
|
||||
backgroundImage: `linear-gradient(180deg, rgba(7,10,14,0.08) 0%, rgba(7,10,14,0.42) 44%, rgba(7,10,14,0.9) 100%), url('${getSceneCardPhotoUrl(option.scene)}')`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),rgba(255,255,255,0)_44%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),rgba(255,255,255,0)_42%)]" />
|
||||
<div className="relative flex h-full flex-col justify-between p-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<span className="rounded-full border border-white/14 bg-white/[0.08] px-2.5 py-1 text-[11px] text-white/72">
|
||||
<span className="rounded-full border border-white/14 bg-white/[0.08] px-2.5 py-1 text-[10px] font-medium tracking-[0.14em] text-white/72">
|
||||
{option.caption}
|
||||
</span>
|
||||
{isSelected ? (
|
||||
<span className="rounded-full border border-white/18 bg-white/[0.14] px-2.5 py-1 text-[11px] font-medium text-white">
|
||||
선택됨
|
||||
<span className="rounded-full border border-white/16 bg-white/[0.14] px-2.5 py-1 text-[10px] font-medium tracking-[0.14em] text-white">
|
||||
Current
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-[1rem] font-medium tracking-[-0.025em] text-white">
|
||||
{option.name}
|
||||
</h3>
|
||||
<p className="mt-2 line-clamp-2 text-[12px] leading-[1.55] text-white/66">
|
||||
{option.description}
|
||||
</p>
|
||||
<div className="mt-3 flex items-center justify-between gap-3 text-[11px] text-white/56">
|
||||
<span>{option.soundLabel}</span>
|
||||
<span>{option.scene.recommendedTime}</span>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-[1.08rem] font-medium tracking-[-0.03em] text-white">
|
||||
{option.name}
|
||||
</h3>
|
||||
<p className="mt-2 line-clamp-3 text-[12px] leading-[1.62] text-white/66">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-[11px] text-white/60">
|
||||
<span className="rounded-full border border-white/12 bg-black/10 px-2.5 py-1 backdrop-blur-sm">
|
||||
{option.soundLabel}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/12 bg-black/10 px-2.5 py-1 backdrop-blur-sm">
|
||||
{option.scene.recommendedTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -278,9 +367,10 @@ export const AppAtmosphereEntryShell = ({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-[12px] text-white/38">
|
||||
고른 Atmosphere는 배경과 사운드가 함께 적용되고, 시간은 가장 가까운 기본 리듬으로
|
||||
먼저 맞춰집니다.
|
||||
|
||||
<p className="text-[12px] leading-[1.6] text-white/38">
|
||||
고른 atmosphere는 배경과 사운드가 함께 적용됩니다. 시간은 직접 적은 값을 우선
|
||||
유지하고, 아직 손대지 않았다면 선택한 atmosphere의 기본 길이로 먼저 맞춰집니다.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@ const entryCopy = {
|
||||
startLoading: '입장 준비 중...',
|
||||
atmosphereTitle: '어떤 분위기에서 들어갈까요?',
|
||||
atmosphereBody:
|
||||
'배경과 사운드는 같이 움직여요. 오늘 goal에 맞는 atmosphere 하나만 고르면 바로 들어갈 수 있어요.',
|
||||
'배경과 사운드는 하나의 atmosphere로 움직입니다. 지금 할 일의 온도에 맞는 분위기 하나만 고르면 바로 들어갈 수 있어요.',
|
||||
loadFailed: '세션 상태를 불러오지 못했어요. 새로 시작은 계속 할 수 있어요.',
|
||||
reviewEyebrow: 'Weekly Review',
|
||||
reviewTitle: '이번 주 review를 잠깐 보고 갈까요?',
|
||||
@@ -74,7 +74,7 @@ const entryCopy = {
|
||||
};
|
||||
|
||||
const goalCardClass =
|
||||
'w-full rounded-[2rem] border border-white/12 bg-[#0f1115]/26 px-6 py-6 shadow-[0_24px_60px_rgba(3,7,18,0.32)] backdrop-blur-xl md:px-8 md:py-8';
|
||||
'w-full rounded-[2.2rem] border border-white/12 bg-[linear-gradient(160deg,rgba(9,13,20,0.52)_0%,rgba(9,13,20,0.24)_52%,rgba(9,13,20,0.5)_100%)] px-6 py-6 shadow-[0_26px_90px_rgba(3,7,18,0.34)] backdrop-blur-[24px] md:px-8 md:py-8';
|
||||
|
||||
const reviewCarryCopyByHint: Record<
|
||||
ReviewCarryHint,
|
||||
@@ -311,18 +311,19 @@ export const FocusDashboardWidget = () => {
|
||||
)}
|
||||
style={getSceneStageBackgroundStyle(activeScene, sceneAssetMap?.[activeScene.id])}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.22)_0%,rgba(2,6,23,0.38)_55%,rgba(2,6,23,0.5)_100%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.06),rgba(255,255,255,0)_42%)]" />
|
||||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.18)_0%,rgba(2,6,23,0.28)_42%,rgba(2,6,23,0.54)_100%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),rgba(255,255,255,0)_42%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_left,rgba(6,10,20,0.24),rgba(6,10,20,0)_36%)]" />
|
||||
|
||||
<header className="relative z-10 flex items-center justify-between px-5 py-5 md:px-8 md:py-7">
|
||||
<p className="text-sm font-semibold tracking-[0.28em] text-white/56 uppercase">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-white/56">
|
||||
{entryCopy.eyebrow}
|
||||
</p>
|
||||
<PlanPill plan={plan} onClick={openPaywall} />
|
||||
</header>
|
||||
|
||||
<main className="relative z-10 flex min-h-[calc(100dvh-84px)] items-center justify-center px-4 pb-8 pt-4 md:px-6">
|
||||
<div className="w-full max-w-[42rem]">
|
||||
<main className="relative z-10 flex min-h-[calc(100dvh-84px)] items-start justify-center px-4 pb-10 pt-3 md:px-6 md:pb-12 md:pt-6">
|
||||
<div className="w-full max-w-[86rem]">
|
||||
{isCheckingSession ? (
|
||||
<div className={cn(goalCardClass, 'space-y-4 text-center')}>
|
||||
<p className="text-[15px] text-white/72">세션 상태를 불러오는 중이에요.</p>
|
||||
@@ -330,11 +331,11 @@ export const FocusDashboardWidget = () => {
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{reviewReturnCopy ? (
|
||||
<div className="rounded-[1.55rem] border border-white/10 bg-[#0f1115]/16 px-5 py-4 backdrop-blur-lg">
|
||||
<div className="rounded-[1.65rem] border border-white/12 bg-[linear-gradient(145deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.04)_100%)] px-5 py-4 backdrop-blur-xl">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/42">
|
||||
{entryCopy.reviewReturnEyebrow}
|
||||
</p>
|
||||
<p className="mt-2 text-[1rem] font-medium tracking-[-0.02em] text-white/90">
|
||||
<p className="mt-2 text-[1rem] font-medium tracking-[-0.03em] text-white/90">
|
||||
{reviewReturnCopy.title}
|
||||
</p>
|
||||
<p className="mt-2 max-w-[34rem] text-[13px] leading-[1.6] text-white/62">
|
||||
@@ -361,14 +362,14 @@ export const FocusDashboardWidget = () => {
|
||||
shouldShowWeeklyReviewTeaser ? (
|
||||
<Link
|
||||
href="/stats"
|
||||
className="block rounded-[1.6rem] border border-white/10 bg-[#0f1115]/18 px-5 py-4 backdrop-blur-lg transition hover:bg-[#0f1115]/24"
|
||||
className="block transition"
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/42">
|
||||
{entryCopy.reviewEyebrow}
|
||||
</p>
|
||||
<p className="mt-2 text-[1rem] font-medium tracking-[-0.02em] text-white/88">
|
||||
<p className="mt-2 text-[1rem] font-medium tracking-[-0.03em] text-white/88">
|
||||
{reviewTeaserTitle}
|
||||
</p>
|
||||
<p className="mt-2 text-[13px] leading-[1.6] text-white/62">
|
||||
@@ -376,7 +377,7 @@ export const FocusDashboardWidget = () => {
|
||||
</p>
|
||||
<p className="mt-2 text-[12px] text-white/44">{reviewTeaserHelper}</p>
|
||||
</div>
|
||||
<span className="inline-flex items-center text-[12px] font-medium tracking-[0.04em] text-white/74">
|
||||
<span className="inline-flex items-center text-[12px] font-medium tracking-[0.04em] text-white/74 transition group-hover:text-white">
|
||||
{reviewTeaserCta}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user