diff --git a/front/src/component/Button.tsx b/front/src/component/Button.tsx
new file mode 100644
index 0000000..fce5fe4
--- /dev/null
+++ b/front/src/component/Button.tsx
@@ -0,0 +1,53 @@
+import { type ComponentProps } from 'react'
+import { cn } from './cn'
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'destructive'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+const base =
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ' +
+  'transition-colors cursor-pointer select-none ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
+  'disabled:pointer-events-none disabled:opacity-50'
+
+// hover 는 한 단계 톤다운(brand-700) — 디자인 선호
+const variantClass: Record<ButtonVariant, string> = {
+  primary: 'bg-primary text-primary-foreground hover:bg-brand-700',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-accent',
+  outline:
+    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+  ghost: 'hover:bg-accent hover:text-accent-foreground',
+  destructive: 'bg-destructive text-white hover:opacity-90',
+}
+
+const sizeClass: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-11 px-6 text-base',
+}
+
+export interface ButtonProps extends ComponentProps<'button'> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(base, variantClass[variant], sizeClass[size], className)}
+      {...props}
+    />
+  )
+}
diff --git a/front/src/component/Input.tsx b/front/src/component/Input.tsx
new file mode 100644
index 0000000..d2f9703
--- /dev/null
+++ b/front/src/component/Input.tsx
@@ -0,0 +1,18 @@
+import { type ComponentProps } from 'react'
+import { cn } from './cn'
+
+export function Input({ type = 'text', className, ...props }: ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+        'placeholder:text-muted-foreground',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/front/src/component/cn.ts b/front/src/component/cn.ts
new file mode 100644
index 0000000..b86f42f
--- /dev/null
+++ b/front/src/component/cn.ts
@@ -0,0 +1,11 @@
+// 경량 className 병합 헬퍼 (외부 의존성 없음).
+// falsy 값을 걸러 공백으로 join 한다. 조건부 클래스: cn('base', isActive && 'active').
+//
+// 주의: tailwind-merge 가 아니므로 같은 속성의 Tailwind 유틸이 충돌할 때
+//       (예: 'px-4' + 'px-2') 자동 정리는 하지 않는다. 전달한 className 을
+//       뒤에 두어 우선하도록 의도하지만, 최종 승자는 CSS 출력 순서를 따른다.
+export type ClassValue = string | number | false | null | undefined
+
+export function cn(...classes: ClassValue[]): string {
+  return classes.filter(Boolean).join(' ')
+}
diff --git a/front/src/component/index.ts b/front/src/component/index.ts
new file mode 100644
index 0000000..5221b7f
--- /dev/null
+++ b/front/src/component/index.ts
@@ -0,0 +1,4 @@
+export { cn } from './cn'
+export { Button } from './Button'
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button'
+export { Input } from './Input'