Frontend Asset Lab

Frontend Asset Lab

my-lab은 개인 프론트엔드 자산을 체계적으로 축적하기 위한 실험실입니다.

단순 블로그가 아니라, 학습한 라이브러리와 UI/UX 패턴을 실제 컴포넌트로 만들고 Storybook에 적재하며, 공개 가능한 내용은 Docs로 정리하는 구조를 지향합니다.

구성

• vault: Obsidian 기반 지식관리 공간
• apps/docs: 공개 문서와 블로그를 발행하는 Astro 사이트
• apps/storybook: UI/UX 컴포넌트와 인터랙션 예제를 확인하는 Storybook
• packages/ui: Tailwind, Radix UI, shadcn 스타일 기반 UI 자산
• packages/animations: Framer Motion, GSAP 기반 애니메이션 예제
• packages/forms: React Hook Form 기반 폼 패턴
• packages/canvas: Konva 기반 캔버스 예제
• packages/data-grid: AG Grid 기반 데이터 그리드 예제
• packages/carousel: Swiper 기반 캐러셀 예제

운영 방식

1. 공식 문서를 확인합니다.
2. 최소 예제를 구현합니다.
3. 재사용 가능한 패턴으로 정리합니다.
4. Storybook에 story를 추가합니다.
5. Vault에 학습과 판단 근거를 기록합니다.
6. 공개할 가치가 있는 내용만 Docs로 정리합니다.

현재 UI 카탈로그

packages/ui는 shadcn 기반 컴포넌트 카탈로그를 중심으로 확장하고 있습니다.

• Storybook 경로: Design System/shadcn/Components
• 구현 위치: packages/ui/src/components
• 문서 위치: vault/public/components/shadcn-component-catalog.md

컴포넌트 Story는 단순 렌더링 확인을 넘어서 공식 문서에서 제시하는 조합 수준을 목표로 합니다. 특히 Sidebar, Navigation Menu, Menubar, Field는 실제 제품 화면에서 참고할 수 있는 대표 예제로 유지합니다.

공개 기준

내부 학습 기록과 시행착오는 private Vault에 보관합니다. Docs에는 외부 독자가 읽을 수 있는 정리본만 발행합니다.