[EC-79] feat: 진행률 BAR 컴포넌트 구현 (#62)

Author: DaeJungYoon

client/src/components/progressBar/ProgressBar.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import styles from './ProgressBar.module.css'
+
+export default function ProgressBar({ value, max, startDate, endDate }) {
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+  };
+  
+  const progressPercentage = (value / max) * 100;
+  
+  return (
+    <div className={styles.progressContainer}>
+      <div className={styles.markerContainer}>
+        <div 
+          className={styles.progressMarker}
+          style={{ left: `${progressPercentage}%` }}
+        >
+          {value}
+        </div>
+      </div>
+      <div className={styles.progressBar}>
+        <div 
+          className={styles.progressBarCompleted} 
+          style={{ width: `${progressPercentage}%` }}
+        >
+        </div>
+      </div>
+      <div className={styles.dateLabels}>
+        <span className={styles.startDate}>{formatDate(startDate)}</span>
+        <span className={styles.endDate}>{formatDate(endDate)}</span>
+      </div>
+    </div>
+  );
+}

client/src/components/progressBar/ProgressBar.module.css

@@ -0,0 +1,58 @@
+.progressContainer {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.markerContainer {
+  position: relative;
+  width: 100%;
+  height: 30px;
+  margin-bottom: 5px;
+}
+
+.progressMarker {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  background-color: #fff;
+  border: 2px solid var(--primary-100);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #333;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.progressBar {
+  width: 100%;
+  background-color: #eee;
+  border-radius: 4px;
+  position: relative;
+}
+
+.progressBarCompleted {
+  height: 20px;
+  background-image: linear-gradient(to right, var(--primary-100), var(--accent-200));
+  transition: width 0.5s ease-in-out;
+  border-radius: 4px;
+}
+
+.dateLabels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+  font-size: 14px;
+  color: #666;
+}
+
+.startDate {
+  text-align: left;
+}
+
+.endDate {
+  text-align: right;
+}