feat: (#54) 라디오를 포함한 투표 통계 결과 그래프 컴포넌트 구현

frontend/src/components/VoteResult/index.tsx

@@ -0,0 +1,61 @@
+import { MouseEvent, useState } from 'react';
+
+import { Size } from '@components/common/AddButton/type';
+
+import OneLineGraph from './OneLineGraph';
+import * as S from './style';
+import TwoLineGraph from './TwoLineGraph';
+import { VoteResult } from './type';
+
+interface RadioMode {
+ all: string;
+ gender: string;
+}
+
+const radioMode: RadioMode = {
+ all: '전체보기',
+ gender: '성별보기',
+};
+
+type RadioCategory = keyof RadioMode;
+
+export default function VoteStatistics({
+ voteResult,
+ size,
+}: {
+ voteResult: VoteResult;
+ size: Size;
+}) {
+ const [nowRadioMode, setNowRadioMode] = useState<RadioCategory>('all');
+
+ const radioModeKey = Object.keys(radioMode) as RadioCategory[];
+
+ const changeMode = (e: MouseEvent<HTMLInputElement>) => {
+ const target = e.target as HTMLInputElement;
+ const targetCategory = target.value as RadioCategory;
+ setNowRadioMode(targetCategory);
+ };
+
+ return (
+ <S.Container>
+ <S.CategoryWrapper>
+ {radioModeKey.map(mode => {
+ return (
+ <S.RadioLabel>
+ <input
+ type="radio"
+ name="radio-category"
+ value={mode}
+ checked={mode === nowRadioMode}
+ onClick={changeMode}
+ />
+ {radioMode[mode]}
+ </S.RadioLabel>
+ );
+ })}
+ </S.CategoryWrapper>
+ {nowRadioMode === 'all' && <OneLineGraph size={size} voteResult={voteResult} />}
+ {nowRadioMode === 'gender' && <TwoLineGraph size={size} voteResult={voteResult} />}
+ </S.Container>
+ );
+}

frontend/src/components/VoteResult/style.ts

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+
+ font-size: 1.2rem;
+
+ @media (min-width: 576px) {
+ font-size: 1.4rem;
+ }
+`;
+
+export const CategoryWrapper = styled.fieldset`
+ display: flex;
+ gap: 10px;
+`;
+
+export const RadioLabel = styled.label`
+ display: flex;
+ gap: 5px;
+`;