Merge pull request #57 from SOPT-all/feat/#56/page-bottom-button-hover

[FEAT] 페이지 하단 공통 버튼 호버 구현
SOPT-all · Jan 14, 2025 · 7bf543b · 7bf543b
2 parents 71dc1f6 + 373a881
commit 7bf543b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/...ommon/button/pageBottom/pageBottomBtn.tsx → ...ommon/button/pageBottom/PageBottomBtn.tsx b/...ommon/button/pageBottom/pageBottomBtn.tsx → ...ommon/button/pageBottom/PageBottomBtn.tsx
@@ -14,7 +14,7 @@ const PageBottomBtn = ({ btnText, size, isDisabled, onClick }: PageBottomBtnProp
   });
 
   return (
-    <button className={className} onClick={isDisabled ? undefined : onClick}>
+    <button className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
       {btnText}
     </button>
   );

diff --git a/src/components/common/button/pageBottom/pageBottomBtn.css.ts b/src/components/common/button/pageBottom/pageBottomBtn.css.ts
@@ -4,9 +4,9 @@ import { recipe } from '@vanilla-extract/recipes';
 const bottomBtnStyle = recipe({
   base: {
     ...theme.FONTS.h5Sb16,
-    color: theme.COLORS.white,
     borderRadius: 8,
     height: '5.2rem',
+    color: theme.COLORS.white,
   },
   variants: {
     size: {
@@ -28,6 +28,16 @@ const bottomBtnStyle = recipe({
       },
     },
   },
+  compoundVariants: [
+    {
+      variants: { isDisabled: false },
+      style: {
+        ':hover': {
+          backgroundColor: theme.COLORS.primary600,
+        },
+      },
+    },
+  ],
 });
 
 export default bottomBtnStyle;
diff --git a/...ponents/common/button/pageBtn/pageBtn.tsx → ...ponents/common/button/pageBtn/PageBtn.tsx b/...ponents/common/button/pageBtn/pageBtn.tsx → ...ponents/common/button/pageBtn/PageBtn.tsx
diff --git a/src/stories/pageBottomBtn.stories.ts b/src/stories/pageBottomBtn.stories.ts
@@ -1,4 +1,4 @@
-import PageBottomBtn from '@components/common/button/pageBottom/pageBottomBtn';
+import PageBottomBtn from '@components/common/button/pageBottom/PageBottomBtn';
 import type { Meta, StoryObj } from '@storybook/react';
 
 interface PageBottomBtnProps {

diff --git a/src/stories/pageBtn.stories.ts b/src/stories/pageBtn.stories.ts
@@ -1,4 +1,4 @@
-import PageBtn from '@components/common/button/pageBtn/pageBtn';
+import PageBtn from '@components/common/button/pageBtn/PageBtn';
 import type { Meta, StoryObj } from '@storybook/react';
 
 interface PageBtnProps {

diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts
@@ -20,6 +20,7 @@ const theme = createGlobalTheme(':root', {
 
     primary200: '#9FECAD',
     primary400: '#65C677',
+    primary600: '#3EBD55',
 
     green1: '#F7FFE9',
     green2: '#D3ECD8',