npm - @potenlab/ui - Versions diffs - 0.1.2 → 0.2.0 - Mend

@potenlab/ui 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/cli.js +756 -0
package/package.json +8 -3
package/template/admin/README.md +36 -0
package/template/admin/_gitignore +41 -0
package/template/admin/components.json +23 -0
package/template/admin/docs/changes.json +295 -0
package/template/admin/docs/dev-plan.md +822 -0
package/template/admin/docs/frontend-plan.md +874 -0
package/template/admin/docs/prd.md +408 -0
package/template/admin/docs/progress.json +777 -0
package/template/admin/docs/test-plan.md +790 -0
package/template/admin/docs/ui-ux-plan.md +1664 -0
package/template/admin/eslint.config.mjs +18 -0
package/template/admin/next.config.ts +7 -0
package/template/admin/package.json +43 -0
package/template/admin/postcss.config.mjs +7 -0
package/template/admin/public/avatars/user1.svg +4 -0
package/template/admin/public/avatars/user2.svg +4 -0
package/template/admin/public/avatars/user3.svg +4 -0
package/template/admin/public/avatars/user4.svg +4 -0
package/template/admin/public/avatars/user5.svg +4 -0
package/template/admin/public/file.svg +1 -0
package/template/admin/public/globe.svg +1 -0
package/template/admin/public/next.svg +1 -0
package/template/admin/public/profile/img1.svg +7 -0
package/template/admin/public/profile/img2.svg +7 -0
package/template/admin/public/profile/img3.svg +7 -0
package/template/admin/public/vercel.svg +1 -0
package/template/admin/public/window.svg +1 -0
package/template/admin/src/app/favicon.ico +0 -0
package/template/admin/src/app/layout.tsx +38 -0
package/template/admin/src/app/page.tsx +5 -0
package/template/admin/src/app/users/[id]/page.tsx +10 -0
package/template/admin/src/components/layouts/app-sidebar.tsx +152 -0
package/template/admin/src/components/user-management/profile-images.tsx +69 -0
package/template/admin/src/components/user-management/user-detail-form.tsx +143 -0
package/template/admin/src/features/user-management/components/user-columns.tsx +101 -0
package/template/admin/src/features/user-management/components/user-detail.tsx +79 -0
package/template/admin/src/features/user-management/components/user-list.tsx +74 -0
package/template/admin/src/features/user-management/types/index.ts +113 -0
package/template/admin/src/features/user-management/utils/format.ts +2 -0
package/template/admin/src/lib/mock-data.ts +131 -0
package/template/admin/src/styles/globals.css +26 -0
package/template/admin/tsconfig.json +34 -0

package/template/admin/docs/progress.json ADDED Viewed

@@ -0,0 +1,777 @@
+{
+  "projectName": "Admin User Management UI",
+  "generatedAt": "2026-03-04T00:00:00Z",
+  "summary": {
+    "totalPhases": 6,
+    "totalTasks": 35,
+    "lowComplexity": 18,
+    "highComplexity": 17,
+    "completedTasks": 35,
+    "remainingTasks": 0
+  },
+  "phases": [
+    {
+      "id": "phase-0",
+      "name": "Foundation",
+      "description": "Project setup, design tokens, fonts, Tailwind config, shadcn/ui initialization",
+      "tasks": [
+        {
+          "id": "P0-T1",
+          "title": "Initialize shadcn/ui",
+          "description": "Run `bunx --bun shadcn@latest init` in the template directory. Select 'New York' style, CSS variables enabled. This generates the base config and the cn() utility.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single CLI command execution that scaffolds config files automatically; no custom code required",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "components.json",
+            "src/lib/utils.ts",
+            "src/components/ui/"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "components.json exists at project root",
+            "src/lib/utils.ts exists and exports cn()",
+            "bun run build completes without errors"
+          ]
+        },
+        {
+          "id": "P0-T2",
+          "title": "Configure design tokens in globals.css",
+          "description": "Replace/extend the generated globals.css with the full set of Tailwind CSS 4 @theme custom properties and shadcn CSS variable overrides. Include @theme block with all custom colors (primary, primary-hover, primary-active, primary-light, background, surface, border, divider, table-header, sidebar-selected, placeholder, subtitle, muted-fg, table-cell, inactive-tab, inactive-tab-text, badge-green-bg, badge-green-text, toggle-on, toggle-off, delete-text), font family tokens (--font-pretendard, --font-inter, --font-mono), :root CSS variables for shadcn overrides (--primary, --primary-foreground, --border, --background, --card, --muted, --muted-foreground, --accent, --accent-foreground, --radius), and base body styles (background-color: #FCFCFC, default font family Pretendard).",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-token design system configuration requiring coordination between Tailwind CSS 4 @theme, shadcn CSS variables, and :root overrides across 20+ color tokens and font families",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/styles/globals.css"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Open app in browser; page background is #FCFCFC",
+            "Inspect :root in dev tools; all CSS variables are present",
+            "Tailwind utility classes like bg-primary, text-primary, bg-table-header, text-placeholder resolve to correct hex values"
+          ]
+        },
+        {
+          "id": "P0-T3",
+          "title": "Load fonts (Pretendard Variable + Inter)",
+          "description": "Use next/font/google to load Inter with subsets: ['latin'], variable: '--font-inter', display: 'swap'. Add Pretendard Variable via CDN <link> tag in layout <head>. Apply font CSS variables to <html> or <body> element. Set <html lang='ko'> for Korean platform.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single file modification with standard Next.js font loading pattern and a CDN link addition",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/app/layout.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Inspect computed font-family in dev tools for heading text",
+            "Pretendard Variable renders for heading text",
+            "Inter renders for button/input elements",
+            "No FOUT (flash of unstyled text) -- fonts load with swap strategy"
+          ]
+        },
+        {
+          "id": "P0-T4",
+          "title": "Create shared TypeScript types",
+          "description": "Define User interface with all fields (id, nickname, grade, avatar, phone, age, gender, region, joinDate, withdrawalDate, role, exerciseStyle, gymRelocation, bench, deadlift, squat, intro, profileImages: string[], settings: { profilePublic, matchChatNotification, marketingNotification }). Define UserSettings interface. Define UserTableColumn type and USER_TABLE_COLUMNS constant. Define PaginationState and DEFAULT_PAGINATION. Define FormFieldType, FormField, and BASIC_INFO_ROW_1/2/3 constants. Define SidebarNavItem and SidebarSubItem in shared types.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Type definition files with interfaces and constants; no logic or multi-file coordination required",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/features/user-management/types/index.ts",
+            "src/types/index.ts"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Import User type in a test file; TypeScript compiles without errors",
+            "All fields from the PRD mock data structure are represented"
+          ]
+        },
+        {
+          "id": "P0-T5",
+          "title": "Create mock data",
+          "description": "Export mockUsers: User[] with 5 user objects following the PRD sample data pattern (nickname 'NicknameHere', grade 'Mania', phone '010-1234-1234', age 'Born 1999', gender 'Male', region 'Gangnam-gu', joinDate 'Nov 1, 2022', withdrawalDate 'Nov 1, 2022', etc.). Each user gets a unique id ('1' through '5'). Export totalUserCount = 100000. Profile images use placeholder paths: /profile/img1.jpg through /profile/img3.jpg. Avatar paths: /avatars/user1.jpg through /avatars/user5.jpg.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single file with hardcoded mock data arrays; straightforward data creation with no logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/lib/mock-data.ts"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Import mockUsers and totalUserCount in a test; values are correct",
+            "mockUsers.length === 5",
+            "Each user has all required fields populated"
+          ]
+        },
+        {
+          "id": "P0-T6",
+          "title": "Create utility functions",
+          "description": "Create formatNumber(n: number): string that formats numbers with comma separators (e.g., 100000 -> '100,000') using n.toLocaleString('en-US'). Add any other string/date format helpers needed for display.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single utility file with one simple formatting function; no dependencies or complex logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/features/user-management/utils/format.ts"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "formatNumber(100000) returns '100,000'",
+            "formatNumber(0) returns '0'"
+          ]
+        },
+        {
+          "id": "P0-T7",
+          "title": "Add placeholder images to public directory",
+          "description": "Create placeholder images or use placeholder service URLs in mock data. Avatar images: 44x44px source (renders at 22x22). Profile images: 232x232px source (renders at 116x116). Alternative: use placeholder URLs like https://placehold.co/44x44/EEF2F6/5A5E6A?text=U1 in mock data.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple file creation or URL placeholder setup; no code logic involved",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "public/avatars/user1.jpg",
+            "public/avatars/user2.jpg",
+            "public/avatars/user3.jpg",
+            "public/avatars/user4.jpg",
+            "public/avatars/user5.jpg",
+            "public/profile/img1.jpg",
+            "public/profile/img2.jpg",
+            "public/profile/img3.jpg"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Images load without 404 errors when referenced in components",
+            "Avatar images render as small circles; profile images render at 116x116 with 8px radius"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "phase-1",
+      "name": "Shared UI Components",
+      "description": "Install and customize all shadcn/ui components under src/components/ui/ and build reusable common components",
+      "tasks": [
+        {
+          "id": "P1-T1",
+          "title": "Install shadcn/ui components (batch)",
+          "description": "Run `bunx --bun shadcn@latest add card button table input select badge avatar switch tabs separator accordion sidebar label tooltip` to install all 14 shadcn/ui components into src/components/ui/.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single CLI batch command to install pre-built components; no custom code required",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/button.tsx",
+            "src/components/ui/card.tsx",
+            "src/components/ui/table.tsx",
+            "src/components/ui/input.tsx",
+            "src/components/ui/select.tsx",
+            "src/components/ui/badge.tsx",
+            "src/components/ui/avatar.tsx",
+            "src/components/ui/switch.tsx",
+            "src/components/ui/tabs.tsx",
+            "src/components/ui/separator.tsx",
+            "src/components/ui/accordion.tsx",
+            "src/components/ui/sidebar.tsx",
+            "src/components/ui/label.tsx",
+            "src/components/ui/tooltip.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "All 14 .tsx files exist in src/components/ui/",
+            "bun run build completes without errors",
+            "Each component can be imported without TypeScript errors"
+          ]
+        },
+        {
+          "id": "P1-T2",
+          "title": "Customize Button component with design variants",
+          "description": "Add custom variants to Button component's cva config: primary (bg-primary, hover, active, scale, disabled), secondary (bg-sidebar-selected), pagination (bg-primary-light, 40x40px), ghost (bg-transparent, text-delete-text, underline on hover), outline (border, bg-transparent). Focus ring on all variants. Include size variants: default (h-10), secondary (h-12), pagination (h-10 w-10), ghost (h-auto p-0).",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-variant component customization with 5 variant styles, 4 size presets, hover/active/focus/disabled states, and cva configuration",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/ui/button.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render each variant in a test page; colors match design tokens",
+            "Hover state changes background on primary buttons to #3F7A79",
+            "Active state applies scale(0.98) on primary buttons",
+            "Disabled state shows 50% opacity and cursor: not-allowed",
+            "Focus ring appears on Tab focus"
+          ]
+        },
+        {
+          "id": "P1-T3",
+          "title": "Customize Table component",
+          "description": "Override default shadcn/ui table styles: Table wrapper (border border-border bg-white, no border-radius), TableHeader (bg-table-header), TableHead (h-14, 14px SemiBold, text-table-cell, px-4), TableRow (h-[60px], border-b, hover:bg-table-header, cursor-pointer, transition 150ms), TableCell (px-4, 14px, text-table-cell).",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-sub-component customization (Table, TableHeader, TableHead, TableRow, TableCell) with specific sizing, colors, hover states, and transitions",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/ui/table.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render a test table with 2 columns and 2 rows",
+            "Table header background is #F9FAFC",
+            "Row hover changes background",
+            "Row height is 60px; header row height is 56px",
+            "Cell text color is #3B3F4A"
+          ]
+        },
+        {
+          "id": "P1-T4",
+          "title": "Customize Input component",
+          "description": "Override default input styles: base (border, rounded-md, font-inter 18px, placeholder:text-placeholder, bg-white, px-4), hover (border-[#CBD5E0]), focus (border-primary, ring-2 ring-primary/20, transition 150ms), disabled (bg-table-header, text-placeholder, cursor-not-allowed). Height set at call site: dashboard search h-12 (48px), detail form h-[52px] (52px).",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single component style override with standard input states (hover, focus, disabled); no variant system needed",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/input.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render input with placeholder 'Enter search keyword'; placeholder text is #A0AEC0",
+            "Focus the input; border turns #509594 with subtle ring shadow",
+            "Hover border changes to #CBD5E0"
+          ]
+        },
+        {
+          "id": "P1-T5",
+          "title": "Customize Select component",
+          "description": "Override SelectTrigger (h-[52px], border, rounded-md, px-4 pr-12, font-inter 18px, text-[#2D3748], hover/focus states), SelectContent (bg-white, border, shadow-md), SelectItem (hover:bg-sidebar-selected, px-4 py-2, 18px). Chevron rotates 180deg on open (300ms ease-in-out). Chevron color: default #A0AEC0, on focus/open #509594.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-sub-component customization (SelectTrigger, SelectContent, SelectItem) with animated chevron rotation and dynamic color changes on open/focus",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/ui/select.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render select with 3 options; trigger shows chevron down icon",
+            "Click opens dropdown with white bg and shadow",
+            "Hover on item shows #EEF2F6 background",
+            "Focus/open state border is primary color"
+          ]
+        },
+        {
+          "id": "P1-T6",
+          "title": "Customize Badge component",
+          "description": "Add a 'green' variant: bg-badge-green-bg text-badge-green-text font-inter text-[18px] font-bold px-3 py-1 rounded-full. Used for the count badge on the dashboard header ('100,000').",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Single variant addition to existing component; minimal style configuration with no complex logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/badge.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render <Badge variant='green'>100,000</Badge>",
+            "Background is #C6F6D5, text is #22543D, pill shape (fully rounded)"
+          ]
+        },
+        {
+          "id": "P1-T7",
+          "title": "Customize Avatar component",
+          "description": "Table avatar: w-[22px] h-[22px] rounded-full. AvatarFallback: first letter of nickname, bg-sidebar-selected text-muted-fg text-[10px]. Ensure AvatarImage has alt text for accessibility.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple style overrides on a single component with straightforward fallback logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/avatar.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render avatar with an image src; displays 22px circle",
+            "Render avatar without image; shows fallback letter in gray circle",
+            "Inspect: alt attribute present on <img>"
+          ]
+        },
+        {
+          "id": "P1-T8",
+          "title": "Customize Switch component",
+          "description": "Track size: w-[44px] h-[24px] rounded-full. OFF state: track bg-toggle-off, thumb white positioned left. ON state: track bg-toggle-on (#3B82F6), thumb white positioned right. Hover OFF: track #B0BEC5; hover ON: track #2563EB. Thumb size: 20px with 2px inset. Transition: 200ms ease-in-out for thumb translation and track color. Disabled: 50% opacity. aria-checked managed by Radix Switch.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Complex state-dependent styling with ON/OFF/hover states, animated thumb translation, track color transitions, and precise sizing constraints",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/ui/switch.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render switch in OFF state; track is gray, thumb is left",
+            "Click switch; animates to ON -- track turns blue, thumb slides right",
+            "Keyboard: Space toggles state",
+            "Inspect: aria-checked toggles between true/false"
+          ]
+        },
+        {
+          "id": "P1-T9",
+          "title": "Customize Tabs component",
+          "description": "TabsList: gap-2 bg-transparent p-0. TabsTrigger active: data-[state=active]:bg-primary data-[state=active]:text-white font-pretendard font-semibold h-[52px] px-4 rounded-md. TabsTrigger inactive: bg-inactive-tab text-inactive-tab-text font-pretendard font-medium h-[52px] px-4 rounded-md hover:bg-border. Transition: 200ms ease-in-out on background-color and color.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Style overrides on TabsList and TabsTrigger with active/inactive states handled by Radix data attributes",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/tabs.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render 3 tabs: 'All' (active), 'Tab', 'Tab'",
+            "Active tab is teal with white text",
+            "Inactive tabs are light gray with dark text",
+            "Click inactive tab; it becomes active (color swap)",
+            "Keyboard: Arrow Left/Right switches tabs"
+          ]
+        },
+        {
+          "id": "P1-T10",
+          "title": "Customize Separator component",
+          "description": "Default color: bg-divider (#EFF1F4). Height: 1px (horizontal). Full width of parent container.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Minimal single-property style override on a simple component",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/separator.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render separator; visible as a thin light gray line",
+            "Inspect: background color is #EFF1F4"
+          ]
+        },
+        {
+          "id": "P1-T11",
+          "title": "Customize Accordion component",
+          "description": "Trigger: chevron icon rotates 180deg on expand (300ms ease-in-out). Content: animated height expand/collapse (300ms ease-in-out). Trigger text: font-inter text-[16px] text-muted-fg. aria-expanded on trigger handled by Radix Accordion.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Style overrides with animation timing; Radix handles the expand/collapse logic and ARIA attributes",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/accordion.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render accordion with one section; click trigger, content expands with animation",
+            "Chevron rotates on expand",
+            "Keyboard: Enter/Space toggles"
+          ]
+        },
+        {
+          "id": "P1-T12",
+          "title": "Customize Label component",
+          "description": "Style: font-pretendard text-[20px] font-semibold text-[#101010]. Margin bottom: mb-2 (8px below label, above input). Uses htmlFor attribute to associate with input id.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple style override on a single component with no complex logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/ui/label.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render label above an input; label text is 20px SemiBold, nearly black",
+            "Click label; associated input receives focus (via htmlFor/id pairing)"
+          ]
+        },
+        {
+          "id": "P1-T13",
+          "title": "Build PageHeader common component",
+          "description": "Props: title (string), subtitle (string), badgeCount? (number), actionLabel (string), actionIcon? (LucideIcon), onAction? (() => void). Layout: Flex row. Left side: title (32px SemiBold Pretendard, black) + Badge (only if badgeCount provided, formatted with formatNumber) on same line. Subtitle below (18px Medium Pretendard, #9DA0A8). Right side: action Button (primary variant) with optional icon. Below the header content, render a <Separator /> with vertical margin.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Layout composition combining Badge, Button, Separator components with conditional rendering, flex layout, and multiple typography styles",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/common/page-header.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render <PageHeader title='User Management' subtitle='User list management page' badgeCount={100000} actionLabel='Write' />",
+            "Title 'User Management' in 32px SemiBold",
+            "Badge '100,000' in green pill beside title",
+            "Subtitle below in gray",
+            "'Write' button top-right in teal",
+            "Separator line beneath"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "phase-2",
+      "name": "Layout & Navigation",
+      "description": "Sidebar, root layout, content area structure",
+      "tasks": [
+        {
+          "id": "P2-T1",
+          "title": "Build AppSidebar component",
+          "description": "Fixed position left, 300px width, full viewport height, white background, right border #E2E8F0. Header section: 'ADMIN' title (Pretendard 24px SemiBold, letter-spacing 0.05em), admin email subtitle (14px Regular #9DA0A8), 32px bottom spacing. Navigation section using Accordion: Home item (Home icon, links to /), User accordion (Users icon, 'User Management' sub-item), Match accordion (Gamepad2 icon, 'Match Management' sub-item), Admin accordion (Shield icon, 'Notice Management', 'Report Management', 'Terms Management' sub-items). Menu items: 48px height, Inter 16px Regular #5A5E6A, 20px icons. Hover: #F9FAFC bg. Sub-items: 40px indent, 44px height. Active sub-item: #EEF2F6 bg, #509594 text, dot indicator. Active state from usePathname(). Footer: Separator + Logout button (LogOut icon + text, hover turns red).",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-section layout composition with accordion navigation, active route detection via usePathname(), multiple icon imports, hover/active states, and keyboard navigation requirements",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/layouts/app-sidebar.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Sidebar renders at 300px width on left side of viewport",
+            "'ADMIN' title visible with correct font",
+            "Click 'User' accordion; 'User Management' sub-item appears with animation",
+            "'User Management' has active highlight when on / route",
+            "Logout button visible at bottom with separator above",
+            "Hover logout; text turns red",
+            "Keyboard: Tab through sidebar items; focus visible on each"
+          ]
+        },
+        {
+          "id": "P2-T2",
+          "title": "Build ContentLayout wrapper component",
+          "description": "Wraps page content with correct offset: ml-[324px] pt-5 pr-8 pb-8. Content area offset: 300px sidebar + 24px gap = 324px from left. Top padding: 20px. Receives children as prop. Background: inherits from body (#FCFCFC).",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple wrapper component with fixed CSS margins/padding and children pass-through; no state or logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/layouts/content-layout.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Wrap test content with <ContentLayout>; content appears to the right of the sidebar",
+            "Inspect: margin-left is 324px, padding-top is 20px"
+          ]
+        },
+        {
+          "id": "P2-T3",
+          "title": "Build root layout (app/layout.tsx)",
+          "description": "<html lang='ko'> with font CSS variables applied. Loads Inter via next/font/google with variable: '--font-inter'. Loads Pretendard Variable via CDN link in <head>. Renders <AppSidebar /> persistent on all pages. Renders <ContentLayout>{children}</ContentLayout> as main content area. Skip link: <a href='#main-content'> as first element. <main id='main-content'> wraps content area for skip link target. Imports globals.css.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Layout composition integrating AppSidebar, ContentLayout, font loading, skip link accessibility, and persistent navigation across all routes",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/app/layout.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Open app; sidebar visible on left, content on right",
+            "Navigate between pages; sidebar persists",
+            "Tab key first focuses 'Skip to main content' link (visible on focus)",
+            "Press Enter on skip link; focus moves to main content area",
+            "Inspect <html>: lang='ko' attribute present",
+            "Fonts loaded: Pretendard and Inter visible in Network tab"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "phase-3",
+      "name": "Features -- User Management List Page (Dashboard)",
+      "description": "Dashboard page components: tabs, search, pagination, user table, and page assembly",
+      "tasks": [
+        {
+          "id": "P3-T1",
+          "title": "Build TabNavigation component",
+          "description": "Uses shadcn/ui Tabs, TabsList, TabsTrigger. 3 tabs: 'All' (default active), 'Tab', 'Tab'. Active tab: teal bg, white text. Inactive: light gray bg, dark text. defaultValue='all'. Tab switching updates local state (UI only, no filtering). Arrow Left/Right keyboard navigation between tabs. Props: defaultValue?, onTabChange?.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple component composing existing Tabs primitives with static tab data and no complex state management",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/user-management/tab-navigation.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render component; 'All' tab is active (teal)",
+            "Click 'Tab'; it becomes active, 'All' becomes inactive",
+            "Keyboard: Arrow Right moves focus and activates next tab"
+          ]
+        },
+        {
+          "id": "P3-T2",
+          "title": "Build SearchBar component",
+          "description": "Full-width Input component. Height: 48px (h-12), border radius 6px. Placeholder: 'Enter search keyword'. Placeholder color: #A0AEC0. Accepts text input (state managed locally, no actual search). Focus highlights border to primary. Props: value, onChange, placeholder?.",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple wrapper around Input component with fixed styling and controlled input props",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/user-management/search-bar.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render search bar; full width with placeholder text in gray",
+            "Click/focus; border changes to teal",
+            "Type text; placeholder disappears, text visible"
+          ]
+        },
+        {
+          "id": "P3-T3",
+          "title": "Build PaginationControls component",
+          "description": "Flex row with justify-between. Left group: 4 pagination buttons (<<, <, >, >> using ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight Lucide icons), pagination variant (40x40px, #B9D5D4 bg), each with aria-label. Page indicator between < and >: '1 / 1' (current page 20px Bold, separator 16px Regular #5A5E6A). Right group: page jump Input (100px width, 48px height, placeholder 'Page'), 'Go' button (secondary variant, 48px), items per page Select (96px width, 48px, default '10 items', options: 10/20/50). State: currentPage, itemsPerPage managed locally. aria-live='polite' on page indicator.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Multi-component composition with Button, Input, Select, multiple icon imports, flex layout with two groups, local state management, and ARIA live region",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/user-management/pagination-controls.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render component; all 4 nav buttons visible in #B9D5D4",
+            "'1 / 1' displayed between < and >",
+            "Page jump input visible with 'Page' placeholder",
+            "'Go' button renders in gray",
+            "Items per page dropdown shows '10 items'",
+            "Click dropdown; opens with 3 options",
+            "All icon buttons have aria-label (inspect DOM)"
+          ]
+        },
+        {
+          "id": "P3-T4",
+          "title": "Build UserTable component",
+          "description": "Uses shadcn/ui Table, TableHeader, TableHead, TableBody, TableRow, TableCell. 10 columns: Nickname (flex-1), Grade (flex-1), Avatar (80px fixed, centered), Phone Number (flex-1), Age (flex-1), Gender (flex-1), Region (flex-1), Join Date (flex-1, sort icon), Withdrawal Date (flex-1, sort icon), Delete (57px fixed). Renders 5 rows from mockUsers. Avatar column: Avatar component (22px circular). Delete column: ghost button with teal text 'Delete', underline on hover. Sort icons on Join Date/Withdrawal Date (visual only). Row onClick: navigates to /users/[id] via useRouter().push(). Delete onClick: event.stopPropagation(). Row hover: #F9FAFC bg, cursor pointer. Uses React.memo for row rendering. Props: users: User[].",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Complex data table with 10 columns, row click navigation via useRouter, stopPropagation on delete, Avatar integration, sort icons, React.memo optimization, and multiple sub-components",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/user-management/user-table.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Table renders with 10 column headers and 5 data rows",
+            "Avatar column shows small circular image (or fallback initial)",
+            "Hover over row; background changes, cursor is pointer",
+            "Click row; navigates to /users/1 (check URL bar)",
+            "Click 'Delete' on a row; does NOT navigate (stopPropagation works)",
+            "Sort icons visible on Join Date and Withdrawal Date columns",
+            "Table container has border but no rounded corners"
+          ]
+        },
+        {
+          "id": "P3-T5",
+          "title": "Assemble Dashboard page (app/page.tsx)",
+          "description": "Uses Card as main container (white, 8px radius, #E2E8F0 border, 32px padding). Composes inside Card top to bottom: 1) PageHeader with title 'User Management', subtitle 'User list management page', badgeCount totalUserCount (formatted to '100,000'), actionLabel 'Write', actionIcon Pencil. 2) TabNavigation (3 tabs, 'All' active). 3) SearchBar (full-width input). 4) PaginationControls. 5) UserTable (5 rows of mock data). Manages local state: searchValue, activeTab, currentPage, itemsPerPage. Imports mockUsers and totalUserCount from lib/mock-data.ts. Route: / (app/page.tsx). Client component ('use client').",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Page assembly composing 5+ child components with local state management for search/tabs/pagination, data imports, and proper prop passing across all composed elements",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/app/page.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Open / in browser; full dashboard visible inside white card",
+            "Header shows 'User Management' + green badge '100,000' + subtitle + 'Write' button",
+            "Separator line below header",
+            "Tabs render below separator",
+            "Search bar below tabs",
+            "Pagination controls below search",
+            "Data table with 5 rows below pagination",
+            "All spacing looks correct against Figma wireframe",
+            "'Write' button click: no-op (UI only)"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "phase-4",
+      "name": "Features -- User Detail Page",
+      "description": "User detail page components: profile images, detail form, and page assembly",
+      "tasks": [
+        {
+          "id": "P4-T1",
+          "title": "Build ProfileImages component",
+          "description": "Props: images: string[] (array of 3 image URLs). Renders 3 images in horizontal flex row with 16px gap. Each image: 116x116px, 8px border-radius, object-cover. Uses <img> or Next.js <Image> with appropriate alt text ('Profile photo 1', 'Profile photo 2', 'Profile photo 3'). Fallback: if image fails to load, show gray placeholder block (116x116, #EEF2F6 bg).",
+          "status": "completed",
+          "complexity": "low",
+          "complexityReason": "Simple presentational component rendering a flex row of images with basic error fallback; few props and minimal logic",
+          "agent": "potenlab-small-coder",
+          "outputFiles": [
+            "src/components/user-management/profile-images.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render with 3 placeholder images; 3 boxes appear horizontally",
+            "Each image is 116x116 with rounded corners",
+            "Alt text present on each <img> tag"
+          ]
+        },
+        {
+          "id": "P4-T2",
+          "title": "Build UserDetailForm component",
+          "description": "Props: user: User. Basic Info section: section label 'Basic Info' (Pretendard 20px Bold, #A0AEC0), ProfileImages with user's 3 profile images (mb-24px), 'One-Line Intro' full-width Input (52px), Row 1 grid-cols-4 gap-6 (Role Select, Nickname Input, Phone Input, Age Input), Row 2 grid-cols-4 gap-6 (Gender Select, Exercise Style Select, Gym Relocation Select, Region Select), Row 3 grid-cols-3 gap-6 (Bench Input, Deadlift Input, Squat Input). All inputs 52px height, 6px radius. All fields pre-filled with mock data. Separator between sections. Other Settings section: section label 'Other Settings', horizontal flex with 100px gap, 3 toggles (Profile Public OFF, Match & Chat Notification ON, Marketing Notification OFF). All form fields editable. No validation. Uses Label, Input, Select, Switch, Separator components. Manages local formValues and toggleStates state.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Complex form with multi-section layout, CSS Grid rows, 11+ form fields mixing Input and Select, 3 toggle switches, local state management for form values and toggle states, ProfileImages integration",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/user-management/user-detail-form.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Render with mock user data; all fields pre-filled correctly",
+            "'Basic Info' section label visible in gray",
+            "3 profile images displayed",
+            "'One-Line Intro' input shows 'This is the one-line intro content.'",
+            "Row 1: 4 fields in equal columns with 24px gap",
+            "Row 2: 4 fields, dropdowns open on click",
+            "Row 3: 3 fields in equal columns",
+            "Separator between sections",
+            "'Other Settings' label visible",
+            "3 toggles in a row with 100px gap",
+            "'Match & Chat Notification' toggle is ON (blue); others are OFF (gray)",
+            "Click a toggle; it switches state with animation"
+          ]
+        },
+        {
+          "id": "P4-T3",
+          "title": "Assemble User Detail page (app/users/[id]/page.tsx)",
+          "description": "Reads params.id from route (Next.js dynamic route). Looks up user from mockUsers by id (falls back to first user if not found). Uses Card as main container (same styling as dashboard). Composes inside Card: 1) PageHeader with title 'User Management', subtitle 'You can edit user information.', actionLabel 'Save Changes', actionIcon Pencil. 2) UserDetailForm with the selected user. 'Save Changes' button click: no-op. Route: /users/[id]. Client component ('use client').",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Page assembly with dynamic route parameter reading, mock data lookup with fallback, composition of PageHeader and UserDetailForm inside Card",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/app/users/[id]/page.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Navigate to /users/1; detail page loads in white card",
+            "Header shows 'User Management' + subtitle 'You can edit user information.' + 'Save Changes' button",
+            "No badge on this page (badgeCount not passed)",
+            "Form renders with all user fields pre-filled",
+            "Sidebar shows 'User Management' as active",
+            "Click 'Save Changes': no error (UI only)",
+            "Navigate back via sidebar 'User Management' link; returns to dashboard"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "phase-5",
+      "name": "Polish",
+      "description": "Accessibility, animations, micro-interactions, keyboard navigation, final QA",
+      "tasks": [
+        {
+          "id": "P5-T1",
+          "title": "Accessibility audit -- keyboard navigation",
+          "description": "Verify and fix keyboard navigation across all components: skip link (Tab first, Enter jumps), sidebar (Tab/Shift+Tab, Enter/Space accordion, Arrow Up/Down), tabs (Arrow Left/Right, Enter/Space), table rows (Tab focus, Enter navigate), delete action (Enter/Space, Tab separately), pagination buttons (Tab + Enter, aria-label), inputs (Tab focus), selects (Enter/Space open, Arrow navigate, Escape close), toggles (Space toggle), buttons (Enter/Space). Focus ring: 2px #509594 outline with 2px offset on ALL interactive elements. No keyboard traps.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Cross-component audit requiring updates to multiple files, testing keyboard interactions across sidebar, table, pagination, forms, and ensuring consistent focus ring styling",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/layouts/app-sidebar.tsx",
+            "src/components/user-management/user-table.tsx",
+            "src/components/user-management/pagination-controls.tsx",
+            "src/components/user-management/tab-navigation.tsx",
+            "src/components/user-management/user-detail-form.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Tab through every interactive element without mouse from top of page",
+            "Focus ring visible on each element",
+            "No keyboard traps (can always Tab out or Escape out)",
+            "All actions achievable via keyboard alone",
+            "Skip link works on both pages"
+          ]
+        },
+        {
+          "id": "P5-T2",
+          "title": "Accessibility audit -- ARIA and screen reader",
+          "description": "Verify and fix ARIA attributes: Badge aria-label='Total users: 100,000', active tab aria-selected='true', table semantic elements, sort columns aria-label, delete buttons aria-label='Delete user NicknameHere', toggle switches aria-checked, accordion aria-expanded, pagination aria-live='polite', all icon-only buttons aria-label, heading hierarchy (h1 page title, h2 section labels), form fields label htmlFor paired with input id.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Cross-component ARIA audit requiring updates to multiple files, dynamic aria-label generation, heading hierarchy verification, and screen reader testing",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/common/page-header.tsx",
+            "src/components/user-management/user-table.tsx",
+            "src/components/user-management/pagination-controls.tsx",
+            "src/components/user-management/user-detail-form.tsx",
+            "src/components/layouts/app-sidebar.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Use browser accessibility inspector (Chrome DevTools Accessibility tab)",
+            "VoiceOver (macOS): navigate through page; all elements announced correctly",
+            "Page title reads 'User Management, heading level 1'",
+            "Badge reads 'Total users: 100,000'",
+            "Toggle reads 'Profile Public, switch, off'",
+            "No accessibility warnings in browser dev tools"
+          ]
+        },
+        {
+          "id": "P5-T3",
+          "title": "Micro-interactions and transitions",
+          "description": "Ensure all transitions from ui-ux-plan are implemented: button hover (bg-color 150ms ease-out), button active (scale 0.98, bg-color 100ms), table row hover (bg-color 150ms), toggle switch (thumb transform 200ms, track bg-color 200ms), accordion expand/collapse (height 300ms, opacity 200ms, chevron rotate 300ms), tab switch (bg-color 200ms, color 200ms), input focus (border-color 150ms, box-shadow 150ms), delete text hover (color 150ms, underline), sidebar menu hover (bg-color 150ms), logout hover (text color transition to red).",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Cross-component transition audit requiring style updates across 10+ interaction points in multiple files with specific timing and easing values",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/components/ui/button.tsx",
+            "src/components/ui/table.tsx",
+            "src/components/ui/switch.tsx",
+            "src/components/ui/accordion.tsx",
+            "src/components/ui/tabs.tsx",
+            "src/components/ui/input.tsx",
+            "src/components/layouts/app-sidebar.tsx",
+            "src/components/user-management/user-table.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Visually test each interaction; animations are smooth, not janky",
+            "No transitions are instant (all have appropriate duration)",
+            "Toggle thumb slides smoothly",
+            "Accordion content height animates (not instant appear/disappear)"
+          ]
+        },
+        {
+          "id": "P5-T4",
+          "title": "Final visual QA against design specs",
+          "description": "Systematic check of every visual element against Figma design specs and PRD: colors (verify every token matches hex), typography (font family, size, weight, line-height), spacing (paddings, margins, gaps), sizing (sidebar 300px, button heights, input heights, avatar 22px, profile images 116px, toggle 44x24px, table row heights), border radius (cards 8px, inputs/tabs/selects 6px, avatars full-round, table 0px), borders (card #E2E8F0, dividers #EFF1F4, table #E2E8F0), shadows (shadow-md on dropdown menus only), layout (sidebar 300px fixed, content offset 324px, 20px top padding), dashboard and detail page match wireframes, empty/edge states.",
+          "status": "completed",
+          "complexity": "high",
+          "complexityReason": "Full visual audit across all components and pages requiring pixel-level comparison with design specs and potential bug fixes across multiple files",
+          "agent": "potenlab-high-coder",
+          "outputFiles": [
+            "src/styles/globals.css",
+            "src/components/ui/button.tsx",
+            "src/components/ui/table.tsx",
+            "src/components/ui/input.tsx",
+            "src/components/ui/select.tsx",
+            "src/components/ui/card.tsx",
+            "src/components/layouts/app-sidebar.tsx",
+            "src/components/layouts/content-layout.tsx"
+          ],
+          "dependencies": [],
+          "verifySteps": [
+            "Side-by-side comparison with Figma designs at 1920px viewport",
+            "No visual regressions or misalignments",
+            "All hover/focus states match spec",
+            "Build succeeds: bun run build completes without errors"
+          ]
+        }
+      ]
+    }
+  ]
+}