AI 비서에게 얼굴을 만들어줬다 — CSS 애니메이션으로 캐릭터 구현하기

document.addEventListener('mousemove', (e) => {
  const faceRect = face.getBoundingClientRect();
  const faceCX = faceRect.left + faceRect.width / 2;
  const faceCY = faceRect.top + faceRect.height / 2;
  
  const dx = e.clientX - faceCX;
  const dy = e.clientY - faceCY;
  const dist = Math.sqrt(dx*dx + dy*dy);
  const maxMove = 8; // 최대 이동 거리 (px)
  
  const moveX = (dx / Math.max(dist, 1)) * Math.min(dist / 20, maxMove);
  const moveY = (dy / Math.max(dist, 1)) * Math.min(dist / 20, maxMove);
  
  pupilL.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px))`;
  pupilR.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px))`;
});

function getMood() {
  const hour = new Date().getHours();
  if (hour >= 0 && hour < 7) return 'sleepy';
  if (hour >= 7 && hour < 9) return 'waking';
  if (hour >= 9 && hour < 18) return 'happy';
  if (hour >= 18 && hour < 21) return 'happy';
  if (hour >= 21 && hour < 23) return 'sleepy';
  return 'sleepy';
}

function applyMood() {
  const mood = getMood();
  face.className = 'face ' + mood;
  eyeL.className = 'eye left ' + mood;
  eyeR.className = 'eye right ' + mood;
  mouth.className = 'mouth-shape ' + mood;
}

// 1분마다 무드 체크
setInterval(applyMood, 60000);

const clickReactions = [
  { text: '안녕! 👋', duration: 2000 },
  { text: '뭐해? 🤔', duration: 2000 },
  { text: 'ㅋㅋㅋ', duration: 1500 },
  { text: '간지러워 😆', duration: 2000 },
  { text: '일하는 중...', duration: 2000 },
  { text: '커피 ☕', duration: 1500 },
];

document.addEventListener('click', (e) => {
  const faceRect = face.getBoundingClientRect();
  if (e.clientX > faceRect.left && e.clientX < faceRect.right &&
      e.clientY > faceRect.top && e.clientY < faceRect.bottom) {
    
    const reaction = clickReactions[clickCount % clickReactions.length];
    showSpeech(reaction.text, reaction.duration);
    clickCount++;
    
    // 윙크
    eyeR.classList.add('wink');
    cheekL.classList.add('visible');
    cheekR.classList.add('visible');
    setTimeout(() => {
      eyeR.classList.remove('wink');
      cheekL.classList.remove('visible');
      cheekR.classList.remove('visible');
    }, 800);
  }
});

function showSpeech(text, duration = 2000) {
  speech.textContent = text;
  speech.classList.add('show');
  setTimeout(() => speech.classList.remove('show'), duration);
}

function randomAction() {
  const actions = ['wink', 'talk', 'look', 'antenna', 'eq'];
  const action = actions[Math.floor(Math.random() * actions.length)];
  
  switch(action) {
    case 'wink':
      eyeL.classList.add('wink');
      setTimeout(() => eyeL.classList.remove('wink'), 500);
      break;
    
    case 'talk':
      mouth.classList.add('talking');
      eq.classList.add('active');
      const phrases = ['...', '음...', '처리 중', '확인!', '🤖'];
      showSpeech(phrases[Math.floor(Math.random() * phrases.length)], 1500);
      setTimeout(() => {
        mouth.classList.remove('talking');
        eq.classList.remove('active');
      }, 1500);
      break;
    
    case 'look':
      // 눈동자를 랜덤한 방향으로 이동
      const rx = (Math.random() - 0.5) * 16;
      const ry = (Math.random() - 0.5) * 16;
      pupilL.style.transform = `translate(calc(-50% + ${rx}px), calc(-50% + ${ry}px))`;
      pupilR.style.transform = `translate(calc(-50% + ${rx}px), calc(-50% + ${ry}px))`;
      setTimeout(() => {
        pupilL.style.transform = 'translate(-50%, -50%)';
        pupilR.style.transform = 'translate(-50%, -50%)';
      }, 1500);
      break;
    
    case 'antenna':
      antenna.classList.add('alert');
      setTimeout(() => antenna.classList.remove('alert'), 2000);
      break;
    
    case 'eq':
      eq.classList.add('active');
      mouth.classList.add('talking');
      setTimeout(() => {
        eq.classList.remove('active');
        mouth.classList.remove('talking');
      }, 2000);
      break;
  }
}

setInterval(randomAction, 8000);

let ticking = false;
document.addEventListener('mousemove', (e) => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updatePupils(e.clientX, e.clientY);
      ticking = false;
    });
    ticking = true;
  }
});

const recognition = new webkitSpeechRecognition();
recognition.onstart = () => {
  mouth.classList.add('talking');
  eq.classList.add('active');
};
recognition.onend = () => {
  mouth.classList.remove('talking');
  eq.classList.remove('active');
};
recognition.start();