로고크리의 끄적끄적

ProgressBar + Comment 구현

개발할 부분 선정 이유

ProgressBar

이야 이거 멋있다!

참고용으로 다른 분들의 블로그를 찾아볼때마다 눈에 들어오던것이었다. 사실 막 그닥 필요한 장치는 아니지만 막 어려워 보이지 않아서 만들어보기로 했다

Comment

블로그라면 있어야지!

기술블로그니까! 있어야지! 라는 마음으로 도입해보기로 했다.

ProgressBar

progressbar의 작동원리는 이렇다.

  1. 페이지 로드시 지금 스크롤과 뷰포트를 읽어와 퍼센트로 변환한다.
  2. 스크롤 리스너를 통해 스크롤이 발생할때마다 읽어온다.
  3. 읽어온 스크롤 퍼센트(?)에 따라 ProgressBar의 X를 Translate를 통해 변화시킨다.

전체 코드는 이렇다.

import { useEffect, useState } from "react";
const Progressbar = () => {
  const [percentage, setPercentage] = useState(100);

  const getScrollPercentage = () => {
    const scroll = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    const viewport = scrollHeight - clientHeight;
    const percentage = (scroll / viewport) * 100;
    return setPercentage(percentage);
  };

  useEffect(() => {
    getScrollPercentage();
    window.addEventListener("scroll", getScrollPercentage);
    return () => window.removeEventListener("scroll", getScrollPercentage);
  }, []);
  return (
    <div className="fixed top-0 left-0 right-0">
      <div
        className="bg-red-500 h-1"
        style={{ transform: `translateX(${percentage - 100}%)` }}
      />
    </div>
  );
};
export default Progressbar;

여기서 useEffect 부분을 보면 getScrollPercentage()가 한번 호출 되고 난 뒤 윈도우리스너를 등록하는데 이는 글이 너무 짧아서 스크롤이 발생하지 않는 경우 Progressbar가 0%에서 고정되어있는 현상을 해결하기 위해 작성되었다.

const getScrollPercentage = () => {
  const scroll = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
  const viewport = scrollHeight - clientHeight;
  const percentage = (scroll / viewport) * 100;
  return setPercentage(percentage);
};

이부분은 스크롤을 %로 구하는 부분이다. 스크롤을 viewport값으로 나눠서 퍼센트로 구하는 코드이다.

<div className="fixed top-0 left-0 right-0">
  <div
    className="bg-red-500 h-1"
    style={{ transform: `translateX(${percentage - 100}%)` }}
  />
</div>

tailwindCss 를 사용했으며 fixed top-0 left-0 right-0는 progressbar를 최상단에 고정하는 부분이다.
bg-red-500 h-1는 progressbar를 빨간색으로 하고, 높이를 정하는 부분이다.
style={{transform: `translateX(${(percentage - 100)}%)`}}는 퍼센트에 따라서 길이를 변형시키는 코드이다.
percentage - 100 인 이유는 왼쪽부터 오른쪽으로 진행해야 하기 때문이다. (궁금하면 그냥 percentage해봐라 뭔 소리인지 이해할것이다.)

이렇게 Next.js의 컴포넌트로 구현을 해두었다.

Comment

댓글은 DB를 만들어서 API를 통해 구현해도 되지만 간단한 사이드프로젝트이기때문에 DB구현부터 백앤드 구현은 좀 투머치라고 생각해서 이미 있는 방법들중 Giscus를 이용하기로 했다.

giscus를 이용하는 이유는 다음과 같다.

  1. 일단 공식 문서가 한글화되어있는 점에서 접근성이 편하다.
  2. 깃허브의 토론을 이용하기때문에 깃허브를 사용하는 사람이라면 접근성도, 보기도 좋다.
  3. Next.js용 페키지가 있다...(구현할거 없어서 짱 좋음)

간단하게 사용하는법을 적어두자면
giscus페이지

  1. 깃헙에서 Public으로 레파지토리를 하나 판다(블로그를 배포한다고 파둔 레파지토리가 Public이라면 그냥 그거 써도 된다.)
  2. 토론 탭을 활성화 시킨다.(세팅 들어가서 General에서 쭉 내리다 보면 있다.)
  3. giscus문서에 가서 필요한것들을 적는다.(문서 링크는 위쪽에 있다.)
  4. 나온 값들을 일단 킵해둔다.
  5. giscus 페키지를 설치한다. (React나 Next.js라면 yarn add @giscus/react or npm i @giscus/react) 를 통해 설치할수있다. 6.잘 쓴다.

다음은 전체 코드이다.

import Giscus from "@giscus/react";

const Comment = () => {
  return (
    <div className="border-t-[100px] border-transparent">
      <Giscus
        id="comments"
        repo="내 레파지토리에욧!"
        repoId="내 레파지토리 아이디에욧!"
        category="General"
        categoryId="문서에 기입할거 다 적으면 알아서 나와욧!"
        mapping="pathname"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="top"
        theme="light"
        lang="ko"
        loading="lazy"
      />
    </div>
  );
};

export default Comment;

(진짜 뭐 없다...)

이렇게 구현된 것들은 지금 이 포스트를 보고있는 지금 만나볼수 있다.

그럼 오늘은 이만.. 자자..