diff --git a/public/audio.opus b/public/audio.opus new file mode 100644 index 0000000..f24640b Binary files /dev/null and b/public/audio.opus differ diff --git a/public/window-nadae.webp b/public/window-nadae.webp new file mode 100644 index 0000000..092b422 Binary files /dev/null and b/public/window-nadae.webp differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 5a2a7fc..156fafa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,10 @@ import ReadmeWindow from "@/components/ReadmeWindow"; import Contact from "@/components/Contact"; import DDayComponent from "@/components/dday"; -export default function Page() { +export default async function Page({ searchParams }: { searchParams: Promise<{ nowindow?: string }> }) { + const params = await searchParams; + const showWindow = params.nowindow === undefined; + return (
@@ -28,7 +31,7 @@ export default function Page() {
- + {showWindow && }

더 멋진 세상을 만들기 위해 노력하는 암냥입니다.

초등학교 시절 운영체제에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.

diff --git a/src/components/DraggableWindow.tsx b/src/components/DraggableWindow.tsx index c64417c..2499a14 100644 --- a/src/components/DraggableWindow.tsx +++ b/src/components/DraggableWindow.tsx @@ -10,7 +10,10 @@ export default function DraggableWindow() { const [position, setPosition] = useState({ x: 100, y: 100 }); const [isDragging, setIsDragging] = useState(false); const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); + const [isNadaeVisible, setIsNadaeVisible] = useState(false); const windowRef = useRef(null); + const audioRef = useRef(null); + const nadaeTimeoutRef = useRef | null>(null); const handleMouseDown = (e: React.MouseEvent) => { setIsDragging(true); @@ -23,6 +26,26 @@ export default function DraggableWindow() { } }; + const handleActivate = () => { + if (!audioRef.current) { + audioRef.current = new Audio('/audio.opus'); + } + + audioRef.current.currentTime = 0; + void audioRef.current.play(); + + setIsNadaeVisible(true); + + if (nadaeTimeoutRef.current) { + clearTimeout(nadaeTimeoutRef.current); + } + + nadaeTimeoutRef.current = setTimeout(() => { + setIsNadaeVisible(false); + nadaeTimeoutRef.current = null; + }, 1000); + }; + useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isDragging) return; @@ -48,34 +71,49 @@ export default function DraggableWindow() { }; }, [isDragging, dragOffset]); + useEffect(() => { + return () => { + audioRef.current?.pause(); + audioRef.current = null; + + if (nadaeTimeoutRef.current) { + clearTimeout(nadaeTimeoutRef.current); + } + }; + }, []); + return ( isMobile ? (
- - Banner - +
) : ( isVisible && (
Draggable Window