퀵스타트

npm install부터 첫 피드백을 고정하기까지, 약 3분이면 충분합니다.

두 가지 방법이 있습니다: 완전 설정(Next.js + Prisma — 프로덕션 형태)과 서버 없는 설정(60초, 모든 것이 브라우저 안에서 이루어짐)입니다.

완전 설정 — Next.js + Prisma

1. 설치

npm i @instafix/widget @instafix/adapter-prisma

Prisma가 이미 설정되어 있어야 하며, @/lib/prisma에 클라이언트 싱글턴이 필요합니다. 아직 없다면 다음과 같이 만드세요:

// src/lib/prisma.ts
import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

2. 스캐폴드 생성

npx @instafix/cli init

두 가지 확인 질문에 모두 동의하세요: CLI가 Prisma 스키마에 InstaFix 모델 두 개를 추가하고, API 라우트(app/api/instafix/route.ts, 또는 src/app/ 구조를 사용한다면 그 아래)를 생성합니다. 그런 다음 스키마를 데이터베이스에 반영하세요:

npx prisma db push

3. 위젯 마운트하기

// 클라이언트 사이드라면 어디서든 — 예: 루트 레이아웃
"use client";
import { useInstaFix } from "@instafix/widget/react";

export function Feedback() {
  useInstaFix({ endpoint: "/api/instafix", projectName: "my-project" });
  return null;
}

개발 서버를 실행하고 화면 오른쪽 아래를 보세요: InstaFix 버튼이 보일 것입니다. 아무 곳에나 사각형을 그리고, 댓글을 입력한 뒤 전송을 누르세요.

위젯은 기본적으로 개발 환경에서는 표시되지만 프로덕션 빌드에서는 절대 표시되지 않습니다 — 이는 의도된 동작입니다: 클라이언트는 dev/staging URL에서 검토하기 때문입니다. 프로덕션 모드로 빌드되는 스테이징 환경이라면 forceShow: true를 전달하세요.

4. 들어온 피드백 트리아지하기

import { InstaFixInbox } from "@instafix/dashboard";

<InstaFixInbox projects="my-project" endpoint="/api/instafix" theme="auto" />

전체 흐름은 이게 전부입니다. 여기서 더 살펴볼 것들: 위젯 옵션 · 스크린샷 · 인증과 보안.

서버 없이 시작하기

백엔드도, 데이터베이스도 필요 없습니다 — 피드백은 방문자의 브라우저 안에 저장됩니다. 프로토타입과 데모에 안성맞춤입니다:

npm i @instafix/widget @instafix/adapter-localstorage

import { initInstaFix } from "@instafix/widget";
import { LocalStorageStore } from "@instafix/adapter-localstorage";

initInstaFix({
  store: new LocalStorageStore(),
  projectName: "my-demo",
  forceShow: true,
});

이 문서 사이트도 정확히 이 설정으로 동작합니다 — 바로 여기서 위젯을 직접 사용해 보세요.