From 9e4afee1164c2dba3dcebce21840886c681a992a Mon Sep 17 00:00:00 2001 From: RosieOh Date: Fri, 25 Sep 2026 03:10:47 +0900 Subject: [PATCH] =?UTF-8?q?feat(home):=20=EC=86=8C=EA=B0=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=EC=97=90=20=EC=95=B1=20=EC=B2=AB=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=9D=84=20=EB=B3=B4=EC=97=AC=EC=A4=80=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 소개 사이트가 제품 화면을 한 번도 보여주지 않아, 읽는 사람은 앱을 열면 무엇이 보이는지 알 수 없었다. 스크린샷 대신 같은 구조를 다시 그린다 — 화면이 바뀔 때마다 이미지를 다시 찍을 필요가 없고, 글자가 DOM 이라 읽히고 번역된다. 항목 종류는 앱의 '지금 할 일' 과 같고, 값은 예시라고 화면에 적는다. --- src/components/AppScreenMock.tsx | 65 +++++++++++++++++ src/features/stations/Month01.tsx | 16 +++++ src/styles/grow.css | 112 ++++++++++++++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 src/components/AppScreenMock.tsx diff --git a/src/components/AppScreenMock.tsx b/src/components/AppScreenMock.tsx new file mode 100644 index 0000000..cf07978 --- /dev/null +++ b/src/components/AppScreenMock.tsx @@ -0,0 +1,65 @@ +import { ReactNode } from 'react' + +const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? '' + +/** + * 앱의 첫 화면. + * + * 소개 사이트가 제품 화면을 한 번도 보여주지 않으면, 읽는 사람은 "그래서 앱을 열면 뭐가 + * 보이는데?" 를 끝까지 알 수 없다. 스크린샷 대신 같은 구조를 여기서 다시 그린다 — 화면이 + * 바뀔 때마다 이미지를 다시 찍어 올릴 필요가 없고, 글자가 DOM 이라 읽히고 번역된다. + * + * 항목은 앱의 "지금 할 일"이 실제로 올리는 종류와 같다(소급 가능한 지원금 · 접종 예정일 · + * 대기 순번). 값은 예시라 화면에도 예시라고 적는다. + */ +type Row = { tag: string; title: string; detail: string; urgent?: boolean } + +const ROWS: Row[] = [ + { + tag: '지원금', + title: '소급 신청할 수 있는 지원금 2건', + detail: '120만원 · 기간이 지나면 사라져요', + urgent: true, + }, + { tag: '접종', title: '서아 · 일본뇌염 2차', detail: '2026.10.02 · 7일 남음' }, + { tag: '어린이집', title: '대기 중인 어린이집 3곳', detail: '가장 앞선 순번 4번' }, +] + +export default function AppScreenMock(): ReactNode { + return ( +
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element -- 정적 출력이라 next/image 최적화를 쓸 수 없다 */} + + 홈 +
+ + {/* 앱 상단의 기준 — 어느 아이, 어디 사는가 */} +
+ 서아 · 2세 3개월 + 성남시 분당구 +
+ +

지금 할 일

+
    + {ROWS.map((row) => ( +
  • + + {row.tag} + + + {row.title} + {row.detail} + +
    • + ))} +
+
+
+ 앱을 열면 보이는 첫 화면입니다. 기한이 걸린 것만 위에 오고, 찾아보는 기능은 그 아래에 + 있습니다. 위 값은 예시입니다. +
+
+ ) +} diff --git a/src/features/stations/Month01.tsx b/src/features/stations/Month01.tsx index 81a23ab..b60c0ec 100644 --- a/src/features/stations/Month01.tsx +++ b/src/features/stations/Month01.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import AppScreenMock from '@/components/AppScreenMock' import { MEASURED_LABEL, SOURCES, formatCount } from '@/content/figures' import { Station, StationHead } from './Station' @@ -53,6 +54,21 @@ export function Month01(): ReactNode { ))} +
+
+

+ 앱에서는 이렇게 보입니다 +

+

+ 아이를 등록하면 그 아이의 개월 수를 기준으로 무엇이 열려 있고 무엇이 닫히는지 계산합니다. + 기한이 걸린 것만 첫 화면에 올라옵니다. +

+
+
+ +
+
+

네 곳의 정부 데이터를 한 자리에 {MEASURED_LABEL}

diff --git a/src/styles/grow.css b/src/styles/grow.css index 2df8710..ec4a768 100644 --- a/src/styles/grow.css +++ b/src/styles/grow.css @@ -854,3 +854,115 @@ body:has(.yr-sky) > footer { transition: none; } } +/* ============================================================ + 앱 화면 — 소개 사이트에서 제품을 한 번은 보여준다 + ============================================================ */ +.yr-phone { + margin: 0; + max-width: 340px; +} + +.yr-phone__frame { + border: 1px solid var(--line); + border-radius: 28px; + background: var(--surface); + box-shadow: var(--shadow); + padding: 16px 14px 20px; +} + +.yr-phone__bar { + display: flex; + align-items: center; + gap: 8px; + padding: 0 4px 10px; +} + +.yr-phone__title { + font-size: 1.0625rem; + font-weight: 700; +} + +.yr-phone__chips { + display: flex; + gap: 6px; + padding: 0 4px 14px; +} + +.yr-phone__chip { + border-radius: 999px; + background: var(--gray-100); + padding: 4px 10px; + font-size: 0.75rem; + color: var(--fg-soft); +} + +.yr-phone__chip--child { + background: var(--brand-tint); + color: var(--brand-deep); + font-weight: 600; +} + +.yr-phone__section { + padding: 0 4px 8px; + font-size: 0.875rem; + font-weight: 700; +} + +.yr-phone__list { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.yr-phone__list li { + display: flex; + align-items: center; + gap: 10px; + border-radius: 12px; + background: var(--bg); + padding: 12px; +} + +.yr-phone__list b { + display: block; + font-size: 0.8125rem; + font-weight: 600; +} + +.yr-phone__list small { + display: block; + margin-top: 2px; + font-size: 0.75rem; + color: var(--fg-soft); +} + +.yr-phone__tag { + flex: none; + border-radius: 999px; + background: var(--brand-tint); + padding: 3px 8px; + font-size: 0.6875rem; + font-weight: 600; + color: var(--brand-deep); +} + +.yr-phone__tag--urgent { + background: color-mix(in srgb, var(--alert) 12%, transparent); + color: var(--alert-deep); +} + +/* 1개월 구간: 간극 표 옆에 앱 화면을 나란히 */ +.yr-with-phone { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 340px); + gap: 40px; + align-items: start; +} + +@media (max-width: 900px) { + .yr-with-phone { + grid-template-columns: 1fr; + } +}