Merge pull request #197 from ASAP-as-soon-as-possible/design/ctaDim/#189

[Design/#189] CTA버튼 딤처리
ASAP-as-soon-as-possible · Oct 14, 2023 · 9060711 · 9060711
2 parents 5e68651 + 4b94275
commit 9060711
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/components/atomComponents/Button.tsx b/src/components/atomComponents/Button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { styled, css } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 interface ButtonProps {
   children: React.ReactNode;

diff --git a/src/pages/selectSchedule/SelectSchedulePage.tsx b/src/pages/selectSchedule/SelectSchedulePage.tsx
@@ -254,9 +254,17 @@ const TitleWrapper = styled.div`
 `;
 
 const StyledBtnSection = styled.section`
+  display: flex;
   position: fixed;
-  bottom: 1.2rem;
-  border-radius: 50%;
+  bottom: 0;
+  align-items: end;
+  justify-content: center;
+  background: ${({ theme }) => theme.colors.dim_gradient};
+
+  padding-bottom: 2.9rem;
+
+  width: 100%;
+  height: 16.4rem;
 `;
 
 export default SelectSchedulePage;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -32,6 +32,8 @@ const colors = {
   level3: 'rgba(50, 83, 255, 0.5)',
   level2: 'rgba(50, 83, 255, 0.3)',
   level1: 'rgba(50, 83, 255, 0.1)',
+
+  dim_gradient: 'linear-gradient(1deg, #141414 56.25%, rgba(20, 20, 20, 0) 95.89%)',
 };
 
 export type ColorsTypes = typeof colors;