Merge pull request #10 from MARU-EGG/Header-component

[USER] Feat icon-button atom component

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import AppRoutes from './routes/AppRoutes';
+import AppRoutes from './routes/app-routes';
 
 const App: React.FC = () => {
   return (

src/index.tsx

@@ -5,11 +5,7 @@ import reportWebVitals from './reportWebVitals';
 import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/ui/components/atom/icon/icon-button.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import IconButton from './icon-button';
+import { ReactComponent as MenuIcon } from '../../../../../public/Menu.svg';
+import { ReactComponent as SendIcon } from '../../../../../public/Send.svg';
+import { ReactComponent as XIcon } from '../../../../../public/X.svg';
+import { ReactComponent as RefreshIcon } from '../../../../../public/Refresh.svg';
+
+const meta = {
+  title: 'Example/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    onClick: () => console.log('Button clicked'),
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <MenuIcon />, // Menu.svg 사용
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: <MenuIcon />, // Menu.svg 사용
+    disabled: true,
+  },
+};
+
+// XIcon 사용 스토리
+export const WithXIcon: Story = {
+  args: {
+    children: <XIcon />, // X.svg 사용
+  },
+};
+
+// SendIcon 사용 스토리
+export const WithSendIcon: Story = {
+  args: {
+    children: <SendIcon />, // Send.svg 사용
+  },
+};
+
+// RefreshIcon 사용 스토리
+export const WithRefreshIcon: Story = {
+  args: {
+    children: <RefreshIcon />, // Refresh.svg 사용
+  },
+};

src/ui/components/atom/icon/icon-button.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { cn } from '../../../../utils/style';
+
+interface IconButtonProps {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  children: any;
+}
+
+const IconButton = ({ onClick, disabled, children }: IconButtonProps) => {
+  return (
+    <button
+      className={cn('cursor-pointer', disabled ? 'text-primary-blue' : 'text-black')}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default IconButton;

src/ui/pages/admin/file-list.tsx

@@ -1,8 +1,8 @@
 import { Button, Divider, Select } from 'antd';
 import React, { useState } from 'react';
 import { UploadFile } from 'antd/es/upload/interface';
-import Uploader from '../../components/molecule/admin/uploader';
 import { useForm } from '../../../hooks/useForm';
+import Uploader from '../../components/molecule/admin/Uploader';
 
 const FileList: React.FC = () => {
   const [category, setCategory] = useState('모집요강');