feat: Implement input dialog for secret code submission and result display

src/components/txt.tsx

@@ -1,5 +1,16 @@
 import Image from "next/image";
+import { useState } from "react";
 import { useIsMobile } from "@/hooks/use-mobile";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 interface TXTProps {
     onHover?: (position: { x: number; y: number } | null) => void;
@@ -7,21 +18,79 @@ interface TXTProps {
 
 export default function TXT({ onHover }: TXTProps) {
     const isMobile = useIsMobile();
+    const [openInput, setOpenInput] = useState(false);
+    const [openResult, setOpenResult] = useState(false);
+    const [key, setKey] = useState("");
+    const [error, setError] = useState("");
+    const [content, setContent] = useState("");
+
+    const handleSubmit = async () => {
+        setError("");
+        setContent("");
+        try {
+            const response = await fetch(`https://api.imnya.ng/secret?key=${encodeURIComponent(key)}`);
+            const data = await response.text();
+            if (data === "false") {
+                setError("아니요?");
+            } else {
+                setOpenInput(false);
+                setOpenResult(true);
+                setContent(data);
+            }
+        } catch (_err) {
+            console.error(_err);
+            setError("오류가 발생했습니다");
+        }
+    };
 
     if (isMobile) return null;
 
     return (
-        <div 
+        <>
-            className="flex flex-col items-center justify-center gap-4 absolute top-4 left-4 p-2 cursor-pointer font-galmuri drag-none select-none"
+            <button 
-            onMouseEnter={() => onHover?.({ x: 16, y: 16 })}
+                type="button"
-            onMouseLeave={() => onHover?.(null)}
+                className="flex flex-col items-center justify-center gap-4 absolute top-4 left-4 p-2 cursor-pointer font-galmuri drag-none select-none bg-transparent border-none"
-            onClick={() => {
+                onMouseEnter={() => onHover?.({ x: 16, y: 16 })}
-                alert("왜 편법을 쓰지?");
+                onMouseLeave={() => onHover?.(null)}
-                window.location.reload();
+                onClick={() => setOpenInput(true)}
-            }}
+            >
-        >
+                <Image src="/txt.webp" alt="txt" width={24} height={24} />
-            <Image src="/txt.webp" alt="txt" width={24} height={24} />
+                <span className="text-sm font-medium text-foreground/80 font-galmuri">비밀.txt</span>
-            <span className="text-sm font-medium text-foreground/80 font-galmuri">비밀.txt</span>
+            </button>
-        </div>
+            <Dialog open={openInput} onOpenChange={setOpenInput}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>비밀 코드 입력</DialogTitle>
+                        <DialogDescription>
+                            비밀 코드를 입력하세요.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <Input
+                            placeholder="비밀 코드"
+                            value={key}
+                            onChange={(e) => setKey(e.target.value)}
+                        />
+                        {error && <p className="text-red-500">{error}</p>}
+                    </div>
+                    <DialogFooter>
+                        <Button onClick={handleSubmit}>확인</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+            <Dialog open={openResult} onOpenChange={setOpenResult}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>비밀.txt</DialogTitle>
+                        <DialogDescription>
+                            {content}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button onClick={() => setOpenResult(false)}>닫기</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }