ㅋㅋㅋ

src/app/components/AppHeader.tsx

@@ -51,7 +51,10 @@ export function AppHeader() {
 
   const scheduleClose = React.useCallback(() => {
     cancelClose();
-    closeTimer.current = window.setTimeout(() => setMegaOpen(false), 150);
+    closeTimer.current = window.setTimeout(() => {
+      setMegaOpen(false);
+      setOpenSlug(null);
+    }, 150);
   }, [cancelClose]);
   // 카테고리 로드
   React.useEffect(() => {
@@ -96,16 +99,33 @@ export function AppHeader() {
       if (!container) return;
       const containerRect = container.getBoundingClientRect();
       const nextPositions: Record<string, number> = {};
-      const nextWidths: Record<string, number> = {};
+      const desiredWidths: Record<string, number> = {};
+      const minWidthsBySlug: Record<string, number> = { community: 200 };
       categories.forEach((cat) => {
         const itemEl = navItemRefs.current[cat.slug];
         if (!itemEl) return;
         const r = itemEl.getBoundingClientRect();
         nextPositions[cat.slug] = Math.max(0, r.left - containerRect.left);
-        nextWidths[cat.slug] = r.width; // 각 네비 항목의 실제 폭을 사용
+        const baseWidth = r.width; // 각 네비 항목의 실제 폭을 기본값으로 사용
+        const minWidth = minWidthsBySlug[cat.slug] ?? baseWidth;
+        desiredWidths[cat.slug] = Math.max(baseWidth, minWidth);
       });
       setLeftPositions(nextPositions);
-      setBlockWidths(nextWidths);
+
+      // 원하는 최소 폭을 기준으로 하되, 다음 항목의 시작점까지를 넘지 않도록 클램프
+      const finalWidths: Record<string, number> = {};
+      const ordered = categories
+        .filter((c) => typeof nextPositions[c.slug] === "number")
+        .sort((a, b) => (nextPositions[a.slug]! - nextPositions[b.slug]!));
+      ordered.forEach((cat, idx) => {
+        const currentLeft = nextPositions[cat.slug]!;
+        const desired = desiredWidths[cat.slug] ?? 0;
+        const maxAvail = idx < ordered.length - 1
+          ? Math.max(0, nextPositions[ordered[idx + 1].slug]! - currentLeft)
+          : Math.max(0, containerRect.width - currentLeft);
+        finalWidths[cat.slug] = Math.min(desired, maxAvail);
+      });
+      setBlockWidths(finalWidths);
 
       // 패널 높이 = 블록들 중 최대 높이
       let maxH = 0;
@@ -176,7 +196,7 @@ export function AppHeader() {
                 </Link>
                 <span
                   className={`pointer-events-none absolute left-1 right-1 -bottom-0.5 h-0.5 origin-left rounded bg-neutral-900 transition-all duration-200 ${
-                    openSlug === cat.slug || activeCategorySlug === cat.slug
+                    (megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug
                       ? "scale-x-100 opacity-100"
                       : "scale-x-0 opacity-0 group-hover:opacity-100 group-hover:scale-x-100"
                   }`}
@@ -204,7 +224,7 @@ export function AppHeader() {
                     style={{ left: (leftPositions[cat.slug] ?? 0), width: blockWidths[cat.slug] ?? undefined }}
                   >
                     {/* <div className="mb-2 font-semibold text-neutral-800">{cat.name}</div> */}
-                    <div className="flex flex-col gap-3">
+                    <div className="mx-auto w-max flex flex-col items-center gap-3">
                       {cat.boards.map((b) => (
                         <Link
                           key={b.id}