# Nuxt로 인앱 피드백 폼 만들기 > Nuxt 인앱 피드백 폼입니다. 서버 라우트가 사용자 세션을 읽고 Referer에서 페이지를 가져오며, JavaScript가 로드되지 않았을 때도 동작합니다. 2026-10-25 게시 · https://ikiform.com/ko/guides/feedback-form/nuxt 질문 두 개짜리 폼을 `server/api/feedback.post.ts`의 Nuxt 서버 라우트로 POST하세요. 라우트는 nuxt-auth-utils의 `getUserSession`으로 로그인한 사용자를 읽고, 요청의 `Referer`에서 페이지를 가져오고, Zod로 점수를 검증한 뒤 `runtimeConfig`에 둔 시크릿 키로 모두 폼 백엔드에 전달합니다. JavaScript가 있으면 폼은 `$fetch`로 POST하고 그 자리에 머물며, 없으면 같은 라우트가 결과를 URL에 담아 원래 페이지로 리디렉션합니다. [메인 가이드의 Nuxt 탭](https://ikiform.com/ko/guides/feedback-form.md#form)은 방문하는 누구에게서나 페이지 피드백을 받습니다. 계정이 있는 Nuxt 앱 안에서는 할 일이 좁아지고 데이터는 풍부해집니다. 사용자가 로그인해 있고, 서버는 그가 누구인지 알고, 라우터는 어느 화면에 있는지 압니다. 이 페이지는 그 버전을 만듭니다. 키, 허용 도메인 등 나머지 제품 설정은 [Nuxt 문서 가이드](https://ikiform.com/ko/docs/guides/nuxt.md)에 있습니다. ## 로그인한 Nuxt 앱에서 달라지는 점 공개 폼에서는 무엇이 저장될지 브라우저가 정합니다. 여기서 브라우저가 정하는 것은 점수와 코멘트뿐입니다. 누가, 어디서인지를 말하는 모든 것은 아무도 편집할 수 없는 서버 라우트가 추가합니다. | 필드 | 설정 주체 | 방법 | | --- | --- | --- | | `rating`, `comment` | 사용자 | 라디오 버튼과 텍스트 상자 | | `user_id`, `email` | 서버 라우트 | `getUserSession(event)`가 봉인된 세션 쿠키를 읽음 | | `page` | 서버 라우트 | 브라우저가 같은 origin POST에 전체 경로와 함께 보내는 `Referer` 헤더 | | `screen` | 컴포넌트, 라우트가 확인 | 페이지 파일 경로로 Nuxt가 만드는 `useRoute().name`, 예: `projects-id-settings` | Nuxt에서 라우트 이름은 공짜로 얻는 그룹 키입니다. 모든 프로젝트의 설정 페이지가 `projects-id-settings`를 공유하므로, `page`에 정확한 주소를 남기면서 화면별로 점수 평균을 낼 수 있습니다. 다이어그램: 하나의 Nuxt 서버 라우트가 JavaScript 유무에 따라 피드백을 처리하는 방식 1. 하이드레이션 후에는 컴포넌트가 기본 제출을 막고 $fetch로 필드를 JSON으로 POST합니다. 2. 서버 라우트가 Origin을 확인하고, 세션에서 사용자를 읽고, 점수를 검증하고, Referer의 페이지를 추가합니다. 3. runtimeConfig의 시크릿 키로 답변을 Ikiform에 전달합니다. 4. JSON 요청은 { sent: true }나 메시지가 담긴 오류를 받고, 폼이 그 자리에서 업데이트됩니다. 5. 하이드레이션 전에는 브라우저가 직접 폼을 POST합니다. 라우트는 같은 확인과 같은 POST를 실행합니다. 6. 그런 다음 결과를 쿼리 문자열에 담아 303으로 원래 페이지로 돌려보내고, 컴포넌트가 이를 표시합니다. 라우트는 요청의 content type으로 둘을 구분합니다. 두 경로 모두 정확히 같은 답변을 저장합니다. ## 프로젝트 설정 Nuxt 4의 구조를 써서 앱 코드는 `app/` 아래, 서버 코드는 루트에 둡니다. `nuxt-auth-utils`와 `zod`를 설치하세요. 앱에서 이미 다른 방식으로 로그인을 처리한다면 그대로 두고 라우트에서 자체 세션으로부터 사용자를 읽으세요. `프로젝트 트리`: ```text app/ components/FeedbackForm.vue pages/projects/[id]/settings.vue server/ api/feedback.post.ts shared/ types/auth.d.ts nuxt.config.ts .env ``` `runtimeConfig`에 빈 기본값으로 시크릿 키를 선언하세요. Nuxt가 런타임에 `NUXT_IKIFORM_SECRET_KEY`에서 값을 채우며, 키가 `public` 아래에 있지 않으므로 서버에만 존재합니다. `nuxt.config.ts`: ```ts export default defineNuxtConfig({ modules: ["nuxt-auth-utils"], runtimeConfig: { ikiformSecretKey: "", }, }); ``` `.env`: ```bash NUXT_IKIFORM_SECRET_KEY=ik_sk_your_secret_key NUXT_SESSION_PASSWORD=at-least-32-characters-long-random-string ``` **API keys**에서 `submissions:write` 스코프로 키를 만드세요. nuxt-auth-utils는 최소 32자인 `NUXT_SESSION_PASSWORD`로 세션 쿠키를 봉인하며, 개발 중에는 첫 실행 시 자동으로 하나 써 줍니다. `session.user.id`에 타입이 붙도록 사용자 형태를 알려 주세요. `shared/types/auth.d.ts`: ```ts declare module "#auth-utils" { interface User { id: string; email: string; } } export {}; ``` 그런 다음 폼의 **Fields** 탭에 정의를 붙여 넣으세요. 처음 두 필드가 폼이고 나머지는 서버 라우트가 추가하며, `email` 필드 덕분에 각 알림의 **Reply**가 사용자에게 갑니다. 폼: In-app feedback - **이 화면은 어떠신가요?** (`rating`, rating, 필수) - **무엇이 더 좋아지면 될까요?** (`comment`, textarea) - **페이지** (`page`, url) - **화면** (`screen`, text) - **사용자** (`user_id`, text) - **이메일** (`email`, email) 미리보기는 Ikiform의 검증기를 실행하므로 점수 `6`을 넣으면 라우트가 돌려받을 `422`가 표시됩니다. ## 만들기 ### 서버 라우트 `server/api/feedback.post.ts`: ```ts import { z } from "zod"; const Feedback = z.object({ rating: z.coerce.number().int().min(1).max(5), comment: z.string().trim().max(4000).default(""), screen: z.string().regex(/^[a-z0-9_-]{1,120}$/).catch("unknown"), _gotcha: z.string().default(""), }); function pageFrom(referer: string | undefined) { try { const url = new URL(referer ?? ""); return url.origin + url.pathname; } catch { return ""; } } export default defineEventHandler(async (event) => { const own = getRequestURL(event, { xForwardedHost: true }); if (getRequestHeader(event, "origin") !== own.origin) { throw createError({ status: 403, message: "Posts from other sites are refused." }); } const wantsJson = getRequestHeader(event, "content-type")?.includes("application/json") ?? false; const referer = getRequestHeader(event, "referer"); const back = (outcome: string) => { const target = new URL(referer ?? "/", own.origin); return sendRedirect(event, `${target.pathname}?feedback=${outcome}`, 303); }; const session = await getUserSession(event); if (!session.user) { if (wantsJson) throw createError({ status: 401, message: "Your session ended. Sign in again, then send it." }); return back("signed-out"); } const parsed = await readValidatedBody(event, (body) => Feedback.safeParse(body)); if (!parsed.success) { if (wantsJson) throw createError({ status: 422, message: "Pick a score from 1 to 5." }); return back("invalid"); } const { ikiformSecretKey } = useRuntimeConfig(event); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${ikiformSecretKey}`, Origin: own.origin, }, body: JSON.stringify({ ...parsed.data, page: pageFrom(referer), user_id: session.user.id, email: session.user.email, }), signal: AbortSignal.timeout(8000), }).catch(() => null); const result = await response?.json().catch(() => null); if (result?.ok) return wantsJson ? { sent: true } : back("sent"); if (wantsJson) { throw createError({ status: 502, message: result?.error?.message ?? "We couldn't send it. Try again." }); } return back("failed"); }); ``` - `.post.ts` 접미사는 파일이 `POST`에만 응답하게 합니다. - Origin 확인이 가장 먼저 실행됩니다. `readValidatedBody`가 쓰는 `readBody`는 urlencoded 본문도 파싱하므로, 이 확인이 없으면 다른 사이트가 사용자의 쿠키가 붙은 일반 폼을 이 라우트로 POST할 수 있습니다. - `getUserSession`은 예외를 던지지 않습니다. 응답은 라우트가 직접 고릅니다. `$fetch`에는 `401`, 일반 POST에는 리디렉션입니다. `requireUserSession`은 JavaScript가 없는 사용자에게 `401` 페이지를 보냅니다. - `z.coerce.number()`는 urlencoded `"4"`를 `4`로 바꿉니다. `.catch("unknown")`은 형식이 잘못된 `screen`을 답변 전체를 거부하지 않고 `unknown`으로 저장합니다. - `back`은 `Referer`의 경로만 남기므로 리디렉션이 사이트 밖으로 나갈 수 없습니다. ### 컴포넌트 `app/components/FeedbackForm.vue`: ```vue