[Feat/#9] 버튼 컴포넌트 제작

.storybook/preview.module.scss

@@ -1,3 +1,7 @@
+body {
+  max-width: initial;
+}
+
 .Wrapper {
   display: flex;
   flex-flow: row wrap;
@@ -10,5 +14,13 @@
 .Story {
   height: 100%;
   padding: 2.5rem;
-  background-color: gray;
+  background-color: white;
+  color: black;
+}
+
+.InverseStory {
+  height: 100%;
+  padding: 2.5rem;
+  background-color: black;
+  color: white;
 }

.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 = {
@@ -18,6 +20,10 @@ const preview: Preview = {
         <div className={styles.Story}>
           <Story />
         </div>
+
+        <div className={styles.InverseStory}>
+          <Story />
+        </div>
       </div>
     ),
   ],

src/App.module.scss

@@ -0,0 +1,23 @@
+.Test {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 300px;
+  align-items: center;
+  margin: 0 auto;
+  margin-top: 40px;
+}
+
+.Test2 {
+  width: 161px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.Test3 {
+  width: 99px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

src/App.tsx

@@ -1,5 +1,23 @@
+import styles from "./App.module.scss";
+
+import Button from "@/components/ui/Button/Button";
+import IconButton from "@/components/ui/IconButton/IconButton";
+
 const App = () => {
-  return <div>App</div>;
+  return (
+    <div className={styles.Test}>
+      <Button variant="primary" text="정보가 맞아요" />
+      <Button variant="secondary" text="정보가 맞아요" />
+      <Button variant="tertiary" text="다시 스캔하기" />
+      <div className={styles.Test2}>
+        <IconButton text="갤러리" iconName="gallery" />
+        <IconButton text="카메라" iconName="camera" />
+      </div>
+      <div className={styles.Test3}>
+        <IconButton size="sm" text="복사하기" iconName="paste" />
+      </div>
+    </div>
+  );
 };
 
 export default App;

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

@@ -0,0 +1,9 @@
+@use "@/styles/mixins" as *;
+
+.BaseButton {
+  cursor: pointer;
+  border-radius: 0.875rem;
+  width: 100%;
+  height: 3.25rem;
+  padding: 0.875rem;
+}

src/components/ui/BaseButton/BaseButton.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/ui/BaseButton/BaseButton.module.scss";
+import type { BaseButtonProps } from "@/components/ui/BaseButton/BaseButton.types";
+
+const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
+  ({ className, children, type = "button", ...props }, ref) => {
+    return (
+      <button className={classNames(styles.BaseButton, className)} ref={ref} type={type} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+
+export default BaseButton;

src/components/ui/BaseButton/BaseButton.types.ts

@@ -0,0 +1,6 @@
+export interface ButtonOwnProps {
+  as?: React.ElementType;
+  text?: string;
+}
+
+export type BaseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

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

@@ -0,0 +1,45 @@
+@use "@/styles/mixins" as *;
+
+.Button {
+  @include buttonSecondary;
+
+  &.style-primary {
+    background-color: var(--color-text01);
+    color: var(--color-white);
+  }
+
+  &.style-secondary {
+    background-color: var(--color-gray400);
+    color: var(--color-white);
+  }
+
+  &.style-tertiary {
+    background-color: var(--color-gray200);
+    color: var(--color-text02);
+  }
+
+  &:disabled {
+    background-color: var(--color-gray350);
+    color: var(--color-text03);
+    cursor: not-allowed;
+  }
+}
+
+.ButtonStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}

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

@@ -0,0 +1,43 @@
+import Button from "@/components/ui/Button/Button";
+import styles from "@/components/ui/Button/Button.module.scss";
+import type { ButtonProps } from "@/components/ui/Button/Button.types";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+export const Primary: StoryObj<ButtonProps> = {
+  args: {
+    text: "정보가 맞아요",
+    disabled: false,
+    variant: "primary",
+  },
+};
+
+export const VariantProps: StoryObj<typeof Button> = {
+  render: () => (
+    <div className={styles.ButtonStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Button variant="primary" text="정보가 맞아요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>secondary</p>
+        <Button variant="secondary" text="정보가 맞아요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>tertiary</p>
+        <Button variant="tertiary" text="정보가 맞아요" />
+      </div>
+    </div>
+  ),
+};

src/components/ui/Button/Button.tsx

@@ -0,0 +1,39 @@
+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 = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { as = BaseButton, className, variant = "primary", text, disabled = false, onClick, ...props },
+    ref,
+  ) => {
+    const Comp = as as typeof BaseButton;
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled) {
+          onClick?.(e);
+        }
+      },
+      [onClick, disabled],
+    );
+
+    return (
+      <Comp
+        ref={ref}
+        className={classNames(styles.Button, styles[`style-${variant}`], className)}
+        disabled={disabled}
+        onClick={handleClick}
+        {...props}
+      >
+        {text}
+      </Comp>
+    );
+  },
+);
+
+export default Button;

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

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

src/components/ui/Icon/Icon.module.scss

@@ -0,0 +1,20 @@
+.IconStory {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+
+  .Wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .InnerWrapper {
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

src/components/ui/Icon/Icon.stories.tsx

@@ -1,6 +1,7 @@
 import Icon from "@/components/ui/Icon/Icon";
 import { ICONS } from "@/components/ui/Icon/Icon";
-import type { IconNameType } from "@/components/ui/Icon/Icon";
+import type { IconNameType, IconProps } from "@/components/ui/Icon/Icon";
+import styles from "@/components/ui/Icon/Icon.module.scss";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -10,34 +11,23 @@ const meta: Meta<typeof Icon> = {
   parameters: {
     layout: "centered",
   },
-  argTypes: {
-    name: {
-      control: {
-        type: "select",
-        options: ["camera", "close", "gallery", "leftArrow", "paste", "plus"],
-      },
-    },
-  },
+  tags: ["!autodocs"],
 };
 
 export default meta;
 
-export const AllIcons: StoryObj<typeof Icon> = {
+export const Primary: StoryObj<IconProps> = {
+  args: {
+    name: "camera",
+  },
+};
+
+export const AllIcons: StoryObj<IconProps> = {
   render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: "4rem" }}>
+    <div className={styles.IconStory}>
       {(Object.keys(ICONS) as IconNameType[]).map((iconName) => (
-        <div
-          style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}
-        >
-          <div
-            style={{
-              width: "1.5rem",
-              height: "1.5rem",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
+        <div className={styles.Wrapper}>
+          <div className={styles.InnerWrapper}>
             <Icon name={iconName} />
           </div>
           <p>{iconName}</p>

src/components/ui/Icon/Icon.tsx

@@ -7,6 +7,10 @@ import PlusIcon from "@/assets/svg/ic-plus.svg?react";
 
 export type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus";
 
+export interface IconProps {
+  name: IconNameType;
+}
+
 export const ICONS = {
   camera: CameraIcon,
   close: CloseIcon,
@@ -17,7 +21,7 @@ export const ICONS = {
 };
 
 // 추후 사이즈, 컬러등 추가 가능
-const Icon = ({ name }: { name: IconNameType }) => {
+const Icon = ({ name }: IconProps) => {
   const SvgIcon = ICONS[name];
 
   return <SvgIcon />;