feat: refactor participant bar

sparcs-kaist · May 8, 2024 · cfa550c · cfa550c
1 parent bbae970
commit cfa550c
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/packages/web/src/components/molecules/ParticipantBar.tsx b/packages/web/src/components/molecules/ParticipantBar.tsx
@@ -1,7 +1,20 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Box, Text } from "@biseo/web/components/atoms";
 import type { Color } from "@biseo/web/theme";
+import {
+  w,
+  h,
+  row,
+  column,
+  gap,
+  align,
+  justify,
+  center,
+  bg,
+  round,
+  padding,
+  text,
+} from "@biseo/web/styles";
 
 interface Props {
   total?: number;
@@ -30,40 +43,38 @@ export const ParticipantBar: React.FC<Props> = ({
   total = 0,
   participant = 0,
 }) => (
-  <Box w={300} h={59} gap={8} dir="column">
-    <Box w={75} h={20} gap={8} dir="row" align="center">
-      <Text variant="body" color="black">
-        투표 참여
-      </Text>
-      <Box bg="blue200" round={5} align="center" justify="center" w={20} h={20}>
-        <Text variant="boldtitle4" color="blue600">
-          {participant}
-        </Text>
-      </Box>
-    </Box>
-    <Box w={300} h={30}>
+  <div css={[w(300), h(59), gap(8), column]}>
+    <div css={[w(75), h(20), gap(8), row, align.center]}>
+      <p css={[text.body, text.black]}>투표 참여</p>
+      <div css={[bg.blue200, round.md, center, w(20), h(20)]}>
+        <h4 css={[text.boldtitle4, text.blue600]}>{participant}</h4>
+      </div>
+    </div>
+    <div css={[w(300), h(30)]}>
       <Background
         percent={total ? (participant / total) * 100 : 0}
         color="blue300"
         borderColor="gray200"
       >
-        <Box
-          w="fill"
-          h="fill"
-          dir="row"
-          align="center"
-          justify="space-between"
-          padHorizontal={13}
-          padVertical={6}
+        <div
+          css={[
+            w("fill"),
+            h("fill"),
+            row,
+            align.center,
+            justify.between,
+            padding.horizontal(13),
+            padding.vertical(6),
+          ]}
         >
-          <Text color="black" variant="option1">
+          <p css={[text.option1, text.black]}>
             {total ? ((participant * 100) / total).toFixed(1) : 0}%
-          </Text>
-          <Text color="black" variant="option1">
+          </p>
+          <p css={[text.option1, text.black]}>
             {participant}/{total}
-          </Text>
-        </Box>
+          </p>
+        </div>
       </Background>
-    </Box>
-  </Box>
+    </div>
+  </div>
 );