[Feat/404-48] ✨ feat: nofound 페이지 구현 & wipCard 추가 (준비중 안내)

src/app/(layout)/(shell)/_components/dock/DockMenu.tsx

@@ -7,13 +7,15 @@ import {
 import { DOCK_ITEMS } from "@/app/(layout)/(shell)/_components/dock/_constants/dockItem.config";
 import { useDockCloseHint } from "@/app/(layout)/(shell)/_components/dock/_hooks/useDockCloseHint";
 import { useDockInteraction } from "@/app/(layout)/(shell)/_components/dock/_hooks/useDockInteraction";
+import { WipFeatureOverlay } from "@/components/common/WipFeatureOverlay";
+import { useWipFeatureNotice } from "@/hooks/useWipFeatureNotice";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronsDown } from "lucide-react";
 import { DEFAULT_STYLE } from "./_constants/dock.config";
+import { useDockMenu } from "./_hooks/useDockMenu";
 import { getDockClasses } from "./dock.utils";
 import { DockMenuItem } from "./DockMenuItem";
-import { useDockMenu } from "./_hooks/useDockMenu";
 
 export default function DockMenu() {
   const {
@@ -43,6 +45,10 @@ export default function DockMenu() {
     hideDelay: 800,
   });
 
+  const { isOpen, openNotice, closeNotice } = useWipFeatureNotice({
+    autoCloseMs: 2500,
+  });
+
   if (isHidden) return null;
 
   return (
@@ -82,6 +88,11 @@ export default function DockMenu() {
 
               const style = iconStyles[index] ?? DEFAULT_STYLE;
 
+              const handleItemClick =
+                item.type === "button" && item.label === "PHOTOBOOTH"
+                  ? () => openNotice()
+                  : undefined;
+
               return (
                 <DockMenuItem
                   key={item.label}
@@ -90,6 +101,7 @@ export default function DockMenu() {
                   onRef={(el) => {
                     itemRefs.current[index] = el;
                   }}
+                  onClick={handleItemClick}
                 />
               );
             })}
@@ -142,6 +154,8 @@ export default function DockMenu() {
           </motion.button>
         )}
       </AnimatePresence>
+
+      <WipFeatureOverlay isOpen={isOpen} onClose={closeNotice} />
     </div>
   );
 }

src/app/(layout)/(shell)/_components/dock/DockMenuItem.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { DOCK_CONFIG } from "./_constants/dock.config";
 import { DockMenuItemProps } from "./dock.types";
 
-export const DockMenuItem = ({ item, style, onRef }: DockMenuItemProps) => {
+export const DockMenuItem = ({ item, style, onRef, onClick, }: DockMenuItemProps) => {
   const renderContent = () => {
     const imgElement = (
       <img src={item.icon} alt={item.label} className="w-12 h-auto" />
@@ -44,7 +44,7 @@ export const DockMenuItem = ({ item, style, onRef }: DockMenuItemProps) => {
         <button
           type="button"
           aria-label={item.label}
-          onClick={item.onClick}
+          onClick={onClick ?? item.onClick}
           className={commonClasses}
           tabIndex={0}
         >

src/app/(layout)/(shell)/_components/dock/dock.types.ts

@@ -46,4 +46,5 @@ export interface DockMenuItemProps {
   item: Exclude<DockItem, DockDividerItem>;
   style: IconStyle;
   onRef: (el: HTMLLIElement | null) => void;
+  onClick?: () => void;
 }

src/app/(layout)/(shell)/_components/home/HeroRightMedia.tsx

@@ -1,14 +1,18 @@
 "use client";
 
+import Image from "next/image";
+
 export default function HeroRightMedia() {
   return (
     <div className="flex-1 hidden md:block">
-      <div className="relative mx-auto aspect-4/3 bg-foreground/20 max-w-lg w-full overflow-hidden rounded-3xl border">
-        {/* 배경 효과 (리퀴드 글래스, 글로우 등은 여기서 스타일링) */}
-        <div className="absolute inset-0" aria-hidden />
-        <div className="relative h-full w-full">
-        </div>
-      </div>
+      <Image
+        src="/error/elephant.svg"
+        alt="임시"
+        width={40}
+        height={120}
+        className="w-full h-auto select-none drop-shadow-[10px_5px_3px_rgba(0,0,0,0.10)]"
+        priority={false}
+      />
     </div>
-  )
+  );
 }

src/app/(layout)/(shell)/_components/layout/SiteHeader.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { useSearchTransition } from "@/app/(layout)/(shell)/_components/home/_hooks/useSearchTransition";
+import { WipFeatureOverlay } from "@/components/common/WipFeatureOverlay";
+import { useWipFeatureNotice } from "@/hooks/useWipFeatureNotice";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { Menu, Search, X } from "lucide-react";
@@ -15,6 +17,10 @@ export default function SiteHeader() {
     closeMobileMenu,
     handleSearchClick,
   } = useSearchTransition();
+  const WIP_NAV_ITEMS = ["Resume", "Guestbook", "Lab"] as const;
+  const { isOpen, openNotice, closeNotice } = useWipFeatureNotice({
+    autoCloseMs: 2500,
+  });
 
   return (
     <header className="fixed inset-x-0 top-0 z-40 border-b border-foreground/10 bg-background/5 backdrop-blur-md">
@@ -56,17 +62,19 @@ export default function SiteHeader() {
 
         <div className="flex items-center gap-6">
           <div className="hidden items-center gap-9 font-medium text-foreground/70 md:flex">
-            <nav aria-label="주요 페이지" >
+            <nav aria-label="주요 페이지">
               <ul className="flex items-center gap-10">
-                <li className="hover:text-foreground">
-                  <Link  href="/resume">Resume</Link>
-                </li>
-                <li className="hover:text-foreground">
-                  <Link href="/guestbook">Guestbook</Link>
-                </li>
-                <li className="hover:text-foreground"> 
-                  <Link href="/lab">Lab</Link>
-                </li>
+                {WIP_NAV_ITEMS.map((label) => (
+                  <li key={label} className="hover:text-foreground">
+                    <button
+                      type="button"
+                      onClick={openNotice}
+                      className="text-sm cursor-pointer"
+                    >
+                      {label}
+                    </button>
+                  </li>
+                ))}
               </ul>
             </nav>
 
@@ -111,26 +119,27 @@ export default function SiteHeader() {
           >
             <nav className="px-10 pb-4 pt-3 text-lg font-medium text-foreground">
               <ul className="flex flex-col gap-4">
-                <li>
-                  <Link href="/resume" onClick={closeMobileMenu}>
-                    Resume
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/guestbook" onClick={closeMobileMenu}>
-                    Guestbook
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/lab" onClick={closeMobileMenu}>
-                    Lab
-                  </Link>
-                </li>
+                {WIP_NAV_ITEMS.map((label) => (
+                  <li key={label} className="hover:text-foreground">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        openNotice();
+                        closeMobileMenu();
+                      }}
+                      className="text-sm cursor-pointer"
+                    >
+                      {label}
+                    </button>
+                  </li>
+                ))}
               </ul>
             </nav>
           </motion.div>
         )}
       </AnimatePresence>
+
+      <WipFeatureOverlay isOpen={isOpen} onClose={closeNotice} />
     </header>
   );
 }

src/app/globals.css

@@ -19,6 +19,9 @@
 /* mdx 스타일링 */
 @import "../styles/mdx.css";
 
+/* 백그라운드 애니메이션 우주 배경 */
+@import "../styles/components/background.css";
+
 .heading-anchor {
   text-decoration: none;
 }

src/app/not-found.tsx

@@ -0,0 +1,47 @@
+import { SpaceBackground } from "@/components/common/SpaceBackground";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <section className="relative flex flex-col items-center justify-center min-h-screen w-full overflow-hidden px-6">
+      <SpaceBackground />
+
+      <div className="flex flex-col items-center gap-5 h-full mb-10">
+        <h1>
+          <Image
+            src="/error/404.svg"
+            alt="404"
+            width={300}
+            height={150}
+            priority
+          />
+        </h1>
+
+        <Image src="/error/oops.svg" alt="oops" width={220} height={80} />
+
+        <Image
+          className="w-10 aspect-auto"
+          src="/error/double-arrow-icon.svg"
+          alt=""
+          width={40}
+          height={40}
+        />
+      </div>
+
+      <p className="text-center font-sans text-white/75 font-medium leading-relaxed max-w-[420px]">
+        보아뱀이 잘못된 페이지를 삼켜버렸어요.
+      </p>
+      <p className="text-center font-sans text-sm text-white/55 font-medium leading-relaxed max-w-[420px]">
+        찾으려던 글은 아직 소화되지 않았거나, 존재하지 않는 페이지예요.
+      </p>
+
+      <Link
+        href="/"
+        className="mt-8 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-5 py-2 text-sm font-medium text-white/90 backdrop-blur-md transition hover:bg-white/15 hover:border-white/40"
+      >
+        <span>홈으로 돌아가기</span>
+      </Link>
+    </section>
+  );
+}

src/components/common/SpaceBackground.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import clsx from "clsx";
+
+interface SpaceBackgroundProps {
+  className?: string;
+}
+
+export function SpaceBackground({ className }: SpaceBackgroundProps) {
+  return (
+    <div
+      className={clsx(
+        "absolute inset-0 -z-20 overflow-hidden space-bg-gradient",
+        className
+      )}
+    >
+      {/* 작은 별 배경 레이어 */}
+      <div className="space-bg-stars" />
+
+      {/* 별똥별들 */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <div className="shooting-star shooting-star--1" />
+        <div className="shooting-star shooting-star--2" />
+        <div className="shooting-star shooting-star--3" />
+      </div>
+    </div>
+  );
+}

src/components/common/WipFeatureCard.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import clsx from "clsx";
+import { X } from "lucide-react";
+import Image from "next/image";
+
+interface WipFeatureCardProps {
+  onClose: () => void;
+  className?: string;
+}
+
+export function WipFeatureCard({ onClose, className }: WipFeatureCardProps) {
+  return (
+    <div
+      className={clsx("relative w-[min(440px,90vw)]", className)}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="준비중 안내 닫기"
+        className={clsx(
+          "absolute right-8 top-2 z-10 ",
+          "inline-flex items-center justify-center",
+          "h-7 w-7 rounded-full",
+          "text-black/20 hover:text-white",
+          "hover:bg-black/10 cursor-pointer",
+          "transition rotate-80 "
+        )}
+      >
+        <X size={16} strokeWidth={3} />
+      </button>
+
+      <Image
+        src="/error/wip-card.svg"
+        alt="준비 중 안내 카드"
+        width={740}
+        height={420}
+        className="w-full h-auto select-none drop-shadow-[10px_5px_3px_rgba(0,0,0,0.10)]"
+        priority={false}
+      />
+    </div>
+  );
+}

src/components/common/WipFeatureOverlay.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { createPortal } from "react-dom";
+import { WipFeatureCard } from "./WipFeatureCard";
+
+interface WipFeatureOverlayProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function WipFeatureOverlay({ isOpen, onClose }: WipFeatureOverlayProps) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-60 flex items-center justify-center"
+          onClick={onClose} 
+        >
+          <motion.div
+            key="wip-notice"
+            initial={{ opacity: 0, x: "100%" }}
+            animate={{
+              opacity: 1,
+              x: "0%",
+              transition: {
+                duration: 0.4,
+                ease: [0.22, 1, 0.36, 1],
+              },
+            }}
+            exit={{
+              opacity: 0,
+              x: "-100%",
+              transition: {
+                duration: 0.35,
+                ease: [0.45, 0, 0.55, 1],
+              },
+            }}
+          >
+            <WipFeatureCard onClose={onClose} />
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}