style: 예능 상세 레이아웃 상단/하단 분리

- 방송사+날짜, 제목, 멤버: 상단에 붙임
- 다시보기 버튼: mt-auto로 하단에 고정
- justify-between으로 세로 공간 분배

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-05 13:52:12 +09:00
parent c990af41e1
commit b1d890d758

View file

@ -26,7 +26,7 @@ function VarietySection({ schedule }) {
)} )}
{/* 오른쪽: 콘텐츠 */} {/* 오른쪽: 콘텐츠 */}
<div className="flex-1 p-5 flex flex-col justify-center"> <div className="flex-1 p-5 flex flex-col justify-between">
{/* 방송사 + 날짜 */} {/* 방송사 + 날짜 */}
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
{schedule.broadcaster && ( {schedule.broadcaster && (
@ -52,36 +52,37 @@ function VarietySection({ schedule }) {
{decodeHtmlEntities(schedule.title)} {decodeHtmlEntities(schedule.title)}
</h1> </h1>
{/* 멤버 + 다시보기 */} {/* 멤버 */}
<div className="flex items-center justify-between gap-4"> {members.length > 0 && (
{members.length > 0 && ( <div className="flex flex-wrap gap-1.5 mb-3">
<div className="flex flex-wrap gap-1.5"> {isFullGroup ? (
{isFullGroup ? ( <span className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
<span className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full"> 프로미스나인
프로미스나인 </span>
) : (
members.map((member) => (
<span key={member.id} className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
{member.name}
</span> </span>
) : ( ))
members.map((member) => ( )}
<span key={member.id} className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full"> </div>
{member.name} )}
</span>
))
)}
</div>
)}
{hasReplayUrl && ( {/* 다시보기 (하단 고정) */}
{hasReplayUrl && (
<div className="mt-auto pt-1">
<a <a
href={schedule.replayUrl} href={schedule.replayUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors" className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors"
> >
{isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />} {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
다시보기 다시보기
</a> </a>
)} </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>