-
-
+
+
{column.title}
-
+
{cardList?.pages[0].totalCount}
-
diff --git a/src/components/dashboard/MyDashboardCard.tsx b/src/components/dashboard/MyDashboardCard.tsx
index 60c1b48..c370136 100644
--- a/src/components/dashboard/MyDashboardCard.tsx
+++ b/src/components/dashboard/MyDashboardCard.tsx
@@ -23,9 +23,9 @@ const MyDashboardCard = ({ dashboard }: MyDashboardCardProps) => {
className="w-2 h-2 rounded-full flex-shrink-0"
style={{ backgroundColor: dashboard.color }}
/>
-
{dashboard.title}
+
{dashboard.title}
{dashboard.createdByMe && (
-
-
+
- {profileImageUrl ? (
+
+ {firstChar}
+
+ {profileImageUrl && (
e.currentTarget.remove()}
/>
- ) : (
-
- {firstChar}
-
)}
);
diff --git a/src/components/ui/Dropdown/index.tsx b/src/components/ui/Dropdown/index.tsx
index a5d442c..d84510b 100644
--- a/src/components/ui/Dropdown/index.tsx
+++ b/src/components/ui/Dropdown/index.tsx
@@ -63,7 +63,7 @@ const Dropdown = ({
= {
+ title: "UI/Avatar",
+ component: Avatar,
+ parameters: {
+ layout: "centered",
+ },
+
+ argTypes: {
+ profileImageUrl: {
+ control: { type: "text" },
+ description: "프로필 이미지 URL",
+ },
+ email: {
+ control: { type: "text" },
+ description: "이메일",
+ },
+ nickname: {
+ control: { type: "text" },
+ description: "닉네임",
+ },
+ className: {
+ control: { type: "text" },
+ },
+ },
+
+ args: {
+ email: "test@example.com",
+ nickname: "John Doe",
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// 기본 아바타
+export const Default: Story = {
+ args: {
+ email: "test@example.com",
+ nickname: "춘향",
+ },
+};
+
+// 이미지가 있는 아바타
+export const WithImage: Story = {
+ args: {
+ profileImageUrl:
+ "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQK1dXQrVCbBvMdU4A83XdwM7Rtte8YFsWFI-y5JLABKyTRyUTBQko0SqyrqNJQf96aNdEqLNo5eZglqCIH2udWwuewokYR5-0QnjucNq4Y5Q",
+ nickname: "홍길동",
+ email: "hong@example.com",
+ },
+};
+
+// 이미지 로딩 실패 케이스
+export const ImageLoadError: Story = {
+ args: {
+ profileImageUrl: "invalid-url",
+ email: "hong@example.com",
+ nickname: "홍길동",
+ },
+};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
new file mode 100644
index 0000000..2d8bdd6
--- /dev/null
+++ b/src/stories/Button.stories.tsx
@@ -0,0 +1,60 @@
+import Button from "@/components/ui/Button";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+ title: "UI/Button", // 스토리북 사이드바에서 보이는 경로
+ component: Button,
+ parameters: {
+ layout: "centered", // 컴포넌트를 중앙에 배치
+ },
+ // controls 설정
+ argTypes: {
+ variant: {
+ control: { type: "select" },
+ options: ["primary", "secondary"],
+ description: "버튼의 스타일 종류",
+ },
+ size: {
+ control: { type: "select" },
+ options: ["sm", "md", "lg"],
+ description: "버튼의 크기",
+ },
+ disabled: {
+ control: { type: "boolean" },
+ description: "버튼 비활성화 여부",
+ },
+ children: {
+ control: { type: "text" },
+ description: "버튼 텍스트",
+ },
+ onClick: {
+ actions: "clicked",
+ description: "클릭 이벤트",
+ },
+ },
+ // 기본 값 설정
+ args: {
+ children: "버튼",
+ variant: "primary",
+ size: "md",
+ disabled: false,
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: "기본 버튼",
+ size: "lg"
+ },
+};
+
+// 🎯 Primary 버튼
+export const Primary: Story = {
+ args: {
+ children: "Primary 버튼",
+ variant: "primary",
+ },
+};
diff --git a/src/stories/Card.stories.tsx b/src/stories/Card.stories.tsx
new file mode 100644
index 0000000..438c169
--- /dev/null
+++ b/src/stories/Card.stories.tsx
@@ -0,0 +1,88 @@
+import Card from "@/components/card/Card";
+import { Meta, StoryObj } from "@storybook/react";
+import { Card as CardType } from "@/apis/cards/types";
+
+const mockCard: CardType = {
+ id: 1,
+ dashboardId: 1,
+ columnId: 1,
+ title: "웹사이트 메인 페이지 디자인",
+ description: "새로운 웹사이트의 메인 페이지 디자인을 완성해야 합니다.",
+ tags: ["디자인", "UI/UX", "웹사이트"],
+ dueDate: "2024-01-15",
+ assignee: {
+ id: 1,
+ nickname: "김디자이너",
+ profileImageUrl: null,
+ },
+ imageUrl: null,
+ teamId: "team-1",
+ createdAt: "2024-01-01T09:00:00Z",
+ updatedAt: "2024-01-10T14:30:00Z",
+};
+
+const meta: Meta = {
+ title: "Components/Card",
+ component: Card,
+ parameters: {
+ layout: "centered",
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ card: mockCard,
+ index: 0,
+ },
+};
+
+export const WithImage: Story = {
+ args: {
+ card: {
+ ...mockCard,
+ imageUrl: "https://picsum.photos/400/300",
+ },
+ index: 0,
+ },
+};
+
+export const WithoutTags: Story = {
+ args: {
+ card: {
+ ...mockCard,
+ tags: [],
+ },
+ index: 0,
+ },
+};
+
+export const LongTitle: Story = {
+ args: {
+ card: {
+ ...mockCard,
+ title:
+ "매우 긴 제목을 가진 카드입니다. 이 제목이 어떻게 표시되는지 확인해보세요.",
+ },
+ index: 0,
+ },
+};
+
+export const ManyTags: Story = {
+ args: {
+ card: {
+ ...mockCard,
+ tags: ["React", "TypeScript", "Next.js", "Tailwind", "Storybook"],
+ },
+ index: 0,
+ },
+};
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
new file mode 100644
index 0000000..5522273
--- /dev/null
+++ b/src/stories/Input.stories.tsx
@@ -0,0 +1,56 @@
+import Input from "@/components/ui/Field/Input";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+ title: "UI/Input",
+ component: Input,
+ parameters: {
+ layout: "centered",
+ },
+ argTypes: {
+ error: {
+ control: { type: "boolean" },
+ description: "에러 상태를 나타내는 플래그",
+ },
+ errorMessage: {
+ control: { type: "text" },
+ description: "에러 메시지 텍스트",
+ },
+ imageRightUrl: {
+ control: { type: "text" },
+ description: "오른쪽 이미지 URL",
+ },
+ imageLeftUrl: {
+ control: { type: "text" },
+ description: "왼쪽 이미지 URL",
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ placeholder: "입력하세요",
+ },
+};
+
+export const Error: Story = {
+ args: {
+ error: true,
+ errorMessage: "에러 메시지",
+ },
+};
+
+export const ImageRight: Story = {
+ args: {
+ imageRightUrl: "/column/calendar-icon.svg",
+ },
+};
+
+export const ImageLeft: Story = {
+ args: {
+ imageLeftUrl: "/column/toggle-icon.svg",
+ },
+};
diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
new file mode 100644
index 0000000..ea3af6f
--- /dev/null
+++ b/src/stories/Modal.stories.tsx
@@ -0,0 +1,87 @@
+import Button from "@/components/ui/Button";
+import BaseLabel from "@/components/ui/Field/BaseLabel";
+import Input from "@/components/ui/Field/Input";
+import {
+ Modal,
+ ModalHandle,
+ ModalHeader,
+ ModalBody,
+} from "@/components/ui/Modal";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef } from "react";
+
+// 래퍼 컴포넌트 생성
+const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
+ const modalRef = useRef(null);
+
+ return (
+ <>
+
+ {children}
+
+ );
+};
+
+const FormModalWrapper = () => {
+ const modalRef = useRef(null);
+
+ return (
+ <>
+
+
+
+
+ 사용자 정보
+
+
+
+
+ 이름
+
+
+
+ 이메일
+
+
+
+
+
+
+
+