Merge pull request #28 from DDD-Community/feat/design-system

FEAT: 공통 컴포넌트 개발 (버튼, 체크박스, 스켈레톤)

Author: Wonchang0314

src/app/test-toast/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useToast } from '@/shared/components/toast';
+import Button from '@/shared/components/Button';
 
 export default function TestToastPage() {
   const { showToast } = useToast();
@@ -22,7 +23,7 @@ export default function TestToastPage() {
   };
 
   return (
-    <div className="p-8 space-y-4">
+    <div className="p-8 space-y-4 bg-gray-200">
       <h1 className="text-2xl font-bold">토스트 테스트 페이지</h1>
 
       <div className="space-y-2">
@@ -50,6 +51,7 @@ export default function TestToastPage() {
         >
           정보 토스트 테스트
         </button>
+        <Button size={'xl'} text={'버튼'} isPending={false} />
       </div>
     </div>
   );

src/shared/components/Button.tsx

@@ -1,5 +1,55 @@
-const Button = () => {
-  return <div>button Component</div>;
+import { ButtonHTMLAttributes } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size: 'sm' | 'ml' | 'lg' | 'xl' | 'full';
+  text: string;
+  isPending?: boolean;
+  className?: string;
+}
+
+const Button = ({ size, text, onClick, disabled = false, isPending = false, className = '' }: ButtonProps) => {
+  return (
+    <button
+      className={`rounded-lg 
+      ${
+        size === 'sm'
+          ? 'py-[8px] px-[14px] w-[106px] label-1-bold'
+          : size === 'ml'
+            ? 'py-[10px] px-[16px] w-[110px] label-1-bold'
+            : size === 'lg'
+              ? 'py-[10px] px-[18px] w-[123px] body-1-bold'
+              : size === 'xl'
+                ? 'py-[12px] px-[20px] w-[127px] body-1-bold'
+                : 'py-3 px-4 w-full body-1-bold'
+      } 
+      shadow-xs
+      ${disabled ? 'bg-interaction-disable text-label-disable cursor-not-allowed' : 'cursor-pointer bg-primary-normal hover:bg-primary-strong focus:outline-4 focus:outline-solid focus:outline-line-normal'}
+       ${className}`}
+      onClick={e => onClick && onClick(e)}
+      disabled={disabled}
+    >
+      {!disabled && isPending ? (
+        <svg
+          aria-hidden="true"
+          className="inline w-5 h-5 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+      ) : (
+        <span className="whitespace-nowrap">{text}</span>
+      )}
+    </button>
+  );
 };
 
 export default Button;

src/shared/components/Skeleton.tsx

@@ -0,0 +1,22 @@
+import FlexBox from './FlexBox';
+
+interface SkeletonUIProps {
+  // 추후에 더 추가 예정
+  size: 'sm' | 'lg';
+  direction: 'col' | 'row';
+  count: number;
+  className?: string;
+}
+const Skeleton = ({ size, direction = 'row', count = 1, className }: SkeletonUIProps) => {
+  return (
+    <FlexBox direction={direction} className="gap-2">
+      {Array.from({ length: count }).map(() => (
+        <div
+          className={`rounded-lg bg-gray-400 h-[44px] animate-pulse ${size === 'sm' ? 'w-[120px]' : 'w-[335px] md:w-[420px]'} ${className}`}
+        />
+      ))}
+    </FlexBox>
+  );
+};
+
+export default Skeleton;

src/shared/components/toast.tsx

@@ -9,6 +9,7 @@ interface Toast {
   message: string;
   type: 'success' | 'error' | 'warning' | 'info';
   duration?: number;
+  isExisting: boolean;
 }
 
 interface ToastContextType {
@@ -21,9 +22,9 @@ const ToastContext = createContext<ToastContextType | undefined>(undefined);
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
 
-  const showToast = (message: string, type: Toast['type'] = 'info', duration = 3000) => {
+  const showToast = (message: string, type: Toast['type'] = 'warning', duration = 2500) => {
     const id = Math.random().toString(36).substr(2, 9);
-    const newToast: Toast = { id, message, type, duration };
+    const newToast: Toast = { id, message, type, duration, isExisting: false };
 
     setToasts(prev => [...prev, newToast]);
 
@@ -35,9 +36,14 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   };
 
   const hideToast = (id: string) => {
-    setToasts(prev => prev.filter(toast => toast.id !== id));
-  };
+    // 먼저 isExiting라는 플래그 변수를 true로 설정하여 exit 애니메이션 시작
+    setToasts(prev => prev.map(toast => (toast.id === id ? { ...toast, isExisting: true } : toast)));
 
+    // 애니메이션 완료 후 실제로 토스트 제거 (300ms는 애니메이션 duration)
+    setTimeout(() => {
+      setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, 300);
+  };
   return (
     <ToastContext.Provider value={{ showToast, hideToast }}>
       {children}
@@ -51,42 +57,38 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 }
 
 function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
-  const getToastStyles = (type: Toast['type']) => {
-    switch (type) {
-      case 'success':
-        return 'bg-green-500 text-white border-green-600';
-      case 'error':
-        return 'bg-red-500 text-white border-red-600';
-      case 'warning':
-        return 'bg-yellow-500 text-white border-yellow-600';
-      case 'info':
-      default:
-        return 'bg-blue-500 text-white border-blue-600';
-    }
-  };
-
   const getIcon = (type: Toast['type']) => {
     switch (type) {
       case 'success':
         return (
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M1.92499 10.9999C1.92499 5.98794 5.98799 1.92493 11 1.92493C16.0119 1.92493 20.0749 5.98794 20.0749 10.9999C20.0749 16.0119 16.0119 20.0749 11 20.0749C5.98799 20.0749 1.92499 16.0119 1.92499 10.9999ZM15.2594 9.05278C15.5763 8.72539 15.5678 8.2031 15.2404 7.88621C14.913 7.56932 14.3907 7.57784 14.0738 7.90523L9.78756 12.3336L7.9269 10.406C7.61046 10.0782 7.08818 10.069 6.76036 10.3854C6.43254 10.7019 6.42331 11.2242 6.73975 11.552L9.19318 14.0936C9.34851 14.2546 9.56253 14.3455 9.78619 14.3457C10.0099 14.3458 10.224 14.2552 10.3795 14.0944L15.2594 9.05278Z"
+              fill="#1ED45A"
+            />
           </svg>
         );
       case 'error':
         return (
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          <svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M0.924881 10C0.924881 4.98807 4.98788 0.925049 9.99985 0.925049C15.0118 0.925049 19.0748 4.98807 19.0748 10C19.0748 15.012 15.0118 19.075 9.99985 19.075C4.98788 19.075 0.924881 15.012 0.924881 10ZM9.99993 5.50829C10.4556 5.50829 10.8249 5.87766 10.8249 6.33329V10.4583C10.8249 10.9139 10.4556 11.2833 9.99993 11.2833C9.5443 11.2833 9.17493 10.9139 9.17493 10.4583V6.33329C9.17493 5.87766 9.5443 5.50829 9.99993 5.50829ZM10.9165 13.6666C10.9165 14.1729 10.5061 14.5833 9.99982 14.5833C9.49356 14.5833 9.08316 14.1729 9.08316 13.6666C9.08316 13.1604 9.49356 12.75 9.99982 12.75C10.5061 12.75 10.9165 13.1604 10.9165 13.6666Z"
+              fill="#FF6363"
+            />
           </svg>
         );
       case 'warning':
         return (
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.91854 2.84201C10.6068 2.53557 11.3928 2.53557 12.081 2.84201C12.5607 3.05559 12.9071 3.4471 13.208 3.87311C13.5064 4.29544 13.8347 4.86408 14.2341 5.55592L18.9191 13.6705C19.3185 14.3624 19.6468 14.931 19.8634 15.4006C20.0818 15.8742 20.2477 16.3699 20.1928 16.8921C20.1141 17.6414 19.7211 18.3221 19.1116 18.7649C18.6868 19.0736 18.1745 19.1777 17.6551 19.2254C17.1402 19.2726 16.4836 19.2726 15.6847 19.2726H6.31484C5.51597 19.2726 4.85937 19.2726 4.34442 19.2254C3.82501 19.1777 3.31279 19.0736 2.88796 18.7649C2.27846 18.3221 1.88548 17.6414 1.80673 16.8921C1.75184 16.3699 1.91773 15.8742 2.13617 15.4006C2.35273 14.931 2.68104 14.3624 3.08049 13.6705L7.76543 5.55593C8.16485 4.86408 8.49314 4.29544 8.79152 3.8731C9.0925 3.4471 9.43882 3.05559 9.91854 2.84201ZM10.9999 7.42468C11.4556 7.42468 11.8249 7.79405 11.8249 8.24968V11.9163C11.8249 12.372 11.4556 12.7413 10.9999 12.7413C10.5443 12.7413 10.1749 12.372 10.1749 11.9163V8.24968C10.1749 7.79405 10.5443 7.42468 10.9999 7.42468ZM11.9165 15.1247C11.9165 15.6309 11.5061 16.0413 10.9998 16.0413C10.4936 16.0413 10.0831 15.6309 10.0831 15.1247C10.0831 14.6184 10.4936 14.208 10.9998 14.208C11.5061 14.208 11.9165 14.6184 11.9165 15.1247Z"
+              fill="#FFA938"
             />
           </svg>
         );
@@ -108,12 +110,15 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
   return (
     <div
       className={cn(
-        'flex items-center justify-between p-4 rounded-lg shadow-lg border min-w-[300px] max-w-[400px] animate-in slide-in-from-right-full duration-300',
-        getToastStyles(toast.type)
+        'flex items-center justify-between p-4 rounded-lg shadow-lg w-[335px] md:w-[420px] bg-gray-500',
+        toast.isExisting
+          ? 'animate-out slide-out-to-right-full duration-300'
+          : 'animate-in slide-in-from-right-full duration-300'
       )}
     >
-      <div className="flex items-center space-x-3">
-        <span className="text-sm font-medium">{toast.message}</span>
+      <div className="flex items-center space-x-3  text-label-normal">
+        {getIcon(toast.type)}
+        <span className="text-body-2-normal">{toast.message}</span>
       </div>
       <button onClick={onClose} className="ml-4 text-white/80 hover:text-white transition-colors">
         <XIcon className="w-4 h-4" />

src/stories/feedBack/Toast.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useToast, ToastProvider } from '@/shared/components/toast';
+import Button from '@/shared/components/Button';
+
+const meta = {
+  title: 'FeedBack/Toast',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    actions: { disable: true },
+  },
+  decorators: [
+    Story => (
+      <ToastProvider>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Playground: Story = {
+  globals: {
+    backgrounds: 'dark',
+  },
+  render() {
+    const { showToast } = useToast();
+    const handleTestSuccess = () => {
+      showToast('성공 메시지입니다!', 'success');
+    };
+
+    const handleTestError = () => {
+      showToast('에러 메시지입니다!', 'error');
+    };
+
+    const handleTestWarning = () => {
+      showToast('경고 메시지입니다!', 'warning');
+    };
+
+    const handleTestInfo = () => {
+      showToast('정보 메시지입니다!', 'info');
+    };
+
+    return (
+      <div className="p-8 space-y-4 rounded-xl">
+        <div className="space-y-3 w-48">
+          <Button size="full" text="성공 토스트 테스트" onClick={handleTestSuccess} />
+
+          <Button size="full" text="실패 토스트 테스트" onClick={handleTestError} />
+
+          <Button size="full" text="경고 토스트 테스트" onClick={handleTestWarning} />
+
+          <Button size="full" text="정보 토스트 테스트" onClick={handleTestInfo} />
+        </div>
+      </div>
+    );
+  },
+};

src/stories/foundation/Skeleton.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Skeleton from '@/shared/components/Skeleton';
+
+const meta = {
+  title: 'Foundation/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    actions: { disable: true },
+  },
+  args: {
+    size: 'sm',
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+    },
+    direction: {
+      control: 'radio',
+    },
+    count: {
+      control: 'number',
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Playground: Story = {
+  globals: {
+    backgrounds: 'dark',
+  },
+};

src/stories/navgiation/Button.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from '@/shared/components/Button';
+
+const options = [
+  '신입(1년차 미만)',
+  '주니어(1년~3년)',
+  '미드레벨(3년~6년)',
+  '시니어(6~10년)',
+  '리드/매니저(10년 이상)',
+];
+
+const meta = {
+  title: 'Navigation/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    actions: { disable: true },
+  },
+  args: {
+    size: 'lg',
+    text: 'Button CTA',
+    disabled: false,
+    isPending: false,
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: 386, padding: 50 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: ['sm', 'ml', 'lg', 'xl'],
+    },
+    text: {
+      control: 'text',
+    },
+    disabled: {
+      type: 'boolean',
+    },
+    isPending: {
+      type: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Playground: Story = {
+  globals: {
+    backgrounds: 'dark',
+  },
+};