@potenlab/ui 0.1.2 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@potenlab/ui",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Potenlab shared UI component library",
   "license": "MIT",
   "repository": {
@@ -22,9 +22,13 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "bin": {
+    "potenlab-ui": "./dist/cli.js"
+  },
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "template"
   ],
   "publishConfig": {
     "access": "public"
@@ -93,7 +97,7 @@
     "./styles/globals.css": "./dist/styles/globals.css"
   },
   "scripts": {
-    "build": "tsup && mkdir -p dist/styles && cp src/styles/globals.css dist/styles/globals.css",
+    "build": "tsup && tsup --config tsup.cli.config.ts && mkdir -p dist/styles && cp src/styles/globals.css dist/styles/globals.css && chmod +x dist/cli.js",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
@@ -116,6 +120,7 @@
     }
   },
   "dependencies": {
+    "@clack/prompts": "^0.10.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.576.0",

package/template/admin/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/template/admin/_gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template/admin/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/template/admin/docs/changes.json

@@ -0,0 +1,295 @@
+{
+  "projectName": "Admin User Management UI",
+  "generatedAt": "2026-03-04T00:00:00Z",
+  "updatedAt": "2026-03-04T00:20:00Z",
+  "summary": {
+    "totalBatches": 9,
+    "totalTasks": 12,
+    "completedTasks": 12,
+    "remainingTasks": 0
+  },
+  "batches": [
+    {
+      "id": "C1",
+      "description": "Localize all views to match Figma design (Korean text, layout fixes, pixel-perfect styling)",
+      "createdAt": "2026-03-04T00:00:00Z",
+      "progress": {
+        "total": 4,
+        "completed": 4,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C1.1",
+          "title": "Localize types, constants, and mock data to Korean",
+          "description": "Update USER_TABLE_COLUMNS labels, BASIC_INFO_ROW labels, form field options, and mock user data to Korean matching the Figma design exactly.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/features/user-management/types/index.ts",
+            "template/src/lib/mock-data.ts"
+          ],
+          "blocked_by": []
+        },
+        {
+          "id": "C1.2",
+          "title": "Localize sidebar component to Korean and match Figma",
+          "description": "Change all sidebar navigation labels, admin subtitle, and logout text to Korean. Match Figma sidebar layout exactly.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/components/layouts/app-sidebar.tsx"
+          ],
+          "blocked_by": []
+        },
+        {
+          "id": "C1.3",
+          "title": "Localize dashboard page components to Korean and fix layout",
+          "description": "Update page-header, tab-navigation, search-bar, pagination-controls, badge, and page.tsx to Korean. Fix pagination button layout to match Figma (all 4 nav buttons together, then page indicator).",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/components/common/page-header.tsx",
+            "template/src/components/user-management/tab-navigation.tsx",
+            "template/src/components/user-management/search-bar.tsx",
+            "template/src/components/user-management/pagination-controls.tsx",
+            "template/src/components/user-management/user-table.tsx",
+            "template/src/app/page.tsx",
+            "template/src/components/ui/badge.tsx"
+          ],
+          "blocked_by": []
+        },
+        {
+          "id": "C1.4",
+          "title": "Localize user detail page to Korean and match Figma",
+          "description": "Update user-detail-form section labels, toggle labels, and detail page header props to Korean.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/components/user-management/user-detail-form.tsx",
+            "template/src/app/users/[id]/page.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C2",
+      "description": "Fix sidebar to match Figma design — remove parent icons, add sub-item icons, fix selected state styling",
+      "createdAt": "2026-03-04T00:02:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C2.1",
+          "title": "Fix sidebar icons and selected state to match Figma design",
+          "description": "1) Update SidebarSubItem type in types/index.ts to include optional icon field (LucideIcon). Make SidebarNavItem.icon optional. 2) In app-sidebar.tsx: remove icons from parent accordion triggers (사용자, 매치, 관리자) — only 홈 keeps its Home icon. 3) Add icons to each sub-item: 사용자관리→UserRound, 매치 관리→LayoutGrid, 공지사항 관리→Megaphone, 신고 관리→ShieldAlert, 약관 관리→ScrollText. 4) Fix selected sub-item state: replace dot indicator + bg-sidebar-selected with bg-[#EEF2F6] rounded-[4px] text-black. Non-selected sub-items use text-[#5A5E6A]. 5) Sub-items should be wrapped in px-[8px] container with inner px-[14px] py-[8px] gap-[10px] and h-[44px]. 6) Accordion trigger text should be text-[#5A5E6A] with font-inter text-[16px]. 7) The accordion chevron should be on the right, size-6 (24px). 8) Footer logout should be centered with border-t, py-[20px].",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/types/index.ts",
+            "template/src/components/layouts/app-sidebar.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C3",
+      "description": "Fix sidebar layout — add full-width header/footer dividers matching Figma screenshot exactly",
+      "createdAt": "2026-03-04T00:04:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C3.1",
+          "title": "Restructure sidebar layout for full-width dividers",
+          "description": "Restructure app-sidebar.tsx layout from single <nav> with p-6 to 3 separate sections so dividers span full width. Header: own div with border-b border-[#E2E8F0] py-[20px] px-[16px]. Navigation: flex-1 overflow-y-auto with inner padding. Footer: own div with border-t border-[#E2E8F0] py-[20px]. The border-bottom on header and border-top on footer must be full-width (edge to edge) matching the Figma screenshot.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/components/layouts/app-sidebar.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C4",
+      "description": "Replace all font-inter with font-pretendard across all component files",
+      "createdAt": "2026-03-04T00:06:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C4.1",
+          "title": "Replace font-inter with font-pretendard in all components",
+          "description": "Replace every occurrence of 'font-inter' with 'font-pretendard' in these files: 1) template/src/components/layouts/app-sidebar.tsx (4 occurrences), 2) template/src/components/ui/accordion.tsx (1 occurrence), 3) template/src/components/ui/button.tsx (2 occurrences), 4) template/src/components/ui/input.tsx (1 occurrence), 5) template/src/components/ui/select.tsx (1 occurrence), 6) template/src/components/ui/badge.tsx (1 occurrence). Use replace_all on each file to change 'font-inter' to 'font-pretendard'.",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/components/layouts/app-sidebar.tsx",
+            "template/src/components/ui/accordion.tsx",
+            "template/src/components/ui/button.tsx",
+            "template/src/components/ui/input.tsx",
+            "template/src/components/ui/select.tsx",
+            "template/src/components/ui/badge.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C5",
+      "description": "Extract DashboardLayout component from app/layout.tsx into components/layouts/",
+      "createdAt": "2026-03-04T00:10:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C5.1",
+          "title": "Create DashboardLayout component and simplify app/layout.tsx",
+          "description": "1) CREATE template/src/components/layouts/dashboard-layout.tsx — a client-free server component that composes AppSidebar + ContentLayout. It accepts { children: React.ReactNode } and renders: <><AppSidebar /><main id='main-content'><ContentLayout>{children}</ContentLayout></main></>. Include the skip-to-content <a> link. 2) MODIFY template/src/app/layout.tsx — remove AppSidebar, ContentLayout, and skip-link imports. Import DashboardLayout from @/components/layouts/dashboard-layout. Render <DashboardLayout>{children}</DashboardLayout> inside <body>. Keep metadata, font config, and <html>/<head>/<body> tags in layout.tsx.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/components/layouts/dashboard-layout.tsx",
+            "template/src/app/layout.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C6",
+      "description": "Extract reusable FormField and LabeledSwitch components from user-detail-form into components/common/",
+      "createdAt": "2026-03-04T00:14:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C6.1",
+          "title": "Create reusable FormField and LabeledSwitch components, refactor user-detail-form to use them",
+          "description": "1) CREATE template/src/components/common/form-field.tsx — generic reusable form field. 2) CREATE template/src/components/common/labeled-switch.tsx — reusable labeled toggle. 3) MODIFY template/src/components/user-management/user-detail-form.tsx to use these new components. See detailed spec in agent prompt.",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/components/common/form-field.tsx",
+            "template/src/components/common/labeled-switch.tsx",
+            "template/src/components/user-management/user-detail-form.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C7",
+      "description": "Fix FormField select trigger padding — balance left/right padding for proper justify-between",
+      "createdAt": "2026-03-04T00:16:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C7.1",
+          "title": "Fix SelectTrigger right padding in FormField component",
+          "description": "The base SelectTrigger has px-4 pr-12 (16px left, 48px right), creating unbalanced padding. Override with pr-4 on the SelectTrigger className in form-field.tsx so left and right padding match at 16px. twMerge in cn() handles the override.",
+          "status": "completed",
+          "complexity": "low",
+          "agent": "potenlab-small-coder",
+          "files": [
+            "template/src/components/common/form-field.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C8",
+      "description": "Add default upload state to ProfileImages with file input support",
+      "createdAt": "2026-03-04T00:18:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C8.1",
+          "title": "Add default upload state to ProfileImages with file input support",
+          "description": "Add maxImages, editable, and onImageUpload props to ProfileImages. Render empty placeholder slots with dashed border and ImagePlus icon when editable. Wire up file input, preview URL generation, and state management through UserDetailForm and UserDetail.",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/components/user-management/profile-images.tsx",
+            "template/src/components/user-management/user-detail-form.tsx",
+            "template/src/features/user-management/components/user-detail.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    },
+    {
+      "id": "C9",
+      "description": "Refactor UserDetailForm to use react-hook-form — useForm in parent, Controller in form component",
+      "createdAt": "2026-03-04T00:20:00Z",
+      "progress": {
+        "total": 1,
+        "completed": 1,
+        "blocked": 0,
+        "pending": 0
+      },
+      "tasks": [
+        {
+          "id": "C9.1",
+          "title": "Refactor user detail form to use react-hook-form with useForm in parent component",
+          "description": "Integrate react-hook-form (already installed) into the user detail page. 1) Add UserDetailFormValues type in types/index.ts. 2) Replace useState-based form state in user-detail.tsx with useForm(). 3) Refactor user-detail-form.tsx to accept form methods and use Controller.",
+          "status": "completed",
+          "complexity": "high",
+          "agent": "potenlab-high-coder",
+          "files": [
+            "template/src/features/user-management/types/index.ts",
+            "template/src/features/user-management/components/user-detail.tsx",
+            "template/src/components/user-management/user-detail-form.tsx"
+          ],
+          "blocked_by": []
+        }
+      ]
+    }
+  ]
+}