[feat] 투표 옵션에 이미지, 코드블럭 추가

__mocks__/data/image.ts

@@ -0,0 +1,3 @@
+import image from '@mocks/data/img.png';
+
+export const TEST_IMAGE = image.toString();

__mocks__/data/voteOption.ts

@@ -1,3 +1,5 @@
+import { TEST_IMAGE } from '@mocks/data/image';
+
 import VoteOption from '@src/types/VoteOption';
 
 export const VOTE_OPTION: VoteOption = {
@@ -16,3 +18,66 @@ export const VOTE_OPTION2: VoteOption = {
 };
 
 export const VOTE_OPTIONS: VoteOption[] = [VOTE_OPTION, VOTE_OPTION2];
+
+export const VOTE_OPTION_WITH_IMAGE: VoteOption = {
+  ...VOTE_OPTION,
+  voteOptionId: 9,
+  text: '이미지가 있음',
+  image: TEST_IMAGE,
+};
+
+export const VOTE_OPTION_WITH_CODE: VoteOption = {
+  ...VOTE_OPTION,
+  voteOptionId: 9,
+  text: '코드가 있어요!',
+  codeBlock: {
+    language: 'js',
+    contents: `
+import React, { MouseEvent } from 'react';
+
+import { Languages } from '@src/components/common/CodeEditor';
+import Icon from '@src/components/common/Icon';
+import VoteOption from '@src/types/VoteOption';
+
+import * as S from './SelectOption.style';
+
+interface SelectOptionProps extends VoteOption {
+  rate?: number;
+  result?: boolean;
+  selected?: boolean;
+  onClick: (id: number, selected: boolean) => void;
+}
+
+const SelectOption = (props: SelectOptionProps) => {
+  const { voteOptionId, text, rate = 0, result = false, selected = false, image, codeBlock, onClick } = props;
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.nativeEvent.preventDefault();
+    onClick(voteOptionId, selected);
+  };
+
+  return (
+    <S.Container>
+      <S.SelectButton $result={result} $selected={selected} onClick={handleClick}>
+        {result && <S.ProgressBar className="progress" $rate={rate} $selected={selected} />}
+        <S.Info>
+          <Icon name="Vote" />
+          <S.Text>{text}</S.Text>
+          {result && <S.Rate>{Math.round(rate * 100)}%</S.Rate>}
+        </S.Info>
+      </S.SelectButton>
+      {image && (
+        <S.ImageWrapper>
+          <S.OptionImage src={image} alt={text} fill />
+        </S.ImageWrapper>
+      )}
+      {codeBlock && <S.CodeBlock language={codeBlock.language as Languages} value={codeBlock.contents} disabled />}
+    </S.Container>
+  );
+};
+
+export default SelectOption;
+    `,
+  },
+};

next.config.js

@@ -10,7 +10,7 @@ const nextConfig = {
     return config;
   },
   images: {
-    domains: ['avatars.githubusercontent.com'],
+    domains: ['*'], // TODO: S3 주소만 허용할 건지 논의 필요
   },
 };