니디걸오버도즈

src/components/DraggableWindow.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import Image from 'next/image';
+import { useIsMobile } from '@/hooks/use-mobile';
+
+export default function DraggableWindow() {
+    const isMobile = useIsMobile();
+    const [isVisible, setIsVisible] = useState(true);
+    const [position, setPosition] = useState({ x: 100, y: 100 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const windowRef = useRef<HTMLDivElement>(null);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        setIsDragging(true);
+        if (windowRef.current) {
+            const rect = windowRef.current.getBoundingClientRect();
+            setDragOffset({
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            });
+        }
+    };
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isDragging) return;
+
+            setPosition({
+                x: e.clientX - dragOffset.x,
+                y: e.clientY - dragOffset.y,
+            });
+        };
+
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, dragOffset]);
+
+    return (
+        isMobile ? (
+            <figure className="mb-8 w-full h-auto">
+                <picture className="block bg-gray-100 rounded-xl aspect-3-2 overflow-hidden image-scale object-shadowed">
+                    <Image
+                        src="/full.webp"
+                        alt="Banner"
+                        width={1200}
+                        height={400}
+                        priority
+                        className="object-cover object-center transition-transform duration-300 hover:scale-105" 
+                    />
+                </picture>
+            </figure >
+        ) : (
+            isVisible && (
+                <div
+                    ref={windowRef}
+                    className="fixed cursor-move select-none"
+                    style={{
+                        left: `${position.x}px`,
+                        top: `${position.y}px`,
+                    }}
+                    onMouseDown={handleMouseDown}
+                >
+                    <div className="relative w-fit h-fit">
+                        <Image
+                            src="/window.png"
+                            alt="Draggable Window"
+                            width={500}
+                            height={400}
+                            priority
+                            draggable={false}
+                        />
+                        <button
+                            onClick={() => setIsVisible(false)}
+                            className="absolute top-1 right-2 w-5 h-5 cursor-pointer"
+                            aria-label="Close window"
+                        />
+                    </div>
+                </div>
+            )
+        )
+    );
+}

src/components/Projects.tsx

@@ -1,4 +1,5 @@
 import { SquareArrowOutUpRight } from 'lucide-react';
+import { url } from 'node:inspector';
 
 {/* <a href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
 <a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a> */}
@@ -18,6 +19,13 @@ const projects = [
     detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.',
     tags: ['TypeScript', 'igramapi', '@napi-rs/canvas'],
   },
+  {
+    name: 'NYL',
+    url: 'https://nyl.ny64.kr',
+    desc: '상위 호환',
+    detail: '전국의 중고등학교의 시간표와 급식을 쉽게 확인할 수 있는 앱을 유지보수하고 있습니다.',
+    tags: ['React Native', 'ElysiaJS']
+  }
 ];
 
 export default function Projects() {

src/components/ReadmeWindow.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useReadmeWaka } from '@/hooks/use-readme-waka';
+
+export default function ReadmeWindow() {
+    const { wakaContent, isLoading, error } = useReadmeWaka();
+
+    if (!wakaContent) return null;
+
+    return (
+        <div className="font-mono rounded-b-lg">
+            <div className="py-4">
+                <h3 className="text-lg font-bold">WakaTime Stats</h3>
+                <pre className="text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words">
+                    {wakaContent.replace(/```(txt)?/g, '')}
+                </pre>
+            </div>
+        </div>
+    );
+}