From c318f91775ef1f358f8ef36d81abfd7529ec4b0a Mon Sep 17 00:00:00 2001
From: rondido <rppr001@naver.com>
Date: Mon, 17 Mar 2025 11:48:31 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20breadcrumb=20storybook=20=EB=B0=8F?=
 =?UTF-8?q?=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                              | 17 +++-
 .../common/Breadcrumb/Breadcrumb.tsx          | 85 +++++++++++++++++++
 src/components/design-system/ButtonTest.tsx   |  4 +-
 src/components/ui/breadcrumb.stories.tsx      | 13 ---
 src/stories/breadcrumb.stories.tsx            | 39 +++++++++
 5 files changed, 141 insertions(+), 17 deletions(-)
 create mode 100644 src/components/common/Breadcrumb/Breadcrumb.tsx
 delete mode 100644 src/components/ui/breadcrumb.stories.tsx
 create mode 100644 src/stories/breadcrumb.stories.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9e5158e..81113df 100644
--- a/src/app/page.tsx
+++ b/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>
   )
 }
diff --git a/src/components/common/Breadcrumb/Breadcrumb.tsx b/src/components/common/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..73b54b9
--- /dev/null
+++ b/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
diff --git a/src/components/design-system/ButtonTest.tsx b/src/components/design-system/ButtonTest.tsx
index ea622ad..d9a827c 100644
--- a/src/components/design-system/ButtonTest.tsx
+++ b/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}>
diff --git a/src/components/ui/breadcrumb.stories.tsx b/src/components/ui/breadcrumb.stories.tsx
deleted file mode 100644
index bac6658..0000000
--- a/src/components/ui/breadcrumb.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Breadcrumb } from './breadcrumb'
-
-const meta = {
-  component: Breadcrumb,
-} satisfies Meta<typeof Breadcrumb>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
diff --git a/src/stories/breadcrumb.stories.tsx b/src/stories/breadcrumb.stories.tsx
new file mode 100644
index 0000000..3d88e5d
--- /dev/null
+++ b/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' },
+    ],
+  },
+}