o2o-site-AEO/solution/site/src/sections/LocationSection.tsx

import {useState} from 'react';
import {Car, Check, Copy, Navigation} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {kakaoDirectionsUrl, naverDirectionsUrl, osmEmbedUrl} from '@/lib/format';
import {sectionName} from '@/lib/derive';

/**
 * 오시는 길.
 *
 * ★ 마크업은 목업(/s/stay 의 `<section id="location">`)에서 그대로 옮겼다.
 *   지도 7 : 주소·길찾기 5 의 가로 배치다. 지도를 위에 눕히면 주소가 접힌 화면 밖으로 밀린다.
 * ★ 길찾기 버튼 색은 각 서비스의 브랜드색을 그대로 쓴다(네이버 #03C75A · 카카오 #FEE500 ·
 *   티맵 #0064FF). 템플릿 색으로 칠하면 어느 앱으로 가는지 손님이 못 알아본다.
 * ★ 티맵은 앱 딥링크라 손가락 화면에서만 보인다(`only-touch`).
 */
export function LocationSection() {
  const payload = useSite();
  const {place, routes} = payload;
  const [copied, setCopied] = useState(false);

  const address = place.roadAddress ?? place.address;
  if (!address) return null;

  // 좌표가 있어야 지도도 길찾기도 정확해진다. 없으면 지도를 그리지 않고,
  // 버튼은 검색으로 떨어진다(format.ts) — 틀린 핀을 찍느니 안 찍는다.
  const {latitude: lat, longitude: lng} = place;
  const hasGeo = lat != null && lng != null;
  const q = encodeURIComponent(place.name);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(address);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // 클립보드 권한이 없으면 조용히 넘어간다 — 주소는 화면에 그대로 있다.
    }
  };

  return (
    <section
      id="location"
      aria-labelledby="location-heading"
      className="border-line paper w-full border-b"
      style={{backgroundColor: 'var(--tpl-surface, #ffffff)', paddingBlock: 'var(--section-space)'}}
    >
      <div className="shell">
        <div>
          <header className="mb-6 sm:mb-8">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-6">
              <div className="min-w-0">
                <h2 id="location-heading" className="h2 flex items-center gap-2.5">
                  <i aria-hidden="true" className="h-[1em] w-[3px] shrink-0 bg-current opacity-25" />
                  <span className="min-w-0">{sectionName(payload, 'map', '오시는 길')}</span>
                </h2>
                <p className="text-muted measure mt-2 pl-[calc(3px+0.625rem)] text-[length:var(--fs-sm)]">
                  주소와 주요 거점까지의 이동 시간을 안내합니다.
                </p>
              </div>
            </div>
          </header>
        </div>

        <div className="grid gap-6 lg:grid-cols-12 lg:gap-8">
          {hasGeo && (
            <div className="border-line tpl-border overflow-hidden rounded-xl border lg:col-span-7">
              {/* ★ loading="lazy" — 지도는 접힌 화면 아래에 있는 경우가 많고, 첫 화면 속도를
                  남의 서버 응답에 맡기지 않는다. title 은 스크린리더가 읽을 유일한 설명이다. */}
              <iframe
                title={`${place.name} 위치 지도`}
                src={osmEmbedUrl(lat, lng)}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="block aspect-4/3 w-full border-0 sm:aspect-video lg:aspect-auto lg:h-full lg:min-h-[24rem]"
              />
            </div>
          )}

          <div className={hasGeo ? 'lg:col-span-5' : 'lg:col-span-12'}>
            <div className="panel p-5 sm:p-6">
              <p className="label mb-2">주소</p>
              <div className="flex flex-wrap items-center gap-2">
                {/* address 태그로 감싼다 — 기계가 "이게 이 업소의 주소"임을 안다. */}
                <address className="text-[length:var(--fs-lead)] font-bold not-italic">{address}</address>
                <button
                  type="button"
                  onClick={handleCopy}
                  title="주소 복사"
                  className="border-line tpl-border inline-flex items-center gap-1 rounded-md border bg-current/8 px-2.5 py-1.5 text-[length:var(--fs-xs)] font-medium transition-opacity hover:opacity-70"
                >
                  {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
                  <span>{copied ? '복사완료' : '복사'}</span>
                </button>
              </div>
              {place.phone && (
                <p className="text-muted mt-2 text-[length:var(--fs-sm)]">
                  문의:{' '}
                  <a href={`tel:${place.phone}`} className="underline-offset-2 hover:underline">
                    {place.phone}
                  </a>
                </p>
              )}

              <div className="mt-5 flex flex-wrap gap-2.5">
                <a
                  href={naverDirectionsUrl(place.name, lat, lng)}
                  target="_blank"
                  rel="noopener noreferrer nofollow"
                  className="tap flex flex-1 basis-40 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-[#03C75A] px-4 text-[length:var(--fs-sm)] font-bold text-white transition-opacity hover:opacity-90"
                >
                  <Navigation className="size-3.5" aria-hidden="true" />
                  <span>네이버 길찾기</span>
                </a>
                <a
                  href={kakaoDirectionsUrl(place.name, lat, lng)}
                  target="_blank"
                  rel="noopener noreferrer nofollow"
                  className="tap flex flex-1 basis-40 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-[#FEE500] px-4 text-[length:var(--fs-sm)] font-bold text-[#191600] transition-opacity hover:opacity-90"
                >
                  <Navigation className="size-3.5" aria-hidden="true" />
                  <span>카카오 길찾기</span>
                </a>
                {hasGeo && (
                  <a
                    href={`tmap://route?goalname=${q}&goalx=${lng}&goaly=${lat}&rGoName=${q}&rGoX=${lng}&rGoY=${lat}`}
                    className="tap only-touch flex-1 basis-40 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-[#0064FF] px-4 text-[length:var(--fs-sm)] font-bold text-white transition-opacity hover:opacity-90"
                  >
                    <Navigation className="size-3.5" aria-hidden="true" />
                    <span>티맵 길찾기</span>
                  </a>
                )}
              </div>
            </div>

            {routes.length > 0 && (
              <div className="mt-6">
                <h3 className="mb-3 flex items-center gap-2 text-[length:var(--fs-sm)] font-bold">
                  <Car className="size-4 opacity-60" aria-hidden="true" />
                  <span>주요 거점 소요시간</span>
                </h3>
                <dl className="divide-line border-line divide-y border-t">
                  {routes.map((route) => (
                    <div
                      key={route.destination}
                      className="flex items-baseline justify-between gap-4 py-2.5 text-[length:var(--fs-sm)]"
                    >
                      <dt className="text-muted shrink-0">{route.destination}</dt>
                      <dd className="text-right font-semibold">
                        {[route.byCar, route.byTransit].filter(Boolean).join(' · ') || '—'}
                      </dd>
                    </div>
                  ))}
                </dl>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}