feat: 검색 결과 카드 디자인 개선

- TimelineScheduleCard 스타일로 리디자인
- 날짜 뱃지 추가 (M.D (요일) 형식)
- 시간/카테고리 뱃지 스타일 통일
- 멤버 태그 그라데이션 적용
- 스프링 애니메이션 추가
This commit is contained in:
caadiq 2026-01-10 10:31:22 +09:00
parent 83e3689f02
commit 54fe3074dc

View file

@ -585,59 +585,93 @@ function MobileSchedule() {
); );
} }
// () // () -
function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) { function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류'; const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || ''; const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
const memberList = memberNames.split(',').filter(name => name.trim()); const memberList = memberNames.split(',').filter(name => name.trim());
//
const formatDate = (dateStr) => {
if (!dateStr) return '';
const date = new Date(dateStr);
const month = date.getMonth() + 1;
const day = date.getDate();
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
const weekday = weekdays[date.getDay()];
return `${month}.${day} (${weekday})`;
};
return ( return (
<motion.div <motion.div
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay }} transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
className="bg-white rounded-xl p-4 shadow-sm"
> >
<div className="flex gap-3"> {/* 카드 본체 */}
<div <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
className="w-1 rounded-full flex-shrink-0" <div className="p-4">
style={{ backgroundColor: categoryColor }}
/> {/* 날짜 및 시간 뱃지 */}
<div className="flex-1 min-w-0"> <div className="flex items-center gap-1.5 mb-2 flex-wrap">
<h3 className="font-semibold text-sm">{decodeHtmlEntities(schedule.title)}</h3> {/* 날짜 뱃지 */}
<div className="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-500"> <div className="px-2 py-0.5 bg-gray-100 rounded-full text-xs font-medium text-gray-600">
{schedule.time && ( {formatDate(schedule.date)}
<span className="flex items-center gap-1">
<Clock size={12} />
{schedule.time.slice(0, 5)}
</span>
)}
<span className="flex items-center gap-1">
<Tag size={12} />
{categoryName}
</span>
{schedule.source_name && (
<span className="flex items-center gap-1">
<Link2 size={12} />
{schedule.source_name}
</span>
)}
</div> </div>
{memberList.length > 0 && ( {/* 시간 뱃지 */}
<div className="flex flex-wrap gap-1 mt-2"> {schedule.time && (
{memberList.length >= 5 ? ( <div
<span className="px-2 py-0.5 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-full shadow-sm"> className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
프로미스나인 style={{ backgroundColor: categoryColor }}
</span> >
) : ( <Clock size={10} />
memberList.map((name, i) => ( {schedule.time.slice(0, 5)}
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
{name.trim()}
</span>
))
)}
</div> </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> </div>
</motion.div> </motion.div>