feat(cafe24): 편집기에 상품 다이렉트 주소 + 클립보드 복사

상세 화면 상단에 고객이 보는 상세페이지 주소를 보여주고 「주소 복사」·「쇼핑몰에서
열기」를 붙였다.

    https://miras.co.kr/product/detail.html?product_no=119

도메인은 하드코딩하지 않고 CAFE24_SHOP_URL 로 받는다. 커스텀 도메인은 mall_id 로
알 수 없기 때문이다. 미설정 시 카페24 기본 도메인(https://<mall_id>.cafe24.com)으로
대체해 환경변수가 없어도 항상 유효한 주소가 나온다. 스킴 누락·끝 슬래시도 정규화한다.

주소 칸은 readonly <input> 이라 기존 복사 버튼(data-copy)이 값을 그대로 읽어간다 —
클립보드 로직을 새로 만들지 않았다. 클립보드 API 가 막힌 환경에서는 입력칸 선택으로
대체되고, 칸을 클릭하면 전체 선택된다.

CAFE24_SHOP_URL 은 .env.example 과 문서에 설명을 함께 넣었다(신규 환경변수 규칙).

검증: 유닛테스트 61개 통과(신규 2개 — 스킴/슬래시 유무 3가지 입력에서 같은 주소,
미설정 시 카페24 도메인 대체). 렌더 확인 — 주소 표시·복사 버튼·새 창 열기(noopener),
주소를 만들 수 없으면 줄 자체를 숨김.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-14 16:46:04 +09:00
parent 8ec38db6d1
commit 469de15998
10 changed files with 102 additions and 3 deletions
+23
View File
@@ -624,3 +624,26 @@
color: var(--color-rich-black, #0a0a0a);
background: var(--color-canvas-white, #fff);
}
/* ── 상품 다이렉트 주소 ── */
.cf24-url-row {
display: flex;
gap: var(--sp-8, 8px);
align-items: center;
flex: 0 0 auto;
flex-wrap: wrap;
}
.cf24-url {
flex: 1 1 260px;
min-width: 0;
height: 30px;
box-sizing: border-box;
padding: 0 var(--sp-10, 10px);
border: 1px solid var(--color-subtle-ash, #e5e5e5);
border-radius: var(--r-lg, 10px);
background: var(--color-ghost-gray, #f6f8fa);
color: var(--color-midtone-gray, #737373);
font-family: var(--font-geist-mono, ui-monospace, monospace);
font-size: 12px;
}