Thinking in
Soft Logic.

홈페이지의 System Logs 및 전체 변경 이력(Changelog) 아코디언 내 텍스트의 가독성과 시각 테마 통일성을 위한 패치를 진행했습니다.

1. 마크다운 본문 파싱 전면 도입

   • 렌더링 동기화: 기존 상세 이력 본문에서 마크다운 강조 표시(**) 등이 일반 텍스트로 노출되던 문제를 해결하기 위해, Astro 7의 최신 Content Layer render API를 활용하여 온전한 HTML 컴포넌트로 파싱 렌더링하도록 변경했습니다.
   • 적용 범위: 메인 홈의 System Logs 및 전체 변경 이력(/changelog) 페이지 아코디언 상세 보기 전역에 적용했습니다.

2. 블로그 테마와 디자인 동기화 (Style Unification)

   • 상세 이력 본문의 시각적 톤앤매너를 블로그 포스트 상세 페이지의 타이포그래피 양식과 일치시켰습니다.
   • 텍스트: 기본 컬러를 slate-600으로 부드럽게 매핑했습니다.
   • 강조 텍스트 (strong): 시그니처 쑥색인 matcha-900 색상으로 일체화했습니다.
   • 글머리 기호 (ul, li): 카키 숲빛인 matcha-800 마커 스타일을 적용했습니다.
   • 인라인 코드 (code): 연한 녹차빛 바탕색인 matcha-100 및 matcha-900 텍스트 스타일로 단장했습니다.

3. 아코디언 카드 여백 및 레이아웃 개선

   • 마크다운 파싱 도입 이후 생성된 블록 태그로 인해 답답해 보이던 여백을 개선하고자, 상세 정보 상자의 안쪽 여백을 기존 p-4에서 **px-6 py-5**로 넉넉하게 확장하여 테두리와 글자 사이에 쾌적한 호흡을 주었습니다.

MatchaLogic의 에러 및 상태 유틸리티 페이지들을 표준화하기 위해 공통 레이아웃을 설계하고, 감성적이고 위트 있는 차(Tea) 테마의 인터랙션을 적용했습니다.

1. 공통 상태 페이지 레이아웃 구축 (UtilityPageLayout.astro)

   • 콘텐츠 밀도가 낮은 특수 목적 페이지들의 디자인 일관성을 지키기 위해 공통 레이아웃 컴포넌트를 설계했습니다.
   • 구조 표준화: 중앙 그래픽(w-64 h-64) -> 쑥색 메인 타이틀 -> 설명문 -> 내용 카드 슬롯 -> 하단 2개 CTA 버튼으로 구성된 정렬 규격을 성립했습니다.
   • 페이지 정렬 통일: 컨테이너 가로폭을 max-w-5xl로 확장하여 데스크톱 화면에서 여백과 정렬이 다른 주요 페이지들과 완전히 일치하도록 보정했습니다.

2. 418 티팟 이스터에그 페이지 고도화 (418.astro)

   • 물리 흔들림 모션: 찻주전자 뚜껑 보석 밑에 대롱대롱 매달려 좌우로 흔들리는 실감 나는 티백 꼬리표(418 태그)를 추가했습니다.
   • 압력 증기 가속화: 대기 상태에서는 찻주전자가 조용히 끓다가, 마우스 호버 시 주전자가 흔들림을 멈추고 크기가 커짐과 동시에 증기가 2배 크기로 솟구치며 뿜어나오는 모션을 정교하게 입혔습니다.
   • 어조 정돈: 본문 설명을 더 부드러운 다실 테마의 카피로 윤문하고, 불필요한 메타 배지를 지웠습니다.

3. 404 에러 페이지 일러스트 리뉴얼 (404.astro)

   • 엎질러진 찻주전자 일러스트: 기존 낙엽 이모지 대신 주전자가 비스듬히 넘어져 바닥에 뚜껑이 구르고 주둥이 밑에 둥근 말차 웅덩이가 고여 슬퍼하는(ㅠ_ㅠ 표정) 테마 일러스트를 순수 CSS로 구축했습니다.
   • 타이틀 감성화: 헤드라인 카피를 위트 있는 "앗! 차를 엎질렀습니다." 로 변경하고, 418 페이지와 동일한 그래픽 높이선을 일치시켰습니다.

MatchaLogic에 실시간 차(Tea) 우림 API 및 테스트 가능한 인터랙티브 샌드박스를 통합하고, 서버리스 Edge 레벨의 동적 제어를 구축했습니다.

1. 실시간 차(Tea) 우림 API 개발

   • 블로그 포스트 실시간 메타데이터 통계를 조회하는 /api/brew/matcha.json을 추가했습니다.
   • 시스템 변경 이력(Changelog) 최신 데이터를 반환하는 /api/brew/sencha.json을 추가했습니다.
   • 사이트 내 사용 기술 스택 명세를 반환하는 /api/brew/hojicha.json을 추가했습니다.
   • 찻주전자 에러를 반환하는 /api/brew/coffee.json을 추가했습니다. (HTTP 418 I’m a teapot 에러 반환)

2. Edge 런타임 보안 및 트래픽 제한 (403, 429)

   • 동일 출처(Referer) 여부를 검증하여 외부 무단 호출을 방어하는 HTTP 403 Forbidden 필터를 적용했습니다.
   • 동일 IP 기준 1.5초 내 연속 호출 감지 시 HTTP 429 Too Many Requests 레이트 리미터를 구축했습니다.
   • 이중화 구현: Cloudflare Pages Functions (functions/api/brew/[drink].json.js)에서 런타임 보안 필터를 동적 처리하고, 로컬 개발 환경(npm run dev) 역시 동일하게 시뮬레이션되도록 이중으로 구현했습니다.

3. 인터랙티브 테스터 및 이스터에그 페이지

   • 홈페이지 하단에 API 호출 결과를 즉시 모니터링할 수 있는 대화형 콘솔 시뮬레이터 <ApiPlayground />를 추가했습니다.
   • /api-docs 페이지를 새롭게 신설하여 Swagger UI 스타일의 명세와 사용자가 경로를 직접 타이핑하여 검증할 수 있는 “실시간 API 요청 워크벤치”를 내장했습니다.
   • coffee.json 호출 시 티팟 증기 모션과 고장 경고를 테마로 디자인된 전용 /418 이스터에그 에러 페이지로 연결되는 동적 구조를 구축했습니다.

about.astro 및 changelog.astro 페이지의 비대해진 코드를 리팩토링하고 정형 데이터를 외부로 격리했습니다.

1. 소개 페이지 데이터 격리

   • about.astro 내부에 하드코딩되어 있던 3인(JIYU, Gemini, Antigravity)의 프로필 및 스토리 데이터를 src/data/aboutData.ts로 격리했습니다.
   • SVG 아이콘 소스 코드를 src/components/icons/AboutIcons.ts로 추출하여 결합도를 낮추고 유지보수성을 극대화했습니다. (메인 컴포넌트 코드 크기: 439줄 → 373줄로 약 15% 감축)

2. Changelog 공통 설정 및 타입 다이어트

   • 변경 이력 유형(Major, Feature, Fix 등)에 따른 테마 컬러 명세 및 버전 파서 로직을 src/data/changelogConfig.ts로 공통화했습니다.
   • 기존의 서버사이드 코드와 클라이언트사이드 스크립트에서 중복 관리되던 테마 설정 값을 단일 지점(Single Source of Truth)으로 일관되게 바인딩했습니다. (메인 컴포넌트 코드 크기: 374줄 → 348줄로 감축)

3. Kitchen Source 파일 추가

   • kitchen/source 페이지 뷰어에 changelog.astro 및 blog/[...slug].astro 핵심 코드를 추가하여 Astro 기반의 기능 로직 명세 노출 영역을 한층 더 넓혔습니다.

변경 이력을 SQL 테이블 형태의 직관적인 표로 개선하고, 각 릴리즈마다 작성된 개발 블로그(Blog) 및 AI 비평(Tasting) 콘텐츠의 연계 유무를 한눈에 볼 수 있도록 아코디언 매트릭스 뷰를 도입했습니다.