?kawaii

src/pages/Root.css

@@ -14,3 +14,7 @@
   z-index: 9;
 }
 
+.profile {
+  width: 256px;
+  background-color: transparent;
+}

src/pages/Root.tsx

@@ -1,14 +1,25 @@
 import { useEffect, useState, useMemo } from 'react';  
+import { useLocation } from 'react-router-dom';
 import './Root.css';
 import Help from '../component/help';
 
 function Root() {
-
+  const location = useLocation();
   const name: string[] = useMemo(() => ['imnyang', '아임냥', '암냥', '임냥', '@not.furry_', '@imnyang', '@mahiro_me'], []);
   const [nameIndex, setNameIndex] = useState(0);
+  const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp');
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams(location.search);
+    if (queryParams.has('kawaii')) {
+      setImageSrc('https://f.imnyang.xyz/profile/magic_imnyang.webp');
+    } else {
+      setImageSrc('https://f.imnyang.xyz/profile/imnyang.webp');
+    }
+  }, [location.search]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-          // 단일 키 입력 감지
       console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
       if (event.key === 'l') {
         console.log('Change My Name');
@@ -22,8 +33,10 @@ function Root() {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [name.length, name]);
+
   return (
     <div className='App'>
+      <img src={imageSrc} width={256} className='profile' />
       <h1 style={{color: '#fadfee', fontSize: 60, margin: 0}}>
         {name[nameIndex]}
       </h1>
@@ -43,7 +56,7 @@ function Root() {
       </div>
       <Help />
     </div>
-  )
+  );
 }
 
 export default Root;