feature: breadcrumb storybook 및 공통 컴포넌트 구현

src/app/page.tsx

@@ -1,11 +1,18 @@
 'use client'
+import { BreadcrumbItemType } from '@/components/common/Breadcrumb/Breadcrumb'
 import Pagination from '@/components/common/pagination/Pagination'
 import BreakpointTest from '@/components/design-system/BreakpointTest'
-import ButtonTest from '@/components/design-system/ButtonTest'
 import ColorPalette from '@/components/design-system/ColorPalette'
 import TypoSystem from '@/components/design-system/TypoSystem'
+import Breadcrumb from '@/components/common/Breadcrumb/Breadcrumb'
 import { useState } from 'react'
 
+export const mockBreadcrumbData: BreadcrumbItemType[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Category', href: '/category' },
+  { label: 'Product', href: '/product' },
+]
+
 export default function Home() {
   //현재 페이지
   const [currentPage, setCurrentPage] = useState(1)
@@ -27,7 +34,6 @@ export default function Home() {
       <TypoSystem />
 
       {/* 공통 버튼 */}
-      <ButtonTest />
 
       {/* 페이지네이션 */}
       <Pagination
@@ -36,6 +42,13 @@ export default function Home() {
         onPageChange={setCurrentPage}
         limit={limit}
       />
+      <Breadcrumb
+        items={[
+          { label: 'Dashboard', href: '/dashboard' },
+          { label: 'Settings', href: '/dashboard/settings' },
+          { label: 'Profile' },
+        ]}
+      />
     </div>
   )
 }

src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+export interface BreadcrumbItemType {
+  label: string
+  href?: string
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItemType[]
+  showHomeIcon?: boolean
+  className?: string
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, showHomeIcon = true, className }) => {
+  const pathname = usePathname()
+  console.log(pathname)
+  const breadcrumbItems = items.length > 0 ? items : generateBreadcrumbItems(pathname)
+  return (
+    <nav aria-label="Breadcrumb" className={cn('flex flex-wrap items-center', className)}>
+      <ol className="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5">
+        {showHomeIcon && (
+          <li className="inline-flex items-center gap-1.5">
+            <Link
+              href="/"
+              className={`typo-caption1 ${pathname === '/' ? 'text-strong typo-button2' : 'text-assistive typo-caption1'}`}
+            >
+              홈
+            </Link>
+            <span
+              className={`typo-caption1 ${pathname === '/' ? 'text-strong typo-button2' : 'text-assistive typo-caption1'}`}
+            >
+              {'>'}
+            </span>
+          </li>
+        )}
+
+        {breadcrumbItems.map((item, index) => {
+          const isLast = index === breadcrumbItems.length - 1
+
+          return (
+            <li key={`${item.label}-${index}`} className="inline-flex items-center gap-1.5">
+              {isLast ? (
+                <span
+                  aria-current="page"
+                  className={`typo-button2 ${pathname === item.href ? 'text-strong  typo-button2' : 'text-assistive typo-caption1'}`}
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <>
+                  <Link
+                    href={item.href || '#'}
+                    className={`typo-button2 ${pathname === item.href ? 'text-strong  typo-button2' : 'text-assistive typo-caption1'}`}
+                  >
+                    {item.label}
+                  </Link>
+                  <span
+                    className={`typo-button2 ${pathname === item.href ? 'text-strong typo-button2' : 'text-assistive typo-caption1'}`}
+                  >
+                    {'>'}
+                  </span>
+                </>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+const generateBreadcrumbItems = (pathname: string): BreadcrumbItemType[] => {
+  const pathSegments = pathname.split('/').filter((segment) => segment && !segment.includes('?'))
+  return pathSegments.map((segment, index) => {
+    const href = '/' + pathSegments.slice(0, index + 1).join('/')
+
+    const label = segment.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())
+
+    return { label, href }
+  })
+}
+
+export default Breadcrumb

src/components/design-system/ButtonTest.tsx

@@ -11,10 +11,10 @@ const ButtonTest = () => {
   return (
     <section className="space-y-8">
       <h2 className="typo-h2 mb-4">기본 버튼</h2>
-      {defaultButtonVars.map((variant) => (
+      {defaultButtonVars.map((variant, index) => (
         <div key={variant} className="space-y-2">
           <p className="typo-h3">{variant}</p>
-          <div className="grid grid-cols-6 gap-2 items-start">
+          <div className="grid grid-cols-6 gap-2 items-start" key={index}>
             {defaultButtonSizes.map((s) => (
               <>
                 <Button variant={variant} size={s}>

src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Breadcrumb from '@/components/common/Breadcrumb/Breadcrumb'
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: 'Breadcrumb items',
+      control: 'object',
+    },
+    showHomeIcon: {
+      description: 'Show home icon',
+      control: 'boolean',
+    },
+    className: {
+      description: 'Additional CSS classes',
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Breadcrumb>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Dashboard', href: '/dashboard' },
+      { label: 'Settings', href: '/dashboard/settings' },
+      { label: 'Profile' },
+    ],
+  },
+}