From 6d9073b08623f762a653c862443571c4036f84e0 Mon Sep 17 00:00:00 2001
From: chsua <csj1919@naver.com>
Date: Sun, 16 Jul 2023 21:53:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#54)=20=EB=A7=89=EB=8C=80=20=EB=91=90?=
 =?UTF-8?q?=EA=B0=9C=20=EA=B7=B8=EB=9E=98=ED=94=84=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VoteResult/TwoLineGraph/index.tsx         | 43 +++++++++++++
 .../VoteResult/TwoLineGraph/style.ts          | 62 +++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 frontend/src/components/VoteResult/TwoLineGraph/index.tsx
 create mode 100644 frontend/src/components/VoteResult/TwoLineGraph/style.ts

diff --git a/frontend/src/components/VoteResult/TwoLineGraph/index.tsx b/frontend/src/components/VoteResult/TwoLineGraph/index.tsx
new file mode 100644
index 000000000..3dfc5ea74
--- /dev/null
+++ b/frontend/src/components/VoteResult/TwoLineGraph/index.tsx
@@ -0,0 +1,43 @@
+import { Size } from '@components/common/AddButton/type';
+
+import * as GS from '../GraphStyle';
+import { AgeCategory, VoteResult } from '../type';
+
+import * as S from './style';
+
+export default function TwoLineGraph({ voteResult, size }: { voteResult: VoteResult; size: Size }) {
+  const ageCategory = Object.keys(voteResult.age) as AgeCategory[];
+
+  const maxVoteAmount = Math.max(
+    ...Object.values(voteResult.age).map(voteResult => Math.max(voteResult.female, voteResult.male))
+  );
+
+  return (
+    <GS.GraphContainer $size={size}>
+      <GS.Line $size={size} />
+      {ageCategory.map(age => {
+        return (
+          <S.OptionContainer $size={size}>
+            <S.DataWrapper>
+              <S.OptionLengthWrapper $gender="female">
+                <span aria-label="투표한 여자수">{voteResult.age[age].female}</span>
+                <S.OptionLength
+                  $amount={(voteResult.age[age].female / maxVoteAmount) * 100}
+                  $gender="female"
+                />
+              </S.OptionLengthWrapper>
+              <S.OptionLengthWrapper $gender="male">
+                <span aria-label="투표한 남자수">{voteResult.age[age].male}</span>
+                <S.OptionLength
+                  $amount={(voteResult.age[age].male / maxVoteAmount) * 100}
+                  $gender="male"
+                />
+              </S.OptionLengthWrapper>
+            </S.DataWrapper>
+            <span aria-label="투표한 나이대">{voteResult.age[age].name}</span>
+          </S.OptionContainer>
+        );
+      })}
+    </GS.GraphContainer>
+  );
+}
diff --git a/frontend/src/components/VoteResult/TwoLineGraph/style.ts b/frontend/src/components/VoteResult/TwoLineGraph/style.ts
new file mode 100644
index 000000000..64438468a
--- /dev/null
+++ b/frontend/src/components/VoteResult/TwoLineGraph/style.ts
@@ -0,0 +1,62 @@
+import { styled } from 'styled-components';
+
+import { Size } from '@components/common/AddButton/type';
+
+export const OptionContainer = styled.div<{ $size: Size }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 5px;
+
+  width: ${props => (props.$size === 'sm' ? '30px' : props.$size === 'md' ? '40px' : '50px')};
+
+  @media (min-width: 576px) {
+    width: ${props => (props.$size === 'sm' ? '40px' : props.$size === 'md' ? '50px' : '60px')};
+  }
+
+  & > :last-child {
+    height: 30px;
+    word-break: keep-all;
+    text-align: center;
+  }
+`;
+
+export const DataWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+
+  height: 90%;
+
+  width: 50px;
+
+  @media (min-width: 576px) {
+    width: 60px;
+  }
+`;
+
+export const OptionLengthWrapper = styled.div<{ $gender: 'female' | 'male' }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 5px;
+
+  height: 100%;
+  width: 20%;
+
+  &>: first-child {
+    position: relative;
+    left: ${props => props.$gender === 'male' && '3px'};
+    right: ${props => props.$gender === 'female' && '3px'};
+  }
+`;
+
+export const OptionLength = styled.div<{ $amount: number; $gender: 'female' | 'male' }>`
+  height: ${props => `${props.$amount}% `};
+  width: 100%;
+
+  border-radius: 5px 5px 0 0;
+
+  background-color: ${props => (props.$gender === 'female' ? '#853DE1' : '#5AEAA5')};
+`;