designpaca/apps/site/public/work/griddle-club/index.html
Yun Chan e09d4efb1c
Some checks failed
ci / build (push) Has been cancelled
feat: strengthen design skill and refresh all showcases
2026-09-12 18:16:33 +09:00

468 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>철판클럽 — 눌러 굽고, 바로 건넨다</title>
<meta
name="description"
content="가상 버거 브랜드 철판클럽에서 메뉴를 고르고 버거를 조합하며, 가상 매장의 이용 방식과 운영 콘셉트를 살펴보세요. 실제 주문과 결제는 제공하지 않습니다."
/>
<meta property="og:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
<meta
property="og:description"
content="메뉴를 고르고 재료를 조합하며, 가상 매장의 운영 방식을 살펴보는 버거 브랜드 콘셉트."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./og.png" />
<meta property="og:image:alt" content="철판 주방에서 포장한 버거를 건네는 장면" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
<meta
name="twitter:description"
content="메뉴를 고르고 재료를 조합해 보는 가상 버거 브랜드 철판클럽."
/>
<meta name="twitter:image" content="./og.png" />
<meta name="theme-color" content="#f4f1e9" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap"
/>
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="./styles/site.css?v=20260912all" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%232147e7'/%3E%3Cpath d='M6 9h20M8 16h16M10 23h12' stroke='%23fffdf8' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E"
/>
<script>document.documentElement.classList.add("is-js");</script>
<script src="./scripts/site.js?v=2" defer></script>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<div class="truth-bar" role="note">
<p>가상 브랜드 안내 · 가격과 매장 정보는 실제 판매 정보가 아닙니다.</p>
</div>
<header class="site-head" id="top">
<div class="wrap head-row">
<a class="brand" href="#top" aria-label="철판클럽 처음으로">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span>철판클럽</span>
</a>
<nav class="head-nav" aria-label="주요 메뉴">
<a href="#menu">메뉴</a>
<a href="#builder">조합하기</a>
<a href="#stores">매장 찾기</a>
<a href="./franchise/">가맹 안내</a>
</nav>
<a class="head-action" href="#stores">가까운 매장 보기</a>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-heading">
<div class="hero-copy">
<p class="section-kicker">서울 도심 눌림 버거</p>
<h1 id="hero-heading">눌러 굽고,<span class="hero-wide-space" aria-hidden="true"> </span><br />바로 건넨다.</h1>
<p class="hero-lead">
얇게 눌러 가장자리는 바삭하게. 주문 뒤 조립하고 포장해, 퇴근길 한 상자로 건넵니다.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#menu">오늘 메뉴 보기</a>
<a class="text-link" href="#builder">내 버거 조합하기 <span aria-hidden="true">→</span></a>
</div>
<dl class="hero-facts">
<div><dt>굽기</dt><dd>얇은 패티를 주문 뒤 눌러 굽기</dd></div>
<div><dt>받기</dt><dd>포장과 배달 가능 여부를 매장별 표시</dd></div>
</dl>
</div>
<figure class="hero-media image-shell">
<picture>
<source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
<img
src="./assets/hero-handoff.webp"
width="1600"
height="900"
alt="밝은 철판 주방에서 직원이 포장한 버거를 건네는 모습"
fetchpriority="high"
/>
</picture>
<span class="image-fallback" aria-hidden="true">버거 포장 장면</span>
<figcaption>
<span>철판에서 상자까지</span>
<span>생성 이미지 · 실제 매장 아님</span>
</figcaption>
</figure>
<aside class="hero-order" aria-label="오늘 고르기">
<span class="order-index">01</span>
<p>철판 더블</p>
<strong>예시 단품 8,900원</strong>
<button type="button" data-preset="double">이 조합으로 시작</button>
</aside>
</section>
<section class="service-strip" aria-label="이용 방식">
<div class="wrap service-row">
<p><span aria-hidden="true">●</span> 주문 뒤 조리</p>
<p>단품과 세트</p>
<p>포장 여부 매장별 확인</p>
<p>배달 여부 매장별 확인</p>
<p class="mono">GRIDDLE CLUB</p>
</div>
</section>
<section class="section menu-section" id="menu" aria-labelledby="menu-heading">
<div class="wrap">
<div class="section-head split-head">
<div>
<p class="section-kicker">오늘 고를 메뉴</p>
<h2 id="menu-heading">메뉴를 고르고<br />내 버거를 조합해 보세요.</h2>
</div>
<p class="section-note">
표시된 메뉴와 가격은 브랜드 콘셉트를 설명하기 위한 값입니다. 이 페이지에서는 실제 판매와 주문을 제공하지 않습니다.
</p>
</div>
<div class="menu-toolbar" role="group" aria-label="메뉴 분류">
<button type="button" class="filter-button is-active" data-menu-filter="all" aria-pressed="true">전체</button>
<button type="button" class="filter-button" data-menu-filter="burger" aria-pressed="false">버거</button>
<button type="button" class="filter-button" data-menu-filter="side" aria-pressed="false">곁들임</button>
<button type="button" class="filter-button" data-menu-filter="drink" aria-pressed="false">음료</button>
</div>
<div class="menu-grid" id="menu-grid">
<article class="menu-item menu-item-featured" data-menu-category="burger">
<div class="menu-photo image-shell">
<img
src="./assets/signature-double.webp"
width="1400"
height="933"
alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 버거"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 더블 사진</span>
<span class="menu-number">01</span>
</div>
<div class="menu-body">
<div><p class="menu-state">대표 메뉴</p><h3>철판 더블</h3></div>
<p>얇은 패티 두 장, 치즈, 구운 양파, 피클, 집 소스.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 8,900원</span>
<button type="button" data-preset="double">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-graphic" data-menu-category="burger">
<div class="menu-photo image-shell">
<img
src="./assets/single-smash-generated.webp"
width="960"
height="720"
alt="코발트색 트레이 위에 치즈와 피클을 넣은 싱글 스매시 버거"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
<span class="menu-number">02</span>
<span class="menu-image-note">생성 이미지</span>
</div>
<div class="menu-body">
<div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
<p>패티 한 장, 치즈, 피클, 집 소스. 단품으로 빠르게.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 6,900원</span>
<button type="button" data-preset="single">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-blue" data-menu-category="burger">
<div class="menu-poster" aria-hidden="true"><span>03</span><i></i><i></i><i></i></div>
<div class="menu-body">
<div><p class="menu-state">매운 피클</p><h3>고추 피클 더블</h3></div>
<p>고추 피클과 매운 소스를 더한 더블. 맵기는 예시입니다.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 9,400원</span>
<button type="button" data-preset="spicy">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="side">
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>얇은 감자</h3></div>
<p>가늘게 튀겨 소금으로 마무리합니다.</p>
<div class="menu-foot"><span><small>예시 가격</small> 3,600원</span></div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="side">
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>양파 한 컵</h3></div>
<p>철판에서 단맛을 낸 양파를 따로 담습니다.</p>
<div class="menu-foot"><span><small>예시 가격</small> 2,800원</span></div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="drink">
<div class="menu-body">
<div><p class="menu-state">음료</p><h3>탄산 한 잔</h3></div>
<p>매장에서 고른 음료 한 잔. 제품별 성분을 확인해 주세요.</p>
<div class="menu-foot"><span><small>예시 가격</small> 2,400원</span></div>
</div>
</article>
</div>
<div class="empty-state" id="menu-empty" hidden role="status">
<strong>이 분류에 준비된 예시 메뉴가 없어요.</strong>
<button type="button" data-show-all-menu>모든 메뉴 보기</button>
</div>
</div>
</section>
<section class="section builder-section" id="builder" aria-labelledby="builder-heading">
<div class="wrap">
<div class="section-head split-head">
<div>
<p class="section-kicker">버거 조합기</p>
<h2 id="builder-heading">내 버거 조합을<br />바꿔 보세요.</h2>
</div>
<p class="section-note">아래 구성은 메뉴를 살펴보기 위한 예시입니다. 재료를 바꾸면 오른쪽 안내 카드와 예시 가격이 함께 바뀝니다.</p>
</div>
<div class="builder-layout">
<form class="builder-form" id="burger-builder" novalidate>
<fieldset>
<legend><span>01</span> 맛 고르기</legend>
<div class="choice-row">
<label><input type="radio" name="flavor" value="classic" checked /><span><strong>기본</strong><small>집 소스와 피클</small></span></label>
<label><input type="radio" name="flavor" value="spicy" /><span><strong>매운 피클</strong><small>고추 피클과 매운 소스</small></span></label>
</div>
</fieldset>
<fieldset>
<legend><span>02</span> 크기와 치즈</legend>
<div class="choice-row choice-row-compact">
<label><input type="radio" name="patty" value="1" /><span>패티 한 장</span></label>
<label><input type="radio" name="patty" value="2" checked /><span>패티 두 장</span></label>
</div>
<label class="field-label" for="cheese">치즈</label>
<select id="cheese" name="cheese">
<option value="0">치즈 없음</option>
<option value="1" selected>치즈 한 장</option>
<option value="2">치즈 두 장</option>
</select>
</fieldset>
<fieldset>
<legend><span>03</span> 양파와 피클</legend>
<div class="select-grid">
<label>구운 양파
<select name="onion"><option value="none">없음</option><option value="regular" selected>기본</option><option value="extra">많이</option></select>
</label>
<label>피클
<select name="pickle"><option value="none">없음</option><option value="regular" selected>기본</option><option value="extra">많이</option></select>
</label>
<label>소스
<select name="sauce"><option value="none">없음</option><option value="regular" selected>기본</option><option value="side">따로</option></select>
</label>
</div>
</fieldset>
<fieldset>
<legend><span>04</span> 단품 또는 세트</legend>
<div class="choice-row choice-row-compact">
<label><input type="radio" name="serving" value="single" checked /><span>단품</span></label>
<label><input type="radio" name="serving" value="set" /><span>세트 더하기</span></label>
</div>
<div class="set-options" id="set-options">
<p id="set-heading">세트 구성</p>
<div class="select-grid">
<label>곁들임
<select name="side" disabled><option value="fries">얇은 감자</option><option value="onion">양파 한 컵</option></select>
</label>
<label>음료
<select name="drink" disabled><option value="cola">탄산 한 잔</option><option value="water">물 한 병</option></select>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend><span>05</span> 확인할 가상 매장</legend>
<label class="field-label" for="builder-store">매장</label>
<select id="builder-store" name="store">
<option value="seongsu">성수점 · 영업 중</option>
<option value="yeonnam">연남점 · 영업 종료</option>
<option value="mullae">문래점 · 오늘 휴무</option>
</select>
<p class="field-help">아래 매장과 운영 상태는 실제 방문·주문 정보가 아닙니다.</p>
</fieldset>
</form>
<aside class="builder-summary" aria-labelledby="summary-heading">
<div class="summary-photo image-shell">
<img
src="./assets/signature-double.webp"
width="1400"
height="933"
alt="조합 결과를 설명하는 철판 더블 버거"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">조합 버거 사진</span>
<span class="summary-stamp">가상 메뉴</span>
</div>
<div class="summary-body">
<p class="section-kicker">선택 결과</p>
<h3 id="summary-heading">철판 더블</h3>
<p id="summary-lines">패티 두 장 / 치즈 한 장 / 양파 기본 / 피클 기본 / 소스 기본</p>
<dl class="summary-list">
<div><dt>받기</dt><dd id="summary-serving">단품</dd></div>
<div><dt>가상 매장</dt><dd id="summary-store">성수점</dd></div>
<div><dt>상태</dt><dd id="summary-store-state">영업 중</dd></div>
</dl>
<div class="allergen-note" id="allergen-note">
<strong>알레르기 예시</strong>
<p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
<small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
</div>
<div class="summary-total"><span>예시 총액</span><strong id="summary-total">8,900원</strong></div>
<p class="truth-inline">이 페이지는 메뉴 조합을 살펴보는 안내 페이지이며, 주문과 결제는 진행되지 않습니다.</p>
<a class="button button-primary button-full" href="#stores" id="check-store-link">가상 매장 안내 보기</a>
</div>
</aside>
</div>
</div>
</section>
<section class="section process-section" id="process" aria-labelledby="process-heading">
<div class="wrap process-grid">
<div class="process-copy">
<p class="section-kicker">철판에서 상자까지</p>
<h2 id="process-heading">빠르다는 말 대신,<br />순서를 보여 줍니다.</h2>
<ol class="process-list">
<li><span>01</span><div><strong>누르기</strong><p>얇은 패티를 뜨거운 철판에 눌러 가장자리를 만듭니다.</p></div></li>
<li><span>02</span><div><strong>겹치기</strong><p>치즈, 구운 양파, 피클을 고른 순서대로 올립니다.</p></div></li>
<li><span>03</span><div><strong>건네기</strong><p>유산지와 상자에 담고 포장 상태를 확인합니다.</p></div></li>
</ol>
</div>
<figure class="process-media image-shell">
<img
src="./assets/griddle-press.webp"
width="1400"
height="933"
alt="조리사가 철판에서 패티를 눌러 굽고 양파를 익히는 모습"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
<figcaption>생성 이미지 · 실제 조리 시설 아님</figcaption>
</figure>
</div>
</section>
<section class="section stores-section" id="stores" aria-labelledby="stores-heading">
<div class="wrap">
<div class="section-head split-head">
<div><p class="section-kicker">가상 매장 안내</p><h2 id="stores-heading">매장별 이용 방식은<br />이렇게 안내합니다.</h2></div>
<p class="section-note">주소, 전화, 거리와 운영 상태를 임의로 만들지 않습니다. 아래 세 곳은 브랜드 콘셉트를 설명하는 가상 매장입니다.</p>
</div>
<div class="store-tools">
<div class="search-box">
<input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="가상 매장 검색" />
<button type="button" id="clear-store-search" hidden>지우기</button>
</div>
<div class="region-filters" role="group" aria-label="지역 고르기">
<button type="button" class="is-active" data-region="all" aria-pressed="true">전체</button>
<button type="button" data-region="성동" aria-pressed="false">성동</button>
<button type="button" data-region="마포" aria-pressed="false">마포</button>
<button type="button" data-region="영등포" aria-pressed="false">영등포</button>
</div>
</div>
<div class="store-layout">
<div class="store-list" id="store-list">
<article class="store-card is-selected" data-store="seongsu" data-region="성동" data-search="성수점 성동 성수동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-open">영업 중</span><span>가상 매장</span></div>
<h3>성수점</h3>
<p>서울 성동구 성수동 일대 · 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:00–21:30</dd></div><div><dt>마지막 주문</dt><dd>21:00</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 가능</li><li>배달 가능</li></ul>
<button type="button" data-select-store="seongsu">성수점으로 조합 보기</button>
</article>
<article class="store-card" data-store="yeonnam" data-region="마포" data-search="연남점 마포 연남동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>가상 매장</span></div>
<h3>연남점</h3>
<p>서울 마포구 연남동 일대 · 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 마감</li><li>배달 마감</li></ul>
<button type="button" data-select-store="yeonnam">연남점으로 조합 보기</button>
</article>
<article class="store-card" data-store="mullae" data-region="영등포" data-search="문래점 영등포 문래동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>가상 매장</span></div>
<h3>문래점</h3>
<p>서울 영등포구 문래동 일대 · 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>임시 휴무</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 불가</li><li>배달 불가</li></ul>
<button type="button" data-select-store="mullae">문래점으로 조합 보기</button>
</article>
</div>
<aside class="store-map" aria-label="가상 매장 분포 그림">
<div class="map-grid" aria-hidden="true"></div>
<span class="map-river" aria-hidden="true"></span>
<button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
<button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남점 고르기"><span>연남</span></button>
<button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래점 고르기"><span>문래</span></button>
<p>위치 안내가 아닌 지역별 이용 상태를 보여 주는 그림입니다.</p>
</aside>
</div>
<div class="empty-state store-empty" id="store-empty" hidden role="status">
<strong>찾는 조건과 맞는 가상 매장이 없어요.</strong>
<p>검색어와 지역 조건을 지우고 다시 확인해 주세요.</p>
<button type="button" id="reset-store-search">검색 조건 지우기</button>
</div>
</div>
</section>
<section class="franchise-callout" aria-labelledby="franchise-heading">
<figure class="franchise-image image-shell">
<img
src="./assets/kitchen-flow.webp"
width="1400"
height="933"
alt="좁고 밝은 주방에서 두 직원이 철판 조리와 포장을 나누어 맡는 모습"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
</figure>
<div class="franchise-copy">
<p class="section-kicker">가맹을 생각한다면</p>
<h2 id="franchise-heading">매출 약속보다<br />운영 조건부터.</h2>
<p>상권, 점포, 면적, 조리 동선과 비용 미정 항목을 먼저 확인할 수 있게 분리했습니다.</p>
<a class="button button-light" href="./franchise/">가맹 운영 조건 보기 <span aria-hidden="true">→</span></a>
<small>실제 가맹 모집과 상담을 제공하지 않습니다.</small>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid">
<div><a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a><p>눌러 굽고, 바로 건넨다.</p></div>
<div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">가상 매장 안내</a><a href="./franchise/">가맹 안내</a></div>
<div><strong>정보 안내</strong><p>알레르기 정보도 예시입니다.</p><p>원산지와 영양 정보는 실제 제품 자료가 아닙니다.</p></div>
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
</div>
</footer>
</body>
</html>