style: 예능 상세 레이아웃 상단/하단 분리
- 방송사+날짜, 제목, 멤버: 상단에 붙임 - 다시보기 버튼: mt-auto로 하단에 고정 - justify-between으로 세로 공간 분배 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
c990af41e1
commit
b1d890d758
1 changed files with 22 additions and 21 deletions
|
|
@ -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">
|
||||
{schedule.broadcaster && (
|
||||
|
|
@ -52,36 +52,37 @@ function VarietySection({ schedule }) {
|
|||
{decodeHtmlEntities(schedule.title)}
|
||||
</h1>
|
||||
|
||||
{/* 멤버 + 다시보기 */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{members.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{isFullGroup ? (
|
||||
<span className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
프로미스나인
|
||||
{/* 멤버 */}
|
||||
{members.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{isFullGroup ? (
|
||||
<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>
|
||||
) : (
|
||||
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>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasReplayUrl && (
|
||||
{/* 다시보기 (하단 고정) */}
|
||||
{hasReplayUrl && (
|
||||
<div className="mt-auto pt-1">
|
||||
<a
|
||||
href={schedule.replayUrl}
|
||||
target="_blank"
|
||||
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} />}
|
||||
다시보기
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue