refactor: 버튼 스타일 수정, storybook global scss 적용

Author: sikkzz

.storybook/preview.module.scss

@@ -1,3 +1,7 @@
+body {
+  max-width: initial;
+}
+
 .Wrapper {
   display: flex;
   flex-flow: row wrap;

.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
 
+import "@/styles/reset.scss";
+import "@/styles/global.scss";
 import styles from "./preview.module.scss";
 
 const preview: Preview = {

src/App.tsx

@@ -8,7 +8,7 @@ const App = () => {
     <div className={styles.Test}>
       <Button variant="primary" text="정보가 맞아요" />
       <Button variant="secondary" text="정보가 맞아요" />
-      <Button variant="disabled" text="다시 스캔하기" />
+      <Button variant="tertiary" text="다시 스캔하기" />
       <div className={styles.Test2}>
         <IconButton text="갤러리" iconName="gallery" />
         <IconButton text="카메라" iconName="camera" />

src/components/ui/BaseButton/BaseButton.module.scss

@@ -5,4 +5,5 @@
   border-radius: 0.875rem;
   width: 100%;
   height: 3.25rem;
+  padding: 0.875rem;
 }

src/components/ui/Button/Button.module.scss

@@ -1,22 +1,27 @@
 @use "@/styles/mixins" as *;
 
 .Button {
+  @include buttonSecondary;
+
   &.style-primary {
     background-color: var(--color-text01);
     color: var(--color-white);
-    @include buttonPrimary;
   }
 
   &.style-secondary {
     background-color: var(--color-gray400);
     color: var(--color-white);
-    @include buttonSecondary;
   }
 
-  &.style-disabled {
+  &.style-tertiary {
+    background-color: var(--color-gray200);
+    color: var(--color-text02);
+  }
+
+  &:disabled {
     background-color: var(--color-gray350);
     color: var(--color-text03);
-    @include buttonSecondary;
+    cursor: not-allowed;
   }
 }
 
@@ -29,6 +34,7 @@
     display: flex;
     gap: 1rem;
     justify-content: center;
+    align-items: center;
     width: 300px;
   }
 

src/components/ui/Button/Button.stories.tsx

@@ -35,8 +35,8 @@ export const VariantProps: StoryObj<typeof Button> = {
         <Button variant="secondary" text="정보가 맞아요" />
       </div>
       <div className={styles.Wrapper}>
-        <p className={styles.Text}>disabled</p>
-        <Button variant="disabled" text="정보가 맞아요" />
+        <p className={styles.Text}>tertiary</p>
+        <Button variant="tertiary" text="정보가 맞아요" />
       </div>
     </div>
   ),

src/components/ui/Button/Button.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback } from "react";
+import { forwardRef, useCallback } from "react";
 
 import classNames from "classnames";
 
 import BaseButton from "@/components/ui/BaseButton/BaseButton";
 import styles from "@/components/ui/Button/Button.module.scss";
 import type { ButtonProps } from "@/components/ui/Button/Button.types";
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     { as = BaseButton, className, variant = "primary", text, disabled = false, onClick, ...props },
     ref,

src/components/ui/Button/Button.types.ts

@@ -1,6 +1,6 @@
 import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types";
 
-type ButtonVariant = "primary" | "secondary" | "disabled";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonOwnProps {
   variant?: ButtonVariant;

src/components/ui/IconButton/IconButton.module.scss

@@ -15,6 +15,7 @@
   &.size-sm {
     gap: 0.125rem;
     height: 2.375rem;
+    padding: 0.5rem 0.875rem;
     background-color: var(--color-text01);
     color: var(--color-white);
     border-radius: 0.75rem;