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

imsi commit

Browse Source
This commit is contained in:
mota
2025-11-06 11:18:55 +09:00
parent 2c9898be90
commit 1ec2df27b0
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -103,11 +103,7 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
{items.map((card) => (
<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))",
}}
className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.05),0_0_2px_rgba(0,0,0,0.05)] transition-shadow duration-200 hover:shadow-[0_0_2px_rgba(0,0,0,0.08),0_8px_16px_rgba(0,0,0,0.12)]"
>
<div className="grid grid-rows-[192px_116px] h-full">
{/* 상단: 사진 384x192, 상단 라운드 16, 하단 0 */}
@@ -149,20 +145,20 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
</div>
</div>
<div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-3">
<div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-6">
<button
type="button"
aria-label="이전"
className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
onClick={() => scrollByStep(-1)}
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
<polygon points="10,0 0,6 10,12" />
<svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="rotate-180">
<path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
<div ref={trackRef} className="pointer-events-auto relative h-2 w-[30vw] rounded-full bg-orange-200/50">
<div ref={trackRef} className="pointer-events-auto relative h-1 w-[480px] rounded bg-[#EDEDED]">
<div
className="absolute top-0 h-2 rounded-full bg-orange-500"
className="absolute top-0 h-1 rounded bg-[var(--red-50,#F94B37)]"
style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }}
onMouseDown={handleThumbMouseDown}
/>
@@ -170,11 +166,11 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
<button
type="button"
aria-label="다음"
className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
onClick={() => scrollByStep(1)}
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
<polygon points="0,0 10,6 0,12" />
<svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>