포트폴리오의 동적 테마 시스템 구현하기

내용

포트폴리오에서 Work Experience 섹션만 다크 테마로 표시하고, 다른 섹션은 라이트 테마를 유지하고 싶었습니다. 단순한 토글 방식이 아닌, 스크롤 위치에 따라 자동으로 테마가 변경되는 시스템이 필요했습니다.

해결 과정

1. 스크롤 기반 테마 감지 로직

useEffect(() => {
  const handleScroll = () => {
    const scrollPosition = window.scrollY
    const workElement = document.getElementById("work-experience")
    
    if (workElement && scrollPosition + 500 >= workElement.offsetTop) {
      setIsDarkTheme(true)
    } else {
      setIsDarkTheme(false)
    }
  }
  
  window.addEventListener("scroll", handleScroll)
  return () => window.removeEventListener("scroll", handleScroll)
}, [])

2. 글로벌 배경 시스템

<motion.div
  className="fixed inset-0 z-0"
  initial={{ opacity: 0 }}
  animate={{ opacity: isDarkTheme ? 1 : 0 }}
  transition={{ duration: 0.8, ease: "easeInOut" }}
  style={{
    background: 'linear-gradient(135deg, rgb(15 23 42) 0%, rgb(30 41 59) 50%, rgb(51 65 85) 100%)'
  }}
/>

3. 조건부 스타일링

className={`transition-colors duration-500 ${
  isDarkTheme ? "text-white" : "text-amber-900"
}`}

핵심 포인트

• 500px 미리 감지: 자연스러운 전환을 위해 섹션 도달 500px 전부터 테마 변경
• Fixed 포지션 배경: 모든 섹션에서 일관된 배경 제공
• 부드러운 전환: 0.5-0.8초 duration으로 자연스러운 색상 변화

배운 점

스크롤 이벤트 최적화와 조건부 렌더링을 통해 부드러운 UX를 제공할 수 있었습니다. 특히 미리 감지하는 로직이 사용자 경험에 큰 차이를 만들었습니다.