[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (5) - 방명록 (feat. Utterances)

블로그를 적으시는 분들이나 여기저기 찾아보면 깃허브와 연동하여 댓글 기능을 구현하는 모습들을 종종 볼 수 있다.

아직 블로그 형식으로 제작하지는 않았지만, 방명록 형식을 통해 해당 기능을 추가해볼까 한다.

 

Utterances를 이용하여 구현한다.

 

1. Github App에 설치한다.

 

2. 사용할 레파지토리를 설정한다.

Utterances는 생성된 레파지토리에 이슈를 생성하여 해당 이슈에 댓글을 다는 형식으로 구성되어 있다. whosbax-dev-comment라는 새로운 레파지토리를 생성하여 설정했다.

 

3. [이름]/[레파지토리] 형식으로 작성한 후, 포스트랑 이슈 매핑, 라벨, 테마를 어떻게 할지 하단에서 선택한다.

현재 내가 작성한 방명록의 pathname은 guestbook으로 지정해뒀다. 여기서 작성/선택한 내용을 바탕으로 새로운 스크립트를 작성해서 전달해준다.

 

 

추가적인 문제점은 script를 Next에 적용해야하는데, 전달된 코드로는 반영할 수가 없다. 해당 댓글 작성은 사용될 곳이 많을 수 있으니 컴포넌트로 생성했다.

"use client";

export default function UtteranceComment() {
    return (
        <section
            ref={elem => {
                if (!elem) {
                    return;
                }
                const existingScript = elem.querySelector(".utterances");
                if (!existingScript) {
                    const scriptElem = document.createElement("script");
                    scriptElem.src = "https://utteranc.es/client.js";
                    scriptElem.async = true;
                    scriptElem.crossOrigin = "anonymous";
                    scriptElem.setAttribute("repo", "whos-bax/whosbax-dev-comment");
                    scriptElem.setAttribute("issue-term", "pathname");
                    scriptElem.setAttribute("label", "comment");
                    scriptElem.setAttribute("theme", "github-light");
                    elem.appendChild(scriptElem);
                }
            }}
        />
    )
}

 

렌더링이 될 때마다 script가 돌면서 .utterances의 클래스명을 가진 div가 중복 생성되는 경우가 있다. 이 경우를 방지하기 위해 existingScript라는 변수로 해당 section 내부에 클래스가 존재하지 않을 경우에만 script를 삽입하여 생성한다.

 

결과

조금 더 유려한 UI를 위해 로딩바는 2s 임의로 띄우게 했다. load 되는 것을 판단하는 것이 더 좋아보인다.

 

 

방명록 남길 수 있는 링크도 추가로.. :)

https://whosbax.netlify.app/guestbook

꿈이 많은 어른 아이 | 박상호

 

 

 

참고

 

https://velog.io/@outstandingboy/Github-%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EB%8C%93%EA%B8%80-%EA%B8%B0%EB%8A%A5-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-ft.-Utterances

[Github] 블로그에 댓글 기능 추가하기 (ft. Utterances)

 

https://github.com/utterance/utterances/issues/161

example for react use · Issue #161 · utterance/utterances