Next.js로 포트폴리오 만들기

Lyket 라이브러리

Lyket 라이브러리 를 이용하면 따로 백엔드와의 API 통신 없이 좋아요 기능을 구현할 수 있다.

  1. Installation
yarn add @lyket/react

or

npm install @lyket/react
  1. 가장 상위 컴포넌트에 Provider component 추가하기
  • next.js에서는 _app.tsx 가 가장 상위 컴포넌트이다.
  • Lyket 공식 홈페이지 회원가입 후 public API를 얻어야한다.
import { Provider } from "@lyket/react";

<ThemeProvider attribute="class">
        <Layout>
          <Provider apiKey="회원가입 후 얻는 public API">
            <Component {...pageProps} />
          </Provider>
        </Layout>
      </ThemeProvider>

나는 기존에 다크모드 라이브러리도 사용하고 있기 때문에 다크모드 내부에 provider 컴포넌트를 감싸주었다.

image

  1. 사용할 컴포넌트에 코드를 추가한다.
  • 공식 홈페이지 에서 제공하는 코드를 덧붙인다. 그리고 개인적으로 커스텀을 하고 싶다면, 코드를 수정한다.
  • 나는 개인적인 svg를 사용하였고, svg코드에 fill={userLiked ? "red" : "currentColor"} 코드를 작성하여, user가 liked했을 때, 이미지 색이 변하도록 했다.
import { LikeButton } from "@lyket/react";

                 <LikeButton
                    id="like"
                    namespace={"faq"}
                    hideCounterIfLessThan={1}
                  >
                    {({
                      handlePress,
                      totalLikes,
                      userLiked,
                      isLoading,
                      isCounterVisible,
                    }) => (
                      <>
                        <button
                          onClick={handlePress}
                          disabled={isLoading}
                          className=" rounded-full w-10 h-10 bg-gray-100 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4"
                        >
                          <svg
                            fill={userLiked ? "red" : "currentColor"}
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            className="w-5 h-5"
                            viewBox="0 0 24 24"
                          >
                            <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
                          </svg>
                        </button>
                        <div className="inline-flex justify-center ml-3 mt-1">
                          {totalLikes}
                        </div>
                      </>
                    )}
                  </LikeButton>

[중요] 컴포넌트 재사용시 기능이 함께 작동되지 않도록 컴포넌트 식별자 만들어주기.

컴포넌트가 재사용될 때마다 기능이 모두 동작하게 된다.

예를 들어, Lyket 기능이 있는 컴포넌트를 A와 B 두 개 만들었다면, A에서 좋아요를 눌렀을 때 B에도 적용이 되는 것을 말한다.

이때, 이를 해결하기 위해서 A와 B에서 각각 Lyket 컴포넌트를 생성해주어야 한다. 이렇게 하면 각각의 컴포넌트에서 Lyket 기능이 독립적으로 동작할 수 있다.

Lyket 컴포넌트에 고유한 식별자를 보내려면, namespaceId 속성을 사용해야 한다. namespaceId는 Lyket 서버에서 해당 컴포넌트의 식별자로 사용된다.

                 <LikeButton
                    id="like"
                    namespace={data.id}
                    hideCounterIfLessThan={1}
                  >

이렇게 namespace 에 notionAPI로 받아들이고 있는 data의 고유한 id값을 이용해서 고유한 컴포넌트 LikeButton을 만들었다.

완성

image image