[#43] Storybook 을 도입하여 Atoms 컴포넌트 관리

.ladle/UnoptimizedImage.tsx

@@ -0,0 +1,4 @@
+const UnoptimizedImage = (props: any) => {
+  return <img {...props} />;
+};
+export default UnoptimizedImage;

.ladle/UnoptimizedLink.tsx

@@ -0,0 +1,4 @@
+const UnoptimizedLink = (props: any) => {
+  return <a {...props} />;
+};
+export default UnoptimizedLink;

.ladle/components.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { GlobalProvider } from '@ladle/react';
+
+import '@/styles/globals.css';
+
+export const Provider: GlobalProvider = ({ children }) => <>{children}</>;

package.json

@@ -17,9 +17,11 @@
     "docker:build": "DOCKER_BUILDKIT=1 docker build -t scrum-dice --secret id=npm,src=./.npmrc .",
     "docker:run": "docker run --env-file=.env --rm --name scrum-dice -p 3000:3000 -d scrum-dice",
     "docker:stop": "docker stop scrum-dice",
-    "docker:dev": "docker-compose rm -fsv && COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build && docker-compose up && docker-compose rm -fsv"
+    "docker:dev": "docker-compose rm -fsv && COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build && docker-compose up && docker-compose rm -fsv",
+    "story": "ladle serve"
   },
   "dependencies": {
+    "@ladle/react": "^2.12.2",
     "@types/node": "18.15.10",
     "@types/react": "18.0.29",
     "@types/react-dom": "18.0.11",

src/components/atoms/button/CountDownButton.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import { ButtonProps } from './Button';
 
-type CountDownButtonProps = ButtonProps & {
+export type CountDownButtonProps = ButtonProps & {
   counter: number;
   onReset?: () => void;
 };
@@ -12,6 +12,10 @@ export const CountDownButton = ({ children, className, counter, onReset, ...prop
   const [count, setCount] = useState(counter);
   const [isCounting, setIsCounting] = useState(false);
 
+  useEffect(() => {
+    setCount(counter);
+  }, [counter]);
+
   useEffect(() => {
     let intervalId: NodeJS.Timeout;
     if (isCounting) {

src/components/atoms/button/LinkButton.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import { ButtonProps } from './Button';
 
-type LinkButtonProps = ButtonProps &
+export type LinkButtonProps = ButtonProps &
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'href'> & {
     href: string;
     target?: '_blank' | '_self';

src/components/atoms/button/atoms-Button.stories.tsx

@@ -0,0 +1,44 @@
+import { Button as ButtonComponent } from './Button';
+import { CountDownButton as CountDownButtonComponent } from './CountDownButton';
+import { LinkButton as LinkButtonComponent } from './LinkButton';
+
+import type { ButtonProps, CountDownButtonProps, LinkButtonProps } from './index';
+import type { Story } from '@ladle/react';
+
+export const Button: Story<ButtonProps> = props => <ButtonComponent {...props}>button</ButtonComponent>;
+export const CountDownButton: Story<CountDownButtonProps> = props => <CountDownButtonComponent {...props} />;
+export const LinkButton: Story<LinkButtonProps> = props => (
+  <LinkButtonComponent {...props}>{props.href}</LinkButtonComponent>
+);
+
+Button.args = {
+  disabled: false,
+  loading: false,
+};
+
+Button.argTypes = {
+  state: {
+    options: ['info', 'success', 'warning', 'error'],
+    control: { type: 'inline-radio' },
+    defaultValue: 'info',
+  },
+};
+
+CountDownButton.argTypes = {
+  counter: {
+    control: { type: 'range', min: 1, max: 180, step: 1 },
+    defaultValue: 90,
+  },
+};
+
+LinkButton.args = {
+  href: 'https://www.google.com/',
+};
+
+LinkButton.argTypes = {
+  target: {
+    options: ['_blank', '_self'],
+    control: { type: 'inline-radio' },
+    defaultValue: '_blank',
+  },
+};

src/components/atoms/button/index.ts

@@ -1,3 +1,3 @@
-export { Button } from './Button';
-export { LinkButton } from './LinkButton';
-export { CountDownButton } from './CountDownButton';
+export * from './Button';
+export * from './LinkButton';
+export * from './CountDownButton';

src/components/atoms/card/index.ts

@@ -1 +1 @@
-export { Card } from './Card';
+export * from './Card';

src/components/atoms/title/Title.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
-type TitleProps = HTMLAttributes<HTMLHeadingElement> & {
+export type TitleProps = HTMLAttributes<HTMLHeadingElement> & {
   headingLevel: 'h1' | 'h2' | 'h3';
   emoji?: string;
 };

src/components/atoms/title/atoms-Title.stories.tsx

@@ -0,0 +1,17 @@
+import { Title } from './Title';
+
+import type { TitleProps } from './Title';
+import type { Story } from '@ladle/react';
+
+export const h1: Story<TitleProps> = () => <Title headingLevel="h1">h1 : text-5xl</Title>;
+export const h2: Story<TitleProps> = () => <Title headingLevel="h2">h2 : text-4xl</Title>;
+export const h3: Story<TitleProps> = () => <Title headingLevel="h3">h2 : text-3xl</Title>;
+export const EmojiWithTitle: Story<TitleProps> = ({ emoji }) => (
+  <Title headingLevel="h3" emoji={emoji}>
+    h2 : text-3xl
+  </Title>
+);
+
+EmojiWithTitle.args = {
+  emoji: '😎',
+};

src/components/atoms/title/index.ts

@@ -1 +1 @@
-export { Title } from './Title';
+export * from './Title';

src/pages/index.tsx

@@ -25,9 +25,7 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={classNames(notoSansKr.className, lato.variable)}>
-      </main>
+      <main />
     </>
   );
 }

vite.config.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'next/image': path.resolve(__dirname, './.ladle/UnoptimizedImage.tsx'),
+      'next/link': path.resolve(__dirname, './.ladle/UnoptimizedLink.tsx'),
+    },
+  },
+});