Enhance styling and functionality: add scrollbar styles, update iframe source, adjust project section width, implement MagicalGirl toggle, and create ASCII art HTML page.

src/components/Top.tsx

@@ -1,14 +1,21 @@
 "use client";
-import Sidebar from "@/components/sidebar";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
+import Sidebar from "@/components/sidebar";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 export default function Top() {
   const containerRef = useRef<HTMLDivElement>(null);
   const [randomBg, setRandomBg] = useState(1);
+  const isMobile = useIsMobile();
+  const [clickCount, setClickCount] = useState(0);
+  const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isMagicalGirlEnabled, setIsMagicalGirlEnabled] = useState(false);
+  const REQUIRED_CLICKS = 6;
 
   useEffect(() => {
     setRandomBg(Math.floor(Math.random() * 14) + 1);
+    setIsMagicalGirlEnabled(document.cookie.includes('MagicalGirl=true'));
   }, []);
 
   const requestPermission = async () => {
@@ -18,8 +25,8 @@ export default function Top() {
       window.addEventListener("deviceorientation", handleDeviceOrientation);
 
     try {
-      const res = await (DeviceOrientationEvent as any).requestPermission();
-      if (res === "granted") {
+      const permission = await (DeviceOrientationEvent as unknown as { requestPermission: () => Promise<string> }).requestPermission();
+      if (permission === "granted") {
         window.addEventListener("devicemotion", handleDeviceMotion);
         window.addEventListener("deviceorientation", handleDeviceOrientation);
       }
@@ -51,6 +58,36 @@ export default function Top() {
     bg.style.backgroundPosition = `${50 - x * 3}% ${50 - y * 3}%`;
   };
 
+  const handleBackgroundTouchClick = () => {
+    if (!isMobile) return;
+    
+    setClickCount((prev) => {
+      const newCount = prev + 1;
+      
+      // Clear existing timeout
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current);
+      }
+      
+      // Check if required clicks reached
+      if (newCount >= REQUIRED_CLICKS) {
+        const newValue = !isMagicalGirlEnabled;
+        setIsMagicalGirlEnabled(newValue);
+        
+        document.cookie = `MagicalGirl=${newValue}; path=/; max-age=${60 * 60 * 24 * 365}`;
+        window.location.reload();
+        return 0;
+      }
+      
+      // Reset click count after 1 second if not enough clicks
+      clickTimeoutRef.current = setTimeout(() => {
+        setClickCount(0);
+      }, 1000);
+      
+      return newCount;
+    });
+  };
+
   useEffect(() => {
     return () => {
       window.removeEventListener("deviceorientation", handleDeviceOrientation);
@@ -62,10 +99,10 @@ export default function Top() {
     <section
       id="top"
       className="snap-start h-screen w-full relative"
-      // onWheel={(e) => {
-      //   e.preventDefault();
-      //   window.scrollBy(0, window.innerHeight * (e.deltaY > 0 ? 1 : -1));
-      // }}
+    // onWheel={(e) => {
+    //   e.preventDefault();
+    //   window.scrollBy(0, window.innerHeight * (e.deltaY > 0 ? 1 : -1));
+    // }}
     >
       <Sidebar />
       <div
@@ -74,6 +111,10 @@ export default function Top() {
         style={{
           backgroundImage: `url('/background/${randomBg}.avif')`,
         }}
+        role="button"
+        tabIndex={0}
+        aria-label="Toggle MagicalGirl mode on mobile"
+        onClick={handleBackgroundTouchClick}
         onMouseMove={(e) => {
           const { clientX, clientY } = e;
           const { innerWidth, innerHeight } = window;
@@ -90,15 +131,17 @@ export default function Top() {
           }
         }}
       >
-        {/* <Image
-          src={"/char.avif"}
-          alt="character"
-          width={4096}
-          height={4096}
-          className="w-[50vh] lg:w-[30vw] translate-y-[10%] transition-transform duration-100 ease-out"
-          unoptimized
-          onClick={requestPermission}
-        /> */} {/* 이제 그런 애는 없어 */}
+        {isMagicalGirlEnabled && (
+          <Image
+            src={"/char.avif"}
+            alt="character"
+            width={4740}
+            height={7584}
+            className="w-[50vh] lg:w-[30vw] translate-y-[10%] transition-transform duration-100 ease-out"
+            unoptimized
+            onClick={requestPermission}
+          />
+        )}
       </div>
     </section>
   );