From 506a9bef40e12371037bb0c8ac271878292d2b3c Mon Sep 17 00:00:00 2001 From: imnyang Date: Sun, 26 Oct 2025 22:18:37 +0900 Subject: [PATCH] feat(ui): implement SUPERCOMMAND component and integrate it into the layout; add Projects component for project display --- src/app/layout.tsx | 2 + src/app/page.tsx | 4 +- src/components/NeoFetch.tsx | 2 +- src/components/Projects.tsx | 55 ++++++++++++++++++++ src/components/SUPERCOMMAND.tsx | 90 +++++++++++++++++++++++++++++++++ src/components/timeline.tsx | 2 +- 6 files changed, 151 insertions(+), 4 deletions(-) create mode 100644 src/components/Projects.tsx create mode 100644 src/components/SUPERCOMMAND.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 12f5c7e..fa3401d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import "./globals.css"; import "./scrollbar.css"; +import SUPERCOMMAND from "@/components/SUPERCOMMAND"; export const metadata: Metadata = { title: "남현석 | :two_hearts: imnya.ng", @@ -16,6 +17,7 @@ export default function RootLayout({ {children} + ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 256b56b..73d3906 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,5 @@ import NeoFetch from "@/components/NeoFetch"; +import Projects from "@/components/Projects"; import TimelineComponent from "@/components/timeline"; import Top from "@/components/Top"; @@ -16,8 +17,7 @@ export default function Home() {

최근에는 정보보안 분야 중 웹 해킹에 관심이 많습니다.


대표적인 프로젝트들은 아래와 같습니다.

- Effect Playing Contest 2025 Broadcast Develop
- today.isangjeong + diff --git a/src/components/NeoFetch.tsx b/src/components/NeoFetch.tsx index 7ecb20e..0bcaba9 100644 --- a/src/components/NeoFetch.tsx +++ b/src/components/NeoFetch.tsx @@ -84,7 +84,7 @@ export default function NeoFetch() {


-
+
　
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx new file mode 100644 index 0000000..f31cfc4 --- /dev/null +++ b/src/components/Projects.tsx @@ -0,0 +1,55 @@ +import { SquareArrowOutUpRight } from 'lucide-react'; + +{/* Effect Playing Contest 2025 Broadcast Develop
+today.isangjeong */} + +const projects = [ + { + name: 'EPC 2025 Broadcast Manager', + url: 'https://github.com/NY0510/slunchv2', + desc: '얼불춤 끼얏호우', + detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.', + tags: ['React', 'ElysiaJS'], + }, + { + name: '@today.isangjeong', + url: 'https://instagram.com/today.isangjeong', + desc: '인스타에서 급식 공유를 간편하게', + detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.', + tags: ['TypeScript', '자체 개발 Instagram Library', '@napi-rs/canvas'], + }, +]; + +export default function Projects() { + return ( +
+
+ {projects.map((project, idx) => ( +
+
+
+ {project.url ? ( + + {project.name} + + + ) : ( + {project.name} + )} + {project.desc} +
+
+

{project.detail}

+
+
+
+ {project.tags.map((tag, i) => ( + {tag} + ))} +
+
+ ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/SUPERCOMMAND.tsx b/src/components/SUPERCOMMAND.tsx new file mode 100644 index 0000000..0d3a538 --- /dev/null +++ b/src/components/SUPERCOMMAND.tsx @@ -0,0 +1,90 @@ +"use client"; +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 ( + + + + + ??? + +
+ +
+
+

{`지금바로 윤회!`} +

+
+
+ + + + +
+ + + + ); +} \ No newline at end of file diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 4350af3..0080c0b 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -25,7 +25,7 @@ export default function TimelineComponent() { return (

🌠 수상 및 교육