Hotfix : 홍보판 배너 토글 닫기 UI 추가

apps/web/public/sitemap-0.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.singcode.kr/manifest.webmanifest</loc><lastmod>2026-05-17T16:45:28.515Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.singcode.kr/patch-notes</loc><lastmod>2026-05-17T16:45:28.517Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.singcode.kr</loc><lastmod>2026-05-17T16:45:28.517Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr/manifest.webmanifest</loc><lastmod>2026-05-19T13:17:55.218Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr</loc><lastmod>2026-05-19T13:17:55.220Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr/patch-notes</loc><lastmod>2026-05-19T13:17:55.220Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
 </urlset>

apps/web/src/app/info/point-logs/page.tsx

@@ -27,7 +27,7 @@ function PointLogItem({ log }: { log: PointLog }) {
           {new Date(log.created_at).toLocaleString('ko-KR')}
         </span>
       </div>
-      <div className="flex flex-col items-end gap-0.5">
+      <div className="flex min-w-16 flex-col items-end gap-0.5">
         <span className={`text-sm font-bold ${amountClassName}`}>{amountLabel}P</span>
         <span className="text-muted-foreground text-xs">
           잔액 {log.balance_after.toLocaleString()}P

apps/web/src/app/info/promotions/page.tsx

@@ -77,7 +77,7 @@ function PromotionItem({
               <p className="text-muted-foreground/70 truncate text-xs">{artist_ko}</p>
             )}
           </div>
-          <p className="border-primary/60 bg-muted/40 text-foreground mt-2 rounded-md border-l-2 px-2.5 py-1.5 text-sm leading-relaxed whitespace-pre-line">
+          <p className="bg-muted/50 text-foreground mt-2 rounded-md px-3 py-2 text-sm leading-relaxed whitespace-pre-line">
             {promotion.content}
           </p>
         </div>

apps/web/src/app/layout.tsx

@@ -107,7 +107,7 @@ export default function RootLayout({
         <Header />
         <div className="h-full p-4">{children}</div>
 
-        <div className="pointer-events-none fixed bottom-8 left-1/2 z-40 w-full max-w-md -translate-x-1/2 px-4 pb-2">
+        <div className="pointer-events-none fixed bottom-8 left-1/2 z-40 w-full max-w-md -translate-x-1/2 px-1 pb-1">
           <div className="pointer-events-auto">
             <PromotionBanner />
           </div>

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 (
     <div className="border-border bg-card relative overflow-hidden rounded-lg border px-4 py-3">
-      <div className="mb-2 flex items-center gap-1.5">
+      <button
+        type="button"
+        onClick={handleToggle}
+        aria-label={isCollapsed ? '전광판 펼치기' : '전광판 접기'}
+        className={`hover:text-foreground flex w-full items-center gap-1.5 text-left ${
+          isCollapsed ? 'mb-0' : 'mb-2'
+        }`}
+      >
         <Megaphone className="text-primary h-3.5 w-3.5" />
         <span className="text-primary text-xs font-semibold">전광판</span>
         <span className="text-muted-foreground text-xs">
           {currentIndex + 1}/{promotions.length}
         </span>
-      </div>
+        <span className="text-muted-foreground ml-auto flex h-5 w-5 items-center justify-center">
+          {isCollapsed ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronUp className="h-3.5 w-3.5" />
+          )}
+        </span>
+      </button>
 
-      <div className="h-24 overflow-hidden">
-        <AnimatePresence mode="wait">
+      <AnimatePresence initial={false}>
+        {!isCollapsed && (
           <motion.div
-            key={current.id}
-            initial={{ y: '-100%', opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: '100%', opacity: 0 }}
-            transition={{ duration: 0.4, ease: 'easeInOut' }}
-            className="flex flex-col gap-2"
+            key="content"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.25, ease: 'easeInOut' }}
+            className="overflow-hidden"
           >
-            <div className="flex flex-col gap-0.5">
-              <div className="flex items-baseline gap-1.5 truncate">
-                <span className="truncate text-sm font-semibold">{current.title}</span>
-                {hasKoTitle && (
-                  <span className="text-muted-foreground shrink-0 truncate text-xs">
-                    {current.title_ko}
-                  </span>
-                )}
-              </div>
-              <div className="flex items-baseline gap-1.5 truncate">
-                <span className="text-muted-foreground truncate text-sm">{current.artist}</span>
-                {hasKoArtist && (
-                  <span className="text-muted-foreground/70 shrink-0 truncate text-xs">
-                    {current.artist_ko}
-                  </span>
-                )}
-              </div>
-            </div>
+            <div className="h-24 overflow-hidden">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={current.id}
+                  initial={{ y: '-100%', opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: '100%', opacity: 0 }}
+                  transition={{ duration: 0.4, ease: 'easeInOut' }}
+                  className="flex flex-col gap-2"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <div className="flex items-baseline gap-1.5 truncate">
+                      <span className="truncate text-sm font-semibold">{current.title}</span>
+                      {hasKoTitle && (
+                        <span className="text-muted-foreground shrink-0 truncate text-xs">
+                          {current.title_ko}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-baseline gap-1.5 truncate">
+                      <span className="text-muted-foreground truncate text-sm">
+                        {current.artist}
+                      </span>
+                      {hasKoArtist && (
+                        <span className="text-muted-foreground/70 shrink-0 truncate text-xs">
+                          {current.artist_ko}
+                        </span>
+                      )}
+                    </div>
+                  </div>
 
-            <p className="text-xs leading-relaxed wrap-break-word">
-              <span className="bg-primary/10 text-primary mr-1.5 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tracking-wide">
-                {current.nickname}
-              </span>
-              <span className="text-foreground">{current.content}</span>
-            </p>
+                  <p className="text-xs leading-relaxed wrap-break-word">
+                    <span className="bg-primary/10 text-primary mr-1.5 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tracking-wide">
+                      {current.nickname}
+                    </span>
+                    <span className="text-foreground">{current.content}</span>
+                  </p>
 
-            <span className="text-muted-foreground/60 text-xs">
-              {current.start_date} ~ {current.end_date}
-            </span>
+                  <span className="text-muted-foreground/60 text-xs">
+                    {current.start_date} ~ {current.end_date}
+                  </span>
+                </motion.div>
+              </AnimatePresence>
+            </div>
           </motion.div>
-        </AnimatePresence>
-      </div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }