[FE] feat: IconButton 공통 컴포넌트 만들기(#48) (#64)

* chore: 절대경로 플러그인 설치

* fix: 스토리북에서 절대경로 설정

* fix: theme 적용을 위한 decorator 추가

* feat: IconButton 공통 컴포넌트 생성

* style: esmodule로 변경

* feat: IconButton div에서 button으로 변경, aria-label 추가

frontend/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -17,5 +18,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.plugins) {
+      config.resolve.plugins = [];
+    }
+    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
+    return config;
+  },
 };
 export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,26 @@
+import GlobalStyles from "../src/styles/globalStyles";
+import { theme } from "../src/styles/theme";
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { ThemeProvider } from "styled-components";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <Story />
+    </ThemeProvider>
+  ),
+];
+export default preview;

frontend/package.json

@@ -75,6 +75,7 @@
     "stylelint-order": "^6.0.4",
     "ts-jest": "^29.2.2",
     "ts-loader": "^9.5.1",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.5.3",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",

frontend/src/components/common/iconButton/IconButton.stories.tsx

@@ -0,0 +1,49 @@
+import IconButton from "./IconButton";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "common/IconButton",
+  component: IconButton,
+  parameters: {
+    docs: {
+      description: {
+        component: "아이콘 버튼 컴포넌트",
+      },
+    },
+  },
+  argTypes: {
+    iconKind: {
+      description: "아이콘 종류",
+      control: { type: "select" },
+      options: ["person", "link", "calendar"],
+    },
+    text: {
+      description: "아이콘 버튼 텍스트",
+      control: { type: "text" },
+    },
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    iconKind: "person",
+    text: "person",
+  },
+};
+
+export const WithoutText: Story = {
+  args: {
+    iconKind: "link",
+  },
+};
+
+export const WithDifferentIcon: Story = {
+  args: {
+    iconKind: "calendar",
+    text: "calendar",
+  },
+};

frontend/src/components/common/iconButton/IconButton.style.ts

@@ -0,0 +1,40 @@
+import Icon from "../icon/Icon";
+import styled from "styled-components";
+
+export const IconButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const IconButtonBox = styled.button`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 50px;
+  height: 50px;
+
+  background-color: transparent;
+  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
+  border-radius: 15px;
+  box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
+
+  &:active {
+    position: relative;
+    top: 3px;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
+  }
+`;
+
+export const StyledIcon = styled(Icon)`
+  width: 30px;
+  height: 30px;
+`;
+
+export const IconButtonText = styled.p`
+  font: ${({ theme }) => theme.TEXT.xSmall};
+`;

frontend/src/components/common/iconButton/IconButton.tsx

@@ -0,0 +1,21 @@
+import React, { ButtonHTMLAttributes } from "react";
+import * as S from "@/components/common/iconButton/IconButton.style";
+import IconKind from "@/@types/icon";
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  iconKind: IconKind;
+  text?: string;
+}
+
+const IconButton = ({ iconKind, text = "", ...rest }: IconButtonProps) => {
+  return (
+    <S.IconButtonContainer>
+      <S.IconButtonBox aria-label="Icon Button" {...rest}>
+        <S.StyledIcon kind={iconKind} />
+      </S.IconButtonBox>
+      {text !== "" && <S.IconButtonText>{text}</S.IconButtonText>}
+    </S.IconButtonContainer>
+  );
+};
+
+export default IconButton;