From a2ea05842fef77e99828dce3680db8665ff09bfa Mon Sep 17 00:00:00 2001
From: jieunsse <jieunsse@gmail.com>
Date: Fri, 6 Feb 2026 00:59:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=83=81=ED=83=9C=EB=B0=94?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TeamStatusBar/TeamStatusBar.tsx           | 48 +++++++++++++++++++
 .../TeamStatusBar/interface/interface.ts      |  6 +++
 .../progressbar/ProgressBar.module.css        |  3 --
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TeamStatusBar/TeamStatusBar.tsx
 create mode 100644 src/components/TeamStatusBar/interface/interface.ts

diff --git a/src/components/TeamStatusBar/TeamStatusBar.tsx b/src/components/TeamStatusBar/TeamStatusBar.tsx
new file mode 100644
index 0000000..02f9511
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/TeamStatusBar/interface/interface.ts b/src/components/TeamStatusBar/interface/interface.ts
new file mode 100644
index 0000000..59a63e7
--- /dev/null
+++ b/src/components/TeamStatusBar/interface/interface.ts
@@ -0,0 +1,6 @@
+export interface TeamStatusBarProps {
+  title: string;
+  percentage: number;
+  taskCount: number;
+  completed: number;
+}
diff --git a/src/components/progressbar/ProgressBar.module.css b/src/components/progressbar/ProgressBar.module.css
index f17d3a5..53dea45 100644
--- a/src/components/progressbar/ProgressBar.module.css
+++ b/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;
   }
 }