Next.js 애플리케이션을 위한 피드백 위젯 – Upstash Redis로 사용자 피드백 수집하기

사용자 피드백은 제품의 방향을 결정하는 데 가장 중요한 자료 중 하나입니다. 이번에 소개할 위젯은 사용자로부터 직접 피드백을 수집할 수 있도록 도와주는 도구입니다. 이 위젯은 React 컴포넌트로 구현되어 있으며, 내부적으로 Next.js API를 백엔드로 호출합니다. 백엔드 API는 전달받은 피드백 데이터를 Upstash Redis 데이터베이스에 저장하며, 제출된 데이터는 Upstash Console의 Integrations 페이지에서 언제든지 조회하고 관리할 수 있습니다.

컴포넌트를 Next.js 페이지에 추가하기만 하면 화면 오른쪽 하단에 아이콘이 표시됩니다. 아이콘을 클릭하면 피드백 입력 폼이 열립니다. 실제 동작 모습은 데모 페이지에서 확인해 보세요.

전체 코드는 GitHub 저장소에서 살펴볼 수 있습니다. 현재 이 위젯은 Next.js 애플리케이션 전용으로 설계되어 있으며, Nuxt, SvelteKit, Remix 등 다른 프레임워크 지원을 위한 기여도 환영합니다.

설치 방법

먼저 필요한 의존성을 설치합니다:

npm install @upstash/feedback @upstash/redis

컴포넌트와 스타일을 적용합니다:

// pages/_app.js

import "@upstash/feedback/dist/style.css";
import FeedbackWidget from "@upstash/feedback";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <FeedbackWidget type="full" />
      <Component {...pageProps} />
    </>
  );
}

아래 API 코드를 pages/api/feedback.js 파일에 복사해 붙여넣습니다:

// pages/api/feedback.js

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "UPSTASH_REDIS_REST_URL",
  token: "UPSTASH_REDIS_REST_TOKEN",
});

export default async function FeedbackWidgetAPI(req, res) {
  try {
    await redis.hset("feedback", { [Date.now().toString()]: req.body });

    return res.status(200).json({ message: "success" });
  } catch (err) {
    return res.status(400).json({ message: err });
  }
}

Upstash에서 Redis 데이터베이스를 생성한 뒤, UPSTASH_REDIS_REST_URL과 UPSTASH_REDIS_REST_TOKEN 값을 교체하세요. 두 값은 Upstash Console의 데이터베이스 상세 페이지에서 확인할 수 있습니다.

관리자 대시보드

Upstash Console에는 Integrations > Feedback Widget 메뉴가 마련되어 있어, 제출된 피드백을 한눈에 확인하고 관리할 수 있습니다.

설정 옵션

user: user 필드에 사용자 ID나 이메일을 전달하면, 사용자가 이메일을 직접 입력하지 않아도 됩니다.

<FeedbackWidget type="full" user={currentUser.email} />

익명으로 피드백을 받고 싶다면 임의의 문자열을 user 값으로 지정해 이메일 입력란을 숨길 수 있습니다.

<FeedbackWidget type="full" user="anything" />

metadata: metadata 필드를 활용하면 추가 정보를 함께 전송할 수 있습니다.

showOnInitial: true로 설정하면 페이지가 처음 로딩될 때 피드백 입력 창이 바로 표시됩니다.

마무리

여러분의 관심에 따라 앞으로도 새로운 컴포넌트를 만들어갈 계획입니다. GitHub 저장소에 기여하거나 이슈와 기능 요청을 자유롭게 남겨 주세요. 최신 소식은 Twitter와 Discord에서 확인하실 수 있습니다.