Merge pull request #54 from NewWays-TechForImpactKAIST/feat/emoji-and…

…-better-graph 설명 텍스트에 이모티콘 추가, 그래프 색 팔레트 변경
NewWays-TechForImpactKAIST · Nov 30, 2023 · 8fc7335 · 8fc7335
2 parents 6b03c87 + 1d9bc15
commit 8fc7335
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 75 deletions.
diff --git a/src/components/molecules/LocalCouncilReportText/AgeText.tsx b/src/components/molecules/LocalCouncilReportText/AgeText.tsx
@@ -41,6 +41,13 @@ export interface AgeTextData {
   };
 }
 
+const getAgeEmojiFromAge = (age: number) => {
+  if (age < 30) return "👶";
+  if (age < 45) return "👦👧";
+  if (age < 60) return "👨👩";
+  return "👴👵";
+};
+
 interface Props {
   /** text variation을 선택할 수 있습니다(기본값: 1). */
   variation?: AgeTextVariation;
@@ -71,8 +78,14 @@ export const AgeText = ({
         에는 <Text strong>{ageHistogramParagraph.candidateCount}</Text>명이{" "}
         후보로 나와 <Text strong>{ageHistogramParagraph.electedCount}</Text>명이{" "}
         당선됐어요. 당선자의 20%가{" "}
-        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하, 20%가{" "}
-        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상이에요.
+        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하
+        {getAgeEmojiFromAge(ageHistogramParagraph.firstQuintile)}, 20%가{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상
+        {getAgeEmojiFromAge(ageHistogramParagraph.lastQuintile)}이에요. 즉,{" "}
+        나머지 60%는{" "}
+        <Text strong>{ageHistogramParagraph.firstQuintile + 1}</Text>세에서{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile - 1}</Text>세 사이에{" "}
+        있어요.
         <br />
         <br />
         참고로 다양성 지표 전국 1위는 전체 인원의 20%가{" "}
@@ -81,15 +94,15 @@ export const AgeText = ({
         <Text strong>{ageHistogramParagraph.divArea.lastQuintile}</Text>세{" "}
         이상인{" "}
         <Text strong>
-          {getNameFromId(ageHistogramParagraph.divArea.localId)?.join(" ")}
+          {getNameFromId(ageHistogramParagraph.divArea.localId)?.join(" ")}🏆
         </Text>
         , 전국 뒤에서 1위는 전체 인원의 20%가{" "}
         <Text strong>{ageHistogramParagraph.uniArea.firstQuintile}</Text>세
         이하, 20%가{" "}
         <Text strong>{ageHistogramParagraph.uniArea.lastQuintile}</Text>세
         이상인{" "}
         <Text strong>
-          {getNameFromId(ageHistogramParagraph.uniArea.localId)?.join(" ")}
+          {getNameFromId(ageHistogramParagraph.uniArea.localId)?.join(" ")}😢
         </Text>
         예요.
       </Paragraph>

diff --git a/src/components/molecules/LocalCouncilReportText/GenderText.tsx b/src/components/molecules/LocalCouncilReportText/GenderText.tsx
@@ -123,12 +123,13 @@ export const GenderText = ({
         성비는{" "}
         <Text strong>
           {nowGenderDiversity > prevGenderDiversity
-            ? "균형에서 더 멀어졌어요."
+            ? "균형에서 더 멀어졌어요. 😭"
             : nowGenderDiversity === prevGenderDiversity
-            ? "변화하지 않았어요."
-            : "나아졌어요."}
-        </Text>{" "}
-        <br /> <br />
+            ? "지난 선거에 비해 변화하지 않았어요. 🤥"
+            : "나아졌어요. 🥰"}
+        </Text>
+        <br />
+        <br />
         {current.year}년 지방선거에서 {localName}의{" "}
         {sgType === "elected" ? "당선자" : "후보자"}의 성별은 남성{" "}
         <Text strong>
@@ -148,10 +149,10 @@ export const GenderText = ({
         때문에,{" "}
         <Text strong>
           {nowGenderRatio < meanGenderRatio
-            ? "전국 대비 성별 다양성이 충분하다고 보기는 어려워요."
+            ? "전국 대비 성별 다양성이 충분하다고 보기는 어려워요. 🙀"
             : nowGenderRatio === meanGenderRatio
-            ? "전국 평균 수준이에요."
-            : "전국 평균 대비 높은 수준이에요."}
+            ? "전국 평균 수준이에요. 👀"
+            : "전국 평균 대비 높은 수준이에요. 👍"}
         </Text>
       </Paragraph>
     );

diff --git a/src/components/molecules/LocalCouncilReportText/PartyText.tsx b/src/components/molecules/LocalCouncilReportText/PartyText.tsx
@@ -96,8 +96,8 @@ export const PartyText = ({
     return (
       <Paragraph>
         <Text strong>{sgYear}</Text>년 지방선거에서는{" "}
-        <Text strong>{currentCandidate.length}</Text>개 정당에서 후보자가,{" "}
-        <Text strong>{currentElected.length}</Text>개 정당에서 당선자가{" "}
+        <Text strong>{currentCandidate.length}</Text>개 정당에서 후보자🗣️가,{" "}
+        <Text strong>{currentElected.length}</Text>개 정당에서 당선자🏅가{" "}
         나왔어요.
         <br />
         <br />
@@ -106,15 +106,15 @@ export const PartyText = ({
           <Text>
             지난 선거에서는 <Text strong>{prevElected.length}</Text>개{" "}
             정당에서만 당선자가 나왔던 걸 생각하면, 이번엔 진짜 다양한 목소리가{" "}
-            들린다는 거죠! 여러분의{" "}
+            들린다는 거죠! 🤯🥳😎 여러분의{" "}
             <Text strong>{getNameFromId(localId)?.join(" ")}</Text>에서 다양성의{" "}
-            바람이 솔솔~ 역대급 변화가 느껴지지 않나요?
+            바람이 솔솔~ 역대급 변화가 느껴지지 않나요?🏎️💨
           </Text>
         ) : (
           // 소수정당 당성자 수가 줄었다면 아래 텍스트 표시
           <Text>
-            이번 선거는 군소정당과 무소속 후보에게 어려웠어요.. 두 거대 양당에서{" "}
-            더 많은 당선자가! {bigParties[sgYear][0]}에서{" "}
+            이번 선거는 군소정당과 무소속 후보에게 어려웠어요..😿 두 거대{" "}
+            양당에서 더 많은 당선자가! {bigParties[sgYear][0]}에서{" "}
             <Text strong>
               {currentElected.filter(
                 partyItem => partyItem.party === bigParties[sgYear][0],
@@ -127,31 +127,32 @@ export const PartyText = ({
               )[0]?.count || 0}
             </Text>
             명의 당선자가 나왔어요. 지난 선거에 비하면 소수정당의 목소리가 좀{" "}
-            줄어든 느낌이에요.
+            줄어든 느낌이에요. 🤫🤫
           </Text>
         )}
         {minorPartyList.length !== 0 ? (
           // 소수정당 당선자가 있으면 아래 텍스트 추가
           <>
             <br />
             <br />
-            이번 지방선거에서는{" "}
+            이번 지방선거에서는 소수정당인{" "}
             <Text strong>
               {minorPartyList.map(partyItem => partyItem.party).join(", ")}
             </Text>
             에서도 {minorPartyList.length === 1 ? "" : "각각 "}
             <Text strong>
-              {minorPartyList.map(partyItem => partyItem.count).join("명, ")}
+              {minorPartyList.map(partyItem => partyItem.count).join("명, ")}명
             </Text>
-            명의 당선자가 나왔어요.{" "}
+            의 당선자가 나왔어요.{" "}
           </>
         ) : null}
         {independentCount ? (
           // 무소속 당선자가 있으면 아래 텍스트 추가
           <>
             <br />
             <br />
-            무소속 후보도 <Text strong>{independentCount}</Text>명이 당선됐어요.
+            무소속 후보⛹️도 <Text strong>{independentCount}</Text>명이{" "}
+            당선됐어요.
           </>
         ) : null}
       </Paragraph>

diff --git a/src/components/molecules/MetroCouncilReportText/AgeText.tsx b/src/components/molecules/MetroCouncilReportText/AgeText.tsx
@@ -41,6 +41,13 @@ export interface AgeTextData {
   };
 }
 
+const getAgeEmojiFromAge = (age: number) => {
+  if (age < 30) return "👶";
+  if (age < 45) return "👦👧";
+  if (age < 60) return "👨👩";
+  return "👴👵";
+};
+
 interface Props {
   /** text variation을 선택할 수 있습니다(기본값: 1). */
   variation?: AgeTextVariation;
@@ -68,8 +75,14 @@ export const AgeText = ({
         <Text strong>{ageHistogramParagraph.candidateCount}</Text>명이 후보로
         나와 <Text strong>{ageHistogramParagraph.electedCount}</Text>명이{" "}
         당선됐어요. 당선자의 20%가{" "}
-        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하, 20%가{" "}
-        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상이에요.
+        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하
+        {getAgeEmojiFromAge(ageHistogramParagraph.firstQuintile)}, 20%가{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상
+        {getAgeEmojiFromAge(ageHistogramParagraph.lastQuintile)}이에요. 즉,{" "}
+        나머지 60%는{" "}
+        <Text strong>{ageHistogramParagraph.firstQuintile + 1}</Text>세에서{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile - 1}</Text>세 사이에{" "}
+        있어요.
         <br />
         <br />
         참고로 다양성 지표 전국 1위는 전체 인원의 20%가{" "}
@@ -78,15 +91,15 @@ export const AgeText = ({
         <Text strong>{ageHistogramParagraph.divArea.lastQuintile}</Text>세{" "}
         이상인{" "}
         <Text strong>
-          {getNameFromId(ageHistogramParagraph.divArea.metroId)}
+          {getNameFromId(ageHistogramParagraph.divArea.metroId)}🏆
         </Text>
         , 전국 뒤에서 1위는 전체 인원의 20%가{" "}
         <Text strong>{ageHistogramParagraph.uniArea.firstQuintile}</Text>세
         이하, 20%가{" "}
         <Text strong>{ageHistogramParagraph.uniArea.lastQuintile}</Text>세
         이상인{" "}
         <Text strong>
-          {getNameFromId(ageHistogramParagraph.uniArea.metroId)}
+          {getNameFromId(ageHistogramParagraph.uniArea.metroId)}😢
         </Text>
         예요.
       </Paragraph>

diff --git a/src/components/molecules/MetroCouncilReportText/GenderText.tsx b/src/components/molecules/MetroCouncilReportText/GenderText.tsx
@@ -116,12 +116,13 @@ export const GenderText = ({
         성비는{" "}
         <Text strong>
           {nowGenderDiversity > prevGenderDiversity
-            ? "균형에서 더 멀어졌어요."
+            ? "균형에서 더 멀어졌어요. 😭"
             : nowGenderDiversity === prevGenderDiversity
-            ? "변화하지 않았어요."
-            : "나아졌어요."}
-        </Text>{" "}
-        <br /> <br />
+            ? "지난 선거에 비해 변화하지 않았어요. 🤥"
+            : "나아졌어요. 🥰"}
+        </Text>
+        <br />
+        <br />
         {current.year}년 지방선거에서{" "}
         {sgType === "elected" ? "당선자" : "후보자"}의 성별은 남성{" "}
         <Text strong>
@@ -141,10 +142,10 @@ export const GenderText = ({
         때문에,{" "}
         <Text strong>
           {nowGenderRatio < meanGenderRatio
-            ? "전국 대비 성별 다양성이 충분하다고 보기는 어려워요."
+            ? "전국 대비 성별 다양성이 충분하다고 보기는 어려워요. 🙀"
             : nowGenderRatio === meanGenderRatio
-            ? "전국 평균 수준이에요."
-            : "전국 평균 대비 높은 수준이에요."}
+            ? "전국 평균 수준이에요. 👀"
+            : "전국 평균 대비 높은 수준이에요. 👍"}
         </Text>
       </Paragraph>
     );

diff --git a/src/components/molecules/MetroCouncilReportText/PartyText.tsx b/src/components/molecules/MetroCouncilReportText/PartyText.tsx
@@ -88,8 +88,8 @@ export const PartyText = ({
     return (
       <Paragraph>
         <Text strong>{sgYear}</Text>년 지방선거에서는{" "}
-        <Text strong>{currentCandidate.length}</Text>개 정당에서 후보자가,{" "}
-        <Text strong>{currentElected.length}</Text>개 정당에서 당선자가{" "}
+        <Text strong>{currentCandidate.length}</Text>개 정당에서 후보자🗣️가,{" "}
+        <Text strong>{currentElected.length}</Text>개 정당에서 당선자🏅가{" "}
         나왔어요.
         <br />
         <br />
@@ -98,14 +98,14 @@ export const PartyText = ({
           <Text>
             지난 선거에서는 <Text strong>{prevElected.length}</Text>개{" "}
             정당에서만 당선자가 나왔던 걸 생각하면, 이번엔 진짜 다양한 목소리가{" "}
-            들린다는 거죠! 여러분의 광역의회에서 다양성의 바람이 솔솔~ 역대급
-            변화가 느껴지지 않나요?
+            들린다는 거죠! 🤯🥳😎 여러분의 광역의회에서 다양성의 바람이 솔솔~{" "}
+            역대급 변화가 느껴지지 않나요?🏎️💨
           </Text>
         ) : (
           // 소수정당 당성자 수가 줄었다면 아래 텍스트 표시
           <Text>
-            이번 선거는 군소정당과 무소속 후보에게 어려웠어요.. 두 거대 양당에서{" "}
-            더 많은 당선자가! {bigParties[sgYear][0]}에서{" "}
+            이번 선거는 군소정당과 무소속 후보에게 어려웠어요..😿 두 거대{" "}
+            양당에서 더 많은 당선자가! {bigParties[sgYear][0]}에서{" "}
             <Text strong>
               {currentElected.filter(
                 partyItem => partyItem.party === bigParties[sgYear][0],
@@ -118,31 +118,32 @@ export const PartyText = ({
               )[0]?.count || 0}
             </Text>
             명의 당선자가 나왔어요. 지난 선거에 비하면 소수정당의 목소리가 좀{" "}
-            줄어든 느낌이에요.
+            줄어든 느낌이에요. 🤫🤫
           </Text>
         )}
         {minorPartyList.length !== 0 ? (
           // 소수정당 당선자가 있으면 아래 텍스트 추가
           <>
             <br />
             <br />
-            이번 지방선거에서는{" "}
+            이번 지방선거에서는 소수정당인{" "}
             <Text strong>
               {minorPartyList.map(partyItem => partyItem.party).join(", ")}
             </Text>
             에서도 {minorPartyList.length === 1 ? "" : "각각 "}
             <Text strong>
-              {minorPartyList.map(partyItem => partyItem.count).join("명, ")}
+              {minorPartyList.map(partyItem => partyItem.count).join("명, ")}명
             </Text>
-            명의 당선자가 나왔어요.{" "}
+            의 당선자가 나왔어요.{" "}
           </>
         ) : null}
         {independentCount ? (
           // 무소속 당선자가 있으면 아래 텍스트 추가
           <>
             <br />
             <br />
-            무소속 후보도 <Text strong>{independentCount}</Text>명이 당선됐어요.
+            무소속 후보⛹️도 <Text strong>{independentCount}</Text>명이{" "}
+            당선됐어요.
           </>
         ) : null}
       </Paragraph>

diff --git a/src/components/molecules/NationalCouncilReportText/AgeText.tsx b/src/components/molecules/NationalCouncilReportText/AgeText.tsx
@@ -30,6 +30,13 @@ export interface AgeTextData {
   };
 }
 
+const getAgeEmojiFromAge = (age: number) => {
+  if (age < 30) return "👶";
+  if (age < 45) return "👦👧";
+  if (age < 60) return "👨👩";
+  return "👴👵";
+};
+
 interface Props {
   /** text variation을 선택할 수 있습니다(기본값: 1). */
   variation?: AgeTextVariation;
@@ -52,8 +59,14 @@ export const AgeText = ({ variation = 1, data = undefined }: Props) => {
         <Text strong>{ageHistogramParagraph.candidateCount}</Text>명이 후보로
         나와 <Text strong>{ageHistogramParagraph.electedCount}</Text>명이{" "}
         당선됐어요. 당선자의 20%가{" "}
-        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하, 20%가{" "}
-        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상이에요.
+        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 이하
+        {getAgeEmojiFromAge(ageHistogramParagraph.firstQuintile)}, 20%가{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile}</Text>세 이상
+        {getAgeEmojiFromAge(ageHistogramParagraph.lastQuintile)}이에요. 즉,{" "}
+        나머지 60%는{" "}
+        <Text strong>{ageHistogramParagraph.firstQuintile + 1}</Text>세에서{" "}
+        <Text strong>{ageHistogramParagraph.lastQuintile - 1}세</Text> 사이에{" "}
+        있어요.
         <br />
         <br />
       </Paragraph>

diff --git a/src/components/molecules/NationalCouncilReportText/GenderText.tsx b/src/components/molecules/NationalCouncilReportText/GenderText.tsx
@@ -102,12 +102,13 @@ export const GenderText = ({
         성비는{" "}
         <Text strong>
           {nowGenderDiversity > prevGenderDiversity
-            ? "균형에서 더 멀어졌어요."
+            ? "균형에서 더 멀어졌어요. 😭"
             : nowGenderDiversity === prevGenderDiversity
-            ? "변화하지 않았어요."
-            : "나아졌어요."}
-        </Text>{" "}
-        <br /> <br />
+            ? "지난 선거에 비해 변화하지 않았어요. 🤥"
+            : "나아졌어요. 🥰"}
+        </Text>
+        <br />
+        <br />
         {current.year}년 총선에서 {sgType === "elected" ? "당선자" : "후보자"}의
         성별은 남성{" "}
         <Text strong>