🌱 성장일지 8.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

개인 블로그 ProgressBar 구현

블로그에서 브라우저가 제공하는 기본 스크롤을 사용하자니, 스크롤이 생길 때만 width가 좁아지고 사라지면 다시 스크롤의 width만큼 늘어나는 현상이 너무 보기 싫었다.(그에 따라 다른 UI도 변경되기에) 해서 아예 스크롤을 없애는 방향으로 구현을 했는데, 그렇게 한동안 사용하다가 내가 내 글을 읽으면서도 이 글의 어느 지점에 온건지 감이 오질 않았다. 이를 해결하기 위해서 Header에 ProgressBar 컴포넌트를 두고 현재 페이지의 진행 상태를 보여줄 수 있게 구현하였다.

useReadingProgress.ts

• scroll 이벤트에 따라 현재 스크롤의 위치를 계산하여 completion 상태를 업데이트하는 커스텀 훅

import { useEffect, useState } from 'react';

export function useReadingProgress() {
  const [completion, setCompletion] = useState(0);
  useEffect(() => {
    function updateScrollCompletion() {
      const currentProgress = window.scrollY;

      let scrollHeight = document.body.scrollHeight - window.innerHeight;
      if (scrollHeight) {
        setCompletion(Number((currentProgress / scrollHeight).toFixed(2)) * 100);
      }
    }

    window.addEventListener('scroll', updateScrollCompletion);

    return () => {
      window.removeEventListener('scroll', updateScrollCompletion);
    };
  }, []);
  return completion;
}

ProgressBat.tsx

• useReadingProgress 훅을 사용하여 현재 페이지의 진행 상태를 받아와 ProgressBar를 렌더링하는 컴포넌트

'use client';

import { useReadingProgress } from '@/hooks/useReadingProgress';
import { usePathname } from 'next/navigation';

export default function ProgressBar() {
  const completion = useReadingProgress();
  const pathname = usePathname();
  const isHome = pathname === '/';

  return (
    <>
      {isHome || (
        <div className="sticky top-0 z-20">
          <span
            style={{
              transform: `translateX(${completion - 104}%)`,
            }}
            className="bg-jayden-0 absolute bottom-0 h-1 w-screen transition-transform duration-150"
          />
        </div>
      )}
    </>
  );
}

• isHome은 현재 페이지가 Home인지 아닌지를 판단하는 변수이다. Home이 아닐 때만 ProgressBar를 렌더링하도록 하였다.
• useReadingProgress 훅을 사용하기 때문에 use client를 사용하여 클라이언트 컴포넌트로 만들어주었다.

📝 회고

작은 피처지만 조금씩 블로그가 풍성해지는 것 같아서 기분이 좋다. 확실히 나는 유저에게 보여지는 UI/UX를 고민하고 적용하는 게 너무 재미있다. 복잡한 기능은 아니지만 다른 사람들의 코드도 참고하고 내가 직접 구현하면서 계속 배우도록 하자~!

참고

• 추후 찾으면 추가 예정