#049 고객 유지율을 200% 끌어올리는 마이크로 인앱 피드백 위젯과 슬랙 실시간 VOC 파이프라인

[고응답 피드백 3대 트리거 시나리오]
1. 작업 성공 직후 (Positive Trigger)
   - 조건: 대량 크롤링 및 AI 분석 리포트 다운로드 3회 이상 완료 시
   - 질문: "오늘 ReviewZip 분석 결과가 도움이 되셨나요? 😊 / 😐 / 🙁"
   - 후속 액션: '😊' 클릭 시 ➡️ "감사합니다! 혹시 추가되었으면 하는 쇼핑몰이 있나요?" 입력창 노출
2. 크롤링 차단/에러 발생 직후 (Negative Trigger)
   - 조건: 백엔드 크롤링 실패 또는 지원하지 않는 URL 에러 팝업 발생 시
   - 질문: "오류가 발생해 죄송합니다. 어떤 상품을 분석하려 하셨나요?" (URL 자동 첨부)
3. 가입 7일 차 대시보드 접속 시 (NPS Metric)
   - 조건: 가입 후 7일간 활동 이력이 있는 활성 유저
   - 질문: "동료 셀러에게 이 도구를 추천할 의향이 있으신가요? (0~10점)"

// components/feedback/InAppFeedbackWidget.tsx
'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
export function InAppFeedbackWidget({ userId, userEmail }: { userId: string; userEmail: string }) {
  const [rating, setRating] = useState<string | null>(null);
  const [comment, setComment] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [isOpen, setIsOpen] = useState(true);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    // 슬랙 웹훅으로 실시간 VOC 전송
    await fetch('/api/feedback/voc', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId, userEmail, rating, comment, page: window.location.pathname }),
    });
    setTimeout(() => setIsOpen(false), 2000);
  };
  if (!isOpen) return null;
  return (
    <div className="fixed bottom-6 right-6 z-40">
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0, y: 20, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 20 }}
          className="w-80 rounded-xl border border-border bg-card p-4 shadow-lg"
        >
          {!submitted ? (
            <div>
              <p className="text-xs font-semibold text-foreground mb-3">
                현재 기능 사용 경험은 어떠신가요?
              </p>
              {!rating ? (
                <div className="flex justify-around text-2xl py-1">
                  {['😍', '😊', '😐', '🙁'].map((emoji) => (
                    <button
                      key={emoji}
                      onClick={() => setRating(emoji)}
                      className="hover:scale-125 transition-transform"
                    >
                      {emoji}
                    </button>
                  ))}
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-2">
                  <textarea
                    value={comment}
                    onChange={(e) => setComment(e.target.value)}
                    placeholder="개선할 점이나 필요한 기능을 적어주세요!"
                    className="w-full h-16 p-2 text-xs border rounded-md resize-none bg-background"
                    autoFocus
                  />
                  <div className="flex justify-end gap-2">
                    <button
                      type="button"
                      onClick={() => setIsOpen(false)}
                      className="text-xs text-muted-foreground px-2 py-1"
                    >
                      닫기
                    </button>
                    <button
                      type="submit"
                      className="text-xs bg-primary text-primary-foreground px-3 py-1 rounded font-medium"
                    >
                      보내기
                    </button>
                  </div>
                </form>
              )}
            </div>
          ) : (
            <p className="text-xs text-center text-primary font-medium py-2">
              소중한 의견 감사합니다! 🚀
            </p>
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

// app/api/feedback/voc/route.ts (슬랙 포워딩 핸들러)
import { NextResponse } from 'next/server';
export async function POST(req: Request) {
  const { userId, userEmail, rating, comment, page } = await req.json();
  const slackMessage = {
    blocks: [
      {
        type: 'section',
        text: {
          type: 'mrkdwn',
          text: `📢 *신규 인앱 VOC 수집 알림*\n*평가:* ${rating} | *페이지:* \`${page}\`\n*유저:* ${userEmail} (\`${userId}\`)\n*내용:* ${comment || '단순 이모지 피드백'}`,
        },
      },
    ],
  };
  await fetch(process.env.SLACK_VOC_WEBHOOK_URL!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(slackMessage),
  });
  return NextResponse.json({ success: true });
}