feat: 아이콘 추가

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+
+import theme from './theme';
+
+// addons.setConfig({
+//   theme: theme,
+//   panelPosition: 'right',
+// });

.storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+// export default create({
+//   base: 'light',
+//   brandTitle: 'Jobis Design System',
+//   brandImage: '/public/vite.svg',
+// });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-return/design-system",
-  "version": "1.0.74",
+  "version": "1.0.81",
   "repository": {
     "type": "git",
     "url": "https://github.com/Team-Return/JOBIS-DESIGN-SYSTEM.git"
@@ -22,6 +22,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "uuid": "^9.0.0",
     "zustand": "^4.3.7"
   },
   "scripts": {
@@ -55,16 +56,19 @@
     "@storybook/addon-links": "^6.5.15",
     "@storybook/builder-webpack4": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-api": "^7.1.0",
     "@storybook/manager-webpack4": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/mdx2-csf": "^0.0.4",
     "@storybook/react": "^6.5.15",
     "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^7.1.0",
     "@types/jest": "^29.2.6",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^9.0.2",
     "babel-loader": "^9.1.2",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",

src/components/Text/Text.tsx

@@ -14,6 +14,8 @@ interface TextProps extends marginCssType {
   onClick?: () => void;
   cursor?: 'pointer' | 'auto' | 'default';
   align?: 'center' | 'start' | 'end';
+  width?: number;
+  whiteSpace?: 'nowrap' | 'pre-line' | 'pre-wrap' | 'normal';
 }
 
 export const Text = ({
@@ -26,6 +28,8 @@ export const Text = ({
   cursor,
   align,
   margin,
+  width,
+  whiteSpace = 'pre-line',
 }: TextProps) => {
   return (
     <Wrapper
@@ -37,6 +41,8 @@ export const Text = ({
       onClick={onClick}
       size={size}
       margin={margin}
+      whiteSpace={whiteSpace}
+      width={width}
     >
       {children}
     </Wrapper>
@@ -50,5 +56,5 @@ const Wrapper = styled.div<TextProps>`
   ${({ margin }) => marginToCss({ margin })};
   text-align: ${({ align }) => align};
   cursor: ${({ cursor }) => cursor};
-  white-space: pre-line;
+  white-space: ${({ whiteSpace }) => whiteSpace};
 `;

src/components/table/Table.tsx

@@ -24,7 +24,7 @@ export const Table = ({
   name,
 }: TableProps) => {
   return (
-    <>
+    <div style={{ overflow: 'hidden' }}>
       <THeader width={width}>
         {toggle && toggle !== 'None' && (
           <ToggleHeader>{Toggles(toggle, true)}</ToggleHeader>
@@ -53,7 +53,7 @@ export const Table = ({
           </TBody>
         ))}
       </Wrapper>
-    </>
+    </div>
   );
 };
 
@@ -69,7 +69,7 @@ const Toggles = (toggle: toggleType, head?: boolean, name?: string) => {
 const Wrapper = styled.div`
   position: relative;
   width: 100%;
-  overflow: scroll;
+  overflow: hidden;
 `;
 
 const ToggleHeader = styled.div`

src/styles/icon.tsx

@@ -17,6 +17,8 @@ import ToastWarning from './icons/ToastWarning';
 import UploadIcon from './icons/UploadIcon';
 import Trash from './icons/Trash';
 import MyPg from './icons/MyPg';
+import EditPencil from './icons/EditPencil';
+import KebabMenu from './icons/KebabMenu';
 
 // Icon paths
 export const icons = {
@@ -39,4 +41,6 @@ export const icons = {
   Chevron: <Chevron />,
   Trash: <Trash />,
   MyPg: <MyPg />,
+  EditPencil: <EditPencil />,
+  KebabMenu: <KebabMenu />,
 } as const;

src/styles/icons/Arrow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Arrow = () => {
   return (
     <svg

src/styles/icons/EditPencil.tsx

@@ -0,0 +1,25 @@
+const EditPencil = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_12475_6713)">
+        <path
+          d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_12475_6713">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default EditPencil;

src/styles/icons/KebabMenu.tsx

@@ -0,0 +1,25 @@
+const KebabMenu = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_12475_6713)">
+        <path
+          d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_12475_6713">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default KebabMenu;

webpack.config.js

@@ -23,15 +23,15 @@ module.exports = {
         test: /\.(jpeg|jpg|png|svg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]',
+          name: 'styles/[name].[ext]',
           outputPath: 'styles/icons', // 이미지가 저장될 출력 디렉토리
           publicPath: 'styles/icons',
         },
       },
     ],
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.png'],
   },
   plugins: [new CleanWebpackPlugin()],
 };