feat: 검색 카드 날짜 레이아웃 개선

- 왼쪽에 날짜 세로 배치 (년도/월.일/요일)
- 일요일 빨간색, 토요일 파란색 요일 색상 적용
- 오른쪽 콘텐츠 영역으로 분리

frontend/src/pages/mobile/public/Schedule.jsx

@@ -591,16 +591,21 @@ 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) => {
+    const parseDate = (dateStr) => {
-        if (!dateStr) return '';
+        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
@@ -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">
-                
+                    {/* 왼쪽 날짜 영역 */}
-                {/* 날짜 및 시간 뱃지 */}
+                    {dateInfo && (
-                <div className="flex items-center gap-1.5 mb-2 flex-wrap">
+                        <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>
-                    <div className="px-2 py-0.5 bg-gray-100 rounded-full text-xs font-medium text-gray-600">
+                            <span className="text-lg font-bold text-gray-800">{dateInfo.month}.{dateInfo.day}</span>
-                        {formatDate(schedule.date)}
+                            <span className={`text-[11px] font-medium ${
-                    </div>
+                                dateInfo.isSunday ? 'text-red-500' : 
-                    {/* 시간 뱃지 */}
+                                dateInfo.isWeekend ? 'text-blue-500' : 'text-gray-500'
-                    {schedule.time && (
+                            }`}>
-                        <div 
+                                {dateInfo.weekday}요일
-                            className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
+                            </span>
-                            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"
+                    <div className="flex-1 p-4 min-w-0">
-                        style={{ 
+                        {/* 시간 및 카테고리 뱃지 */}
-                            backgroundColor: `${categoryColor}15`,
+                        <div className="flex items-center gap-1.5 mb-2 flex-wrap">
-                            color: categoryColor 
+                            {schedule.time && (
-                        }}
+                                <div 
-                    >
+                                    className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
-                        {categoryName}
+                                    style={{ backgroundColor: categoryColor }}
-                    </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()}
+                                    <Clock size={10} />
-                                </span>
+                                    {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>