유저 피드백을 노션으로 확인해보자

Writeflow의 모든 페이지 오른쪽 하단에는 유저 피드백을 받을 수 있는 피드백 버튼이 있는데요.

이곳에 내용을 입력하고 전송 버튼을 누르면 제 노션에 피드백 내용이 자동으로 추가돼요.

저는 사용자가 어떤 URL에서 피드백을 보냈는지 알고 싶어서 제목을 path로 지정했고, datetime은 자동 생성되도록 노션에서 createdAt 프로퍼티를 추가했습니다.

노션 AI를 사용 중이라면 AI 요약 기능으로 피드백 내용을 한눈에 확인할 수 있어요. 이런걸로 뽕을 뽑아야 합니다. 더 나아가 체크 표시로 완료 처리를 할 수도 있고, 창의력을 발휘해 개쩌는 기능을 만들어볼 수도 있을 것 같아요.

자, 이제 이 기능을 단 몇 줄의 코드로 구현하는 방법을 알려드릴게요.

Notion API

먼저 노션 API 관리 페이지에 접속하세요. "Integration 생성하기" 버튼을 클릭하고 새로운 Integration을 만드세요. 타입은 "Internal"로 설정하고, 권한에서 "페이지 읽기 및 수정"을 체크하세요. 생성이 완료됐다면, API 키를 가져다 사용할 겁니다.

API 서버 만들기

서버는 일 10만회 요청이 무료로 제공되는 Cloudflare Workers가 적합합니다. 전 Workers 예시를 보여드리는데 다른것도 괜찮습니다. Workers가 처음이라면 Cloudflare 회원가입하시고 원하는 폴더에 가셔서 npm create cloudflare@latest 돌려주세요. 그리고 다음 과정을 따라가시면 됩니다.

설치

npm install hono zod @hono/zod-validator @notionhq/client

환경변수

프로젝트 폴더에 .dev.vars 파일(.env 역할)을 만들고 이전에 생성한 API 키와 DB 아이디를 넣어주세요. DB 아이디는 노션에서 피드백을 받을 데이터베이스를 만들고 "링크 공유"를 클릭하면 얻을 수 있는 주소에서 확인할 수 있습니다.

https://www.notion.so/$$$/2b686f73dab841da9bb68787d7c2ae30?v=&pvs=

여기서 $$$ 부분 뒤에 나오는 문자열이 데이터베이스 ID예요. UUID 형태라 대시를 넣어야 할지 고민됐는데, 전 일단 넣었어요. 사실 안 넣어도 될 것 같긴 해요.

NOTION_SECRET=secret
NOTION_FEEDBACK_DB_ID=2b686f73-dab8-41da-9bb6-8787d7c2ae30

npm run cf-typegen

을 한 번 실행시켜주고요. (타입 생성 코드)

서버 코드

src/index.ts

import { Hono } from "hono"
import { Client } from "@notionhq/client"
import { zValidator } from "@hono/zod-validator"
import { z } from "zod"
import { cors } from "hono/cors"

const app = new Hono<{ Bindings: Env }>()

app.use("*", cors({ origin: ["여러분의 클라이언트 주소"], allowMethods: ["GET, POST"] }))

app.post(
	"/feedbacks",
	zValidator(
		"json",
		z.object({
			path: z.string(),
			message: z.string(),
		})
	),
	async (c) => {
		const { path, message } = c.req.valid("json")
		const notion = new Client({ auth: c.env.NOTION_SECRET })
		await notion.pages.create({
			parent: { database_id: c.env.NOTION_FEEDBACK_DB_ID },
			properties: {
				path: {
					title: [{ text: { content: path } }],
				},
			},
			children: [{ paragraph: { rich_text: [{ text: { content: message } }] } }],
		})
		return c.body(null)
	}
)

export default {
	fetch: app.fetch,
}

클라이언트 코드

리액트 코드라면 이런 식으로 작성하면 되는데 여러분의 자유입니다.

function Feedback() {
	return (
		<form>
			<textarea />
			<button onClick={() => {
				fetch("https://YOUR-API.com/feedbacks", {
					method: "POST",
					body: JSON.stringify({
						path: window.location.href,
						message: textArea.current.value
					}),
					headers: {
						"Content-Type": "application/json",
					},
				})
			}}>전송</button>
		</form>
	)
}

끝!

참고로 노션 API는 키당 3분에 1500회 정도 제한이 있으니 염두에 두세요. 물론 제 경우엔 그 한도를 넘길 일이 없어서 그냥 사용하고 있어요.

이 기능을 활용해 유저들이 서로 의견을 주고받는 공간을 만들어볼 수도?

2024/10/24 추가

노션 Form 베타 테스팅이 나왔다. 앞으로 그걸 이용하면 될 것 같다.