feat: 팀 상태바 컴포넌트 추가

src/components/TeamStatusBar/TeamStatusBar.tsx

@@ -0,0 +1,48 @@
+import styles from './style/TeamStatusBar.module.css';
+import type { TeamStatusBarProps } from './interface/interface';
+import Image from 'next/image';
+import settingBigIcon from '@/assets/icons/setting/SettingBig.svg';
+import ProgressBar from '../progressbar';
+
+export default function TeamStatusBar({
+  title,
+  percentage,
+  taskCount,
+  completed,
+}: TeamStatusBarProps) {
+  return (
+    <section className={styles.mainContainer} aria-label={title}>
+      <h2 className={styles.title}>{title}</h2>
+      <header className={styles.subContainer}>
+        <dl>
+          <dt className={styles.subTitle}>오늘의 진행 상황</dt>
+          <dd className={styles.percent}>{percentage}%</dd>
+        </dl>
+        <dl className={styles.countContainer}>
+          <div>
+            <dt className={styles.subTitle}>오늘의 할 일</dt>
+            <dd className={styles.taskNumber}>{taskCount}</dd>
+          </div>
+          <span className={styles.line} role="separator" aria-hidden />
+          <div>
+            <dt className={styles.subTitle}>완료 🙌</dt>
+            <dd className={styles.completedNumber}>{completed}</dd>
+          </div>
+        </dl>
+      </header>
+
+      <div className={styles.barContainer}>
+        <ProgressBar
+          value={percentage / 100}
+          done={completed}
+          total={taskCount}
+          ariaLabel="team progress"
+          className={styles.progressBar}
+        />
+        <button className={styles.settingButton} aria-label="settings">
+          <Image src={settingBigIcon} alt="" width={24} height={24} />
+        </button>
+      </div>
+    </section>
+  );
+}

src/components/TeamStatusBar/interface/interface.ts

@@ -0,0 +1,6 @@
+export interface TeamStatusBarProps {
+  title: string;
+  percentage: number;
+  taskCount: number;
+  completed: number;
+}

src/components/progressbar/ProgressBar.module.css

@@ -1,6 +1,5 @@
 .track {
   width: 100%;
-  max-width: 322px;
   height: 20px;
 
   border-radius: 9999px;
@@ -29,14 +28,12 @@
 
 @media (min-width: 744px) {
   .track {
-    max-width: 566px;
     height: 27px;
   }
 }
 
 @media (min-width: 1024px) {
   .track {
-    max-width: 1010px;
     height: 27px;
   }
 }