/** * 인지검사 안내 화면 — 검사 시작 전 스크린샷·설명·소요시간 표시 (PPTX 기반) */ import { Navigate, useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { CNT_TEST_LIST } from '../data/tests'; /** 검사별 실행화면 스크린샷 경로 (public/images/intro/) */ const INTRO_IMAGES: Record = { mc: '/images/intro/mc.png', ep: '/images/intro/ep.png', cst: '/images/intro/cst.png', nb: '/images/intro/nb.png', mr: '/images/intro/mr.png', }; const Card = styled.div` background: var(--pcnt-card); border-radius: var(--pcnt-border); overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); `; const PreviewImg = styled.img` width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; `; const Body = styled.div` padding: 20px 16px 24px; `; const Title = styled.h2` font-size: 20px; font-weight: 800; margin-bottom: 8px; `; const Desc = styled.p` font-size: 14px; line-height: 1.6; color: var(--pcnt-text-sub); margin-bottom: 16px; `; const DurationPill = styled.span` display: inline-flex; align-items: center; gap: 4px; background: #eef1ff; color: var(--pcnt-primary-dark); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; margin-bottom: 24px; `; const BackBtn = styled.button` font-size: 14px; color: var(--pcnt-text-sub); margin-bottom: 12px; `; export default function TestIntro() { const { slug } = useParams<{ slug: string }>(); const nav = useNavigate(); const meta = CNT_TEST_LIST.find((t) => t.route === slug); if (!meta) return ; const imgSrc = INTRO_IMAGES[meta.route]; return ( <> nav('/test', { replace: true })}> ← 뒤로가기 {imgSrc && } {meta.title} 테스트 {meta.description} ⏱ 약 {meta.duration}분 ); }