From c0bfdd5673faa2b2e39937d47b6e6e351be13563 Mon Sep 17 00:00:00 2001
From: chsua <csj1919@naver.com>
Date: Sun, 16 Jul 2023 22:34:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#54)=20=EB=9D=BC=EB=94=94=EC=98=A4?=
 =?UTF-8?q?=EB=A5=BC=20=ED=8F=AC=ED=95=A8=ED=95=9C=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=86=B5=EA=B3=84=20=EA=B2=B0=EA=B3=BC=20=EA=B7=B8=EB=9E=98?=
 =?UTF-8?q?=ED=94=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/VoteResult/index.tsx | 61 ++++++++++++++++++++
 frontend/src/components/VoteResult/style.ts  | 24 ++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 frontend/src/components/VoteResult/index.tsx
 create mode 100644 frontend/src/components/VoteResult/style.ts

diff --git a/frontend/src/components/VoteResult/index.tsx b/frontend/src/components/VoteResult/index.tsx
new file mode 100644
index 000000000..e164b0c4d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/components/VoteResult/style.ts b/frontend/src/components/VoteResult/style.ts
new file mode 100644
index 000000000..1b001a139
--- /dev/null
+++ b/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;
+`;