feat(shadcn): #54 rebuild Bottom nav, remove daisyUI and dead MUI deps

apps/web/app/globals.css

@@ -4,6 +4,53 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
 body {
   font-family: 'Gowun Batang', serif;
 }

apps/web/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "apps/web/tailwind.config.js",
+    "css": "apps/web/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "front/new-component",
+    "ui": "front/new-component/ui",
+    "utils": "front/lib/utils",
+    "lib": "front/lib",
+    "hooks": "front/hooks"
+  },
+  "iconLibrary": "lucide"
+}

apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web/src/new-component/bottom.tsx

@@ -5,39 +5,40 @@ import { MdOutlinePets, MdOutlineContentPasteSearch } from 'react-icons/md';
 import { FcLikePlaceholder } from 'react-icons/fc';
 import { usePathname, useRouter } from 'next/navigation';
 import { v4 as uuidv4 } from 'uuid';
+import { cn } from 'front/lib/utils';
 
 export const Bottom = () => {
   const pathname = usePathname();
+  const router = useRouter();
   const barItem = [
-    {
-      name: '홈',
-      path: '/',
-      icon: <MdOutlinePets />,
-    },
-    {
-      name: '조회하기',
-      path: '/search',
-      icon: <MdOutlineContentPasteSearch />,
-    },
-    {
-      name: '좋아요',
-      path: '/like',
-      icon: <FcLikePlaceholder />,
-    },
+    { name: '홈', path: '/', icon: <MdOutlinePets /> },
+    { name: '조회하기', path: '/search', icon: <MdOutlineContentPasteSearch /> },
+    { name: '좋아요', path: '/like', icon: <FcLikePlaceholder /> },
   ];
-  const router = useRouter();
   return (
-    <div className="btm-nav btm-nav-xs">
+    <nav
+      aria-label="하단 내비게이션"
+      className="fixed inset-x-0 bottom-0 z-50 flex h-12 border-t border-border bg-background"
+    >
       {barItem.map((bar) => {
+        const active = pathname === bar.path;
         return (
           <button
             key={uuidv4()}
-            className={pathname === bar.path ? 'active' : ''}
+            type="button"
+            onClick={() => router.push(bar.path)}
+            className={cn(
+              'flex flex-1 items-center justify-center text-base transition-colors',
+              active
+                ? 'text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+            aria-label={bar.name}
           >
-            <a onClick={() => router.push(bar.path)}>{bar.icon}</a>
+            {bar.icon}
           </button>
         );
       })}
-    </div>
+    </nav>
   );
 };

apps/web/src/new-component/header.tsx

@@ -5,16 +5,21 @@ import { CountList } from 'front/new-site/home/Count';
 import { initSido } from 'front/new-site/search/select/initData';
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import { Button } from 'front/new-component/ui/button';
 
 const Header: React.FC = () => {
   const { data } = useSido({ init: initSido });
   const router = useRouter();
   return (
-    <div className="navbar bg-neutral text-neutral-content">
+    <div className="flex items-center justify-between gap-4 bg-neutral-900 px-4 py-2 text-neutral-100">
       <div className="flex-1">
-        <a className="btn btn-ghost text-xl" onClick={() => router.push('/')}>
+        <Button
+          variant="ghost"
+          className="h-auto px-3 py-1 text-xl text-neutral-100 hover:bg-neutral-800 hover:text-neutral-100"
+          onClick={() => router.push('/')}
+        >
           유기동물 조회 서비스
-        </a>
+        </Button>
       </div>
       <div className="flex-none">
         <CountList items={data} />

apps/web/src/new-component/index.ts

@@ -1,4 +1,3 @@
-export * from './form'
-export * from './header'
-export * from './sidebar'
-export * from './bottom'
+export * from './form';
+export * from './header';
+export * from './bottom';

apps/web/src/new-component/ui/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from 'front/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

apps/web/src/new-component/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from 'front/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };