designpaca/apps/site/public/work/saebyeok-cheonggwa/index.html
Yun Chan 2b7fa32b5b
All checks were successful
ci / build (push) Successful in 51s
release / release (push) Successful in 2m34s
feat: 한국어 우선 쇼케이스 정리
2026-08-26 18:14:41 +09:00

893 lines
43 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 name="theme-color" content="#16181a" />
<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@400;500;600&display=swap"
/>
<link rel="stylesheet" href="./styles/tokens.css?v=2" />
<link rel="stylesheet" href="./styles/main.css?v=2" />
<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='%2316181A'/%3E%3Cpath d='M6 20h20' stroke='%237FA8D9' stroke-width='2'/%3E%3Ccircle cx='13' cy='14' r='4.5' fill='none' stroke='%23F3F1EC' stroke-width='2'/%3E%3Cpath d='M13 9.5V7' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#top">
새벽청과
</a>
<nav class="nav" aria-label="주요 섹션">
<a href="#route">오는 길</a>
<a href="#grade">고르는 법</a>
<a href="#season">제철</a>
<a href="#wholesale">납품</a>
</nav>
<p class="head-meta mono">02:00 경매</p>
</div>
</header>
<main id="main">
<!-- ══════════════════════════════════════════════════════════
1 · 히어로 = 오늘의 판. 새벽 두 시라서 어둡다
══════════════════════════════════════════════════════════ -->
<section class="band band-dark hero" id="top" aria-labelledby="heroHeading">
<!-- 새벽 두 시의 시장 통로. 판 뒤에 깔리므로 어둡게, 과일만 색을 갖게 찍었다 -->
<img
class="hero-bg"
src="./assets/dawn-aisle.webp"
width="1600"
height="900"
alt=""
aria-hidden="true"
/>
<div class="wrap hero-inner">
<p class="hero-meta mono">
<span>오늘 경매</span>
<time datetime="2026-08-24T02:00+09:00">08월 24일 02:00</time>
<span class="meta-sep" aria-hidden="true">·</span>
<span>하절기 기준</span>
</p>
<h1 id="heroHeading">
오늘 새벽<br />
두 시의 값
</h1>
<p class="hero-lead">
값은 매일 바뀝니다. 바뀌는 값을 감추고 파는 대신, 오늘 얼마에 받아 왔는지를
먼저 적습니다.
</p>
<table class="board">
<caption class="sr-only">
오늘 낙찰 품목 여섯 가지 — 산지, 등급, 당도, 규격, 낙찰가, 전일 대비
</caption>
<thead>
<tr>
<th scope="col">품목</th>
<th scope="col">산지</th>
<th scope="col" class="c-num">등급</th>
<th scope="col" class="c-num">당도</th>
<th scope="col" class="c-num">규격</th>
<th scope="col" class="c-num">낙찰가</th>
<th scope="col" class="c-num">전일 대비</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="백도 복숭아"
data-origin="경북 청도"
data-grade="특 · 12.5 Bx"
data-pack="4.5 kg"
data-price="38,000원"
data-delta="▲ 2,000원"
data-auction="02:00 경매"
aria-pressed="true"
>백도 복숭아</button>
</th>
<td data-label="산지">경북 청도</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">12.5<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">4.5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">38,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 2,000</td>
</tr>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="샤인머스캣"
data-origin="경북 상주"
data-grade="특 · 18.2 Bx"
data-pack="2 kg"
data-price="26,500원"
data-delta="▼ 1,500원"
data-auction="02:00 경매"
aria-pressed="false"
>샤인머스캣</button>
</th>
<td data-label="산지">경북 상주</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">18.2<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">2<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">26,500</td>
<td data-label="전일 대비" class="c-num mono delta down">▼ 1,500</td>
</tr>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="캠벨얼리"
data-origin="충북 영동"
data-grade="상 · 15.4 Bx"
data-pack="5 kg"
data-price="31,000원"
data-delta="보합"
data-auction="02:00 경매"
aria-pressed="false"
>캠벨얼리</button>
</th>
<td data-label="산지">충북 영동</td>
<td data-label="등급" class="c-num mono">상</td>
<td data-label="당도" class="c-num mono">15.4<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">31,000</td>
<td data-label="전일 대비" class="c-num mono delta flat">보합</td>
</tr>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="홍로 사과"
data-origin="경북 영주"
data-grade="특 · 14.1 Bx"
data-pack="5 kg"
data-price="44,000원"
data-delta="▲ 3,500원"
data-auction="08:30 경매"
aria-pressed="false"
>홍로 사과</button>
</th>
<td data-label="산지">경북 영주</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">14.1<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">44,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 3,500</td>
</tr>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="원황 배"
data-origin="전남 나주"
data-grade="상 · 12.8 Bx"
data-pack="7.5 kg"
data-price="52,000원"
data-delta="▼ 2,000원"
data-auction="08:30 경매"
aria-pressed="false"
>원황 배</button>
</th>
<td data-label="산지">전남 나주</td>
<td data-label="등급" class="c-num mono">상</td>
<td data-label="당도" class="c-num mono">12.8<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">7.5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">52,000</td>
<td data-label="전일 대비" class="c-num mono delta down">▼ 2,000</td>
</tr>
<tr>
<th scope="row">
<button
class="board-select"
type="button"
data-market-row
data-name="무화과"
data-origin="전남 영암"
data-grade="특 · 당도 표기 대상 아님"
data-pack="1.2 kg"
data-price="24,000원"
data-delta="▲ 1,000원"
data-auction="02:00 경매"
aria-pressed="false"
>무화과</button>
</th>
<td data-label="산지">전남 영암</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono blank" title="당도 표시 대상 품목이 아닙니다">—</td>
<td data-label="규격" class="c-num mono">1.2<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">24,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 1,000</td>
</tr>
</tbody>
</table>
<div class="lot-inspector" aria-live="polite" aria-atomic="true">
<div class="lot-inspector-head">
<p class="mono">선택 로트 읽기</p>
<p class="mono" id="lotAuction">02:00 경매</p>
</div>
<div class="lot-inspector-body">
<div class="lot-title">
<p id="lotName">백도 복숭아</p>
<p id="lotOrigin">경북 청도</p>
</div>
<dl class="lot-spec">
<div>
<dt>등급 · 당도</dt>
<dd id="lotGrade">특 · 12.5 Bx</dd>
</div>
<div>
<dt>규격</dt>
<dd id="lotPack">4.5 kg</dd>
</div>
<div>
<dt>낙찰가</dt>
<dd id="lotPrice">38,000원</dd>
</div>
<div>
<dt>전일 대비</dt>
<dd id="lotDelta">▲ 2,000원</dd>
</div>
</dl>
</div>
</div>
<ul class="board-notes">
<li>
사과와 배는 같은 날 <span class="mono">08:30</span> 경매입니다. 나머지 넷은
<span class="mono">02:00</span> 에 붙습니다.
</li>
<li>
당도 칸의 <span class="mono">—</span> 는 값이 없다는 뜻이 아니라
<strong>표시가 허용되지 않는 품목</strong>이라는 뜻입니다. 무화과는 당도 표기
대상 13개 품목에 들어 있지 않습니다.
</li>
<li>
낙찰가는 경매에서 받아 온 값이고, 여기에 선별·포장·배송이 붙어 판매가가 됩니다.
두 값을 같은 것처럼 적지 않습니다.
</li>
<li class="note-demo">
위 표의 숫자는 <strong>이 쇼케이스를 위한 예시</strong>입니다. 실제 운영에서는
그날 경매 결과가 그대로 들어옵니다.
</li>
</ul>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
2 · 어떻게 오는가
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-route" id="route" aria-labelledby="routeHeading">
<div class="wrap">
<h2 id="routeHeading">밭에서 문 앞까지 다섯 번 손이 바뀝니다</h2>
<p class="section-lead">
이 경로는 우리가 만든 것이 아니라 도매시장이 원래 그렇게 돌아갑니다.
우리는 네 번째 자리에 서 있습니다.
</p>
<ol class="route">
<li>
<p class="route-num mono">01</p>
<h3>출하</h3>
<p>산지에서 따고 골라 담아 시장으로 보냅니다.</p>
</li>
<li>
<p class="route-num mono">02</p>
<h3>수집</h3>
<p>도매법인이 그날 들어온 물량을 받아 경매에 올립니다.</p>
</li>
<li>
<p class="route-num mono">03</p>
<h3>경매</h3>
<p>새벽 두 시. 값이 여기서 정해집니다. 낙찰된 값을 경락가격이라 부릅니다.</p>
</li>
<li class="route-here">
<p class="route-num mono">04</p>
<h3>낙찰 — 우리가 서는 자리</h3>
<p>
중도매인 자격으로 직접 받습니다. 어느 산지의 어느 등급을 얼마에 받았는지가
위의 판에 그대로 올라갑니다.
</p>
</li>
<li>
<p class="route-num mono">05</p>
<h3>그날 아침 배송</h3>
<p>다시 창고에 재우지 않습니다. 경매장에서 나온 상자가 그대로 갑니다.</p>
</li>
</ol>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
3 · 고르는 법
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-grade" id="grade" aria-labelledby="gradeHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="gradeHeading">판에 적힌 네 글자를 읽는 법</h2>
</div>
<div class="split-body">
<dl class="terms">
<div>
<dt>등급 <span class="term-en mono">특 · 상 · 보통</span></dt>
<dd>
크기가 고른가, 흠이 없는가, 색이 제대로 들었는가를 봅니다. 농산물 표준규격이
품목마다 따로 정해 두고 있습니다. <strong>당도를 표시할 수 있는 것은
특·상 등급뿐</strong>입니다.
</dd>
</div>
<div>
<dt>당도 <span class="term-en mono">Brix</span></dt>
<dd>
용액 100g 에 든 당이 몇 g 인지를 나타냅니다. 굴절당도계에 과즙 한 방울을
올려 잽니다. 높다고 늘 맛있는 것은 아니고 산도와의 균형이 맛을 정합니다 —
그래서 숫자만 크게 적지 않습니다.
</dd>
</div>
<div>
<dt>선과</dt>
<dd>
기계로 골라내는 일입니다. 드럼식은 지름으로, 중량식은 무게로 나눕니다.
같은 상자 안의 알이 고른 이유가 여기 있습니다.
</dd>
</div>
<div>
<dt>규격 <span class="term-en mono">kg</span></dt>
<dd>
상자 단위입니다. 사과는 2·5·7.5·10kg, 포도는 2·3·4·5kg 로 거래됩니다.
같은 값이라도 규격이 다르면 비교가 안 되므로 판에 함께 적습니다.
</dd>
</div>
</dl>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
4 · 제철 띠 — 12개월
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-season" id="season" aria-labelledby="seasonHeading">
<div class="wrap">
<p class="eyebrow">제철</p>
<h2 id="seasonHeading">없을 때는 없다고 적습니다</h2>
<p class="section-lead">
철이 아닌 것을 굳이 구해 오지 않습니다. 아래 띠에서 칸이 찬 달에만 그 품목이
판에 오릅니다.
</p>
<div class="season-control">
<div class="season-buttons" role="group" aria-label="제철 달 선택">
<button type="button" data-season-dir="-1" aria-label="이전 달">이전 달</button>
<button type="button" data-season-dir="1" aria-label="다음 달">다음 달</button>
</div>
<p class="season-status mono" aria-live="polite" aria-atomic="true">
<output id="seasonMonth">8월</output>
<span aria-hidden="true">·</span>
<span id="seasonCount">제철 품목을 읽는 중입니다</span>
</p>
</div>
<div class="season-scroll">
<table class="season">
<caption class="sr-only">품목별 제철 달력 — 가로축은 1월부터 12월</caption>
<thead>
<tr>
<th scope="col" class="season-item">품목</th>
<th scope="col" data-m="1">1</th>
<th scope="col" data-m="2">2</th>
<th scope="col" data-m="3">3</th>
<th scope="col" data-m="4">4</th>
<th scope="col" data-m="5">5</th>
<th scope="col" data-m="6">6</th>
<th scope="col" data-m="7">7</th>
<th scope="col" data-m="8">8</th>
<th scope="col" data-m="9">9</th>
<th scope="col" data-m="10">10</th>
<th scope="col" data-m="11">11</th>
<th scope="col" data-m="12">12</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">딸기</th>
<td class="on" data-m="1"><span class="sr-only">제철</span></td>
<td class="on" data-m="2"><span class="sr-only">제철</span></td>
<td class="on" data-m="3"><span class="sr-only">제철</span></td>
<td class="on" data-m="4"><span class="sr-only">제철</span></td>
<td data-m="5"></td><td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
<td data-m="9"></td><td data-m="10"></td><td data-m="11"></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
<tr>
<th scope="row">참외</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td class="on" data-m="4"><span class="sr-only">제철</span></td>
<td class="on" data-m="5"><span class="sr-only">제철</span></td>
<td class="on" data-m="6"><span class="sr-only">제철</span></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td data-m="8"></td><td data-m="9"></td><td data-m="10"></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">복숭아</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td>
<td class="on" data-m="6"><span class="sr-only">제철</span></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td data-m="10"></td><td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">포도</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">무화과</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">사과</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
<tr>
<th scope="row">배</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td data-m="12"></td>
</tr>
<tr>
<th scope="row">감귤</th>
<td class="on" data-m="1"><span class="sr-only">제철</span></td>
<td class="on" data-m="2"><span class="sr-only">제철</span></td>
<td data-m="3"></td><td data-m="4"></td><td data-m="5"></td>
<td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
<td data-m="9"></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
</tbody>
</table>
</div>
<p class="season-note">
달마다 굵은 세로선이 이번 달입니다. 산지와 그해 날씨에 따라 두 주쯤은 앞뒤로
움직입니다.
</p>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
5 · 오늘 들어온 것 — 사진이 색을 갖는 자리
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-today" id="today" aria-labelledby="todayHeading">
<div class="wrap">
<h2 id="todayHeading">오늘 들어온 것</h2>
<p class="section-lead">
같은 품목이라도 산지가 바뀌면 다른 물건입니다. 누가 어디서 길렀는지를 함께 적습니다.
</p>
<div class="today-grid">
<figure class="today-card">
<img
src="./assets/pear-crate.webp"
width="1100"
height="825"
loading="lazy"
decoding="async"
alt="흰 그물망에 하나씩 싼 배가 얕은 나무 상자에 담겨 있고, 한 알은 상자 옆에 꺼내 놓여 있습니다"
/>
<figcaption>
<p class="card-name">원황 배 <span class="card-origin">전남 나주</span></p>
<dl class="card-spec mono">
<div><dt>등급</dt><dd>상</dd></div>
<div><dt>당도</dt><dd>12.8 Bx</dd></div>
<div><dt>규격</dt><dd>7.5 kg</dd></div>
</dl>
<p class="card-note">
나주 배는 물이 많고 단맛이 늦게 옵니다. 그물망은 멋이 아니라 눌림을 막는
포장입니다.
</p>
</figcaption>
</figure>
<figure class="today-card">
<img
src="./assets/grape-bloom.webp"
width="900"
height="1200"
loading="lazy"
decoding="async"
alt="흰 종이 위에 놓인 진자주색 포도 송이. 껍질에 하얀 과분이 그대로 남아 있습니다"
/>
<figcaption>
<p class="card-name">캠벨얼리 <span class="card-origin">충북 영동</span></p>
<dl class="card-spec mono">
<div><dt>등급</dt><dd>상</dd></div>
<div><dt>당도</dt><dd>15.4 Bx</dd></div>
<div><dt>규격</dt><dd>5 kg</dd></div>
</dl>
<p class="card-note">
껍질에 앉은 흰 가루는 과분입니다. 씻겨 나간 것이 아니라 남아 있는 쪽이
덜 만져진 것입니다.
</p>
</figcaption>
</figure>
<figure class="today-card today-card-wide">
<img
src="./assets/refractometer.webp"
width="1100"
height="825"
loading="lazy"
decoding="async"
alt="스테인리스 작업대 위 굴절당도계의 프리즘 판에 과즙 한 방울이 올려져 있습니다"
/>
<figcaption>
<p class="card-name">당도는 이렇게 잽니다</p>
<p class="card-note">
굴절당도계에 과즙을 한 방울 올리고 빛이 꺾이는 각을 봅니다.
상자마다 재는 것이 아니라 들어온 로트에서 표본을 뽑아 잽니다 —
그래서 판의 당도는 그 로트의 값입니다.
</p>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
6 · 납품
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-wholesale" id="wholesale" aria-labelledby="wsHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="wsHeading">가게에 넣는 경우</h2>
</div>
<div class="split-body">
<p class="lead">
카페·베이커리·식당처럼 매일 같은 품질이 필요한 곳은 소매와 다른 조건으로
봅니다. 값보다 <strong>편차</strong>가 문제이기 때문입니다.
</p>
<dl class="ws-rows">
<div>
<dt>주문 마감</dt>
<dd>전날 <span class="mono">21:00</span> — 그래야 새벽 경매에서 물량을 잡습니다</dd>
</div>
<div>
<dt>배송</dt>
<dd>같은 날 오전. 수도권은 직접 돌고, 그 밖은 새벽 물류로 보냅니다</dd>
</div>
<div>
<dt>등급 고정</dt>
<dd>
등급을 계약으로 묶습니다. 그날 시세가 올라도 등급을 낮춰 값을 맞추지
않습니다
</dd>
</div>
<div>
<dt>시세 공유</dt>
<dd>낙찰가를 그대로 전달합니다. 마진은 별도 항목으로 적습니다</dd>
</div>
<div>
<dt>최소 물량</dt>
<dd>품목당 상자 <span class="mono">3</span> 개부터</dd>
</div>
</dl>
<section class="order-draft" aria-labelledby="orderDraftHeading">
<div class="order-draft-head">
<h3 id="orderDraftHeading">발주 메모 만들기</h3>
<p class="mono">쇼케이스 예시</p>
</div>
<div class="order-controls">
<label>
<span>품목</span>
<select id="orderItem">
<option value="백도 복숭아" data-price="38000" data-pack="4.5 kg">백도 복숭아 · 특 · 4.5 kg</option>
<option value="샤인머스캣" data-price="26500" data-pack="2 kg">샤인머스캣 · 특 · 2 kg</option>
<option value="캠벨얼리" data-price="31000" data-pack="5 kg">캠벨얼리 · 상 · 5 kg</option>
<option value="홍로 사과" data-price="44000" data-pack="5 kg">홍로 사과 · 특 · 5 kg</option>
<option value="원황 배" data-price="52000" data-pack="7.5 kg">원황 배 · 상 · 7.5 kg</option>
<option value="무화과" data-price="24000" data-pack="1.2 kg">무화과 · 특 · 1.2 kg</option>
</select>
</label>
<label>
<span>상자 수</span>
<input id="orderQty" type="number" min="3" max="50" step="1" value="3" inputmode="numeric" />
</label>
</div>
<dl class="order-summary">
<div>
<dt>규격</dt>
<dd class="mono" id="orderPack">4.5 kg × 3상자</dd>
</div>
<div>
<dt>예시 낙찰가 합계</dt>
<dd class="mono" id="orderTotal">114,000원</dd>
</div>
</dl>
<p class="order-fine">
위 합계는 판에 적힌 예시 낙찰가만 더합니다. 선별·포장·배송과 실제 납품가는 포함하지 않습니다.
</p>
<div class="order-actions">
<button class="btn" id="copyOrder" type="button">발주 메모 복사</button>
</div>
<p class="order-status" id="orderStatus" role="status"></p>
</section>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
7 · 문의
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-contact" id="contact" aria-labelledby="contactHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="contactHeading">문의</h2>
</div>
<div class="split-body">
<dl class="contact-rows">
<div>
<dt>여는 시각</dt>
<dd>새벽 <span class="mono">01:30</span> – 낮 <span class="mono">12:00</span> · 일요일 휴무</dd>
</div>
<div>
<dt>주문 마감</dt>
<dd>전날 <span class="mono">21:00</span></dd>
</div>
<div>
<dt>메일</dt>
<dd><a class="mono" href="mailto:order@saebyeok-cheonggwa.example">order@saebyeok-cheonggwa.example</a></dd>
</div>
</dl>
<p class="contact-fine">
주소·전화·사업자 정보는 실제 상호가 정해진 뒤에 채웁니다.
지어낸 값을 임시로 적어 두지 않습니다.
</p>
</div>
</div>
</section>
</main>
<footer class="band band-dark site-foot">
<div class="wrap foot-inner">
<p class="foot-name">새벽청과</p>
<p class="foot-line">새벽 경매에서 받아 그날 아침에 보냅니다</p>
<p class="foot-fine">
이 페이지는 designpaca 쇼케이스입니다. 실제 영업하는 상호가 아니며,
판의 숫자는 화면 구성을 보이기 위한 예시입니다. 경매 시각·등급·당도 표시 규정 등
제도에 관한 설명은 실제 농산물 표준규격과 도매시장 운영 방식을 따릅니다.
</p>
</div>
</footer>
<script>
(() => {
const marketTime = new Date();
const dateParts = Object.fromEntries(
new Intl.DateTimeFormat("en-CA", {
timeZone: "Asia/Seoul",
year: "numeric",
month: "2-digit",
day: "2-digit",
})
.formatToParts(marketTime)
.filter((part) => part.type !== "literal")
.map((part) => [part.type, part.value]),
);
const currentMonth = Number(dateParts.month);
const heroMetaTime = document.querySelector(".hero-meta time");
if (heroMetaTime) {
heroMetaTime.dateTime = `${dateParts.year}-${dateParts.month}-${dateParts.day}T02:00+09:00`;
heroMetaTime.textContent = `${dateParts.month}월 ${dateParts.day}일 02:00`;
}
/* 판의 한 행을 고르면 같은 값으로 로트 판독기가 바뀐다. */
const marketRows = [...document.querySelectorAll("[data-market-row]")];
const lotFields = {
auction: document.getElementById("lotAuction"),
name: document.getElementById("lotName"),
origin: document.getElementById("lotOrigin"),
grade: document.getElementById("lotGrade"),
pack: document.getElementById("lotPack"),
price: document.getElementById("lotPrice"),
delta: document.getElementById("lotDelta"),
};
function showLot(button) {
for (const row of marketRows) row.setAttribute("aria-pressed", String(row === button));
for (const [key, field] of Object.entries(lotFields)) {
if (field) field.textContent = button.dataset[key] || "";
}
if (orderItem) orderItem.value = button.dataset.name || orderItem.value;
updateOrder();
}
for (const row of marketRows) row.addEventListener("click", () => showLot(row));
/* 제철 띠는 이번 달에서 시작하지만 앞뒤 달도 직접 읽을 수 있다. */
let selectedMonth = currentMonth;
const season = document.querySelector(".season");
const seasonScroll = document.querySelector(".season-scroll");
const seasonMonth = document.getElementById("seasonMonth");
const seasonCount = document.getElementById("seasonCount");
function showMonth(month, moveViewport) {
selectedMonth = month;
season?.querySelectorAll(".is-focus").forEach((cell) => cell.classList.remove("is-focus"));
season?.querySelectorAll("[aria-current='date']").forEach((cell) => cell.removeAttribute("aria-current"));
season?.querySelectorAll(`[data-m="${month}"]`).forEach((cell) => cell.classList.add("is-focus"));
const head = season?.querySelector(`thead [data-m="${month}"]`);
if (month === currentMonth) head?.setAttribute("aria-current", "date");
const items = [...(season?.querySelectorAll("tbody tr") || [])]
.filter((row) => row.querySelector(`td.on[data-m="${month}"]`))
.map((row) => row.querySelector("th")?.textContent.trim())
.filter(Boolean);
if (seasonMonth) seasonMonth.textContent = `${month}월`;
if (seasonCount) seasonCount.textContent = `${items.length}품목 · ${items.join(" · ")}`;
if (moveViewport && head && seasonScroll) {
const left = Math.max(0, head.offsetLeft - seasonScroll.clientWidth / 2 + head.clientWidth / 2);
seasonScroll.scrollTo({ left, behavior: "smooth" });
}
}
document.querySelectorAll("[data-season-dir]").forEach((button) => {
button.addEventListener("click", () => {
const next = ((selectedMonth - 1 + Number(button.dataset.seasonDir) + 12) % 12) + 1;
showMonth(next, true);
});
});
showMonth(currentMonth, false);
/* 낙찰가 예시로 발주 메모를 만든다. 납품가처럼 보이지 않게 항목을 분리한다. */
const orderItem = document.getElementById("orderItem");
const orderQty = document.getElementById("orderQty");
const orderPack = document.getElementById("orderPack");
const orderTotal = document.getElementById("orderTotal");
const orderStatus = document.getElementById("orderStatus");
function orderValues() {
const option = orderItem?.selectedOptions[0];
const quantity = Math.min(50, Math.max(3, Number(orderQty?.value) || 3));
const price = Number(option?.dataset.price) || 0;
return {
name: option?.value || "",
pack: option?.dataset.pack || "",
quantity,
total: price * quantity,
};
}
function updateOrder() {
const value = orderValues();
if (orderPack) orderPack.textContent = `${value.pack} × ${value.quantity}상자`;
if (orderTotal) orderTotal.textContent = `${value.total.toLocaleString("ko-KR")}원`;
if (orderStatus) orderStatus.textContent = "";
}
orderItem?.addEventListener("change", updateOrder);
orderQty?.addEventListener("input", updateOrder);
orderQty?.addEventListener("change", () => {
if (orderQty) orderQty.value = String(orderValues().quantity);
updateOrder();
});
async function copyText(text) {
if (navigator.clipboard?.writeText) {
try {
await Promise.race([
navigator.clipboard.writeText(text),
new Promise((_, reject) => window.setTimeout(() => reject(new Error("clipboard timeout")), 1200)),
]);
return true;
} catch {
// 권한 대화상자가 없거나 응답하지 않는 브라우저는 아래 선택 복사로 전환합니다.
}
}
const field = document.createElement("textarea");
field.value = text;
field.setAttribute("readonly", "");
field.style.position = "fixed";
field.style.inset = "0 auto auto -9999px";
document.body.append(field);
field.select();
const copied = document.execCommand("copy");
field.remove();
return copied;
}
document.getElementById("copyOrder")?.addEventListener("click", async () => {
const value = orderValues();
const memo = [
"새벽청과 납품 문의",
`품목: ${value.name}`,
`규격: ${value.pack}`,
`수량: ${value.quantity}상자`,
`예시 낙찰가 합계: ${value.total.toLocaleString("ko-KR")}원`,
"실제 납품가는 선별·포장·배송 조건을 확인한 뒤 정합니다.",
].join("\n");
try {
const copied = await copyText(memo);
if (orderStatus) {
orderStatus.textContent = copied
? "발주 메모를 복사했습니다."
: "복사하지 못했습니다. 브라우저의 클립보드 권한을 확인해 주세요.";
}
} catch {
if (orderStatus) orderStatus.textContent = "복사하지 못했습니다. 브라우저의 클립보드 권한을 확인해 주세요.";
}
});
updateOrder();
})();
</script>
</body>
</html>