Merge branch 'main' of https://github.com/prgrms-web-devcourse/Team-0…

…8-Final-FE into feat/#414

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,6 +1,10 @@
+import React from 'react';
+
 import type { Preview } from '@storybook/react';
 import '@/styles/global.css';
 
+import ToastProvider from '../src/ui/Base/Toast/ToastProvider';
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -15,6 +19,13 @@ const preview: Preview = {
     },
     layout: 'fullscreen',
   },
+  decorators: [
+    Story => (
+      <ToastProvider>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
 };
 
 export default preview;

public/icons/index.ts

@@ -31,6 +31,7 @@ export { default as IconCheck } from './check.svg';
 export { default as IconComments } from './comments.svg';
 export { default as IconDelete } from './delete.svg';
 export { default as IconMembers } from './members.svg';
+export { default as IconPlus } from './plus.svg';
 
 // 카카오
 export { default as IconKakao } from './kakao.svg';

src/constants/dataUrl.ts

@@ -0,0 +1,4 @@
+export const DATA_URL = {
+  placeholder:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjWL9+/X8ABysDDapsaG4AAAAASUVORK5CYII=', // data url for placeholder color (#AFAFAF)
+};

src/stories/Base/Avatar.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from '@/ui/Base/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Base/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSrc: Story = {
+  args: { src: '/icons/logo.svg', name: 'dadok', size: 'large' },
+};

src/stories/Base/Bookshelf/Bookshelf.stories.tsx

@@ -0,0 +1,43 @@
+import Bookshelf from '@/ui/Bookshelf';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Bookshelf> = {
+  title: 'Bookshelf/Bookshelf',
+  component: Bookshelf,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Bookshelf>;
+
+// TODO: 스토리북에서 이미지를 불러올 때 발생하는 CORS 이슈 해결
+export const Default: Story = {
+  args: {
+    bookshelfId: 9,
+    bookshelfName: '백민종님의 책장',
+    books: [
+      {
+        bookId: 3,
+        title: '리액트를 다루는 기술',
+        imageUrl: '/images/book-cover/book1.jpeg',
+      },
+      {
+        bookId: 11,
+        title: '모던 자바스크립트 Deep Dive',
+        imageUrl: '/images/book-cover/book2.jpeg',
+      },
+      {
+        bookId: 22,
+        title: '이펙티브 타입스크립트',
+        imageUrl: '/images/book-cover/book3.jpeg',
+      },
+      {
+        bookId: 23,
+        title: '리팩터링 2판',
+        imageUrl: '/images/book-cover/book4.jpeg',
+      },
+    ],
+    likeCount: 3,
+  },
+};

src/stories/Base/BottomNavigation.stories.tsx

@@ -20,53 +20,21 @@ export default meta;
 type Story = StoryObj<typeof BottomNavigation>;
 
 export const Default: Story = {
-  parameters: {
-    nextjs: {
-      navigation: {
-        pathname: '/bookarchive',
-      },
-    },
-  },
-  render: () => {
-    return <BottomNavigation />;
-  },
+  args: { pathname: '/bookarchive' },
+  render: args => <BottomNavigation {...args} />,
 };
 
 export const Search: Story = {
-  parameters: {
-    nextjs: {
-      navigation: {
-        pathname: '/book/search',
-      },
-    },
-  },
-  render: () => {
-    return <BottomNavigation />;
-  },
+  args: { pathname: '/book/search' },
+  render: args => <BottomNavigation {...args} />,
 };
 
 export const Group: Story = {
-  parameters: {
-    nextjs: {
-      navigation: {
-        pathname: '/group',
-      },
-    },
-  },
-  render: () => {
-    return <BottomNavigation />;
-  },
+  args: { pathname: '/group' },
+  render: args => <BottomNavigation {...args} />,
 };
 
 export const Profile: Story = {
-  parameters: {
-    nextjs: {
-      navigation: {
-        pathname: '/profile/me',
-      },
-    },
-  },
-  render: () => {
-    return <BottomNavigation />;
-  },
+  args: { pathname: '/profile/me' },
+  render: args => <BottomNavigation {...args} />,
 };

src/stories/Base/FloatingButton.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import FloatingButton from '@/ui/Base/FloatingButton';
+
+const meta: Meta<typeof FloatingButton> = {
+  title: 'Base/FloatingButton',
+  component: FloatingButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatingButton>;
+
+export const Default: Story = {
+  args: {
+    position: 'bottom-right',
+  },
+  render: args => <FloatingButton {...args} />,
+};

src/stories/Base/Toast.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@/ui/Base/Button';
+import useToast from '@/ui/Base/Toast/useToast';
+import ToastItem from '@/ui/Base/Toast/ToastItem';
+
+const meta: Meta<typeof ToastItem> = {
+  title: 'Base/Toast',
+  component: ToastItem,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastItem>;
+
+const NormalToast = () => {
+  const toast = useToast();
+  const handleButtonClick = () =>
+    toast.show({
+      type: 'normal',
+      message: '5초 동안 보여지는 토스트 메세지에요.',
+      duration: 5000,
+    });
+
+  return <Button onClick={handleButtonClick}>토스트 띄우기</Button>;
+};
+
+const SuccessToast = () => {
+  const toast = useToast();
+  const handleButtonClick = () =>
+    toast.show({ type: 'success', message: '링크가 복사되었어요' });
+
+  return <Button onClick={handleButtonClick}>링크 복사하기</Button>;
+};
+
+const ErrorToast = () => {
+  const toast = useToast();
+  const handleButtonClick = () =>
+    toast.show({ type: 'error', message: '잠시 후 다시 시도해주세요' });
+
+  return <Button onClick={handleButtonClick}>재시도</Button>;
+};
+
+export const Default: Story = {
+  args: {
+    message: '토스트 예시',
+  },
+  render: args => <ToastItem {...args} />,
+};
+
+export const Normal: Story = {
+  render: NormalToast,
+};
+
+export const Success: Story = {
+  render: SuccessToast,
+};
+
+export const Error: Story = {
+  render: ErrorToast,
+};