// v5 — Capability, Catalogue, Metrics, Contact CTA, Footer // ══ 공정별 사진 — V4_CAPABILITY 순서(01~04)와 1:1 대응합니다 ══ // null 이면 드래그앤드롭 업로드 슬롯으로 표시됩니다. // ⚠ 이 자리는 세로형 박스(대략 3:4)입니다. 가로로 긴 사진을 넣으면 // object-fit:cover 가 양옆을 잘라내 내용이 사라집니다. 세로 크롭을 쓰세요. const CAP_MEDIA_5 = [ 'photos/site/inhouse-rig-clean.webp', // 01 조립식 건물 부속자재 — 자체 제작 성형 설비 'photos/factory/spare-cnc-interior-alt.webp', // 02 정밀 CNC선반 가공 — 선반 내부 'photos/site/press-pca160-clean.webp', // 03 금형 · 프레스 가공 — PCA-160 프레스 'products/delivery-welding-bright.webp', // 04 용접 제작 · 조립 — 용접 작업 ]; // ══ 회사 소개(Company) 배경 사진 — 히어로처럼 순차 전환됩니다 ══ const COMPANY_MEDIA_5 = [ { src: 'photos/factory/spare-press-wide.webp', ko: '프레스 설비', en: 'Press shop' }, { src: 'photos/factory/spare-cnc-lathe-exterior.webp', ko: 'CNC선반 설비', en: 'CNC turning centre' }, { src: 'photos/site/bandsaw-band.webp', ko: 'NC 자동 절단 설비', en: 'NC cut-off saw' }, { src: 'photos/site/weld-line-band.webp', ko: '용접 · 성형 설비', en: 'Welding & forming line' }, ]; // ═════════ CAPABILITY — numbered rows over a fixed media column ═════════ function Capability5() { const t = useV4(); const ko = t.lang !== 'en'; const [act, setAct] = useState(0); return ( Capability
{ko ? <>도면부터 완성품까지
공정을 자체 보유합니다. : <>Drawing to finished part,
every process in-house.}
{V4_CAPABILITY.map((c, i) => (
setAct(i)} onFocus={() => setAct(i)} tabIndex={0} style={{ position: 'relative', padding: 'clamp(22px,2.8vh,34px) 0 clamp(22px,2.8vh,34px) clamp(10px,1.4vw,18px)', borderTop: `1px solid ${D.line2}`, background: act === i ? 'rgba(237,235,231,0.03)' : 'transparent', transform: act === i ? 'translateX(5px)' : 'translateX(0)', transition: 'background .5s ease, transform .55s cubic-bezier(.2,.7,.3,1)', outline: 'none', cursor: 'default', height: '100%', }}> {/* 활성 행 왼쪽 강조 바 — 위에서 아래로 자라납니다 */} {c.n}

{ko ? c.ko : c.en}

{ko ? c.ko2 : c.en2}

{/* 모바일 전용 — 각 항목 안에 해당 공정 사진을 직접 넣습니다. 터치 기기에는 hover가 없어 오른쪽 사진이 바뀌는 걸 볼 수 없기 때문입니다. */} {CAP_MEDIA_5[i] && (
)}
))}
{CAP_MEDIA_5.map((src, i) => (
{src ? : }
))}
{V4_CAPABILITY[act].n}
{ko ? V4_CAPABILITY[act].ko : V4_CAPABILITY[act].en}
); } // ═════════ CATALOGUE ═════════ function Catalogue5() { const t = useV4(); const ko = t.lang !== 'en'; const [cat, setCat] = useState('all'); const [open, setOpen] = useState(null); // 전체 보기: 카테고리 순서대로, 같은 카테고리 안에서는 V4_PRODUCTS 에 적은 순서 그대로 보여줍니다. // (상부→중간→하부 같은 설치 위치 순서가 사진 유무보다 중요합니다) const catOrder = id => V4_CATS.findIndex(c => c.id === id); const sorted = [...V4_PRODUCTS].sort((a, b) => catOrder(a.cat) - catOrder(b.cat)); const list = cat === 'all' ? sorted : sorted.filter(p => p.cat === cat); const count = id => id === 'all' ? V4_PRODUCTS.length : V4_PRODUCTS.filter(p => p.cat === id).length; return ( <>
Products
{ko ? <>제품 · 규격. : <>Products & specs.}

{ko ? <>규격품과 주문제작 품목을 함께 정리했습니다.
품목을 선택하면 규격을 확인하실 수 있습니다. : 'Stock items and made-to-order parts. Select any item to see its specification.'}

{String(list.length).padStart(2, '0')} {ko ? '품목' : 'items'}
{/* filter row */}
{V4_CATS.map(c => { const on = cat === c.id; return ( ); })}
{list.map((p, i) => ( setOpen(p)}/> ))}
{open && setOpen(null)}/>} ); } function CatTile5({ p, ko, onOpen }) { const [h, setH] = useState(false); const [f, setF] = useState(0); const has = (p.images?.length || 0) > 0; useEffect(() => { if (!h || !has || p.images.length < 2) return; const id = setInterval(() => setF(v => (v + 1) % p.images.length), 900); return () => clearInterval(id); }, [h, has]); return ( ); } // ═════════ PRODUCT MODAL — photo viewer ═════════ function ProductModal5({ p, ko, onClose }) { const imgs = p.images || []; const has = imgs.length > 0; const n = imgs.length; const [f, setF] = useState(0); const stripRef = useRef(null); const go = d => { if (n > 1) setF(v => (v + d + n) % n); }; useEffect(() => { const k = e => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft') { e.preventDefault(); if (n > 1) setF(v => (v - 1 + n) % n); } if (e.key === 'ArrowRight') { e.preventDefault(); if (n > 1) setF(v => (v + 1) % n); } }; window.addEventListener('keydown', k); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', k); document.body.style.overflow = ''; }; }, [onClose, n]); // 활성 썸네일이 항상 보이도록 스트립을 이동 useEffect(() => { const el = stripRef.current; if (!el) return; const th = el.children[f]; if (!th) return; const target = th.offsetLeft - (el.clientWidth - th.clientWidth) / 2; el.scrollTo({ left: Math.max(0, target), behavior: 'smooth' }); }, [f]); // 모바일 스와이프 const sx = useRef(null); const onTS = e => { sx.current = e.touches[0].clientX; }; const onTE = e => { if (sx.current == null) return; const dx = e.changedTouches[0].clientX - sx.current; if (Math.abs(dx) > 44) go(dx < 0 ? 1 : -1); sx.current = null; }; return (
e.stopPropagation()} className="g5-modal" style={{ width: '100%', maxWidth: 1120, height: 'min(88vh, 760px)', background: D.base2, border: `1px solid ${D.line}`, overflow: 'hidden', }}> {/* ── 사진 뷰어 ── */}
{has ? ( <> {/* 메인 이미지 — 잘리지 않게 전체를 보여줍니다 */}
go(1)} onTouchStart={onTS} onTouchEnd={onTE} style={{ position: 'relative', flex: 1, minHeight: 0, overflow: 'hidden', cursor: n > 1 ? 'pointer' : 'default', }}> {imgs.map((src, k) => ( ))} {/* 장수 표시 */} {String(f + 1).padStart(2, '0')} / {String(n).padStart(2, '0')} {n > 1 && ( <> { e.stopPropagation(); go(-1); }} ko={ko}/> { e.stopPropagation(); go(1); }} ko={ko}/> )}
{/* ── 썸네일 스트립 — 가로로만 스크롤, 사진을 가리지 않음 ── */} {n > 1 && (
{imgs.map((src, k) => ( ))}
)} ) : (
태성ENG {ko ? '사진 준비중' : 'Photo coming'}
)}
{/* info */}
{V4_CATS.find(c => c.id === p.cat) ? (ko ? V4_CATS.find(c => c.id === p.cat).ko : V4_CATS.find(c => c.id === p.cat).en) : 'Product'}

{ko ? p.ko : p.en}

{[[ko?'규격':'Size', p.size], [ko?'소재':'Material', ko?p.mat:p.matEn], [ko?'표면처리':'Finish', ko?p.fin:p.finEn], [ko?'박스입수':'Per box', p.pack]].map(([a, b]) => b ? (
{a} {b}
) : null)}
{ko ? '이 품목 문의' : 'Inquire'}
); } // ── 사진 이전/다음 버튼 (터치 영역 52px) ── function ModalArrow5({ dir, onClick, ko }) { const [h, setH] = useState(false); const next = dir === 'next'; return ( ); } // ═════════ COMPANY — metrics band ═════════ function Company5() { const t = useV4(); const ko = t.lang !== 'en'; const rows = [ { v: <>2022, k: ko ? '설립' : 'Founded', s: ko ? '년' : '' }, { v: <>+, k: ko ? '연간 납품' : 'Annual jobs', s: ko ? '건' : '' }, { v: <>, k: ko ? '취급 품목' : 'Line items', s: '' }, { v: <>, k: ko ? '자체 공정' : 'In-house', s: '' }, ]; return (
Company
{ko ? <>오래 쓰는 부품을
오래 만들어 왔습니다. : <>Parts made to last,
made for a long time.}

{ko ? <>태성ENG는 조립식 건축 부속자재와 정밀 금속가공을 함께 다뤄 왔습니다.
반복 납품 고객과의 관계가 품질의 기준입니다. : 'Taesung Engineering has worked across prefab building components and precision metalwork. Repeat customers set our quality bar.'}

{/* ══ 회사 소개 밴드 사진 — COMPANY_MEDIA_5 배열이 순차 전환됩니다 ══ */}
{rows.map((r, i) => (
{r.v}{r.s}
{r.k}
))}
); } // ── 회사 소개 밴드: 설비 사진 순차 전환 ── function CompanyBand5({ ko }) { const [i, setI] = useState(0); const [pause, setPause] = useState(false); const n = COMPANY_MEDIA_5.length; useEffect(() => { if (pause) return; const id = setInterval(() => setI(v => (v + 1) % n), 4200); return () => clearInterval(id); }, [pause, n]); return (
setPause(true)} onMouseLeave={() => setPause(false)} style={{ position: 'relative', marginBottom: 'clamp(24px,3vh,36px)', overflow: 'hidden', border: `1px solid ${D.line2}`, background: D.base3, }}>
{COMPANY_MEDIA_5.map((m, k) => ( ))}
In-house Equipment
{ko ? 'CNC선반 · 프레스 · 용접 설비를 자체 보유' : 'CNC turning, press and welding — all in-house'}
{String(i + 1).padStart(2, '0')} — {ko ? COMPANY_MEDIA_5[i].ko : COMPANY_MEDIA_5[i].en}
{COMPANY_MEDIA_5.map((m, k) => ( /* 터치 영역은 48px, 보이는 막대는 3px — 현장에서 장갑 끼고도 눌립니다 */ ))}
); } // ╔══════════════════════════════════════════════════════════╗ // ║ 문의 폼 수신 설정 — 여기를 설정해야 실제로 메일이 옵니다 ║ // ╚══════════════════════════════════════════════════════════╝ // // 가장 쉬운 방법 — Formspree (무료, 서버 필요 없음, 5분 소요) // 1) https://formspree.io 가입 → New Form 생성 → 회사 메일 입력 // 2) 발급받은 주소(예: https://formspree.io/f/abcdwxyz)를 아래 FORM_ENDPOINT 에 붙여넣기 // 3) 끝. 문의가 오면 회사 메일로 바로 도착합니다. // (Formspree 설정에서 'Autoresponder'를 켜면 고객에게 자동 회신도 나갑니다) // // 대안 — 구글 시트로 받기: Apps Script 웹앱 URL을 같은 자리에 넣으면 됩니다. // // 빈 값('')으로 두면 전송 없이 완료 화면만 보여줍니다(데모 모드). const FORM_ENDPOINT = 'https://formspree.io/f/mwlplbjq'; // 개인정보 보유기간 — 개인정보처리방침(privacy.html)과 반드시 일치시키세요 const PRIVACY_RETENTION = '3년'; // ═════════ CONTACT — direct, actionable ═════════ function Contact5() { const t = useV4(); const ko = t.lang !== 'en'; const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [err, setErr] = useState(''); const [agree, setAgree] = useState(false); const [toast, setToast] = useState(false); const [f, setF] = useState({ name: '', corp: '', tel: '', item: '', qty: '', msg: '' }); const set = (k, v) => setF(p => ({ ...p, [k]: v })); // 클립보드 복사 — 주소는 v5-core.jsx 상단의 TSENG_EMAIL 하나만 고치면 됩니다 const copyMail = async () => { try { await navigator.clipboard.writeText(TSENG_EMAIL); } catch { const ta = document.createElement('textarea'); ta.value = TSENG_EMAIL; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch {} document.body.removeChild(ta); } setToast(true); setTimeout(() => setToast(false), 2200); }; const inp = { width: '100%', padding: '14px 15px', fontSize: 16, fontFamily: 'inherit', background: D.base, color: D.bone, border: `1px solid ${D.line2}`, outline: 'none', transition: 'border-color .3s', }; const lab = { display: 'block', marginBottom: 7, fontSize: 10.5, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: D.bone70, }; const onFocus = e => { e.target.style.borderColor = D.steel; }; const onBlur = e => { e.target.style.borderColor = D.line2; }; // ══ 폼 전송 ══ const submit = async e => { e.preventDefault(); setErr(''); if (!f.name.trim() || !f.tel.trim()) { setErr(ko ? '담당자명과 연락처를 입력해주세요.' : 'Name and phone are required.'); return; } if (!agree) { setErr(ko ? '개인정보 수집·이용에 동의해주세요.' : 'Please agree to the privacy terms.'); return; } if (!FORM_ENDPOINT) { setSent(true); return; } // 데모 모드 setSending(true); try { const res = await fetch(FORM_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ 담당자명: f.name, 회사명: f.corp, 연락처: f.tel, 품목: f.item, 수량: f.qty, 요청내용: f.msg, 개인정보동의: '동의함', _subject: `[태성ENG 견적문의] ${f.corp || f.name} — ${f.item || '문의'}`, }), }); if (!res.ok) throw new Error('send failed'); setSent(true); } catch { setErr(ko ? '전송에 실패했습니다. 잠시 후 다시 시도하시거나 전화로 연락주세요.' : 'Sending failed. Please retry or call us.'); } finally { setSending(false); } }; const channels = [ { k: ko ? '전화' : 'Phone', v: '031-962-3951', sub: ko ? '평일 08:30 – 18:00' : 'Mon–Fri 08:30–18:00', href: 'tel:0319623951', icon: , }, { k: ko ? '이메일' : 'Email', v: TSENG_EMAIL, sub: ko ? '도면 첨부 시 검토 후 회신' : 'Attach a drawing for review', href: `mailto:${TSENG_EMAIL}`, icon: <>, }, { // 주소는 v5-sections-3.jsx 의 TSENG_PLACE 한 곳에서 관리합니다 k: ko ? '공장' : 'Works', v: ko ? TSENG_PLACE.addr : TSENG_PLACE.addrEn, sub: ko ? '방문 상담은 사전 연락 부탁드립니다' : 'Please call ahead to visit', href: null, icon: <>, }, ]; return ( Contact
{ko ? <>도면을 보내주시면
가능 여부부터 답합니다. : <>Send the drawing.
We answer feasibility first.}
{/* ── 왼쪽: 연락 수단 + 도면 안내 ── */}

{ko ? <>품목·수량·희망 납기와 함께 도면을 보내주세요.
도면 준비가 어려우시면 먼저 문의 주셔도 됩니다. : 'Send the item, volume, target date and a drawing. If a drawing is hard to prepare, contact us first.'}

{/* 연락 수단 — 한 줄씩 */}
{channels.map(c => )}
{/* 도면 보내기 — 압축된 안내 */}
{ko ? '도면 · 자재 내역서가 있으시면' : 'Have drawings or a material list?'}

{ko ? '견적 요청서로 먼저 기본 내용을 접수하시고, 파일은 메일로 보내주세요. 더 빠르고 정확한 견적이 가능합니다.' : 'Submit the form first, then email the files — it makes the quote faster and more accurate.'}

{ko ? '주소 복사' : 'Copy email'} {ko ? '메일 보내기' : 'Open mail app'}
{/* ── 오른쪽: 입력 폼 ── */}
{sent ? (

{ko ? '문의가 접수되었습니다.' : 'Your inquiry was received.'}

{ko ? '내용 확인 후 담당자가 연락드립니다. 급하신 건은 전화로 주시면 빠릅니다.' : 'We will get back to you after reviewing. For urgent matters, a call is faster.'}

{ko ? <>도면 파일은 {TSENG_EMAIL} 로 보내주세요. : <>Email drawings to {TSENG_EMAIL}.}

) : ( <>
{ko ? '견적 요청서' : 'Quote request'}
set('name', e.target.value)} placeholder={ko ? '홍길동' : 'Your name'}/>
set('corp', e.target.value)} placeholder={ko ? '(주)000' : 'Company'}/>
set('tel', e.target.value)} placeholder="010-0000-0000"/>
set('item', e.target.value)} placeholder={ko ? '예) 크랭크로라, 앵글 가공' : 'e.g. crank roller'}/>
set('qty', e.target.value)} placeholder={ko ? '예) 500개' : 'e.g. 500 pcs'}/>