f03c6a5b90
- 랜딩 샘플 리포트·AI 답변 예시·문의 서식 예시를 가상 A성형외과로 바꾼다 (discovery_sample, 고정 시드 무작위 판정) - VITE_SITE=discovery 배포는 랜딩·요금·로그인·약관만 연다. 실제 병원 진단 결과와 내부 화면 경로는 홈으로 돌린다 - src/data·src/services 를 부수효과 없는 모듈로 표시해 쓰지 않는 실제 병원 목업이 공개 번들에서 빠지게 한다 - 공개 배포 번들에 GEMINI_API_KEY 를 넣지 않는다 - 헤더 Product·Use Cases 는 공개 배포에서 숨기고, 푸터에 개인정보처리방침·이용약관 페이지를 연결한다 - 기준표 설명의 실제 병원 예시 문구를 일반 예시로 바꾼다 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
/**
|
||
* AI 답변 목업 카드 — 히어로 우측.
|
||
* ⚠️ 정직성 규약: 이 카드는 실제 AI 답변이 아니라 "구축 후 목표 상태 예시"다.
|
||
* 라벨을 절대 제거하지 않는다 (현재 상태로 오인 금지).
|
||
*/
|
||
import { motion } from 'motion/react';
|
||
|
||
// 예시 카드라 실제 병원 도메인을 쓰지 않는다. 병원 사이트 자리는 일반 명칭으로 둔다.
|
||
const CITED_DOMAINS = ['병원 공식 홈페이지', 'gangnamunni.com', 'youtube.com'];
|
||
|
||
interface AiAnswerMockProps {
|
||
clinicName: string;
|
||
/** 기준표 항목 수 (재측정 문구에 사용) */
|
||
criteriaCount: number;
|
||
}
|
||
|
||
export default function AiAnswerMock({ clinicName, criteriaCount }: AiAnswerMockProps) {
|
||
const protocolPoints = [
|
||
`루프 1회전(8주)마다 ${criteriaCount}개 항목을 재측정해 점수를 갱신합니다.`,
|
||
'질의 10개 × 5회 스팟체크로 인용 여부를 신뢰구간과 함께 보고합니다.',
|
||
'측정 결과가 다음 사이클의 구축 우선순위를 자동으로 정합니다.',
|
||
];
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 24 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="glass-card px-8 py-7 flex flex-col justify-center text-left"
|
||
>
|
||
<div className="text-[13px] font-bold tracking-[0.2em] text-accent mb-5">
|
||
THE OUTPUT · AI 답변 인용
|
||
</div>
|
||
|
||
{/* 질의 */}
|
||
<div className="flex items-center gap-2.5 pb-4 border-b border-[#eef0f7] mb-4">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||
<circle cx="9" cy="9" r="5.5" stroke="#64748b" strokeWidth="1.5" />
|
||
<path d="M13.5 13.5 17 17" stroke="#64748b" strokeWidth="1.5" strokeLinecap="round" />
|
||
</svg>
|
||
<span className="ui-body font-medium">
|
||
강남에서 안전하게 가슴성형 상담받을 수 있는 병원 추천해줘
|
||
</span>
|
||
</div>
|
||
|
||
{/* 목표 상태의 답변 예시 */}
|
||
<p className="text-[15px] leading-[1.8] text-slate-600 mb-4 break-keep">
|
||
의료진 14명의 약력을 공개한{' '}
|
||
<span className="bg-[#F3F0FF] text-[#4A3A7C] font-semibold px-1.5 py-0.5 rounded-md">
|
||
{clinicName}
|
||
</span>
|
||
는 후기 7,800여 건이 공개되어 있고, 시술별 FAQ와 회복 일정표를 제공합니다.
|
||
</p>
|
||
|
||
{/* 인용 도메인 칩 + 목표 상태 라벨 (제거 금지) */}
|
||
<div className="flex items-center flex-wrap gap-2 mb-6">
|
||
{CITED_DOMAINS.map((domain) => (
|
||
<div key={domain} className="px-3 py-[5px] bg-[#EFF0FF] border border-[#C5CBF5] rounded-full">
|
||
<span className="text-[12.5px] font-medium text-[#3A3F7C]">{domain}</span>
|
||
</div>
|
||
))}
|
||
<span className="text-[12.5px] text-slate-400 ml-1.5">AEO / GEO 구축 후 목표 상태 예시</span>
|
||
</div>
|
||
|
||
{/* 측정 프로토콜 */}
|
||
<div className="border-t border-[#eef0f7] pt-[18px] flex flex-col gap-2.5">
|
||
{protocolPoints.map((point) => (
|
||
<div key={point} className="flex items-center gap-2.5">
|
||
<span className="w-[7px] h-[7px] shrink-0 bg-[#9B8AD4] rounded-full" />
|
||
<span className="text-sm text-slate-600 break-keep">{point}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|