feat: 검색 결과 카드 디자인 개선
- TimelineScheduleCard 스타일로 리디자인 - 날짜 뱃지 추가 (M.D (요일) 형식) - 시간/카테고리 뱃지 스타일 통일 - 멤버 태그 그라데이션 적용 - 스프링 애니메이션 추가
This commit is contained in:
parent
83e3689f02
commit
54fe3074dc
1 changed files with 74 additions and 40 deletions
|
|
@ -585,59 +585,93 @@ function MobileSchedule() {
|
|||
);
|
||||
}
|
||||
|
||||
// 일정 카드 컴포넌트 (검색용)
|
||||
// 일정 카드 컴포넌트 (검색용) - 날짜 포함 모던 디자인
|
||||
function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
|
||||
const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
|
||||
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 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 (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay }}
|
||||
className="bg-white rounded-xl p-4 shadow-sm"
|
||||
transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div
|
||||
className="w-1 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<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">
|
||||
{schedule.time && (
|
||||
<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 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>
|
||||
{memberList.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{memberList.length >= 5 ? (
|
||||
<span className="px-2 py-0.5 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-full shadow-sm">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
memberList.map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
|
||||
{name.trim()}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
{/* 시간 뱃지 */}
|
||||
{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>
|
||||
)}
|
||||
{/* 카테고리 뱃지 */}
|
||||
<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>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue