Compare commits
2 commits
d3b6598138
...
026c68aa52
| Author | SHA1 | Date | |
|---|---|---|---|
| 026c68aa52 | |||
| cc8fe5a8a3 |
3 changed files with 131 additions and 30 deletions
|
|
@ -7,7 +7,7 @@ const router = express.Router();
|
|||
// 공개 일정 목록 조회 (검색 포함)
|
||||
router.get("/", async (req, res) => {
|
||||
try {
|
||||
const { search } = req.query;
|
||||
const { search, startDate, endDate, limit } = req.query;
|
||||
|
||||
// 검색어가 있으면 Meilisearch 사용
|
||||
if (search && search.trim()) {
|
||||
|
|
@ -15,8 +15,25 @@ router.get("/", async (req, res) => {
|
|||
return res.json(results);
|
||||
}
|
||||
|
||||
// 날짜 필터 및 제한 조건 구성
|
||||
let whereClause = "WHERE 1=1";
|
||||
const params = [];
|
||||
|
||||
if (startDate) {
|
||||
whereClause += " AND s.date >= ?";
|
||||
params.push(startDate);
|
||||
}
|
||||
if (endDate) {
|
||||
whereClause += " AND s.date <= ?";
|
||||
params.push(endDate);
|
||||
}
|
||||
|
||||
// limit 파라미터 처리
|
||||
const limitClause = limit ? `LIMIT ${parseInt(limit)}` : "";
|
||||
|
||||
// 검색어 없으면 DB에서 전체 조회
|
||||
const [schedules] = await pool.query(`
|
||||
const [schedules] = await pool.query(
|
||||
`
|
||||
SELECT
|
||||
s.id,
|
||||
s.title,
|
||||
|
|
@ -34,9 +51,13 @@ router.get("/", async (req, res) => {
|
|||
LEFT JOIN schedule_categories c ON s.category_id = c.id
|
||||
LEFT JOIN schedule_members sm ON s.id = sm.schedule_id
|
||||
LEFT JOIN members m ON sm.member_id = m.id
|
||||
${whereClause}
|
||||
GROUP BY s.id
|
||||
ORDER BY s.date DESC, s.time DESC
|
||||
`);
|
||||
ORDER BY s.date ASC, s.time ASC
|
||||
${limitClause}
|
||||
`,
|
||||
params
|
||||
);
|
||||
|
||||
res.json(schedules);
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,31 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Calendar, Users, Disc3, ArrowRight } from 'lucide-react';
|
||||
import { schedules, albums } from '../../data/dummy';
|
||||
import { Calendar, Users, Disc3, ArrowRight, Clock } from 'lucide-react';
|
||||
|
||||
function Home() {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [upcomingSchedules, setUpcomingSchedules] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
// 멤버 데이터 로드
|
||||
fetch('/api/members')
|
||||
.then(res => res.json())
|
||||
.then(data => setMembers(data))
|
||||
.catch(error => console.error('멤버 데이터 로드 오류:', error));
|
||||
|
||||
// 다가오는 일정 로드 (오늘 이후 3개)
|
||||
// KST 기준으로 오늘 날짜 계산
|
||||
const now = new Date();
|
||||
const kstOffset = 9 * 60; // KST는 UTC+9
|
||||
const kstTime = new Date(now.getTime() + (kstOffset + now.getTimezoneOffset()) * 60000);
|
||||
const todayStr = kstTime.toISOString().split('T')[0];
|
||||
|
||||
fetch(`/api/schedules?startDate=${todayStr}&limit=3`)
|
||||
|
||||
.then(res => res.json())
|
||||
.then(data => setUpcomingSchedules(data))
|
||||
.catch(error => console.error('일정 데이터 로드 오류:', error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -126,30 +140,87 @@ function Home() {
|
|||
전체보기 <ArrowRight size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{schedules.slice(0, 3).map((schedule) => (
|
||||
<div
|
||||
key={schedule.id}
|
||||
className="flex items-center gap-6 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="text-center min-w-[80px]">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{schedule.date.split('-')[2]}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{schedule.date.split('-')[1]}월
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-lg">{schedule.title}</h3>
|
||||
<p className="text-gray-500">{schedule.platform} · {schedule.time}</p>
|
||||
</div>
|
||||
<div className="text-sm text-primary font-medium">
|
||||
{schedule.members.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{upcomingSchedules.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<Calendar size={48} className="mx-auto mb-4 opacity-30" />
|
||||
<p>예정된 일정이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{upcomingSchedules.map((schedule, index) => {
|
||||
const scheduleDate = new Date(schedule.date);
|
||||
const day = scheduleDate.getDate();
|
||||
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
const weekday = weekdays[scheduleDate.getDay()];
|
||||
|
||||
// 멤버 처리
|
||||
const memberList = schedule.member_names ? schedule.member_names.split(',') : [];
|
||||
const displayMembers = memberList.length >= 5 ? ['프로미스나인'] : memberList;
|
||||
|
||||
// 카테고리 색상 (기본값)
|
||||
const categoryColor = schedule.category_color || '#6B8E6B';
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={schedule.id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
||||
>
|
||||
{/* 날짜 영역 */}
|
||||
<div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
|
||||
<span className="text-3xl font-bold">{day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{weekday}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 내용 영역 */}
|
||||
<div className="flex-1 p-5 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-2">{schedule.title}</h3>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
|
||||
{schedule.time && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={14} className="text-primary" />
|
||||
<span>{schedule.time.slice(0, 5)}</span>
|
||||
</div>
|
||||
)}
|
||||
{schedule.category_name && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
/>
|
||||
<span>
|
||||
{schedule.category_name}
|
||||
{schedule.source_name && ` · ${schedule.source_name}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 멤버 태그 */}
|
||||
{displayMembers.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||
{displayMembers.map((name, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
|
||||
>
|
||||
{name.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -157,3 +228,4 @@ function Home() {
|
|||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,21 @@ function AdminSchedule() {
|
|||
};
|
||||
|
||||
// sessionStorage에서 저장된 상태 복원
|
||||
// 새로고침이나 직접 URL 진입 시에는 복원하지 않음 (뒤로가기 등에서만 복원)
|
||||
const getStoredState = () => {
|
||||
try {
|
||||
// 새로고침이나 직접 진입인 경우 상태 초기화
|
||||
const navType = performance.getEntriesByType('navigation')[0]?.type;
|
||||
if (navType === 'reload' || navType === 'navigate') {
|
||||
sessionStorage.removeItem('adminScheduleState');
|
||||
return null;
|
||||
}
|
||||
const stored = sessionStorage.getItem('adminScheduleState');
|
||||
return stored ? JSON.parse(stored) : null;
|
||||
} catch { return null; }
|
||||
};
|
||||
const storedState = getStoredState();
|
||||
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [user, setUser] = useState(null);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue