/* ============================================================================= 비파트 인테리어 — 화면 본체 ----------------------------------------------------------------------------- 글자는 전부 src/content.js, 시공 사례는 src/portfolio.js 에 있다. 이 파일은 구조와 디자인만 담당한다. ========================================================================== */ const C = window.CONTENT; const P = window.PORTFOLIO || []; const { useState, useEffect, useRef, useCallback } = React; // 주소 뒤에 ?shot=1 → 스크롤 애니메이션 없이 전부 바로 보이게 (스크린샷 검증용) const SHOT = window.location.search.indexOf("shot=1") >= 0; /* ── 공통 ─────────────────────────────────────────────────────────────── */ function useReveal(dep) { useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); if (SHOT || !("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("in")); return; } const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }), { rootMargin: "0px 0px -8% 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, [dep]); } function Icon({ id, className = "w-5 h-5" }) { return ; } function Sprite() { return ( ); } function Lines({ text }) { return text.split("\n").map((l, i, a) => {l}{i < a.length - 1 &&
}); } function Eyebrow({ children, dark }) { return (

{children}

); } function Logo({ light, pcInk }) { return ( {C.brand.logoMain} {C.brand.logoSub} ); } /* ── 헤더 / 메뉴 ──────────────────────────────────────────────────────── */ function Header({ heroSplit }) { const [solid, setSolid] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const on = () => setSolid(window.scrollY > window.innerHeight * 0.75); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]); const light = !solid; // 최상단일 때: 1번(흰 분할)은 PC에서 검정, 2~5번(어두운 전체화면)은 흰색 const navCol = light ? (heroSplit ? "text-white md:text-ink" : "text-white") : "text-ink"; return ( <>
{C.brand.phone}
{/* 모바일 전체화면 메뉴 */}
전화 상담 카카오톡 상담
); } /* ── 첫 화면 (아울디자인식 꽉 찬 사진 슬라이드) ─────────────────────────── */ function Hero({ onSlide }) { const s = C.hero.slides; const [cur, setCur] = useState(0); const timer = useRef(null); const go = useCallback((i) => setCur((i + s.length) % s.length), [s.length]); useEffect(() => { if (SHOT) return; timer.current = setTimeout(() => go(cur + 1), 6000); return () => clearTimeout(timer.current); }, [cur, go]); useEffect(() => { if (onSlide) onSlide(cur); }, [cur]); // 1번 사진만 PC 좌우 분할, 2~5번은 전체화면 const split = cur === 0; // 손가락으로 넘기기 const touch = useRef(null); return (
(touch.current = e.touches[0].clientX)} onTouchEnd={(e) => { if (touch.current == null) return; const d = e.changedTouches[0].clientX - touch.current; if (Math.abs(d) > 50) go(cur + (d < 0 ? 1 : -1)); touch.current = null; }}> {/* 전체화면 사진 배경: 모바일=항상 / PC=2~5번(비분할)일 때 */}
{s.map((sl, i) => (
{sl.caption}
))}
{/* 콘텐츠: 모바일=오버레이 / PC=좌우 분할(사진 전체가 온전히 보임) */}
{/* 텍스트: 1번=검정/흰배경, 2~5번=흰색 오버레이 */}

{C.hero.eyebrow}

{C.hero.desc}

{/* PC 1번 사진만: 전체가 온전히 보이도록 (세로 4:5 = 사진 비율과 일치, 확대·잘림 없음) */}
{s.map((sl, i) => (
{sl.caption}
))}

{s[cur].caption}

{s.map((_, i) => ( ))}
{String(cur + 1).padStart(2, "0")} / {String(s.length).padStart(2, "0")}
{/* 하단 바(캡션·진행·화살표): 모바일=항상 / PC=2~5번(비분할) */}

{s[cur].caption}

{s.map((_, i) => ( ))}
{String(cur + 1).padStart(2, "0")} / {String(s.length).padStart(2, "0")}
); } /* ── 회사 소개 ────────────────────────────────────────────────────────── */ function About() { const a = C.about; return (
{a.eyebrow}

{a.lead}

{a.strengths.map((s) => (
{s.no}

{s.title}

{s.text}

))}
{a.imageCaption}
{a.imageCaption}
{a.stats.map((s, i) => (

{s.num === "AUTO" ? P.length + "+" : s.num}

{s.label}

))}
); } /* ── 서비스 / 일하는 방식 / 진행 순서 ──────────────────────────────────── */ function Service() { const s = C.service; return (
{s.eyebrow}

{s.desc}

{/* 분야 — 모바일은 가로 스크롤 */}
{s.fields.map((f) => ( {f.ko

{f.en}

{f.ko}

{f.text}

 ))}
{/* 일하는 방식 */}
{s.approach.map((a, i) => (

0{i + 1}

{a.title}

{a.text}

))}
{/* 진행 순서 */}

PROCESS

    {s.process.map((p) => (

  1. STEP {p.step}

    {p.title}

    {p.text}

    2. ))}
); } /* ── 포트폴리오 (디투모로우식 한눈에 보는 그리드) ──────────────────────── */ function Portfolio({ onOpen }) { const c = C.portfolio; const [filter, setFilter] = useState("전체"); const list = P.filter((p) => filter === "전체" || p.category === filter); const shown = list; useReveal(filter); const counts = (f) => (f === "전체" ? P.length : P.filter((p) => p.category === f).length); return (
{c.eyebrow}

{c.title}

{c.desc}

{c.filters.filter((f) => counts(f) > 0).map((f) => ( ))}
{shown.map((p) => ( ))}
); } function ProjectModal({ p, onClose, onNav }) { const [idx, setIdx] = useState(0); const photos = p.photos; useEffect(() => { setIdx(0); }, [p.slug]); useEffect(() => { document.body.style.overflow = "hidden"; const k = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") setIdx((i) => (i + 1) % photos.length); if (e.key === "ArrowLeft") setIdx((i) => (i - 1 + photos.length) % photos.length); }; window.addEventListener("keydown", k); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", k); }; }, [p.slug]); const touch = useRef(null); const meta = [["지역", p.region], ["규모", p.size], ["분야", p.category], ["연도", p.year]].filter((m) => m[1]); return (

PORTFOLIO

(touch.current = e.touches[0].clientX)} onTouchEnd={(e) => { if (touch.current == null) return; const d = e.changedTouches[0].clientX - touch.current; if (Math.abs(d) > 40) setIdx((i) => (i + (d < 0 ? 1 : -1) + photos.length) % photos.length); touch.current = null; }}> {p.ko {idx + 1} / {photos.length}
{photos.map((ph, i) => ( ))}
{p.before && p.before.length > 0 && (

BEFORE — 공사 전

{p.before.map((b) =>
{p.ko
)}
)}
); } /* ── 담당 실장 ────────────────────────────────────────────────────────── */ function Manager() { const m = C.manager; return (
{m.name
{m.eyebrow}

{m.name}{m.role}

{m.intro}

    {m.points.map((pt, i) => (
  • 0{i + 1}{pt}
    • ))}
{m.name} {m.role}에게 전화 카카오톡 상담
); } /* ── 후기 ─────────────────────────────────────────────────────────────── */ function Review() { const r = C.review; return (
{r.eyebrow}

{r.title}

{r.list.length > 0 ? (
{r.list.map((v, i) => (
“
{v.text}
{v.name}{v.project && · {v.project}}
))}
) : (

NAVER BLOG

{r.emptyText}

시공 후기 보러가기

NAVER PLACE

네이버 플레이스에서 비파트 인테리어의 위치와 소식을 확인하실 수 있습니다.

플레이스 바로가기
)}
); } /* ── 오시는 길 · 상담 ─────────────────────────────────────────────────── */ function Contact() { const c = C.contact; const rows = [ ["pin", "주소", c.address + (c.addressOld ? " (" + c.addressOld + ")" : "")], ["car", "주차", c.parking], ["area", "시공 지역", c.serviceArea], ]; if (c.hours) rows.push(["phone", "운영 시간", c.hours]); return (
{c.eyebrow}

{c.desc}

전화 상담 · 이승현 실장{C.brand.phone} 사진 보내고 편하게 문의카카오톡 오픈채팅 상담
{rows.map(([ic, k, v]) => (
{k}
{v}
))}