[FE][Design] : tailwind custom 추가 및 사용

boostcampwm-2024 · Nov 13, 2024 · 10e28b8 · 10e28b8
1 parent e2a3339
commit 10e28b8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/frontend/src/component/BottomSheet/BottomSheet.tsx b/frontend/src/component/BottomSheet/BottomSheet.tsx
@@ -39,10 +39,9 @@ export const BottomSheet = (props: IBottomSheetProps) => {
   return (
     <div
       ref={sheet}
-      className="shadow-dark fixed left-0 right-0 z-[101] flex h-full flex-col rounded-t-lg transition-transform duration-700"
+      className="bg-grayscale-25 shadow-dark fixed left-0 right-0 z-[101] flex h-full flex-col rounded-t-lg transition-transform duration-700"
       style={{
         top: `calc(100% - ${props.minHeight * 100}%)`,
-        background: '#FEFEFEF2',
       }}
     >
       <div className="flex items-center justify-center pb-1 pt-2">

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
       colors: {
         grayscale: {
           white: '#FFFFFF',
+          25: '#FEFEFEF2',
           50: 'rgba(60, 60, 67, 0.36)',
           100: '#B7B7B7',
           200: '#6D6D6D',
@@ -46,6 +47,7 @@ module.exports = {
       boxShadow: {
         float: '0 4px 20px rgba(0, 0, 0, 0.13)',
         basic: 'inset 0 0 3px rgba(0, 0, 0, 0.11)',
+        dark: '0px -6px 20px 0px rgba(0, 0, 0, 0.25)',
       },
     }, // 필요한 커스터마이징을 여기서 설정 가능
   },