feat(app-hub): 스테이지 카드 칩 제거와 추천 공간 캐러셀 적용

맥락:
- 허브 스테이지 내부에 메모/전체공간 칩이 동시에 노출되어 시선이 분산되고 조작 밀도가 높았습니다.
- 추천 공간은 단순 스크롤보다 회전 가능한 캐러셀 인터랙션이 필요했습니다.

변경사항:
- 오늘의 공간 카드 헤더에서 메모 칩과 전체공간 칩을 제거했습니다.
- 추천 공간 섹션에 이전/다음 컨트롤을 추가해 캐러셀 회전이 가능하도록 변경했습니다.
- 전체 공간 진입은 칩 대신 텍스트 링크로 정리했습니다.
- 메모 진입 컴포넌트는 스테이지 카드 밖(하단)으로 이동해 카드 내부 밀도를 낮췄습니다.
- 스테이지 오버레이 구성을 유지하기 위해 관련 위젯 조합을 함께 정리했습니다.

검증:
- npx tsc --noEmit
- npm run build

세션-상태: 스테이지 카드 내부 칩 제거 및 추천 공간 캐러셀 반영 완료
세션-다음: 캐러셀 전환 모션(페이드/슬라이드) 미세 조정
세션-리스크: 추천 공간 수가 1개 이하일 때 회전 UI 효용이 낮아질 수 있음
This commit is contained in:
2026-03-02 11:12:08 +09:00
parent 47e80e59d2
commit 6dfa4677d9
5 changed files with 220 additions and 110 deletions

View File

@@ -29,8 +29,8 @@ export const RoomPreviewCard = ({
className={cn(
'group relative overflow-hidden rounded-3xl border text-left transition-all duration-250 motion-reduce:transition-none',
compact
? 'h-[112px] min-w-[164px] snap-start p-2.5 sm:min-w-0 sm:aspect-[4/3]'
: 'h-[338px] p-3 sm:h-[420px] sm:p-4',
? 'h-[98px] min-w-[152px] snap-start p-2 sm:min-w-0 sm:aspect-[5/4]'
: 'h-[292px] p-3 sm:h-[334px] sm:p-4 lg:h-[356px]',
selected
? cinematic
? 'border-sky-200/44 shadow-[0_0_0_1px_rgba(186,230,253,0.34),0_20px_50px_rgba(2,6,23,0.32)]'
@@ -86,14 +86,14 @@ export const RoomPreviewCard = ({
) : null}
{compact ? (
<div className="w-full rounded-lg bg-slate-950/44 px-2.5 py-2">
<div className="w-full rounded-lg bg-slate-950/44 px-2 py-1.5">
<p className="truncate text-sm font-semibold text-white">{room.name}</p>
<p className="mt-0.5 truncate text-[11px] text-white/70">{room.vibeLabel}</p>
</div>
) : (
<div className="w-full max-w-[440px] rounded-2xl border border-white/14 bg-slate-950/46 px-4 py-3 backdrop-blur-md">
<div className="w-full max-w-[420px] rounded-2xl border border-white/14 bg-slate-950/46 px-4 py-3 backdrop-blur-md">
<p className="text-[11px] uppercase tracking-[0.16em] text-white/56">Selected Space</p>
<h3 className="mt-1 text-2xl font-semibold tracking-tight text-white sm:text-[2rem]">
<h3 className="mt-1 text-2xl font-semibold tracking-tight text-white sm:text-[1.85rem]">
{room.name}
</h3>
<p className="mt-1 text-sm text-white/74">{room.description}</p>