From 54fe3074dc82bea01dcb9592ca4943337aeefb60 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 10 Jan 2026 10:31:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TimelineScheduleCard 스타일로 리디자인
- 날짜 뱃지 추가 (M.D (요일) 형식)
- 시간/카테고리 뱃지 스타일 통일
- 멤버 태그 그라데이션 적용
- 스프링 애니메이션 추가
---
 frontend/src/pages/mobile/public/Schedule.jsx | 114 ++++++++++++------
 1 file changed, 74 insertions(+), 40 deletions(-)

diff --git a/frontend/src/pages/mobile/public/Schedule.jsx b/frontend/src/pages/mobile/public/Schedule.jsx
index 7b3c820..dd7fadc 100644
--- a/frontend/src/pages/mobile/public/Schedule.jsx
+++ b/frontend/src/pages/mobile/public/Schedule.jsx
@@ -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>