Feat: RankIcon 컴포넌트 구현

src/components/RankIcon/index.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBookmark } from '@fortawesome/free-solid-svg-icons';
+import * as S from './styles';
+
+interface RankIconProps {
+  rank: 1 | 2 | 3;
+}
+
+const RankIcon = ({ rank }: RankIconProps) => {
+  const theme = useTheme();
+  const color = S.getRankColor(rank, theme);
+
+  return (
+    <S.RankIconWrapper color={color}>
+      <FontAwesomeIcon icon={faBookmark} />
+      <S.RankNumber>{rank}</S.RankNumber>
+    </S.RankIconWrapper>
+  );
+};
+
+export default RankIcon;

src/components/RankIcon/styles.ts

@@ -0,0 +1,31 @@
+import { H20 } from '@/components/Text';
+import styled from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+
+export const RankIconWrapper = styled.div<{ color: string }>`
+  position: relative;
+  display: inline-block;
+  color: ${props => props.color};
+  font-size: 48px;
+`;
+
+export const RankNumber = styled(H20)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+export const getRankColor = (rank: number, theme: DefaultTheme) => {
+  switch (rank) {
+    case 1:
+      return theme.colors.yellow;
+    case 2:
+      return theme.colors.silver;
+    case 3:
+      return theme.colors.bronze;
+    default:
+      return theme.colors.black;
+  }
+};