diff --git a/apps/web/src/new-component/index.ts b/apps/web/src/new-component/index.ts
index fdbc6ad..bc05af4 100644
--- a/apps/web/src/new-component/index.ts
+++ b/apps/web/src/new-component/index.ts
@@ -1,4 +1,3 @@
-export * from './form'
-export * from './header'
-export * from './sidebar'
-export * from './bottom'
\ No newline at end of file
+export * from './form';
+export * from './header';
+export * from './bottom';
diff --git a/apps/web/src/new-component/sidebar.tsx b/apps/web/src/new-component/sidebar.tsx
deleted file mode 100644
index efee1d6..0000000
--- a/apps/web/src/new-component/sidebar.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { MdOutlinePets, MdOutlineContentPasteSearch } from 'react-icons/md';
-import { FcLikePlaceholder } from 'react-icons/fc';
-import { v4 as uuidv4 } from 'uuid';
-
-const Sidebar: React.FC<{ isOpen: boolean; toggleSidebar: () => void }> = ({
- isOpen,
- toggleSidebar,
-}) => {
- const barItem = [
- {
- name: '홈',
- path: '/',
- icon:
,
- },
- {
- name: '조회하기',
- path: '/search',
- icon:
,
- },
- {
- name: '좋아요',
- path: '/like',
- icon:
,
- },
- ];
- return (
-
-
-
-
-
-
- );
-};
-
-export default Sidebar;
diff --git a/apps/web/src/new-component/ui/avatar.tsx b/apps/web/src/new-component/ui/avatar.tsx
new file mode 100644
index 0000000..37784ef
--- /dev/null
+++ b/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
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/web/src/new-component/ui/button.tsx b/apps/web/src/new-component/ui/button.tsx
new file mode 100644
index 0000000..8c49db6
--- /dev/null
+++ b/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,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button';
+ return (
+
+ );
+ }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/apps/web/src/new-component/ui/card.tsx b/apps/web/src/new-component/ui/card.tsx
new file mode 100644
index 0000000..8f8d272
--- /dev/null
+++ b/apps/web/src/new-component/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { cn } from 'front/lib/utils';
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/apps/web/src/new-component/ui/progress.tsx b/apps/web/src/new-component/ui/progress.tsx
new file mode 100644
index 0000000..967123d
--- /dev/null
+++ b/apps/web/src/new-component/ui/progress.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from 'front/lib/utils';
+
+const Progress = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/apps/web/src/new-component/ui/skeleton.tsx b/apps/web/src/new-component/ui/skeleton.tsx
new file mode 100644
index 0000000..922d7a1
--- /dev/null
+++ b/apps/web/src/new-component/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from 'front/lib/utils';
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/apps/web/src/new-site/home/Contents.tsx b/apps/web/src/new-site/home/Contents.tsx
index 0db5fa7..2cb1dd8 100644
--- a/apps/web/src/new-site/home/Contents.tsx
+++ b/apps/web/src/new-site/home/Contents.tsx
@@ -3,6 +3,7 @@
import React from 'react';
import './contents.scss';
import { useRouter } from 'next/navigation';
+import { Button } from 'front/new-component/ui/button';
type Props = Record;
@@ -22,12 +23,12 @@ const SearchContentsItem = () => {
당신의 책임있는 사랑이 그들의 삶을 바꿀 수 있습니다.