[FE] 나의 활동 기록 화면 — 디자인·구성 인계

[minyongP]

프론트 인계용입니다. 백엔드(GET /v1/me/activity)와 명세(§3.7)는 올라갔고, 화면이 아직 없습니다. 담당자는 일단 발행자로 두었으니 FE에서 가져가실 때 옮겨 주세요.

무엇

나의 활동 기록 화면. 내 기록을 월별·지역별로 집계해 보여주는 한 페이지입니다. 사이드바 책장 아래 하위 화면으로 잡았고, 경로는 /me/activity를 상정했습니다(진입점 위치는 미정 — 아래 「정해지지 않은 것」 참고).

• API: GET /api/core/v1/me/activity — 명세 08_API_명세 §3.7, 백엔드 feat(S15P11A705-397): 나의 활동 기록 집계 조회 API를 추가한다 back#207
• 화면 진입 시 1회 호출입니다. 페이지네이션·필터·기간 파라미터가 없습니다.

화면 구성

세로로 세 덩어리입니다. 새 컴포넌트가 필요 없고 전부 div와 CSS 폭·높이로 됩니다 — SVG·캔버스·차트 라이브러리를 쓰지 않는 것이 이 화면의 설계 전제입니다.

┌ PageTitle ─────────────────────────────────────────┐
│ 2026년, 당신의 기록                                  │
│ 지금까지 남긴 장소와 맥락을 모아 봤어요.               │
├────────────────────────────────────────────────────┤
│ [ 24곳 ]      [ 7개 구 ]      [ 8개월 ]              │  ← 큰 숫자 3열
├──────────────────────────┬─────────────────────────┤
│ 월별 기록 (세로 막대)      │ 이만큼 쌓였어요           │  ← 1.45 : 1
├──────────────────────────┼─────────────────────────┤
│ 많이 다닌 지역 (가로 막대) │ 기억에 남을 만한 것        │  ← 1.45 : 1
└──────────────────────────┴─────────────────────────┘

블록별 데이터 매핑

화면	응답 필드
24곳 / 7개 구	totals.placeCount / totals.districtCount
8개월 · 첫 기록 2026-01-14	totals.firstRecordedOn부터 오늘까지의 개월 수 + 그 날짜
월별 막대	months[] — {month: "2026-03", recordCount}
많이 다닌 지역	areas[] — {district, recordCount}, 이미 상위 5·정렬 완료
이만큼 쌓였어요	counts.contextCount · counts.collectionCount · counts.recordedMonthCount
기억에 남을 만한 것	highlights.firstPlaceName · highlights.busiestDay · highlights.lastPlaceName

서버가 이미 정렬·상한·빈 달 채우기를 끝내서 내려줍니다. 프론트에서 다시 자르거나 정렬하지 마세요 — 기준이 두 곳으로 갈립니다.

• months는 첫 기록 달부터 이번 달까지 빈칸 없이 옵니다. 기록이 없는 달은 recordCount: 0입니다. 그대로 그리면 됩니다.
• counts.recordedMonthCount(기록이 실제로 있는 달 수)와 months.length는 다릅니다. 화면이 둘 다 씁니다 — "8개월"(기간)과 "기록한 달 7개월"(실제).

차트 규칙

차트는 월별 막대 하나뿐입니다. 나머지는 stat tile과 목록입니다 — 단일 사실을 차트로 그리지 않습니다.

• 막대 색은 하나입니다. 최고값을 다른 색으로 칠하지 마세요. 색이 순위를 따라가면 다음 달에 최고값이 바뀌면서 색이 막대 사이를 옮겨다닙니다. 강조는 값 라벨로 합니다 — 최고값 막대 하나에만 숫자를 얹고 나머지는 hover 툴팁(월 · N건)으로 읽습니다.
• 세로 막대: 윗모서리 4px, 바닥에 붙임, 막대 사이 최소 6px, 축은 1px 실선 하나.
• 가로 막대(지역): 5줄뿐이라 줄 끝에 값을 다 적습니다 — 이게 표 역할을 겸합니다.
• 도넛·이중축·무지개 팔레트·범례를 쓰지 않습니다. 단일 계열이라 제목이 곧 계열 이름입니다.

⚠️ 막대 색에 토큰 추가가 필요합니다

브랜드 민트 #3BB7A2는 흰 배경(snow-white #FDFDFD) 대비 2.43:1이라 막대에 쓸 수 없습니다(3:1 미달). 같은 계열에서 3:1을 통과하는 가장 밝은 단계인 #2E9C88 을 제안합니다.

이 값은 tailwind.config.js에 없는 색이고 그 파일은 FE가 관리하므로, 토큰 추가는 FE 판단입니다. 지도 핀처럼 흰 테두리가 형태를 잡아주는 자리는 브랜드 민트를 그대로 써도 됩니다 — 막대는 면이라 대비가 유일한 단서입니다.

빈 상태

• 기록 0건이어도 200입니다. months·areas는 빈 배열, 카운트는 0, firstRecordedOn과 highlights의 세 값은 null입니다. 404가 아닙니다.
• 막대가 1~2개로 줄어도 2×2 격자는 그대로 둡니다. 카드 4장이 자리를 지키면 안이 비지 않습니다. 섹션을 숨기면 오히려 화면이 무너집니다.
• 다만 기록 0건이면 책장에서 이 화면 진입점을 숨기는 것을 제안합니다. 전부 0인 화면을 첫 사용자에게 주는 것은 이 페이지 목적과 어긋납니다.

정해지지 않은 것

1. 진입점 위치 — 책장 안 링크인지, 설정 메뉴인지, 별도 탭인지. FE 판단이 필요합니다.
2. 라우트 경로 — /me/activity로 상정했지만 확정 아닙니다.
3. 제목 문구 — "2026년, 당신의 기록"으로 그렸는데 집계는 전체 누적이라 연도를 박으면 어긋납니다. "당신의 기록" 쪽이 맞습니다.
4. 반응형 — 목업은 사이드바 펼침(xl) 한 구간만 그렸습니다. md 레일·sm 하단 탭바 구간은 FE 몫입니다.

목업

브라우저에서 도는 HTML 목업이 있습니다(실제 jeju-gothic.woff2와 logo-full.png를 물고, 값은 실행 중인 앱에서 계산된 스타일로 맞췄습니다). 레포에 커밋하지 않았으니 필요하시면 이 이슈에 첨부하겠습니다 — 말씀 주세요.