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 }) {
|
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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue