Feat: IconButton 컴포넌트 구현 및 스토리북 추가

src/components/buttons/IconButton.module.scss

@@ -0,0 +1,106 @@
+$dot-size: 0.1rem;
+
+%frame-base {
+  @include flexbox;
+
+  position: relative;
+  border-radius: 9.9rem;
+}
+
+.icon-button {
+  @extend %frame-base;
+
+  border: 0.1rem solid $opacity-white-20;
+}
+
+.frame {
+  &-outer {
+    &-small {
+      width: 4.2rem;
+      height: 4.2rem;
+    }
+
+    &-medium {
+      width: 5.6rem;
+      height: 5.6rem;
+    }
+
+    &-large {
+      width: 8rem;
+      height: 8rem;
+    }
+  }
+
+  &-inner {
+    @extend %frame-base;
+
+    overflow: hidden;
+
+    width: 3.2rem;
+    height: 3.2rem;
+
+    background-color: $opacity-white-10;
+    border: 0.1rem solid $white;
+
+    &-small {
+      width: 3.2rem;
+      height: 3.2rem;
+    }
+
+    &-medium {
+      width: 4.2rem;
+      height: 4.2rem;
+    }
+
+    &-large {
+      width: 6.4rem;
+      height: 6.4rem;
+    }
+
+    &-activated {
+      border-color: $primary;
+    }
+  }
+}
+
+.image {
+  @include image-fit;
+}
+
+.dot {
+  position: absolute;
+
+  width: $dot-size;
+  height: $dot-size;
+
+  background-color: $white;
+  border-radius: 50%;
+
+  &-top {
+    @include pos-center-x;
+
+    top: -$dot-size;
+  }
+
+  &-right {
+    @include pos-center-y;
+
+    right: -$dot-size;
+  }
+
+  &-bottom {
+    @include pos-center-x;
+
+    bottom: -$dot-size;
+  }
+
+  &-left {
+    @include pos-center-y;
+
+    left: -$dot-size;
+  }
+
+  &-activated {
+    background-color: $primary;
+  }
+}

src/components/buttons/IconButton.tsx

@@ -0,0 +1,37 @@
+import { RefObject } from 'react';
+
+import classNames from 'classnames/bind';
+
+import styles from './IconButton.module.scss';
+
+const cx = classNames.bind(styles);
+
+type IconButtonProps = {
+  imageUrl: string;
+  imageAlt: string;
+  isActivated: boolean;
+  onClick: () => void;
+  buttonRef?: RefObject<HTMLButtonElement>;
+  size?: 'small' | 'medium' | 'large';
+};
+
+export const IconButton = ({
+  imageUrl,
+  imageAlt,
+  isActivated,
+  onClick,
+  buttonRef,
+  size = 'medium',
+}: IconButtonProps) => {
+  return (
+    <button className={cx('icon-button', `frame-outer-${size}`)} onClick={onClick} ref={buttonRef}>
+      <div className={cx('dot', 'dot-top', { 'dot-activated': isActivated })}></div>
+      <div className={cx('dot', 'dot-right', { 'dot-activated': isActivated })}></div>
+      <div className={cx('dot', 'dot-bottom', { 'dot-activated': isActivated })}></div>
+      <div className={cx('dot', 'dot-left', { 'dot-activated': isActivated })}></div>
+      <div className={cx('frame-inner', `frame-inner-${size}`, { 'frame-inner-activated': isActivated })}>
+        <img className={cx('image')} src={imageUrl} alt={imageAlt} />
+      </div>
+    </button>
+  );
+};

src/components/buttons/index.ts

@@ -5,3 +5,4 @@ export * from './OperationButton';
 export * from './CardButton';
 export * from './HeaderSigninButton';
 export * from './HeaderSignupButton';
+export * from './IconButton';

src/stories/IconButton.stories.ts

@@ -0,0 +1,21 @@
+import { IconButton } from '@/components/buttons';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'buttons/IconButton',
+  component: IconButton,
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    imageUrl: '',
+    imageAlt: '',
+    isActivated: false,
+    onClick: () => {},
+    size: 'small',
+  },
+};