feat: 검색 카드 날짜 레이아웃 개선
- 왼쪽에 날짜 세로 배치 (년도/월.일/요일) - 일요일 빨간색, 토요일 파란색 요일 색상 적용 - 오른쪽 콘텐츠 영역으로 분리
This commit is contained in:
parent
54fe3074dc
commit
3b79aa13c2
1 changed files with 76 additions and 61 deletions
|
|
@ -591,17 +591,22 @@ function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
|
|||
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
||||
const memberList = memberNames.split(',').filter(name => name.trim());
|
||||
|
||||
// 날짜 포맷팅
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '';
|
||||
// 날짜 파싱
|
||||
const parseDate = (dateStr) => {
|
||||
if (!dateStr) return null;
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
const weekday = weekdays[date.getDay()];
|
||||
return `${month}.${day} (${weekday})`;
|
||||
const isWeekend = date.getDay() === 0 || date.getDay() === 6;
|
||||
const isSunday = date.getDay() === 0;
|
||||
return { year, month, day, weekday, isWeekend, isSunday };
|
||||
};
|
||||
|
||||
const dateInfo = parseDate(schedule.date);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
|
|
@ -610,68 +615,78 @@ function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
|
|||
>
|
||||
{/* 카드 본체 */}
|
||||
<div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
|
||||
<div className="p-4">
|
||||
|
||||
{/* 날짜 및 시간 뱃지 */}
|
||||
<div className="flex items-center gap-1.5 mb-2 flex-wrap">
|
||||
{/* 날짜 뱃지 */}
|
||||
<div className="px-2 py-0.5 bg-gray-100 rounded-full text-xs font-medium text-gray-600">
|
||||
{formatDate(schedule.date)}
|
||||
</div>
|
||||
{/* 시간 뱃지 */}
|
||||
{schedule.time && (
|
||||
<div
|
||||
className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
>
|
||||
<Clock size={10} />
|
||||
{schedule.time.slice(0, 5)}
|
||||
<div className="flex">
|
||||
{/* 왼쪽 날짜 영역 */}
|
||||
{dateInfo && (
|
||||
<div className="flex-shrink-0 w-16 py-3 px-2 bg-gray-50 border-r border-gray-100 flex flex-col items-center justify-center">
|
||||
<span className="text-[10px] text-gray-400">{dateInfo.year}</span>
|
||||
<span className="text-lg font-bold text-gray-800">{dateInfo.month}.{dateInfo.day}</span>
|
||||
<span className={`text-[11px] font-medium ${
|
||||
dateInfo.isSunday ? 'text-red-500' :
|
||||
dateInfo.isWeekend ? 'text-blue-500' : 'text-gray-500'
|
||||
}`}>
|
||||
{dateInfo.weekday}요일
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* 카테고리 뱃지 */}
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: `${categoryColor}15`,
|
||||
color: categoryColor
|
||||
}}
|
||||
>
|
||||
{categoryName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<h3 className="font-bold text-[15px] text-gray-800 leading-snug">
|
||||
{decodeHtmlEntities(schedule.title)}
|
||||
</h3>
|
||||
|
||||
{/* 출처 */}
|
||||
{schedule.source_name && (
|
||||
<div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
|
||||
<Link2 size={11} />
|
||||
<span>{schedule.source_name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 멤버 */}
|
||||
{memberList.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
|
||||
{memberList.length >= 5 ? (
|
||||
<span className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
memberList.map((name, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
|
||||
{/* 오른쪽 콘텐츠 영역 */}
|
||||
<div className="flex-1 p-4 min-w-0">
|
||||
{/* 시간 및 카테고리 뱃지 */}
|
||||
<div className="flex items-center gap-1.5 mb-2 flex-wrap">
|
||||
{schedule.time && (
|
||||
<div
|
||||
className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
>
|
||||
{name.trim()}
|
||||
</span>
|
||||
))
|
||||
<Clock size={10} />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: `${categoryColor}15`,
|
||||
color: categoryColor
|
||||
}}
|
||||
>
|
||||
{categoryName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<h3 className="font-bold text-[15px] text-gray-800 leading-snug">
|
||||
{decodeHtmlEntities(schedule.title)}
|
||||
</h3>
|
||||
|
||||
{/* 출처 */}
|
||||
{schedule.source_name && (
|
||||
<div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
|
||||
<Link2 size={11} />
|
||||
<span>{schedule.source_name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 멤버 */}
|
||||
{memberList.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
|
||||
{memberList.length >= 5 ? (
|
||||
<span className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
memberList.map((name, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
|
||||
>
|
||||
{name.trim()}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue