Merge pull request #72 from sprint-team3/dev

Deploy version 0.1.2

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/components/inputs/SearchBar.tsx

@@ -5,13 +5,11 @@ import classNames from 'classnames/bind';
 import searchIcon from '@/assets/ic-search.svg';
 import { SVGS } from '@/constants';
 
-import searchIcon from '../../assets/ic-search.svg';
-
 import styles from './SearchBar.module.scss';
 
 const cx = classNames.bind(styles);
 
-const { alt } = SVGS.search;
+const { url, alt } = SVGS.search;
 
 type SearchBarType = {
   placeholder: string;
@@ -35,7 +33,7 @@ export const SearchBar = ({ placeholder, onChange, color = 'purple', maxLength =
         onChange={(event) => handleChange(event)}
       />
       <div className={cx('searchbar-search-icon')}>
-        <img className={cx('searchbar-search-icon-img')} src={searchIcon} alt={alt} />
+        <img className={cx('searchbar-search-icon-img')} src={url} alt={alt} />
       </div>
     </div>
   );