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 ( + <> + setOpen(true)} + className="w-full rounded-2xl border p-4 flex items-center gap-4 transition-transform duration-300 hover:scale-[1.01]" + style={{ + background: 'var(--selected-bg)', + borderColor: 'var(--selected-border)', + boxShadow: 'var(--panel-shadow)', + }} + > + + {iconData?.url ? ( + + ) : ( + 📅 + )} + + + + 이번 주 {label} + + + 일요일에 받을 수 있는 혜택을 확인하세요 + + + + 보기 → + + + + {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 ( + {/* 썬데이 메이플 배너 (금~일만 표시) */} + + {/* 구분선 */}