diff --git a/apps/web/src/components/PromotionBanner.tsx b/apps/web/src/components/PromotionBanner.tsx
index 2f041bb1..857bd204 100644
--- a/apps/web/src/components/PromotionBanner.tsx
+++ b/apps/web/src/components/PromotionBanner.tsx
@@ -1,15 +1,26 @@
'use client';
import { AnimatePresence, motion } from 'framer-motion';
-import { Megaphone } from 'lucide-react';
+import { ChevronDown, ChevronUp, Megaphone } from 'lucide-react';
+import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useSongPromotionsQuery } from '@/queries/songPromotionQuery';
+const ALLOWED_PATHS = ['/', '/popular', '/recent', '/tosing'];
+const COLLAPSED_STORAGE_KEY = 'promotion-banner-collapsed';
+
export default function PromotionBanner() {
+ const pathname = usePathname();
const [currentIndex, setCurrentIndex] = useState(0);
+ const [isCollapsed, setIsCollapsed] = useState(false);
const { data: promotions = [] } = useSongPromotionsQuery();
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+ setIsCollapsed(window.sessionStorage.getItem(COLLAPSED_STORAGE_KEY) === 'true');
+ }, []);
+
useEffect(() => {
if (currentIndex >= promotions.length) {
setCurrentIndex(0);
@@ -24,6 +35,17 @@ export default function PromotionBanner() {
return () => clearInterval(timer);
}, [promotions.length]);
+ const handleToggle = () => {
+ setIsCollapsed(prev => {
+ const next = !prev;
+ if (typeof window !== 'undefined') {
+ window.sessionStorage.setItem(COLLAPSED_STORAGE_KEY, String(next));
+ }
+ return next;
+ });
+ };
+
+ if (!ALLOWED_PATHS.includes(pathname)) return null;
if (promotions.length === 0) return null;
const current = promotions[currentIndex];
@@ -32,56 +54,85 @@ export default function PromotionBanner() {
return (
-
+
+
+ {isCollapsed ? (
+
+ ) : (
+
+ )}
+
+
-
-
+
+ {!isCollapsed && (
-
-
- {current.title}
- {hasKoTitle && (
-
- {current.title_ko}
-
- )}
-
-
- {current.artist}
- {hasKoArtist && (
-
- {current.artist_ko}
-
- )}
-
-
+
+
+
+
+
+ {current.title}
+ {hasKoTitle && (
+
+ {current.title_ko}
+
+ )}
+
+
+
+ {current.artist}
+
+ {hasKoArtist && (
+
+ {current.artist_ko}
+
+ )}
+
+
-
-
- {current.nickname}
-
- {current.content}
-
+
+
+ {current.nickname}
+
+ {current.content}
+
-
- {current.start_date} ~ {current.end_date}
-
+
+ {current.start_date} ~ {current.end_date}
+
+
+
+
-
-
+ )}
+
);
}