feat(app-hub): 스테이지 카드 칩 제거와 추천 공간 캐러셀 적용
맥락: - 허브 스테이지 내부에 메모/전체공간 칩이 동시에 노출되어 시선이 분산되고 조작 밀도가 높았습니다. - 추천 공간은 단순 스크롤보다 회전 가능한 캐러셀 인터랙션이 필요했습니다. 변경사항: - 오늘의 공간 카드 헤더에서 메모 칩과 전체공간 칩을 제거했습니다. - 추천 공간 섹션에 이전/다음 컨트롤을 추가해 캐러셀 회전이 가능하도록 변경했습니다. - 전체 공간 진입은 칩 대신 텍스트 링크로 정리했습니다. - 메모 진입 컴포넌트는 스테이지 카드 밖(하단)으로 이동해 카드 내부 밀도를 낮췄습니다. - 스테이지 오버레이 구성을 유지하기 위해 관련 위젯 조합을 함께 정리했습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: 스테이지 카드 내부 칩 제거 및 추천 공간 캐러셀 반영 완료 세션-다음: 캐러셀 전환 모션(페이드/슬라이드) 미세 조정 세션-리스크: 추천 공간 수가 1개 이하일 때 회전 UI 효용이 낮아질 수 있음
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user