114 lines
3.7 KiB
TypeScript
114 lines
3.7 KiB
TypeScript
import { useState } from "react"
|
|
import { AnimatePresence, motion } from "motion/react"
|
|
import { ChevronDown } from "lucide-react"
|
|
|
|
import { Section } from "@/components/ui/section"
|
|
import { SectionHeading } from "@/components/ui/section-heading"
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { EASE_OUT_EXPO, useFadeUp } from "@/lib/motion"
|
|
|
|
/** 도입 검토 FAQ 아코디언 — 첫 항목 기본 열림, 한 번에 하나만 펼침. */
|
|
export function Faq() {
|
|
const fadeUp = useFadeUp()
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0)
|
|
|
|
return (
|
|
<Section id="faq" width="sm">
|
|
<motion.div {...fadeUp} className="mb-24">
|
|
<SectionHeading
|
|
align="center"
|
|
eyebrow="FAQ"
|
|
title="자주 묻는 질문"
|
|
description="도입 검토에서 가장 많이 받는 질문들입니다."
|
|
descriptionClassName="mt-4 text-[17px]"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="space-y-4">
|
|
{FAQS.map((faq, idx) => (
|
|
<FaqItem
|
|
key={faq.question}
|
|
faq={faq}
|
|
open={openIndex === idx}
|
|
onToggle={() => setOpenIndex(openIndex === idx ? null : idx)}
|
|
delay={0.1 * (idx + 1)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
type FaqEntry = { question: string; answer: string }
|
|
|
|
function FaqItem({
|
|
faq,
|
|
open,
|
|
onToggle,
|
|
delay,
|
|
}: {
|
|
faq: FaqEntry
|
|
open: boolean
|
|
onToggle: () => void
|
|
delay: number
|
|
}) {
|
|
const fadeUp = useFadeUp(delay)
|
|
|
|
return (
|
|
<motion.div {...fadeUp} className="bg-surface rounded-[28px] overflow-hidden">
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
aria-expanded={open}
|
|
className="w-full flex items-center justify-between gap-6 text-left px-8 py-7 cursor-pointer"
|
|
>
|
|
<Typography variant="cardTitle" as="span">
|
|
{faq.question}
|
|
</Typography>
|
|
<motion.span
|
|
animate={{ rotate: open ? 180 : 0 }}
|
|
transition={{ duration: 0.4, ease: EASE_OUT_EXPO }}
|
|
className="text-ink-muted shrink-0"
|
|
aria-hidden
|
|
>
|
|
<ChevronDown className="w-5 h-5" />
|
|
</motion.span>
|
|
</button>
|
|
|
|
<AnimatePresence initial={false}>
|
|
{open && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.5, ease: EASE_OUT_EXPO }}
|
|
className="overflow-hidden"
|
|
>
|
|
<Typography variant="small" className="px-8 pb-8">
|
|
{faq.answer}
|
|
</Typography>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
const FAQS: FaqEntry[] = [
|
|
{
|
|
question: "공급사가 봇과의 협상을 싫어하지 않을까요?",
|
|
answer:
|
|
"오히려 반대입니다. 이 거래들 대부분은 지금껏 협상 테이블에 오르지도 못하던 건입니다. 봇은 24시간 원하는 시간에, 압박 없이, 늘 같은 기준으로 응대합니다. 글로벌 동종 서비스의 공급사 만족도는 82%에 이릅니다.",
|
|
},
|
|
{
|
|
question: "봇이 우리 기준을 벗어나 합의해 버리면요?",
|
|
answer:
|
|
"그럴 수 없습니다. 봇은 견적을 만들 때 정한 목표가와 낙찰 기준 밖으로 나가지 않고, 최종 낙찰 규칙도 사용자가 정합니다.",
|
|
},
|
|
{
|
|
question: "기존 시스템과 연동되나요?",
|
|
answer:
|
|
"별도 연동 없이 바로 시작할 수 있습니다. 상품·공급사 데이터는 엑셀 일괄 업로드로 쉽게 등록되고, ERP 연동은 도입 상담에서 사내 환경에 맞춰 협의합니다.",
|
|
},
|
|
]
|