refactor: ScheduleBar 스타일 수정

woowacourse-teams · Jul 20, 2023 · d415025 · d415025
1 parent a39241b
commit d415025
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -12,15 +12,17 @@ export interface ScheduleBarProps {
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = 'red', title, ...rest } = props;
+  const { color = '#516FFF', title, ...rest } = props;
 
   return (
     <S.Wrapper
       color={color}
       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
@@ -119,7 +119,6 @@ const generateRawScheduleBars = (
         column,
         duration,
         level: 0,
-        color: '#000',
       });
     }
   });