diff --git a/frontend/src/components/pc/SundayMapleBanner.jsx b/frontend/src/components/pc/SundayMapleBanner.jsx new file mode 100644 index 0000000..cb36b9f --- /dev/null +++ b/frontend/src/components/pc/SundayMapleBanner.jsx @@ -0,0 +1,124 @@ +import { useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import { motion, AnimatePresence } from 'framer-motion' +import { api } from '../../api/client' + +function SundayMapleDialog({ data, onClose }) { + return ( + + + e.stopPropagation()} + > + + 썬데이 메이플 + {data.event_post_url && ( +
+ + 공식 공지 보기 → + +
+ )} +
+
+
+ ) +} + +export default function SundayMapleBanner() { + const [open, setOpen] = useState(false) + + const { data } = useQuery({ + queryKey: ['sunday-maple', 'current'], + queryFn: () => api('/api/sunday-maple/current').catch(() => ({ available: false })), + staleTime: 10 * 60 * 1000, + }) + + // 이미지 관리에 업로드한 아이콘 URL (variant별) + const iconName = data?.variant === 'special' ? '스페셜 썬데이 메이플' : '썬데이 메이플' + const { data: iconData } = useQuery({ + queryKey: ['image', iconName], + queryFn: () => api(`/api/images/${encodeURIComponent(iconName)}`).catch(() => null), + enabled: !!data?.available, + staleTime: Infinity, + }) + + if (!data?.available) return null + + const label = data.variant === 'special' ? '스페셜 썬데이 메이플' : '썬데이 메이플' + + return ( + <> + + + {open && setOpen(false)} />} + + ) +} diff --git a/frontend/src/pages/pc/Home.jsx b/frontend/src/pages/pc/Home.jsx index 8108216..fa48c77 100644 --- a/frontend/src/pages/pc/Home.jsx +++ b/frontend/src/pages/pc/Home.jsx @@ -2,6 +2,7 @@ import { Link } from 'react-router-dom' import { useQuery } from '@tanstack/react-query' import { api } from '../../api/client' import NoticeWidget from '../../components/pc/NoticeWidget' +import SundayMapleBanner from '../../components/pc/SundayMapleBanner' export default function Home() { const { data: menus = [], isLoading: loading } = useQuery({ @@ -11,6 +12,9 @@ export default function Home() { return (
+ {/* 썬데이 메이플 배너 (금~일만 표시) */} + + {/* 구분선 */}