[area:shadcn] daisyUI → shadcn/ui 전환

[fray-cloud]

Scope

• remove daisyui from package.json and Tailwind config
• initialize shadcn/ui (latest, App Router compatible)
• replace daisyUI usage across new-component/ and new-site/
• audit @mui/joy and @mui/x-date-pickers; replace where shadcn covers it

Acceptance

• npx nx affected -t lint test build green
• No daisyUI classes or imports remain (git grep clean)
• No commit leaves the repo in a mixed daisyUI + shadcn state
• MUI kept only where shadcn has no replacement (documented)

Depends on

• [area:nx-upgrade] Nx 19.6 → latest 업그레이드 #4
• [area:shared-libs] libs/shared-types · shared-utils 추출 #5
• [area:nest-upgrade] NestJS 10 → latest 업그레이드 #6
• [area:next-migration] Vite → Next.js (App Router) 마이그레이션 #7

Research

• context7: shadcn/ui Next.js App Router init + Tailwind v4 (if applicable)
• fallback: https://ui.shadcn.com/docs/installation/next

Findings recorded in issue comment.

Risk

med — visual regressions across every page; coherent landing requires planning per-component swaps.

Steps

1. Init shadcn in the Next app post-migration.
2. Inventory daisyUI usage; group by component.
3. Swap components in coherent batches (one feature area per PR).
4. Remove daisyui dependency only after the last usage is gone.
5. MUI audit pass.

Sub-tasks

• [area:shadcn] shadcn init — components.json, lib/utils, Tailwind config #48 shadcn init — components.json, lib/utils, Tailwind config
• [area:shadcn] add button, card, skeleton, avatar, progress components #49 add button, card, skeleton, avatar, progress components
• [area:shadcn] header & sidebar — swap navbar/btn-ghost to shadcn Button #50 header & sidebar — swap navbar/btn-ghost to shadcn Button
• [area:shadcn] home — Count Avatar/Skeleton and Contents Button #51 home — Count Avatar/Skeleton and Contents Button
• [area:shadcn] search — AnimalCard, progress loader, Form button #52 search — AnimalCard, progress loader, Form button
• [area:shadcn] search Select — Radix Select + rhf Controller #53 search Select — Radix Select + rhf Controller
• [area:shadcn] bottom nav rebuild, remove daisyui plugin and dead MUI deps #54 bottom nav rebuild, remove daisyui plugin and dead MUI deps

[fray-cloud]

Research findings — daisyUI → shadcn/ui

Current state (post Next migration)

• Tailwind v3 (will re-verify after Nx/Next land). daisyUI plugin still present in apps/web/tailwind.config.js.
• daisyUI classes in use (inventory via git grep across new-component/, new-site/):
  • navbar, btn, btn-ghost, btn-primary, btn-outline — Header, Bottom, form submit buttons
  • card, card-body, card-title, card-actions — new-site/search/AnimalCard, home Contents
  • avatar, placeholder — home Count block
  • progress, progress-primary — search loader
  • select, select-bordered — search filters (Sido/Sigungu/Kind)
  • skeleton — loading placeholders
• MUI audit:
  • @mui/joy — used only in a couple of legacy wrappers; shadcn covers all of it → remove.
  • @mui/x-date-pickers — used in search date range. shadcn ships no date picker primitive; keep MUI only for this, or adopt react-day-picker via shadcn Calendar. Decision: migrate to shadcn Calendar + Popover (shadcn DatePicker pattern) to fully drop MUI.

shadcn compatibility (context7 + https://ui.shadcn.com/docs/installation/next)

• shadcn CLI latest supports Next.js App Router out of the box. Requires components.json, lib/utils.ts (cn helper), tailwind.config.ts theme extension, CSS variables in app/globals.css.
• Tailwind v3 supported; v4 also supported with different config shape. We stay on whatever the Next migration lands with — do not bump Tailwind major inside this section.
• No peer conflict with TanStack Query, react-hook-form, Radix primitives (shadcn uses Radix under the hood).

Component map (daisyUI → shadcn)

daisyUI	shadcn replacement
btn / btn-ghost / btn-primary / btn-outline	Button with variants (default, ghost, outline)
navbar	composed header using Button + flex layout (no direct primitive)
card / card-body / card-title / card-actions	Card, CardHeader, CardTitle, CardContent, CardFooter
avatar / placeholder	Avatar, AvatarImage, AvatarFallback
progress	Progress
select / select-bordered	Select (Radix) — needs rhf Controller wrapper
skeleton	Skeleton
MUI Joy misc	corresponding shadcn primitive
MUI x-date-pickers	shadcn Calendar + Popover (DatePicker recipe)

Transitional policy (coherence guard)

• daisyUI plugin stays enabled until the final child lands. Each intermediate PR adds shadcn primitives and swaps one feature area fully; daisyUI classes only disappear file-by-file, never class-by-class inside a single file.
• Never mix btn + Button inside the same component. A child is not "done" until its touched files contain zero daisyUI classes.
• daisyui dependency removal and tailwind.config.js plugin removal happen in the last child, together with removing dead @mui/joy deps.

Decomposition (7 children)

1. shadcn init — components.json, lib/utils, Tailwind/globals.css theme vars. No visual changes.
2. Add primitives: button, card, skeleton, avatar, progress. Still no consumers.
3. Header + (future) Sidebar — swap navbar/btn-ghost to shadcn Button.
4. Home — Count block (avatar/placeholder → Avatar/Skeleton) and Contents grid (card+btn → Card+Button).
5. Search — AnimalCard (card), progress loader (progress), form submit (btn → Button).
6. Search Select filters — Radix Select + rhf Controller wrapper for Sido/Sigungu/Kind.
7. Bottom nav rebuild, remove daisyui plugin + package, drop @mui/joy + @mui/x-date-pickers (Calendar+Popover recipe inlined), final cleanup.

Each child leaves npx nx affected -t lint test build green and the repo in a coherent (non-mixed) state.

[fray-cloud]

All 7 children (#48→#54) landed in dev via #61. daisyUI → shadcn/ui migration complete. daisyUI plugin removed, dead MUI deps (@mui/joy, @mui/icons-material, @mui/x-date-pickers, @emotion/*) purged.