@naeil/ui 0.1.0

package/messages/ko.json

@@ -0,0 +1,221 @@
+{
+  "common": {
+    "appName": "naeil",
+    "home": "홈",
+    "projects": "프로젝트",
+    "design": "디자인 시스템",
+    "loading": "로딩 중..."
+  },
+  "nav": {
+    "home": "홈",
+    "projects": "프로젝트",
+    "blog": "블로그"
+  },
+  "hero": {
+    "title": ".naeil",
+    "subtitle": "Build · Ship · Iterate"
+  },
+  "projects": {
+    "title": "프로젝트",
+    "subtitle": "실사용을 위해 만든 개인 도구들.",
+    "cc": {
+      "name": "Content Collector",
+      "description": "RSS, YouTube, Reddit 자동 수집 + AI 요약"
+    },
+    "pkm": {
+      "name": "PKM",
+      "description": "개인 지식 관리 — 문서 파싱, 임베딩, 시맨틱 검색"
+    },
+    "naeilUi": {
+      "name": "naeil-ui",
+      "description": "미니멀 디자인 시스템 — OKLCH 토큰, Tailwind v4, shadcn"
+    },
+    "babyAgent": {
+      "name": "Baby Agent",
+      "description": "육아 AI 에이전트 — LINE 기반 Q&A, 기록, 리마인더"
+    },
+    "status": {
+      "active": "활성",
+      "coming": "준비 중"
+    },
+    "sa": {
+      "name": "Sustainability Analyzer",
+      "description": "ESG 리포트 AI 분석 — PDF 파싱, 정성평가, 비교표 자동 생성"
+    }
+  },
+  "stack": {
+    "label": "사용 기술"
+  },
+  "cc": {
+    "name": "Content Collector",
+    "description": "로컬 AI 자동 파이프라인 — 흩어진 테크 소스, 하루 한 장으로",
+    "overview": "GitHub, Reddit, Threads — 여러 소스의 테크 콘텐츠를 수집하고 로컬 AI로 처리.\n\n임베딩, 분류, 클러스터링, 요약. 원시 콘텐츠에서 매일 편집된 다이제스트로.\n\nOllama + 무료 API 기반 전부 로컬 실행. PostgreSQL + pgvector 구조화 저장. 시맨틱 검색 내장.",
+    "features": {
+      "collect": {
+        "title": "멀티 소스 수집",
+        "desc": "RSS, Reddit, Threads — 한 파이프라인으로 수집·정규화"
+      },
+      "classify": {
+        "title": "로컬 AI 분류",
+        "desc": "Qwen3 14B 온디바이스 — 관련도 판별, 토픽 라벨링, 우선순위 랭킹"
+      },
+      "embed": {
+        "title": "벡터 임베딩 검색",
+        "desc": "BGE-M3 + pgvector — 의미 기반 유사 검색과 주제 추적"
+      },
+      "digest": {
+        "title": "데일리 다이제스트",
+        "desc": "Gemini 편집 요약 — LINE 메시지 + 상세 HTML 리포트"
+      },
+      "zeroCost": {
+        "title": "월 비용 0원",
+        "desc": "로컬 Mac Mini, 오픈 모델, 무료 API — 고정 인프라 비용 없음"
+      },
+      "alerts": {
+        "title": "실시간 알림",
+        "desc": "우선순위 높은 신호 감지 즉시 알림 — 몇 시간 뒤가 아니라 바로"
+      }
+    },
+    "workflow": {
+      "github": {
+        "desc": "RSS 피드를 통한 GitHub 릴리즈 및 디스커션 수집",
+        "meta": "30분 간격"
+      },
+      "reddit": {
+        "desc": "RSS 및 JSON 검색 API를 통한 서브레딧 포스트 수집",
+        "meta": "30분 간격"
+      },
+      "threads": {
+        "desc": "Playwright 헤드리스 브라우저로 프로필 스크래핑",
+        "meta": "30분 간격"
+      },
+      "collector": {
+        "desc": "소스별 디스패치, 콘텐츠 해시 중복 제거",
+        "meta": "SHA-256 중복 제거"
+      },
+      "postgres": {
+        "desc": "원본 아이템, 분류, 임베딩, 클러스터, 다이제스트 이력 저장"
+      },
+      "embed": {
+        "desc": "유사 검색을 위한 1024차원 다국어 벡터 생성",
+        "meta": "아이템당 ~2초"
+      },
+      "classify": {
+        "desc": "토픽, 중요도, 콘텐츠 유형, 태그 — 자동 라벨링",
+        "meta": "아이템당 ~18초"
+      },
+      "cluster": {
+        "desc": "코사인 유사도 그룹화, 핫 스코어 랭킹"
+      },
+      "digest": {
+        "desc": "상위 콘텐츠에서 편집 LINE 요약 + 상세 HTML 리포트 생성",
+        "meta": "무료 API"
+      },
+      "line": {
+        "desc": "LINE 그룹에 간결한 일일 요약 푸시"
+      },
+      "html": {
+        "desc": "링크와 점수 포함 카테고리별 상세 리포트"
+      }
+    }
+  },
+  "pkm": {
+    "name": "PKM",
+    "description": "개인 지식 베이스 — 문서 파싱, 임베딩, 시맨틱 검색"
+  },
+  "babyAgent": {
+    "name": "Baby Agent",
+    "description": "LINE 기반 육아 AI — Q&A, 성장 기록, 일정 리마인더"
+  },
+  "design": {
+    "title": "naeil-ui",
+    "subtitle": "디자인 시스템 쇼케이스 — 토큰 · 컴포넌트 · 테마"
+  },
+  "blogPage": {
+    "title": "블로그",
+    "subtitle": "빌드 기록, 리서치, 반복 개선 로그.",
+    "comingSoon": "준비 중"
+  },
+  "footer": {
+    "tagline": "Tomorrow starts here.",
+    "navigation": "네비게이션",
+    "projects": "프로젝트",
+    "blog": "블로그",
+    "social": "소셜"
+  },
+  "auth": {
+    "login": "로그인",
+    "loginWithGoogle": "Google로 로그인",
+    "loginWithGithub": "GitHub로 로그인",
+    "loginDescription": "모든 기능을 이용하려면 로그인하세요",
+    "redirecting": "리다이렉트 중...",
+    "logout": "로그아웃",
+    "profile": "프로필"
+  },
+  "locale": {
+    "switchLabel": "언어"
+  },
+  "sa": {
+    "name": "Sustainability Analyzer",
+    "description": "ESG 리포트를 AI로 분석 — 주제 발견, 정성평가, 기업간 비교표 자동 생성",
+    "overview": "기업 ESG 리포트 PDF를 파싱하고, AI로 체계적 정성평가를 수행하는 분석 파이프라인.\n\nDocling 레이아웃 파서로 표·텍스트 구조를 보존한 채 청킹. BGE-M3 임베딩(Dense+Sparse)으로 하이브리드 시맨틱 검색. Claude가 41개 ESG 주제를 자동 발견하고 415개 체크리스트 항목으로 정성평가를 수행.\n\n로컬 임베딩 + 무료 API 기반. PostgreSQL + pgvector에 구조화 저장.",
+    "features": {
+      "ingest": {
+        "title": "PDF 구조 보존 파싱",
+        "desc": "Docling 레이아웃 파서 — 표·섹션 경계를 보존한 계층적 청킹"
+      },
+      "embed": {
+        "title": "하이브리드 검색",
+        "desc": "BGE-M3 Dense+Sparse 임베딩 — pgvector 하이브리드 시맨틱 검색"
+      },
+      "topics": {
+        "title": "주제 자동 발견",
+        "desc": "Claude Sonnet — ESG 리포트에서 41개 주제·415개 체크리스트 자동 생성"
+      },
+      "assess": {
+        "title": "AI 정성평가",
+        "desc": "주제별 체크리스트 기반 자동 평가 — 근거 인용·점수·코멘트"
+      },
+      "compare": {
+        "title": "기업간 비교표",
+        "desc": "섹터별 필터링 — 주제×기업 매트릭스 자동 생성"
+      },
+      "zeroCost": {
+        "title": "로컬 + 무료",
+        "desc": "BGE-M3 온디바이스 임베딩, Claude·Gemini 무료 티어 활용"
+      }
+    },
+    "workflow": {
+      "pdf": {
+        "desc": "기업 ESG/지속가능성 리포트 PDF 입력",
+        "meta": "연간 리포트"
+      },
+      "docling": {
+        "desc": "레이아웃 기반 구조 파싱 — 표 단일 청킹, 섹션 경계 보존",
+        "meta": "표+텍스트"
+      },
+      "chunk": {
+        "desc": "Parent-Child 계층 청킹 — 문맥 보존 + 세밀 검색",
+        "meta": "parent 1K / child 512"
+      },
+      "bgem3": {
+        "desc": "Dense(1024d) + Sparse(학습된 BM25) 동시 임베딩 생성",
+        "meta": "FlagEmbedding"
+      },
+      "pgvector": {
+        "desc": "청크, 임베딩, 평가, 비교표 — 전체 구조화 저장"
+      },
+      "search": {
+        "desc": "Dense+Sparse 하이브리드 검색, Parent Context 확장"
+      },
+      "claude": {
+        "desc": "주제 발견, 체크리스트 생성, 근거 기반 정성평가",
+        "meta": "Sonnet"
+      },
+      "report": {
+        "desc": "주제×기업 비교표 HTML 리포트 자동 생성",
+        "meta": "섹터 필터"
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@naeil/ui",
+  "version": "0.1.0",
+  "exports": {
+    "./components/*": "./src/components/*.tsx",
+    "./lib/*": "./src/lib/*.ts",
+    "./i18n/*": "./src/i18n/*.ts"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "build:tokens": "tsx scripts/build-tokens.ts",
+    "check:contrast": "tsx scripts/check-contrast.ts"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "@supabase/ssr": "^0.9.0",
+    "@supabase/supabase-js": "^2.98.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "next-intl": "^4.8.3",
+    "next-themes": "^0.4.6",
+    "pretendard": "^1.3.9",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "three": "^0.183.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/three": "^0.183.1",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.8.1",
+    "shadcn": "^3.8.5",
+    "style-dictionary": "^4.4.0",
+    "tailwindcss": "^4",
+    "tsx": "^4.21.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "style-dictionary",
+      "@bundled-es-modules/glob"
+    ]
+  },
+  "files": [
+    "src/",
+    "messages/",
+    "tailwind.config.*",
+    "postcss.config.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/naeil-dev/design-system"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/app/[locale]/(content)/baby-agent/page.tsx

@@ -0,0 +1,30 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { ProjectLayout } from "@/components/project-layout";
+import type { ProjectData } from "@/components/project-layout";
+
+export default async function BabyAgentPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <BabyAgentContent />;
+}
+
+function BabyAgentContent() {
+  const t = useTranslations("babyAgent");
+
+  const data: ProjectData = {
+    icon: "/images/turtle.png",
+    name: t("name"),
+    description: t("description"),
+    accent: "oklch(0.769 0.188 70.08)",
+    tags: ["OpenClaw", "LINE", "AI Agent"],
+    comingSoon: true,
+  };
+
+  return <ProjectLayout data={data} />;
+}

package/src/app/[locale]/(content)/blog/page.tsx

@@ -0,0 +1,68 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { PageTitle } from "@/components/typography";
+import Image from "next/image";
+
+export default async function BlogPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <BlogContent />;
+}
+
+function BlogContent() {
+  const t = useTranslations("blogPage");
+
+  return (
+    <>
+      <section className="mx-auto max-w-4xl px-6 pb-16">
+        <div className="flex flex-col-reverse items-start gap-8 md:flex-row md:items-start md:justify-between">
+          <div className="flex-1">
+            <PageTitle className="mb-3">{t("title")}</PageTitle>
+            <p className="text-muted-foreground mb-5 max-w-lg text-lg leading-relaxed">
+              {t("subtitle")}
+            </p>
+            <div className="mb-6 flex flex-wrap gap-2">
+              {[
+                "Deep Dive",
+                "Research",
+                "Build Logs",
+              ].map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full border border-border-subtle px-2.5 py-1 text-[11px] text-zinc-400"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex-shrink-0">
+            <Image
+              src="/images/diver.png"
+              alt=""
+              width={220}
+              height={220}
+              className="animate-float object-contain"
+              style={{
+                filter:
+                  "drop-shadow(0 4px 12px color-mix(in oklch, var(--project-naeilUi) 15%, transparent))",
+              }}
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-6 pb-24">
+        <div className="rounded-2xl border border-dashed border-border-subtle p-12 text-center">
+          <p className="text-muted-foreground text-sm">{t("comingSoon")}</p>
+        </div>
+      </section>
+    </>
+  );
+}

package/src/app/[locale]/(content)/cc/page.tsx

@@ -0,0 +1,216 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { ProjectLayout } from "@/components/project-layout";
+import type { ProjectData } from "@/components/project-layout";
+
+export default async function CCPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <CCContent />;
+}
+
+function CCContent() {
+  const t = useTranslations("cc");
+
+  const data: ProjectData = {
+    icon: "/images/coral.png",
+    name: t("name"),
+    description: t("description"),
+    accent: "oklch(0.704 0.140 181)",
+    tags: ["Python", "PostgreSQL", "Ollama", "Gemini", "LINE"],
+    github: "https://github.com/naeil-dev/content-collector",
+
+    overview: t("overview"),
+
+    features: [
+      {
+        icon: "📡",
+        title: t("features.collect.title"),
+        description: t("features.collect.desc"),
+      },
+      {
+        icon: "🤖",
+        title: t("features.classify.title"),
+        description: t("features.classify.desc"),
+      },
+      {
+        icon: "🧲",
+        title: t("features.embed.title"),
+        description: t("features.embed.desc"),
+      },
+      {
+        icon: "📊",
+        title: t("features.digest.title"),
+        description: t("features.digest.desc"),
+      },
+      {
+        icon: "⚡",
+        title: t("features.zeroCost.title"),
+        description: t("features.zeroCost.desc"),
+      },
+      {
+        icon: "🔔",
+        title: t("features.alerts.title"),
+        description: t("features.alerts.desc"),
+      },
+    ],
+
+    workflow: {
+      nodes: [
+        {
+          id: "github",
+          label: "GitHub RSS",
+          type: "source",
+          position: { x: 20, y: 5 },
+          detail: {
+            description: t("workflow.github.desc"),
+            tech: ["feedparser", "httpx"],
+            meta: t("workflow.github.meta"),
+          },
+        },
+        {
+          id: "reddit",
+          label: "Reddit",
+          type: "source",
+          position: { x: 50, y: 5 },
+          detail: {
+            description: t("workflow.reddit.desc"),
+            tech: ["RSS", "JSON API"],
+            meta: t("workflow.reddit.meta"),
+          },
+        },
+        {
+          id: "threads",
+          label: "Threads",
+          type: "source",
+          position: { x: 80, y: 5 },
+          detail: {
+            description: t("workflow.threads.desc"),
+            tech: ["Playwright", "httpx"],
+            meta: t("workflow.threads.meta"),
+          },
+        },
+        {
+          id: "collector",
+          label: "Collector",
+          type: "process",
+          position: { x: 50, y: 22 },
+          detail: {
+            description: t("workflow.collector.desc"),
+            tech: ["Python", "LaunchAgent"],
+            meta: t("workflow.collector.meta"),
+          },
+        },
+        {
+          id: "postgres",
+          label: "PostgreSQL",
+          type: "storage",
+          position: { x: 50, y: 38 },
+          detail: {
+            description: t("workflow.postgres.desc"),
+            tech: ["PostgreSQL 17", "pgvector", "Docker"],
+          },
+        },
+        {
+          id: "embed",
+          label: "BGE-M3",
+          type: "ai",
+          position: { x: 25, y: 53 },
+          detail: {
+            description: t("workflow.embed.desc"),
+            tech: ["Ollama", "BGE-M3"],
+            meta: t("workflow.embed.meta"),
+          },
+        },
+        {
+          id: "classify",
+          label: "Qwen3 14B",
+          type: "ai",
+          position: { x: 75, y: 53 },
+          detail: {
+            description: t("workflow.classify.desc"),
+            tech: ["Ollama", "Qwen3 14B"],
+            meta: t("workflow.classify.meta"),
+          },
+        },
+        {
+          id: "cluster",
+          label: "Cluster + Score",
+          type: "process",
+          position: { x: 50, y: 68 },
+          detail: {
+            description: t("workflow.cluster.desc"),
+            tech: ["pgvector", "cosine similarity"],
+          },
+        },
+        {
+          id: "digest",
+          label: "Gemini Flash",
+          type: "ai",
+          position: { x: 50, y: 82 },
+          detail: {
+            description: t("workflow.digest.desc"),
+            tech: ["Gemini 2.5 Flash", "Jinja2"],
+            meta: t("workflow.digest.meta"),
+          },
+        },
+        {
+          id: "line",
+          label: "LINE Summary",
+          type: "output",
+          position: { x: 30, y: 95 },
+          detail: {
+            description: t("workflow.line.desc"),
+            tech: ["LINE Push API"],
+          },
+        },
+        {
+          id: "html",
+          label: "HTML Digest",
+          type: "output",
+          position: { x: 70, y: 95 },
+          detail: {
+            description: t("workflow.html.desc"),
+            tech: ["Jinja2", "HTML"],
+            meta: "digest.naeil.dev",
+          },
+        },
+      ],
+      edges: [
+        { from: "github", to: "collector" },
+        { from: "reddit", to: "collector" },
+        { from: "threads", to: "collector" },
+        { from: "collector", to: "postgres" },
+        { from: "postgres", to: "embed" },
+        { from: "postgres", to: "classify" },
+        { from: "embed", to: "cluster" },
+        { from: "classify", to: "cluster" },
+        { from: "cluster", to: "digest" },
+        { from: "digest", to: "line" },
+        { from: "digest", to: "html" },
+      ],
+    },
+
+    stack: [
+      { icon: "🐍", name: "Python 3.12" },
+      { icon: "🐘", name: "PostgreSQL 17" },
+      { icon: "🧮", name: "pgvector" },
+      { icon: "🦙", name: "Ollama" },
+      { icon: "🤖", name: "Qwen3 14B" },
+      { icon: "🔤", name: "BGE-M3" },
+      { icon: "✨", name: "Gemini 2.5 Flash" },
+      { icon: "📱", name: "LINE API" },
+      { icon: "🤖", name: "Telegram Bot API" },
+      { icon: "🐳", name: "Docker Compose" },
+      { icon: "⏰", name: "LaunchAgent" },
+      { icon: "🎭", name: "Playwright" },
+    ],
+  };
+
+  return <ProjectLayout data={data} />;
+}