imnyang
a3a53a68ec
- Added @radix-ui/react-dialog to dependencies in package.json and bun.lock. - Updated page.tsx to replace placeholder text with "We are in MAGICALWORLD!". - Refactored SUPERCOMMAND component to handle key sequences and show dialog on match. - Implemented Dialog component with header, footer, and description using Radix UI primitives.
145 lines
5.3 KiB
TypeScript
145 lines
5.3 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
|
|
export default function SUPERCOMMAND() {
|
|
const [keySequence, setKeySequence] = React.useState("");
|
|
const [showDialog, setShowDialog] = React.useState(false);
|
|
const targetSequence = "MAGICALWORLD";
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
// 영문자만 처리
|
|
if (event.key.length === 1 && /[a-zA-Z]/.test(event.key)) {
|
|
console.log(keySequence);
|
|
console.log(targetSequence);
|
|
console.log("Key pressed:", event.key);
|
|
setKeySequence(prev => {
|
|
const newSequence = prev + event.key;
|
|
console.log("New sequence:", newSequence);
|
|
|
|
// 목표 시퀀스와 정확히 일치하는지 확인 (대문자만)
|
|
if (newSequence === targetSequence) {
|
|
console.log("Sequence matched!");
|
|
setShowDialog(true);
|
|
return "";
|
|
}
|
|
|
|
// 목표 시퀀스의 시작 부분과 일치하는지 확인 (대문자만)
|
|
if (targetSequence.startsWith(newSequence)) {
|
|
return newSequence;
|
|
}
|
|
|
|
// 일치하지 않으면 현재 키부터 다시 시작
|
|
const restartSequence = event.key;
|
|
if (targetSequence.startsWith(restartSequence)) {
|
|
return restartSequence;
|
|
}
|
|
|
|
// 완전히 초기화
|
|
return "";
|
|
});
|
|
} else {
|
|
// 특수키나 숫자가 입력되면 시퀀스 초기화
|
|
setKeySequence("");
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
|
<DialogContent className="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5">
|
|
<DialogHeader className="contents space-y-0 text-left">
|
|
<DialogTitle className="border-b px-6 py-4 text-base">
|
|
???
|
|
</DialogTitle>
|
|
<div className="overflow-y-auto">
|
|
<DialogDescription asChild>
|
|
<div className="px-6 py-4">
|
|
<div className="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold pb-32">
|
|
<p style={{ whiteSpace: 'pre-line' }}>{`마법소녀는 세상을 구했는데
|
|
어째서 나는 구원 받을 수 없는 거야?
|
|
누군가 도와주러 와줘
|
|
|
|
마법소녀는 세상을 구했는데
|
|
어째서 나는 구원 받을 수 없는 거야?
|
|
바라던 평화가 이루어진 순간에
|
|
저는 필요 없어진 아이인가요?
|
|
결국 편할대로 이용당해서
|
|
심정도 신체도 상처투성이고
|
|
이런 세상이라면 이젠 사라져버려
|
|
|
|
장점조차 없어서 자신을 사랑하지 못하고
|
|
무엇을 해봐도 실패뿐인 열등생이네
|
|
그럼에도 다른 누군가에게 필요해지길 원해서
|
|
나 마법소녀가 되어 다시 태어날 거야
|
|
모두의 감사에 채워져 가
|
|
|
|
하지만 언제부턴가 사람들에게 익숙해져
|
|
당연하게 되었어
|
|
마법소녀는 죽을 각오를 했는데
|
|
어째서 나는 보답받지 못하는 거야?
|
|
쌓인 불안이 해소된 순간에
|
|
저는 쓸모 없어지는 건가요?
|
|
|
|
타인의 불행으로 성립되는 평화에
|
|
의심조차 품지 않고 살아가다니
|
|
어이없는 놈들이네
|
|
이런 세상은 전부 전부 싫어져서
|
|
믿을 수 있는 것조차 사라지고
|
|
변하지 못하고 돌아오지 못하고
|
|
이젠 어떡할 수 없어 괴로워
|
|
|
|
마법소녀는 세상을 구했는데
|
|
어째서 나는 구원 받을 수 없는 거야?
|
|
누군가 누군가 가르쳐줘 부탁이야
|
|
모두의 감사가 힘이 된다
|
|
하지만 언제부턴가 그 수는 줄고
|
|
어라 나 바보 같아
|
|
마법소녀는 희망을 잃어버리고
|
|
눈물과 같이 흘러내려
|
|
|
|
마법소녀는 세상을 구했는데
|
|
어째서 나는 구원 받을 수 없는 거야?
|
|
바라던 평화가 이루어진 순간에
|
|
저는 필요없어진 아이인가요?
|
|
결국 편할대로 이용당해서
|
|
심정도 신체도 상처투성이고
|
|
마법이 풀려가
|
|
|
|
이런 세상 전부 전부 부숴버리고
|
|
행복한 결말을 찾아
|
|
이걸로 괜찮아 이걸로 괜찮아
|
|
근데 어째서 마음이 답답한 거야?
|
|
|
|
마법소녀는 세상을 부쉈는데
|
|
어째서 나는 구원 받을 수 없는 거야?
|
|
누군가 누군가 빨리 빨리
|
|
나를 데려가 줘
|
|
절망의 늪에서 작별을 고했어`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DialogDescription>
|
|
<DialogFooter className="px-6 py-6 sm:justify-start fixed bottom-0 left-0 w-full bg-background/80 backdrop-blur-sm">
|
|
<Button type="button">Okay</Button>
|
|
</DialogFooter>
|
|
</div>
|
|
</DialogHeader>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|