#44 💄 Gauge 컴포넌트

pages/lbh/gauge/index.tsx

@@ -0,0 +1,71 @@
+import tw from "twin.macro";
+
+import Gauge from "../../../src/components/Gauge/Gauge";
+
+function index() {
+ const temp = [
+ {
+ fraction: 1 / 7,
+ gaugeLabel: "1/7",
+ },
+ {
+ fraction: 2 / 7,
+ gaugeLabel: "2/7",
+ },
+ {
+ fraction: 3 / 7,
+ gaugeLabel: "3/7",
+ },
+ {
+ fraction: 4 / 7,
+ gaugeLabel: "4/7",
+ },
+ {
+ fraction: 5 / 7,
+ gaugeLabel: "5/7",
+ },
+ {
+ fraction: 6 / 7,
+ gaugeLabel: "6/7",
+ },
+ {
+ fraction: 7 / 7,
+ gaugeLabel: "7/7",
+ },
+ {
+ fraction: 1 / 5,
+ gaugeLabel: "1/5",
+ },
+ {
+ fraction: 2 / 5,
+ gaugeLabel: "2/5",
+ },
+ {
+ fraction: 3 / 5,
+ gaugeLabel: "3/5",
+ },
+ {
+ fraction: 4 / 5,
+ gaugeLabel: "4/5",
+ },
+ {
+ fraction: 5 / 5,
+ gaugeLabel: "5/5",
+ },
+ ];
+
+ return (
+ <>
+ <div css={[tw`mt-[20px] mx-auto px-[16px]`]}>
+ {temp.map((item, index) => (
+ <div key={index}>
+ <Gauge fraction={item.fraction} gaugeLabel={item.gaugeLabel} />
+ <div css={[tw`mt-[20px] mx-auto px-[16px]`]} />
+ </div>
+ ))}
+ </div>
+ </>
+ );
+}
+
+export default index;

src/components/Gauge/Gauge.module.scss

@@ -0,0 +1,32 @@
+.gauge {
+ &Label {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 18px;
+ color: var(--text-dark-gray);
+ margin-bottom: 4px;
+
+ &--right {
+ text-align: right;
+ }
+ &--left {
+ text-align: left;
+ }
+ &--center {
+ text-align: center;
+ }
+ }
+
+ &Bar {
+ background-color: #e3e3e3;
+ border-radius: 50px;
+ height: 2px;
+ }
+
+ &Progress {
+ background-color: var(--primary-color);
+ border-radius: 50px;
+ height: 2px;
+ width: 0px;
+ }
+}

src/components/Gauge/Gauge.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+
+import { convertToPercent } from "../../util/helpers";
+
+import styles from "./Gauge.module.scss";
+
+interface GaugeProps {
+ fraction: number;
+ gaugeLabel?: string;
+ labelAlign?: "left" | "right" | "center";
+}
+
+function Gauge({ fraction, gaugeLabel, labelAlign = "right" }: GaugeProps) {
+ return (
+ <div className={styles.gauge}>
+ {gaugeLabel && (
+ <div
+ className={clsx(
+ styles.gaugeLabel,
+ styles[`gaugeLabel--${labelAlign}`]
+ )}
+ >
+ {gaugeLabel}
+ </div>
+ )}
+
+ <div className={styles.gaugeBar}>
+ <div
+ className={styles.gaugeProgress}
+ style={{
+ width: `${convertToPercent({ num: fraction })}%`,
+ }}
+ />
+ </div>
+ </div>
+ );
+}
+
+export default Gauge;

src/util/helpers.ts

@@ -0,0 +1,11 @@
+export interface convertToPercentProps {
+ num: number;
+ percentMultiplier?: number;
+}
+
+export function convertToPercent({
+ num,
+ percentMultiplier = 1e2,
+}: convertToPercentProps) {
+ return 100 * (Math.round(num * percentMultiplier) / percentMultiplier);
+}