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

* feat: DB 구조와 API docs를 참고한 공통 인터페이스 구현 및 적용

* refactor: PostCommentRequest 구현

* feat: api 스펙 변경에 맞춘 네이밍 변경

* feat: SelectOption에 이미지 추가

- image mock data 추가
- 버튼으로 태그 변경

* refactor: style -> styles

* feat: CodeEditor 추가

* feat: 코드블럭 추가

* fix: 그라데이션 넓이 유동적으로 변경

* refactor: codeblock mockdata화

* test: CodeEditor에 대한 props 정의

* fix: dark 모드 적용

* feat: next에서 사용 가능하도록 변경

uiwjs/react-textarea-code-editor#31 (comment)

* fix: 코드 블록에 스타일 제대로 안먹던 문제 해결

* fix: 쓸데없는 tab 제거

* fix: 폰트 변경이 정상적으로 작동하지 않던 문제 해결

.storybook/preview.js

@@ -41,3 +41,5 @@ Object.defineProperty(NextImage, 'default', {
   configurable: true,
   value: (props) => <OriginalNextImage {...props} unoptimized />,
 });
+
+document.documentElement.setAttribute('data-color-mode', 'dark');

__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,68 @@ 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 CODE_BLOCK: VoteOption['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;
+    `,
+};
+
+export const VOTE_OPTION_WITH_CODE: VoteOption = {
+  ...VOTE_OPTION,
+  voteOptionId: 9,
+  text: '코드가 있어요!',
+  codeBlock: CODE_BLOCK,
+};

next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const removeImports = require('next-remove-imports')();
+
+const nextConfig = removeImports({
   reactStrictMode: true,
   swcMinify: true,
   webpack(config) {
@@ -10,8 +12,9 @@ const nextConfig = {
     return config;
   },
   images: {
-    domains: ['avatars.githubusercontent.com'],
+    domains: ['*'], // TODO: S3 주소만 허용할 건지 논의 필요
   },
-};
+  experimental: { esmExternals: true },
+});
 
 module.exports = nextConfig;