motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인페이지 작업

Browse Source
This commit is contained in:
mota
2025-10-31 16:27:16 +09:00
parent f444888f2d
commit 9f12aac46b
5 changed files with 232 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/components/HorizontalCardScroller.tsx
View File

@@ -101,15 +101,47 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
<div ref={scrollRef} className="scrollbar-hidden h-full overflow-x-auto overflow-y-hidden">
<div className="flex h-full items-center gap-4">
{items.map((card) => (
<article key={card.id} className="flex-shrink-0 w-[384px] h-[324px] rounded-xl bg-white overflow-hidden shadow-sm p-2">
<article
key={card.id}
className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden"
style={{
boxShadow:
"0 1px 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05)), 0 0 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05))",
}}
>
<div className="grid grid-rows-[192px_116px] h-full">
<div className="w-full h-[192px] overflow-hidden rounded-lg">
{/* 상단: 사진 384x192, 상단 라운드 16, 하단 0 */}
<div className="w-full h-[192px] overflow-hidden rounded-t-[16px]">
<img src={card.image} alt={card.name} className="w-full h-full object-cover" />
</div>
<div className="h-[116px] flex flex-col justify-center px-2">
<p className="text-sm text-neutral-600">{card.region}</p>
<p className="text-base font-semibold">{card.name}</p>
<p className="text-sm text-neutral-600">{card.address}</p>
{/* 하단: 384x116, x-패딩 32, y-패딩 16, 3행 */}
<div className="h-[116px] px-8 py-4 grid grid-rows-[26px_auto_16px]">
{/* 1행: 배지 68x26, r-20, p:6px 16px, 좌측정렬 */}
<div className="w-[68px] h-[26px] rounded-[20px] px-4 py-[6px] bg-neutral-100 text-neutral-700 text-[12px] font-medium leading-[14px] flex items-center">
진행중
</div>
{/* 2행: 업체이름 24px, 400 */}
<div className="self-center">
<p className="text-[24px] font-normal text-neutral-900 truncate">{card.name}</p>
</div>
{/* 3행: 주소, 하트, 숫자, 별, 숫자 (12px, w-300, lh-16) */}
<div className="flex items-center gap-3 text-[12px] font-light leading-4 text-neutral-600">
<span className="flex-1 truncate">{card.address}</span>
<span className="inline-flex items-center gap-1">
{/* 하트 */}
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<path d="M12 21s-7.364-4.632-9.428-8.571C.841 9.698 2.09 6.5 5.143 6.5 7.018 6.5 8.4 7.64 9 8.75 9.6 7.64 10.982 6.5 12.857 6.5c3.053 0 4.302 3.198 2.571 5.929C19.364 16.368 12 21 12 21z" />
</svg>
<span>12</span>
</span>
<span className="inline-flex items-center gap-1">
{/* 별 */}
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<path d="M12 17.27l6.18 3.73-1.64-7.03L21.5 9.24l-7.19-.61L12 2 9.69 8.63 2.5 9.24l4.96 4.73L5.82 21z" />
</svg>
<span>4.5</span>
</span>
</div>
</div>
</div>
</article>