From d415025256773858c88dca28058427a41addc428 Mon Sep 17 00:00:00 2001
From: Suyoung Jung <devsuyoung@gmail.com>
Date: Thu, 20 Jul 2023 14:30:34 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20ScheduleBar=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ScheduleBar/ScheduleBar.styled.ts | 12 +++++++++++-
 frontend/src/components/ScheduleBar/ScheduleBar.tsx  |  6 ++++--
 frontend/src/utils/generateScheduleBars.ts           |  1 -
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
index 5a660c5d1..5a38de621 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
@@ -5,9 +5,19 @@ export const Wrapper = styled.div<ScheduleBarProps>`
   position: absolute;
 
   top: ${({ level }) => level * 18 + 36}px;
-  width: ${({ duration }) => (duration * 100) / 7}%;
   left: ${({ column }) => (column * 100) / 7}%;
+
+  width: ${({ duration }) => (duration * 100) / 7}%;
   height: 16px;
 
+  padding: 0 4px;
+`;
+
+export const Inner = styled.div<Pick<ScheduleBarProps, 'color' | 'level'>>`
+  height: 100%;
+
   background-color: ${({ color }) => color};
+  filter: brightness(${({ level }) => 1 + level * 0.5});
+
+  border-radius: 4px;
 `;
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
index b87ada07e..a797deb51 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
@@ -12,7 +12,7 @@ export interface ScheduleBarProps {
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = 'red', title, ...rest } = props;
+  const { color = '#516FFF', title, ...rest } = props;
 
   return (
     <S.Wrapper
@@ -20,7 +20,9 @@ const ScheduleBar = (props: ScheduleBarProps) => {
       title={title}
       {...rest}
       onClick={() => alert(title)}
-    />
+    >
+      <S.Inner color={color} {...rest} />
+    </S.Wrapper>
   );
 };
 
diff --git a/frontend/src/utils/generateScheduleBars.ts b/frontend/src/utils/generateScheduleBars.ts
index 0ab1a3c92..c869c1d66 100644
--- a/frontend/src/utils/generateScheduleBars.ts
+++ b/frontend/src/utils/generateScheduleBars.ts
@@ -119,7 +119,6 @@ const generateRawScheduleBars = (
         column,
         duration,
         level: 0,
-        color: '#000',
       });
     }
   });