feat: (#54) 막대 두개 그래프 구현

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>
+ );
+}

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')};
+`;