From 4831e2d25d83c7f5ed23d889d273078fa47a4f5a Mon Sep 17 00:00:00 2001 From: Mina Choi Date: Wed, 30 Sep 2026 15:30:30 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20solution/site:=20=EC=82=AC=EC=A7=84=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=EB=A5=BC=20PhotoCard=20=ED=95=98=EB=82=98?= =?UTF-8?q?=EB=A1=9C=20=ED=86=B5=EC=9D=BC=20=E2=80=94=20=ED=85=9C=ED=94=8C?= =?UTF-8?q?=EB=A6=BF=EB=A7=88=EB=8B=A4=20=EC=A0=9C=EA=B0=81=EA=B0=81?= =?UTF-8?q?=EC=9D=B4=EB=8D=98=20=EC=B6=95=EC=A0=9C=C2=B7=EB=AA=85=EC=86=8C?= =?UTF-8?q?=20=EC=B9=B4=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 같은 템플릿 안에서도 축제 카드(흰 바탕·글 안쪽)와 명소 카드(바탕 없음·글 아래)가 따로 놀았다. 실측(9종 전수): 제목 굵기 400/500/700/900, 사진 모서리 0/12/18/22px 가 한 화면에 섞여 있었다. - kit/Card.tsx·card.css: 사진 3:2 + 제목 1줄 + 거리 1줄 + 설명 2줄. 템플릿 차이는 --kc-* 변수만 - 9종 Around·Festival, 고택 인물: 사진 카드를 PhotoCard 로 교체. 맛집·홈 목록 행은 그대로 - 템플릿 CSS: 모서리·글꼴·강조색 변수와 그리드 간격. 일러스트는 상자형, 빅타이포는 선 격자 - 모바일 캐러셀 화살표가 카드를 가려 1024px 미만에서 숨김 - docs/TEMPLATE_DESIGN.md: 사진 카드 규칙 tsc·eslint 통과 · vitest 123 passed · 12개 사이트 굽기 · 카드 모양 템플릿당 1종 확인 Co-Authored-By: Claude Opus 5.5 --- docs/TEMPLATE_DESIGN.md | 8 +++ solution/site/src/layouts/bigtype/Around.tsx | 18 +++++-- .../site/src/layouts/bigtype/Festival.tsx | 18 +++---- solution/site/src/layouts/bigtype/bigtype.css | 4 ++ solution/site/src/layouts/boutique/Around.tsx | 18 +++++-- .../site/src/layouts/boutique/Festival.tsx | 17 +++---- .../site/src/layouts/boutique/boutique.css | 6 +++ solution/site/src/layouts/cinema/Around.tsx | 28 +++++++--- solution/site/src/layouts/cinema/Festival.tsx | 17 +++---- solution/site/src/layouts/cinema/cinema.css | 6 +++ solution/site/src/layouts/coral/Around.tsx | 37 ++++++-------- solution/site/src/layouts/coral/coral.css | 2 + solution/site/src/layouts/graphic/Around.tsx | 17 ++++++- .../site/src/layouts/graphic/Festival.tsx | 17 +++---- solution/site/src/layouts/graphic/graphic.css | 4 ++ solution/site/src/layouts/kit/Card.tsx | 31 +++++++++++ solution/site/src/layouts/kit/card.css | 13 +++++ solution/site/src/layouts/minimal/Around.tsx | 37 ++++++-------- solution/site/src/layouts/minimal/minimal.css | 2 + solution/site/src/layouts/paper/Around.tsx | 26 ++++------ solution/site/src/layouts/paper/Festival.tsx | 20 +++----- solution/site/src/layouts/paper/Story.tsx | 51 +++++++++++-------- solution/site/src/layouts/paper/paper.css | 1 + solution/site/src/layouts/pine/Around.tsx | 21 ++++---- solution/site/src/layouts/pine/pine.css | 2 + solution/site/src/layouts/round/Around.tsx | 37 ++++++-------- solution/site/src/layouts/round/round.css | 2 + 27 files changed, 282 insertions(+), 178 deletions(-) create mode 100644 solution/site/src/layouts/kit/Card.tsx create mode 100644 solution/site/src/layouts/kit/card.css diff --git a/docs/TEMPLATE_DESIGN.md b/docs/TEMPLATE_DESIGN.md index b722e69..198ea3c 100644 --- a/docs/TEMPLATE_DESIGN.md +++ b/docs/TEMPLATE_DESIGN.md @@ -49,6 +49,14 @@ - 같은 목록의 카드는 같은 크기: 사진은 고정 비율 + `object-fit:cover`, 글은 줄 수 말줄임 - 칸 수는 항목 수에 맞춘다(`repeat(auto-fit, minmax(…))`). 3개인데 4칸을 잡아 빈칸을 남기지 않는다 +### 사진 카드는 하나다 — `layouts/kit/Card.tsx` `PhotoCard` + +- 주변 안내 · 축제 · 명소 · 인물(사진 있을 때)은 모두 `PhotoCard` 를 쓴다. 템플릿마다 카드를 새로 짓지 않는다 +- 모양: 사진(3:2) 아래에 제목 1줄 · 거리나 날짜 1줄 · 설명 2줄. 템플릿별로 다른 것은 `--kc-*` 변수만 + (`--kc-r` 사진 모서리, `--kc-tf`·`--kc-tw` 제목 글꼴·굵기, `--kc-mc` 거리 색, 상자형은 `--kc-bg`·`--kc-box-r`) +- 사진 없는 목록(맛집 · 홈 가까운 곳 목록)은 행(row)으로 쓴다. 한 섹션 안에서 카드와 행을 섞지 않는다 +- 모바일 캐러셀 화살표는 숨긴다(카드 위를 가린다). 1024px 이상에서만 사진 가운데 높이에 둔다 + ## 4. 섹션 머리 - **제목은 위, 내용은 아래.** 참고한 펜션 사이트들이 모두 이 방식이다 diff --git a/solution/site/src/layouts/bigtype/Around.tsx b/solution/site/src/layouts/bigtype/Around.tsx index 7d80daf..8058d69 100644 --- a/solution/site/src/layouts/bigtype/Around.tsx +++ b/solution/site/src/layouts/bigtype/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {Idx} from './SectionHead'; import {Tabs} from './Tabs'; @@ -66,6 +67,17 @@ export function Around() { ); + const spot = (place: LocalPlace) => ( + setOpen(place)} + /> + ); + return ( <> {rail.length > 0 && ( @@ -86,16 +98,14 @@ export function Around() {
-
    {shownSpots.slice(0, firstSpots).map((place, i) => item(place, i))}
+
{shownSpots.slice(0, firstSpots).map(spot)}
{shownSpots.length > firstSpots && (
{shownSpots.length - firstSpots}곳 더 보기 + -
    - {shownSpots.slice(firstSpots).map((place, i) => item(place, i + firstSpots))} -
+
{shownSpots.slice(firstSpots).map(spot)}
)}
diff --git a/solution/site/src/layouts/bigtype/Festival.tsx b/solution/site/src/layouts/bigtype/Festival.tsx index 30c33ef..365d1c3 100644 --- a/solution/site/src/layouts/bigtype/Festival.tsx +++ b/solution/site/src/layouts/bigtype/Festival.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {FestivalEntry} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Car} from '../paper/Car'; import {Sheet} from '../paper/Sheet'; import {Idx} from './SectionHead'; @@ -34,17 +35,12 @@ export function Festival() { arrows label="계절별 축제" slides={shown.map((f) => ( - + setOpen(f)} + /> ))} /> diff --git a/solution/site/src/layouts/bigtype/bigtype.css b/solution/site/src/layouts/bigtype/bigtype.css index ec22dfe..622673a 100644 --- a/solution/site/src/layouts/bigtype/bigtype.css +++ b/solution/site/src/layouts/bigtype/bigtype.css @@ -284,3 +284,7 @@ .w4-bigtype .ppl{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .w4-bigtype .amen{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}} .w4-bigtype .lead+:is(.chips,.tabrow){margin-top:20px} +.w4-bigtype{--kc-r:0;--kc-tw:500;--kc-ts:17px;--kc-mc:var(--sub);--kc-sub:var(--sub);--kc-px:12px;--kc-pb:14px} +.w4-bigtype .kgrid{gap:0;margin-top:0;border-top:1px solid var(--line);width:calc(100% + 1px);clip-path:inset(0 1px 0 0)} +.w4-bigtype .kgrid>.kcard{border-right:1px solid var(--line);border-bottom:1px solid var(--line)} +@media (min-width:1024px){.w4-bigtype .kgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}} diff --git a/solution/site/src/layouts/boutique/Around.tsx b/solution/site/src/layouts/boutique/Around.tsx index 7992599..62b7af1 100644 --- a/solution/site/src/layouts/boutique/Around.tsx +++ b/solution/site/src/layouts/boutique/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; const WALK = 80; @@ -70,6 +71,17 @@ export function Around() { ); + const spot = (item: LocalPlace) => ( + setOpen(item)} + /> + ); + return ( <> {rail.length > 0 && ( @@ -78,7 +90,7 @@ export function Around() {

AROUND

주변 안내

걸어서 닿는 명소와 맛집입니다.

-
{rail.slice(0, HOME_ROWS).map((item) => place(item))}
+
{rail.slice(0, HOME_ROWS).map(spot)}
지역 소개에서 모두 보기 @@ -95,11 +107,11 @@ export function Around() {

걸어서 닿는 곳부터 차로 가는 곳까지 묶었습니다.

-
{shownSpots.slice(0, firstSpots).map((item) => place(item))}
+
{shownSpots.slice(0, firstSpots).map(spot)}
{shownSpots.length > firstSpots && (
{shownSpots.length - firstSpots}곳 더 보기 -
{shownSpots.slice(firstSpots).map((item) => place(item))}
+
{shownSpots.slice(firstSpots).map(spot)}
)} diff --git a/solution/site/src/layouts/boutique/Festival.tsx b/solution/site/src/layouts/boutique/Festival.tsx index 5be93e8..0a65f39 100644 --- a/solution/site/src/layouts/boutique/Festival.tsx +++ b/solution/site/src/layouts/boutique/Festival.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {FestivalEntry} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; const SEASONS = ['봄', '여름', '가을', '겨울']; @@ -40,15 +41,13 @@ export function Festival() { )}
{shown.map((f) => ( - + setOpen(f)} + /> ))}
diff --git a/solution/site/src/layouts/boutique/boutique.css b/solution/site/src/layouts/boutique/boutique.css index 0d39ca5..2c98893 100644 --- a/solution/site/src/layouts/boutique/boutique.css +++ b/solution/site/src/layouts/boutique/boutique.css @@ -345,3 +345,9 @@ .w4-boutique[data-page=story] main .b-rule{margin-left:0;margin-right:0} .w4-boutique[data-page=story] main .shell{padding-inline:24px} .w4-boutique[data-page=story] main #reviews{margin-top:var(--sec)}} +.w4-boutique{--kc-r:999px 999px 0 0;--kc-ar:4/3;--kc-tf:var(--mj);--kc-tw:400;--kc-ts:17px;--kc-mc:var(--rose);--kc-sub:var(--sub);--kc-soft:var(--bg2)} +.w4-boutique .rail>.kcard{flex:0 0 62%;height:auto} +.w4-boutique .guide--card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px} +.w4-boutique #around .guide--card{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px} +.w4-boutique #around .kcard-t{font-size:15px} +@media (min-width:1024px){.w4-boutique .rail>.kcard{flex-basis:calc((100% - 48px) / 3)}.w4-boutique .guide--card{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}} diff --git a/solution/site/src/layouts/cinema/Around.tsx b/solution/site/src/layouts/cinema/Around.tsx index c94da73..aab7044 100644 --- a/solution/site/src/layouts/cinema/Around.tsx +++ b/solution/site/src/layouts/cinema/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {useWide} from './useWide'; @@ -71,6 +72,17 @@ export function Around() { ); + const spot = (item: LocalPlace) => ( + setOpen(item)} + /> + ); + return ( <> {rail.length > 0 && ( @@ -81,11 +93,13 @@ export function Around() {

걸어서 닿는 명소와 맛집입니다.

{rail.slice(0, HOME_ROWS).map((item) => ( - + setOpen(item)} + /> ))}
@@ -104,11 +118,11 @@ export function Around() {

걸어서 닿는 곳부터 차로 가는 곳까지 묶었습니다.

-
{shownSpots.slice(0, firstSpots).map((item) => place(item))}
+
{shownSpots.slice(0, firstSpots).map(spot)}
{shownSpots.length > firstSpots && (
{shownSpots.length - firstSpots}곳 더 보기 -
{shownSpots.slice(firstSpots).map((item) => place(item))}
+
{shownSpots.slice(firstSpots).map(spot)}
)} diff --git a/solution/site/src/layouts/cinema/Festival.tsx b/solution/site/src/layouts/cinema/Festival.tsx index 5be93e8..0a65f39 100644 --- a/solution/site/src/layouts/cinema/Festival.tsx +++ b/solution/site/src/layouts/cinema/Festival.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {FestivalEntry} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; const SEASONS = ['봄', '여름', '가을', '겨울']; @@ -40,15 +41,13 @@ export function Festival() { )}
{shown.map((f) => ( - + setOpen(f)} + /> ))}
diff --git a/solution/site/src/layouts/cinema/cinema.css b/solution/site/src/layouts/cinema/cinema.css index fd9b827..5dabe93 100644 --- a/solution/site/src/layouts/cinema/cinema.css +++ b/solution/site/src/layouts/cinema/cinema.css @@ -296,3 +296,9 @@ .w4-cinema .unit .btns{grid-template-columns:1fr 1fr}} .w4-cinema .wrap>.label:has(+h2),.w4-cinema .book .label,.w4-cinema .rhead>.kicker{display:none} .w4-cinema :is(h1,h2,.big,.hl){font-family:var(--tpl-font-heading)} +.w4-cinema{--kc-r:14px;--kc-tw:600;--kc-mc:var(--accent);--kc-sub:var(--sub);--kc-soft:rgba(244,239,230,.06)} +.w4-cinema .rail>.kcard{flex:0 0 72%;height:auto} +.w4-cinema .guide--card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;border-top:0} +.w4-cinema .grid3:has(>.kcard){gap:20px 10px} +.w4-cinema .grid3>.kcard .kcard-t{font-size:15px} +@media (min-width:1024px){.w4-cinema .rail>.kcard{flex:0 0 calc((100% - 30px) / 4)}.w4-cinema .guide--card,.w4-cinema #walk .guide{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px}.w4-cinema #around .grid3:has(>.kcard){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}} diff --git a/solution/site/src/layouts/coral/Around.tsx b/solution/site/src/layouts/coral/Around.tsx index 138f8c2..24e58a2 100644 --- a/solution/site/src/layouts/coral/Around.tsx +++ b/solution/site/src/layouts/coral/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {useWide} from './useWide'; @@ -66,18 +67,14 @@ export function Around() { ); const card = (place: LocalPlace) => ( - + setOpen(place)} + /> ); return ( @@ -94,15 +91,13 @@ export function Around() {
{rail.slice(0, railMax).map((place) => ( - + setOpen(place)} + /> ))}
diff --git a/solution/site/src/layouts/coral/coral.css b/solution/site/src/layouts/coral/coral.css index 12779d8..6772fee 100644 --- a/solution/site/src/layouts/coral/coral.css +++ b/solution/site/src/layouts/coral/coral.css @@ -447,3 +447,5 @@ .w4-coral #about .amen li.off .ic{color:#c2410c} .w4-coral #about .amen li.off{color:var(--sub)} .w4-coral :is(h1,h2,h3){font-family:var(--tpl-font-heading)} +.w4-coral{--kc-r:0;--kc-tw:500;--kc-mc:var(--accent);--kc-sub:var(--sub);--kc-soft:var(--alt)} +.w4-coral .cards2,.w4-coral .guide--3{row-gap:24px} diff --git a/solution/site/src/layouts/graphic/Around.tsx b/solution/site/src/layouts/graphic/Around.tsx index d13a8a2..a4c4d5e 100644 --- a/solution/site/src/layouts/graphic/Around.tsx +++ b/solution/site/src/layouts/graphic/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {SpotIcon} from './Art'; import {useWide} from './useWide'; @@ -70,6 +71,18 @@ export function Around() { ); + const spot = (place: LocalPlace) => ( + } + onClick={() => setOpen(place)} + /> + ); + return ( <>
@@ -103,11 +116,11 @@ export function Around() { const shown = spots.filter((p) => inRange(spotRange)(meters(p))); return ( <> -
{shown.slice(0, firstSpots).map((p, i) => row(p, i))}
+
{shown.slice(0, firstSpots).map(spot)}
{shown.length > firstSpots && (
{shown.length - firstSpots}곳 더 보기 -
{shown.slice(firstSpots).map((p, i) => row(p, i + firstSpots))}
+
{shown.slice(firstSpots).map(spot)}
)} diff --git a/solution/site/src/layouts/graphic/Festival.tsx b/solution/site/src/layouts/graphic/Festival.tsx index 5be93e8..0a65f39 100644 --- a/solution/site/src/layouts/graphic/Festival.tsx +++ b/solution/site/src/layouts/graphic/Festival.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {FestivalEntry} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; const SEASONS = ['봄', '여름', '가을', '겨울']; @@ -40,15 +41,13 @@ export function Festival() { )}
{shown.map((f) => ( - + setOpen(f)} + /> ))}
diff --git a/solution/site/src/layouts/graphic/graphic.css b/solution/site/src/layouts/graphic/graphic.css index 265bffd..e6a5d4c 100644 --- a/solution/site/src/layouts/graphic/graphic.css +++ b/solution/site/src/layouts/graphic/graphic.css @@ -334,3 +334,7 @@ @media(max-width:1023px){.w4-graphic #location .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .w4-graphic #location .btns>:first-child{grid-column:1/-1} .w4-graphic #location .btns>*{white-space:nowrap;min-width:0}} +.w4-graphic{--kc-r:0;--kc-box-r:22px;--kc-bg:var(--card);--kc-shadow:0 2px 0 rgba(29,43,36,.08);--kc-px:12px;--kc-pb:14px;--kc-tf:var(--k-head);--kc-tw:400;--kc-ts:17px;--kc-mc:var(--accent);--kc-sub:var(--sub);--kc-soft:#fff1c9} +.w4-graphic .rail>.kcard{flex:0 0 72%;height:auto} +.w4-graphic .guide--card{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px} +@media (min-width:1024px){.w4-graphic .rail>.kcard{flex:0 0 calc((100% - 48px) / 4)}.w4-graphic .guide--card{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px}} diff --git a/solution/site/src/layouts/kit/Card.tsx b/solution/site/src/layouts/kit/Card.tsx new file mode 100644 index 0000000..d2e4b56 --- /dev/null +++ b/solution/site/src/layouts/kit/Card.tsx @@ -0,0 +1,31 @@ +import type {ReactNode} from 'react'; +import './card.css'; + +export function PhotoCard({ + image, + title, + meta, + desc, + fallback, + ratio, + onClick, +}: { + image?: string | null; + title: string; + meta?: string | null; + desc?: string | null; + fallback?: ReactNode; + ratio?: string; + onClick: () => void; +}) { + return ( + + ); +} diff --git a/solution/site/src/layouts/kit/card.css b/solution/site/src/layouts/kit/card.css new file mode 100644 index 0000000..ec7e615 --- /dev/null +++ b/solution/site/src/layouts/kit/card.css @@ -0,0 +1,13 @@ +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;margin:0;padding:0 0 var(--kc-pb,0);border:0;border-radius:var(--kc-box-r,0);overflow:hidden;background:var(--kc-bg,none);box-shadow:var(--kc-shadow,none);color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-ph{position:relative;display:block;width:100%;aspect-ratio:var(--kc-ar,3/2);border-radius:var(--kc-r,14px);overflow:hidden;background:var(--kc-soft,rgba(127,127,127,.1))} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard:hover .kcard-ph img{transform:scale(1.03)} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-no{display:grid;place-items:center;width:100%;height:100%;padding:0 16px;font-family:var(--kc-tf,inherit);font-size:17px;line-height:1.4;text-align:center;color:var(--kc-sub,inherit)} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-no svg{width:40px;height:40px} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-t{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:12px;padding:0 var(--kc-px,2px);font-family:var(--kc-tf,inherit);font-size:var(--kc-ts,16px);font-weight:var(--kc-tw,600);line-height:1.45;letter-spacing:-.01em} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-m{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;padding:0 var(--kc-px,2px);font-size:14px;font-weight:500;line-height:1.5;color:var(--kc-mc,inherit)} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kcard-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;padding:0 var(--kc-px,2px);font-size:15px;line-height:1.6;color:var(--kc-sub,inherit)} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px} +@media (min-width:1024px){:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .kgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px 20px}} +:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .car--multi:has(.kcard) .arrow{top:calc(50% - 30px)} +@media (max-width:1023px){:is(.w4p,.w4-round,.w4-cinema,.w4-bigtype,.w4-boutique,.w4-graphic,.w4-coral,.w4-minimal,.w4-pine) .car--multi:has(.kcard) .arrow{display:none}} diff --git a/solution/site/src/layouts/minimal/Around.tsx b/solution/site/src/layouts/minimal/Around.tsx index 138f8c2..24e58a2 100644 --- a/solution/site/src/layouts/minimal/Around.tsx +++ b/solution/site/src/layouts/minimal/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {useWide} from './useWide'; @@ -66,18 +67,14 @@ export function Around() { ); const card = (place: LocalPlace) => ( - + setOpen(place)} + /> ); return ( @@ -94,15 +91,13 @@ export function Around() {
{rail.slice(0, railMax).map((place) => ( - + setOpen(place)} + /> ))}
diff --git a/solution/site/src/layouts/minimal/minimal.css b/solution/site/src/layouts/minimal/minimal.css index 60891cb..bee17a2 100644 --- a/solution/site/src/layouts/minimal/minimal.css +++ b/solution/site/src/layouts/minimal/minimal.css @@ -450,3 +450,5 @@ .w4-minimal #about .amen li.off .ic{color:#c2410c} .w4-minimal #about .amen li.off{color:var(--sub)} .w4-minimal :is(h1,h2,.hl){font-family:var(--tpl-font-heading)} +.w4-minimal{--kc-r:0;--kc-tw:400;--kc-mc:var(--sub);--kc-sub:var(--sub);--kc-soft:var(--alt)} +.w4-minimal .cards2,.w4-minimal .guide--3{row-gap:28px} diff --git a/solution/site/src/layouts/paper/Around.tsx b/solution/site/src/layouts/paper/Around.tsx index f59acde..32435f9 100644 --- a/solution/site/src/layouts/paper/Around.tsx +++ b/solution/site/src/layouts/paper/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Car} from './Car'; import {Sheet} from './Sheet'; @@ -80,11 +81,7 @@ export function Around() { arrows label="주변 안내" slides={rail.map((place) => ( - + setOpen(place)} /> ))} /> @@ -104,17 +101,16 @@ export function Around() { 걸어서 닿는 곳부터 차로 가는 곳까지 묶었습니다.

-
+
{shownSpots.map((place) => ( - + setOpen(place)} + /> ))}
diff --git a/solution/site/src/layouts/paper/Festival.tsx b/solution/site/src/layouts/paper/Festival.tsx index ae618d5..31b2b28 100644 --- a/solution/site/src/layouts/paper/Festival.tsx +++ b/solution/site/src/layouts/paper/Festival.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {FestivalEntry} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Car} from './Car'; import {Sheet} from './Sheet'; @@ -48,19 +49,12 @@ export function Festival() { arrows label="계절별 축제" slides={shown.map((f) => ( - + setOpen(f)} + /> ))} /> diff --git a/solution/site/src/layouts/paper/Story.tsx b/solution/site/src/layouts/paper/Story.tsx index 914b2a9..0e75343 100644 --- a/solution/site/src/layouts/paper/Story.tsx +++ b/solution/site/src/layouts/paper/Story.tsx @@ -2,6 +2,7 @@ import {useState, type ReactNode} from 'react'; import type {ChronicleItem, PeopleItem, ReadingItem, SongItem} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {sectionItems, sectionName} from '@site/lib/derive'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from './Sheet'; const COUNT_WORD: Record = {1: '한', 2: '두', 3: '세', 4: '네'}; @@ -60,27 +61,35 @@ export function Story() { {item.year && {item.year}} ); - const person = (item: PeopleItem) => ( - - ); + const person = (item: PeopleItem) => { + const show = () => + setOpen({ + title: item.name, + meta: [item.role, item.years].filter(Boolean).join(' · '), + body: item.oneLine, + image: item.imageUrl, + }); + if (item.imageUrl) + return ( + + ); + return ( + + ); + }; const event = (item: ChronicleItem) => ( + setOpen(place)} + /> ); return ( diff --git a/solution/site/src/layouts/pine/pine.css b/solution/site/src/layouts/pine/pine.css index c87e496..43b77be 100644 --- a/solution/site/src/layouts/pine/pine.css +++ b/solution/site/src/layouts/pine/pine.css @@ -450,3 +450,5 @@ .w4-pine #location .loc .map{aspect-ratio:auto;height:100%;min-height:320px} .w4-pine #location .loc .bd{align-self:center;padding:28px} .w4-pine #festival .car--multi .slide{flex:0 0 260px}} +.w4-pine{--kc-r:14px;--kc-tw:600;--kc-mc:var(--pine);--kc-sub:var(--sub);--kc-soft:var(--alt)} +.w4-pine .cards2{row-gap:24px} diff --git a/solution/site/src/layouts/round/Around.tsx b/solution/site/src/layouts/round/Around.tsx index 0fd2043..0b8db50 100644 --- a/solution/site/src/layouts/round/Around.tsx +++ b/solution/site/src/layouts/round/Around.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import type {LocalPlace} from '@o2o/shared'; import {useSite} from '@site/lib/site-context'; import {naverMapSearchUrl} from '@site/lib/format'; +import {PhotoCard} from '../kit/Card'; import {Sheet} from '../paper/Sheet'; import {useWide} from './useWide'; @@ -66,18 +67,14 @@ export function Around() { ); const card = (place: LocalPlace) => ( - + setOpen(place)} + /> ); return ( @@ -94,15 +91,13 @@ export function Around() {
{rail.slice(0, railMax).map((place) => ( - + setOpen(place)} + /> ))}
diff --git a/solution/site/src/layouts/round/round.css b/solution/site/src/layouts/round/round.css index 5e11270..f585c11 100644 --- a/solution/site/src/layouts/round/round.css +++ b/solution/site/src/layouts/round/round.css @@ -337,3 +337,5 @@ .w4-round #about .amen li.on .ic{color:#15803d} .w4-round #about .amen li.off .ic{color:#c2410c} .w4-round #about .amen li.off{color:var(--sub)} +.w4-round{--kc-r:var(--r-card);--kc-tw:700;--kc-mc:var(--accent);--kc-sub:var(--sub);--kc-soft:var(--alt)} +.w4-round .cards2,.w4-round .guide--3{row-gap:24px}