프론트엔드를 중심으로 제품의 구조, 흐름, 운영까지 설계합니다.
_{Mobile-first UX · API-first architecture · Product UI · Blue Team QA}

API-first coding education/product platform
Next.js · Supabase 기반으로 게스트/회원 플로우, 공유 UX, GitHub avatar 기반 사용자 경험, 320/390px compact UI를 설계합니다.

Live App · TypeScript · Product UI · SEO/OG

CrossFit WOD, booking, coaching operations
회원/관리자 역할별 모바일 플로우, WOD 기록, 예약, 코칭 신청/승인 UX, 운영 데이터와 UI 상태를 연결하는 SaaS 구조를 만듭니다.

Mobile-first SaaS · Role UI · Ops flow

Frontend reference and AI-assisted workflow docs
Cafe24 모듈/변수/수정자 레퍼런스, 스킨 GitOps, 샘플몰 preview, AI 편집 guardrail, 정적 문서 UX를 정리합니다.

Repository · HTML · Docs UX · Public reference

Hermes Agent frontend skillpack for leaner implementation context
Ponytail · Graphify · Headroom 기반으로 프론트엔드 작업의 컨텍스트를 좁히고, 불필요한 토큰 소비를 줄이며, QA 중심 구현 흐름을 정리합니다.

Repository · Hermes Agent · Frontend workflow · Skillpack

01. Product Flow
사용자가 어디서 들어와서, 무엇을 보고, 어떤 행동을 완료해야 하는지 먼저 설계합니다.

02. API-first UI
화면만 만드는 것이 아니라 인증, 데이터 모델, API 응답, 에러/빈 상태까지 연결합니다.

03. Mobile Blue Team
320/390px, 터치 타깃, 텍스트 줄바꿈, 스크롤 밀도, OG/SEO까지 실제 배포 기준으로 확인합니다.

• 홈/대시보드/상세/설정으로 이어지는 정보 구조
• 모바일 하단 시트, sticky CTA, 역할별 진입 동선
• 빈 상태와 다음 행동이 보이는 화면 설계

• 게스트, 회원, 관리자 권한 분기
• Supabase 기반 인증/프로필/권한 상태 연결
• 로그인 전후 CTA와 보호 라우트 UX

• 로딩, 에러, 빈 화면, 성공 상태를 포함한 컴포넌트
• API route BFF와 프론트 상태 모델 정리
• 목록/필터/상세/폼의 반복 가능한 패턴화

• SEO metadata, OG preview, 접근성 기본값
• Vercel 배포, GitHub workflow, 운영 체크리스트
• 모바일 overflow, touch target, visual regression 확인

flowchart TD
  A[Problem] --> B[Mobile UX]
  B --> C[API & Data]
  C --> D[Role UI]
  D --> E[SEO / OG / QA]
  E --> F[Production]

  G[GakjaCoding] --> B
  G --> E
  W[WOD / PRDAY] --> C
  W --> D
  CAFE[Cafe24 Smart Design] --> E
  TOKEN[Frontend Token Trim] --> C
  TOKEN --> E

  classDef product fill:#DBEAFE,stroke:#2563EB,color:#0F172A,stroke-width:2px;
  classDef system fill:#ECFEFF,stroke:#38BDF8,color:#0F172A,stroke-width:2px;
  class G,W,CAFE,TOKEN product;
  class A,B,C,D,E,F system;

• Frontend: React, TypeScript, Next.js App Router, Vite, Tailwind CSS
• Backend / Data: Node.js, Express, Supabase, PostgreSQL, API route BFF
• Product Craft: UX flow, mobile-first IA, SEO/OG, dashboard, automation, visual QA
• Ship: Vercel, GitHub, Docker, Red/Blue QA gate

Problem
  ↓
User flow
  ↓
Data model / API contract
  ↓
UI states
  ↓
Mobile QA
  ↓
Deploy & iterate

• 기능을 먼저 나열하지 않고 사용자가 완료해야 하는 행동부터 정의합니다.
• UI 컴포넌트는 데이터 상태, 권한, 에러, 빈 화면까지 포함해서 설계합니다.
• 모바일에서 먼저 읽히는지 보고, 데스크톱에서는 정보 구조와 밀도를 정리합니다.
• 배포 후에도 깨지지 않도록 SEO/OG, 성능, 회귀 QA, 운영 플로우를 함께 봅니다.