feat: (#507) 아이콘 버튼 컴포넌트에 유저/랭킹페이지로 가는 아이콘 카테고리 추가

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

@@ -4,24 +4,43 @@ import IconButton from '.';
 
 const meta: Meta<typeof IconButton> = {
  component: IconButton,
- decorators: [storyFn => <div style={{ backgroundColor: 'black' }}>{storyFn()}</div>],
 };
 
 export default meta;
 type Story = StoryObj<typeof IconButton>;
 
 export const Category: Story = {
- render: () => <IconButton category="category" />,
+ render: () => (
+ <div style={{ backgroundColor: 'black' }}>
+ <IconButton category="category" />
+ </div>
+ ),
 };
 
 export const Back: Story = {
- render: () => <IconButton category="back" />,
+ render: () => (
+ <div style={{ backgroundColor: 'black' }}>
+ <IconButton category="back" />
+ </div>
+ ),
 };
 
 export const Search: Story = {
- render: () => <IconButton category="search" />,
+ render: () => (
+ <div style={{ backgroundColor: 'black' }}>
+ <IconButton category="search" />
+ </div>
+ ),
 };
 
 export const Retry: Story = {
  render: () => <IconButton category="retry" />,
 };
+
+export const UserInfo: Story = {
+ render: () => <IconButton category="userInfo" />,
+};
+
+export const Ranking: Story = {
+ render: () => <IconButton category="ranking" />,
+};

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

@@ -2,29 +2,51 @@ import { ButtonHTMLAttributes } from 'react';
 
 import backIcon from '@assets/back.svg';
 import categoryIcon from '@assets/category.svg';
+import ranking from '@assets/ranking.svg';
 import retryIcon from '@assets/retry.svg';
 import searchIcon from '@assets/search_white.svg';
+import userInfo from '@assets/user.svg';
 
 import * as S from './style';
 
-type IconCategory = 'category' | 'back' | 'search' | 'retry';
+type IconCategory = 'category' | 'back' | 'search' | 'retry' | 'userInfo' | 'ranking';
 
-const ICON_CATEGORY: Record<IconCategory, { name: string; url: string }> = {
+interface IconInfo {
+ name: string;
+ url: string;
+ isRoundBackground: boolean;
+}
+
+const ICON_CATEGORY: Record<IconCategory, IconInfo> = {
  category: {
  name: '카테고리',
  url: categoryIcon,
+ isRoundBackground: false,
  },
  back: {
  name: '뒤로가기',
  url: backIcon,
+ isRoundBackground: false,
  },
  search: {
  name: '검색',
  url: searchIcon,
+ isRoundBackground: false,
  },
  retry: {
  name: '다시시도',
  url: retryIcon,
+ isRoundBackground: false,
+ },
+ userInfo: {
+ name: '사용자 페이지 이동',
+ url: userInfo,
+ isRoundBackground: true,
+ },
+ ranking: {
+ name: '랭킹 페이지 이동',
+ url: ranking,
+ isRoundBackground: false,
  },
 };
 
@@ -39,7 +61,11 @@ export default function IconButton({ category, ...rest }: IconButtonProps) {
  const ariaLabelText = ICON_CATEGORY[category].name;
 
  return (
- <S.Button aria-label={ariaLabelText} {...rest}>
+ <S.Button
+ aria-label={ariaLabelText}
+ $isRoundBackground={ICON_CATEGORY[category].isRoundBackground}
+ {...rest}
+ >
  <img src={src} alt={`${ariaLabelText} 버튼`} />
  </S.Button>
  );

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

@@ -1,7 +1,11 @@
 import { styled } from 'styled-components';
 
-export const Button = styled.button`
- background-color: rgba(0, 0, 0, 0);
+export const Button = styled.button<{ $isRoundBackground: boolean }>`
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+
+ background-color: ${props => (props.$isRoundBackground ? 'var(--gray)' : 'rgba(0, 0, 0, 0)')};
 
  cursor: pointer;
 `;