Haewon Kam
55e3ab02aa
디자인 시스템이 색·활자만 소유하고 간격은 각 섹션 파일에 흩어져 있어, 같은 관계에 값이 여러 개 생겼다. 스크롤할 때 섹션마다 호흡이 달라지던 원인. eyebrow → title 12/20px → 16px title → description 16/20/32px → 20px (display 티어 32px) 머리 → 본문 48~96px 5종 → 56px / 80px(md) 컨트롤 → 본문 56/64px → 48px 리드 → CTA 56/48px → 48px - SectionHeading 이 리듬을 소유하고 HEADING_GAP·CONTROL_GAP·CTA_GAP· DISPLAY_LEAD_GAP 를 노출. 섹션 파일에서 mb-24 같은 값을 직접 쓰지 않는다. - negotiation-demo·final-cta 가 Section/SectionHeading 을 우회해 머리를 직접 조판하고 있었다 — 아이브로우 간격이 이 둘만 20px 이던 원인. 프리미티브로 환원. - SectionHeading 이 eyebrow 없이도 빈 span 을 렌더해 유령 여백이 생기던 버그 수정. - descriptionClassName 의 text-[17px] 중복 선언 제거. lead 변형이 이미 갖고 있는 모바일 축소 단계(text-[16px] sm:text-[17px])를 지우고 있었다. - reinforcement: text-balance 가 쉼표를 넘어 끊던 헤드라인을 <br /> 로 명시. reinforcement 만 gap="none" 인데, 머리가 그리드 셀 안이라 마진이 상쇄되지 않아 items-center 정렬을 밀기 때문. 간격은 그리드 래퍼가 진다. 검증: tsc --noEmit 통과, 프로덕션 빌드 통과. DOM 실측으로 375/868/1440px 전 구간에서 머리→본문·eyebrow→title·컨트롤→본문 값 일치 확인. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
113 lines
3.6 KiB
TypeScript
113 lines
3.6 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}>
|
|
<SectionHeading
|
|
align="center"
|
|
eyebrow="FAQ"
|
|
title="자주 묻는 질문"
|
|
description="도입 검토에서 가장 많이 받는 질문들입니다."
|
|
/>
|
|
</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-card 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:
|
|
"이 건들 대부분은 지금껏 협상 테이블에 오르지도 못하던 거래입니다. 에이전트는 협력사가 편한 시간에, 늘 같은 기준으로 응대합니다. 글로벌 동종 서비스의 공급사 만족도는 82%로 보고됩니다.",
|
|
},
|
|
{
|
|
question: "에이전트가 우리 기준을 벗어나 합의해 버리면요?",
|
|
answer:
|
|
"그럴 수 없습니다. 에이전트는 견적을 만들 때 정한 목표가와 낙찰 기준 밖으로 나가지 않고, 최종 낙찰 규칙도 사용자가 정합니다.",
|
|
},
|
|
{
|
|
question: "기존 시스템과 연동되나요?",
|
|
answer:
|
|
"별도 연동 없이 바로 시작할 수 있습니다. 상품·공급사 데이터는 엑셀 일괄 업로드로 쉽게 등록되고, ERP 연동은 도입 상담에서 사내 환경에 맞춰 협의합니다.",
|
|
},
|
|
]
|