MoveBuildAdvanced.jsx

import React, { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import * as THREE from "three";

/**
 * MoveBuild — 고급 인터랙션 풀 데모
 *
 * 컨셉: "디자이너가 안 건드린(unstyled)" 흑백 표면 + 괴물 같은 엔진.
 *   색·폰트는 기본값으로 비우고, 정밀함/화려함은 전부 GPU·모션에 몰아넣음.
 *   → "표면은 텅 비었는데 엔진은 미쳤다"는 대비가 셀링 포인트.
 *
 * 들어간 기술:
 *   - Lenis 스타일 관성 스크롤 (여기선 경량 자체 구현 — 아티팩트에 외부 CDN 의존 줄임)
 *   - WebGL 풀스크린 셰이더 배경 (흑백 노이즈/그레인, 마우스+스크롤 반응)
 *   - WebGL 썸네일 평면 (스크롤 속도에 따라 일그러짐 distortion)
 *   - 전체화면 모달 (스프링)
 *   - 스크롤 리빌 (whileInView)
 *   - 반응형 그리드 (CSS Grid auto-fit)
 *
 * 실제 사이트 이식 시: three → @react-three/fiber, 관성 스크롤 → lenis 패키지로 교체.
 */

const PROJECTS = [
  { id: "robot", title: "Mecanum LiDAR Robot", owner: "Robotics & Hardware", tags: ["ROS2", "LiDAR", "Dual Camera"], detail: "ROS2 기반 맵핑·내비게이션·장애물 회피. 메카넘 휠 전방향 주행, 라이다 + 듀얼 카메라 환경 인식. 실물 하드웨어 직접 설계·조립·제어." },
  { id: "platformer", title: "2D Puzzle Platformer", owner: "Game Development", tags: ["Unity", "Game Design"], detail: "Unity 기반 퍼즐 플랫포머. 물리 기반 퍼즐 메커니즘과 레벨 디자인 직접 설계. 캐릭터 컨트롤·스테이지 진행 로직 구현." },
  { id: "liver", title: "How Is Your Liver", owner: "Web", tags: ["Web", "JavaScript"], detail: "사용자 입력 기반 가벼운 웹 서비스. 프론트엔드부터 배포까지 직접 진행." },
  { id: "game3d", title: "3D Game Prototype", owner: "Game Development", tags: ["Unity", "C#"], detail: "Unity + C# 3D 게임 프로토타입. 3D 씬 구성, 카메라 제어, 게임플레이 루프 구현." },
  { id: "arduino", title: "Arduino Motion Device", owner: "Robotics & Hardware", tags: ["Arduino", "Hardware"], detail: "아두이노로 모터·센서 제어하는 실물 장치. 회로 구성부터 펌웨어까지 직접 작성." },
  { id: "adafruit", title: "Web-to-Real Interaction", owner: "Robotics & Hardware", tags: ["IoT", "Adafruit", "Physical Computing"], detail: "에이다프루트 보드로 웹과 물리 세계 연결. 웹 입력이 하드웨어 반응으로, 센서 데이터가 화면으로." },
];

const SKILLS = ["ROS2", "Arduino", "JavaScript", "Unity", "C#", "Robotics", "Adafruit", "Python"];

/* =========================================================
   1) WebGL 풀스크린 셰이더 배경
   흑백 노이즈/그레인 + 마우스/스크롤에 반응해 일렁임.
   색이 없으므로 "질감과 움직임"만으로 엔진감을 줌.
========================================================= */
function ShaderBackground({ scrollVel }) {
  const mountRef = useRef(null);
  const velRef = useRef(0);
  useEffect(() => {
    velRef.current = scrollVel;
  }, [scrollVel]);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return;

    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(mount.clientWidth, mount.clientHeight);
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

    const uniforms = {
      u_time: { value: 0 },
      u_res: { value: new THREE.Vector2(mount.clientWidth, mount.clientHeight) },
      u_mouse: { value: new THREE.Vector2(0.5, 0.5) },
      u_vel: { value: 0 },
    };

    const material = new THREE.ShaderMaterial({
      uniforms,
      vertexShader: `
        void main() { gl_Position = vec4(position, 1.0); }
      `,
      fragmentShader: `
        precision highp float;
        uniform float u_time;
        uniform vec2  u_res;
        uniform vec2  u_mouse;
        uniform float u_vel;

        // 해시 기반 노이즈
        float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }
        float noise(vec2 p){
          vec2 i = floor(p); vec2 f = fract(p);
          float a = hash(i);
          float b = hash(i + vec2(1.0,0.0));
          float c = hash(i + vec2(0.0,1.0));
          float d = hash(i + vec2(1.0,1.0));
          vec2 u = f*f*(3.0-2.0*f);
          return mix(a,b,u.x) + (c-a)*u.y*(1.0-u.x) + (d-b)*u.x*u.y;
        }
        float fbm(vec2 p){
          float v = 0.0; float amp = 0.5;
          for(int i=0;i<5;i++){ v += amp*noise(p); p *= 2.0; amp *= 0.5; }
          return v;
        }

        void main(){
          vec2 uv = gl_FragCoord.xy / u_res.xy;
          vec2 p = uv;
          p.x *= u_res.x / u_res.y;

          // 마우스 + 스크롤 속도가 흐름을 밀어냄
          float warp = u_vel * 0.6;
          vec2 m = (u_mouse - 0.5);
          float n = fbm(p * 3.0 + vec2(u_time*0.05, -u_time*0.04) + m*1.2 + warp);
          float n2 = fbm(p * 6.0 - u_time*0.03 + n);

          // 흑백 그라데이션 — 채도 0, 명도만
          float v = smoothstep(0.2, 0.95, n*0.7 + n2*0.4);
          v = mix(v, 1.0 - v, 0.15);

          // 필름 그레인
          float grain = (hash(gl_FragCoord.xy + u_time) - 0.5) * 0.08;
          v += grain;

          // 아주 옅게 — 콘텐츠 가독성 유지 (배경은 거의 흰색~연회색)
          float shade = mix(0.97, 0.84, v);
          gl_FragColor = vec4(vec3(shade), 1.0);
        }
      `,
    });

    const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
    scene.add(quad);

    const onMouse = (e) => {
      uniforms.u_mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight);
    };
    window.addEventListener("mousemove", onMouse);

    const onResize = () => {
      const w = mount.clientWidth, h = mount.clientHeight;
      renderer.setSize(w, h);
      uniforms.u_res.value.set(w, h);
    };
    window.addEventListener("resize", onResize);

    let raf;
    const clock = new THREE.Clock();
    const loop = () => {
      uniforms.u_time.value = clock.getElapsedTime();
      // 스크롤 속도를 부드럽게 감쇠하며 반영
      uniforms.u_vel.value += (velRef.current - uniforms.u_vel.value) * 0.08;
      renderer.render(scene, camera);
      raf = requestAnimationFrame(loop);
    };
    loop();

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMouse);
      window.removeEventListener("resize", onResize);
      material.dispose();
      quad.geometry.dispose();
      renderer.dispose();
      if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement);
    };
  }, []);

  return (
    <div
      ref={mountRef}
      style={{ position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none" }}
    />
  );
}

/* =========================================================
   2) WebGL 썸네일 평면
   캔버스 안에서 격자 평면을 그리고, 스크롤 속도에 따라
   정점을 일그러뜨림(distortion). 흑백 와이어/면 조합.
========================================================= */
function WebGLThumb({ seed, velRef }) {
  const ref = useRef(null);
  useEffect(() => {
    const mount = ref.current;
    if (!mount) return;
    const w = mount.clientWidth, h = mount.clientHeight;

    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(w, h);
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
    camera.position.z = 3;

    const uniforms = {
      u_time: { value: 0 },
      u_vel: { value: 0 },
      u_seed: { value: seed },
    };

    const geo = new THREE.PlaneGeometry(3.4, 2.0, 48, 32);
    const mat = new THREE.ShaderMaterial({
      uniforms,
      wireframe: false,
      vertexShader: `
        uniform float u_time; uniform float u_vel; uniform float u_seed;
        varying float v_h;
        void main(){
          vec3 p = position;
          float wave = sin(p.x*2.0 + u_time + u_seed*6.28) * 0.12
                     + cos(p.y*3.0 - u_time*0.8 + u_seed*3.0) * 0.08;
          // 스크롤 속도가 일그러짐을 증폭
          wave += u_vel * sin(p.x*4.0 + u_seed*10.0) * 0.5;
          p.z += wave;
          v_h = wave;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
        }
      `,
      fragmentShader: `
        precision highp float;
        varying float v_h;
        void main(){
          // 흑백 — 높이에 따라 명도만
          float shade = 0.25 + smoothstep(-0.3, 0.4, v_h) * 0.6;
          gl_FragColor = vec4(vec3(shade), 1.0);
        }
      `,
    });

    const mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);

    // 와이어프레임 오버레이 (테크 느낌)
    const wire = new THREE.Mesh(
      geo,
      new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, transparent: true, opacity: 0.12 })
    );
    scene.add(wire);

    let raf;
    const clock = new THREE.Clock();
    const loop = () => {
      uniforms.u_time.value = clock.getElapsedTime();
      uniforms.u_vel.value += ((velRef.current || 0) - uniforms.u_vel.value) * 0.1;
      mesh.rotation.y = Math.sin(clock.getElapsedTime() * 0.2 + seed) * 0.15;
      wire.rotation.y = mesh.rotation.y;
      renderer.render(scene, camera);
      raf = requestAnimationFrame(loop);
    };
    loop();

    return () => {
      cancelAnimationFrame(raf);
      geo.dispose(); mat.dispose();
      renderer.dispose();
      if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement);
    };
  }, [seed]);

  return <div ref={ref} style={{ height: 150, width: "100%", background: "#000" }} />;
}

/* 스크롤 진입 리빌 */
function Reveal({ children, delay = 0 }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  );
}

export default function MoveBuildAdvanced() {
  const [selected, setSelected] = useState(null);
  const [scrollVel, setScrollVel] = useState(0);
  const velRef = useRef(0);
  const scrollerRef = useRef(null);

  /* ---- Lenis 스타일 관성 스크롤 (경량 자체 구현) ----
     실제 사이트에선 lenis 패키지로 교체하면 됨. 여기선 외부 의존 없이
     관성 + 속도 추적만 구현해 "손맛"과 셰이더 반응을 보여줌. */
  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    let target = el.scrollTop;
    let current = el.scrollTop;
    let raf;
    let lastV = 0;

    const onWheel = (e) => {
      e.preventDefault();
      target += e.deltaY;
      target = Math.max(0, Math.min(target, el.scrollHeight - el.clientHeight));
    };
    el.addEventListener("wheel", onWheel, { passive: false });

    const loop = () => {
      current += (target - current) * 0.09; // 관성
      el.scrollTop = current;
      const v = (target - current);
      lastV += (v - lastV) * 0.2;
      const norm = Math.max(-1, Math.min(1, lastV / 60));
      velRef.current = norm;
      setScrollVel(norm);
      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => {
      cancelAnimationFrame(raf);
      el.removeEventListener("wheel", onWheel);
    };
  }, []);

  return (
    <div style={{ position: "relative", height: "100vh", overflow: "hidden", background: "#fff" }}>
      <ShaderBackground scrollVel={scrollVel} />

      {/* 안내 바 */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, zIndex: 50,
        background: "#111", color: "#fff", padding: "9px 16px",
        fontFamily: "system-ui, sans-serif", fontSize: 12.5, display: "flex", gap: 14, flexWrap: "wrap",
      }}>
        <strong>ADVANCED DEMO</strong>
        <span style={{ opacity: 0.7 }}>WebGL 셰이더 배경 · 관성 스크롤 · WebGL 썸네일(스크롤 시 일그러짐) · 전체화면 모달</span>
        <span style={{ opacity: 0.5, marginLeft: "auto" }}>휠로 스크롤해봐 — 빠를수록 배경·썸네일이 더 일렁임</span>
      </div>

      {/* 관성 스크롤 컨테이너 */}
      <div
        ref={scrollerRef}
        style={{ position: "absolute", inset: 0, overflowY: "scroll", zIndex: 10 }}
      >
        <div style={{
          maxWidth: 1000, margin: "0 auto", padding: "0 24px 80px",
          fontFamily: "Georgia, 'Times New Roman', serif", color: "#111",
        }}>
          {/* 헤더 */}
          <header style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "60px 0 20px" }}>
            <span style={{ fontSize: 26, fontWeight: "bold" }}>MoveBuild</span>
            <nav style={{ display: "flex", gap: 18, fontSize: 15 }}>
              {["Home", "Projects", "Skills", "Contact"].map((l) => (
                <a key={l} href="#" onClick={(e) => e.preventDefault()} style={{ color: "#0000ee", textDecoration: "underline" }}>{l}</a>
              ))}
            </nav>
          </header>

          {/* 히어로 */}
          <section style={{ padding: "40px 0 70px" }}>
            <motion.h1
              initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}
              style={{ fontSize: 52, margin: 0, lineHeight: 1.05 }}
            >
              We build things that move.
            </motion.h1>
            <motion.p
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3, duration: 0.7 }}
              style={{ fontSize: 18, maxWidth: 470, marginTop: 14 }}
            >
              Two first-year engineering students. Strong on tech, honest about design.
            </motion.p>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              {["See our work", "Find a designer (this could be you)"].map((t) => (
                <motion.button key={t} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}
                  style={{ background: "#fff", border: "1px solid #111", padding: "11px 17px", fontFamily: "inherit", fontSize: 14, cursor: "pointer" }}>
                  {t}
                </motion.button>
              ))}
            </div>
          </section>

          {/* 프로젝트 */}
          <h2 style={{ fontSize: 30, borderBottom: "2px solid #111", paddingBottom: 6 }}>Projects</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(270px, 1fr))", gap: 18, margin: "24px 0 70px" }}>
            {PROJECTS.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 0.08}>
                <motion.div
                  onClick={() => setSelected(p)}
                  whileHover={{ y: -5 }}
                  style={{ border: "1px solid #111", background: "#fff", cursor: "pointer", overflow: "hidden" }}
                >
                  <WebGLThumb seed={i * 1.7} velRef={velRef} />
                  <div style={{ padding: "12px 14px 16px" }}>
                    <h3 style={{ margin: "0 0 8px", fontSize: 18 }}>{p.title}</h3>
                    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                      {p.tags.map((t) => (
                        <span key={t} style={{ fontSize: 11, border: "1px solid #999", padding: "2px 7px", fontFamily: "system-ui, sans-serif" }}>{t}</span>
                      ))}
                    </div>
                  </div>
                </motion.div>
              </Reveal>
            ))}
          </div>

          {/* 스킬 */}
          <h2 style={{ fontSize: 30, borderBottom: "2px solid #111", paddingBottom: 6 }}>Skills</h2>
          <Reveal>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, margin: "22px 0 70px" }}>
              {SKILLS.map((s) => (
                <motion.span key={s} whileHover={{ scale: 1.08 }}
                  style={{ border: "1px solid #111", padding: "7px 14px", fontFamily: "system-ui, sans-serif", fontSize: 14, background: "#fff" }}>
                  {s}
                </motion.span>
              ))}
            </div>
          </Reveal>

          {/* 푸터 */}
          <footer style={{ borderTop: "1px solid #ccc", paddingTop: 24, fontSize: 14, color: "#333" }}>
            <p>Built by developers, no designer involved (yet). The empty seat is yours.</p>
            <div style={{ display: "flex", gap: 16 }}>
              {["Email", "GitHub", "Contact"].map((l) => (
                <a key={l} href="#" onClick={(e) => e.preventDefault()} style={{ color: "#0000ee", textDecoration: "underline" }}>{l}</a>
              ))}
            </div>
          </footer>
        </div>
      </div>

      {/* 전체화면 모달 */}
      <AnimatePresence>
        {selected && (
          <>
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              onClick={() => setSelected(null)}
              style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", zIndex: 60 }} />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, x: "-50%", y: "-50%" }}
              animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
              exit={{ opacity: 0, scale: 0.9, x: "-50%", y: "-50%" }}
              transition={{ type: "spring", stiffness: 320, damping: 30 }}
              style={{
                position: "fixed", top: "50%", left: "50%", width: "min(580px, 92vw)",
                maxHeight: "85vh", overflow: "auto", background: "#fff", border: "1px solid #111", zIndex: 61,
                fontFamily: "Georgia, serif",
              }}
            >
              <WebGLThumb seed={2.2} velRef={velRef} />
              <div style={{ padding: "18px 22px 24px" }}>
                <h3 style={{ margin: "0 0 4px", fontSize: 24 }}>{selected.title}</h3>
                <p style={{ fontStyle: "italic", color: "#555", marginTop: 2 }}>{selected.owner}</p>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", margin: "8px 0 14px" }}>
                  {selected.tags.map((t) => (
                    <span key={t} style={{ fontSize: 11, border: "1px solid #999", padding: "2px 7px", fontFamily: "system-ui, sans-serif" }}>{t}</span>
                  ))}
                </div>
                <p style={{ lineHeight: 1.6, fontSize: 15 }}>{selected.detail}</p>
                <button onClick={() => setSelected(null)}
                  style={{ marginTop: 10, background: "#111", color: "#fff", border: "none", padding: "8px 16px", cursor: "pointer", fontFamily: "system-ui, sans-serif", fontSize: 13 }}>
                  닫기
                </button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}