[feat/button] - 버튼 default / secondary 두가지

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "semi": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

src/componets/Button/Button.scss

@@ -1,23 +1,74 @@
+@use '@/styles/index' as v;
+
 .xp-btn {
-  padding: 4px 8px;
-  border: 2px solid black;
-  font-weight: 400;
+  background: #d4d4d4;
+  color: #5a5a5a;
+  border: none;
+  font-family: 'Tahoma', 'Verdana', sans-serif;
+  font-size: 16px;
+  padding: 6px 18px;
   cursor: pointer;
+  box-shadow:
+    inset 1px 1px 0 0 #fff,
+    1px 1px 0 0 #868686,
+    2px 2px 0 0 #222;
+  transition:
+    background-color 0.12s,
+    color 0.12s,
+    box-shadow 0.12s;
+
+  &:hover,
+  &:focus {
+    background: #e5e5e5;
+    color: #222;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      2px 2px 0 0 #222;
+  }
+  &:active {
+    background: #bbbbbb;
+    color: #222;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      1px 1px 0 0 #868686,
+      0px 0px 0 0 #222;
+  }
+
+  @media (max-width: 640px) {
+    font-size: 13px;
+    padding: 5px 12px;
+  }
+}
+
+// 빨강 버튼 (secondary)
+.xp-btn.secondary {
+  background: #d43c3c;
+  color: #fff;
+  border: none;
+  box-shadow:
+    inset 1px 1px 0 0 #fff,
+    1px 1px 0 0 #b92a2a,
+    2px 2px 0 0 #7a1818;
 
-  &[data-variant="primary"] {
-    background: #ffffff;
-    color: #000000;
-    &:hover {
-      background: #f2f2f2;
-      color: #222222;
-    }
+  &:hover,
+  &:focus {
+    background: #b92a2a;
+    color: #fff;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      2px 2px 0 0 #7a1818;
   }
-  &[data-variant="secondary"] {
-    background: #eee;
-    color: #333;
-    &:hover {
-      background: #e0e0e0;
-      color: #222;
-    }
+  &:active {
+    background: #a12222;
+    color: #fff;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      1px 1px 0 0 #b92a2a,
+      0px 0px 0 0 #7a1818;
+  }
+
+  @media (max-width: 640px) {
+    font-size: 13px;
+    padding: 5px 12px;
   }
 }

src/componets/Button/Button.stories.tsx

@@ -1,15 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import Button from "./Button";
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './Button';
 
 const meta: Meta<typeof Button> = {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
-  argTypes: { onClick: { action: "clicked" } },
+  argTypes: { onClick: { action: 'clicked' } }
 };
 
 export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
-  args: { children: "클릭", variant: "primary" },
+  args: {
+    children: '클릭',
+    variant: 'default',
+    selected: true,
+    color: 'rgba(255, 0, 0, 1)'
+  }
 };

src/componets/Button/Button.tsx

@@ -1,16 +1,23 @@
-import React from "react";
-import "./Button.scss";
+import React from 'react';
+import './Button.scss';
+
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: "primary" | "secondary";
+  selected?: boolean;
+  variant?: 'default' | 'secondary';
 };
 
 const Button: React.FC<ButtonProps> = ({
   children,
-  variant = "primary",
+  variant = 'default',
   ...rest
 }) => {
+  // xp-btn, secondary 클래스 동적 조합
+  const classNames = ['xp-btn', variant === 'secondary' ? 'secondary' : '']
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <button {...rest} data-variant={variant} className="xp-btn">
+    <button className={classNames} {...rest}>
       {children}
     </button>
   );

src/stories/main.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(ts|tsx|mdx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
-  framework: { name: "@storybook/react-vite", options: {} },
+  stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
+  framework: { name: '@storybook/react-vite', options: {} }
 };
 export default config;

src/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@use "variables" as v;
+@use 'variables' as v;
 
 // 반응형 미디어 쿼리 믹스인
 @mixin mq($breakpoint) {
@@ -10,9 +10,10 @@
 }
 
 // 타이포그래피 믹스인
-@mixin text-style($size) {
+@mixin text-style($size, $weight: 400) {
   font-size: map-get(map-get(v.$typography, $size), fontSize);
   line-height: map-get(map-get(v.$typography, $size), lineHeight);
+  font-weight: $weight;
 }
 
 // flex 믹스인

src/styles/_variables.scss

@@ -1,62 +1,50 @@
 // 색상 변수
 $colors: (
-  // 블랙/그레이/화이트 계열
-  black: #000000,
-  gray-800: #171717,
-  gray-700: #333236,
-  gray-600: #4b4b4b,
-  gray-500: #787486,
-  gray-400: #9fa6b2,
-  gray-300: #d9d9d9,
+  black: #000,
+  white: #fff,
   gray-200: #eeeeee,
-  gray-100: #fafafa,
-  white: #ffffff,
-
-  // 컬러 계열
-  violet_5534DA: #5534da,
-  violet_8: #f1effd,
-  red_D6173A: #d6173a,
-  green_7AC555: #7ac555,
-  purple_760DDE: #760dde,
-  orange_FFA500: #ffa500,
-  blue_76A5EA: #76a5ea,
-  pink_E876EA: #e876ea
+  gray-300: #e0e0e0,
+  gray-400: #bdbdbd,
+  gray-500: #9e9e9e,
+  gray-900: #212121,
+  red_btn: #d43c3c,
+  red_btn_hover: #b92a2a
 );
 
 // 타이포그래피 변수
 $typography: (
   xs: (
     fontSize: 12px,
-    lineHeight: 1.5,
+    lineHeight: 1.5
   ),
   sm: (
     fontSize: 13px,
-    lineHeight: 1.69,
+    lineHeight: 1.69
   ),
   md: (
     fontSize: 14px,
-    lineHeight: 1.71,
+    lineHeight: 1.71
   ),
   lg: (
     fontSize: 16px,
-    lineHeight: 1.625,
+    lineHeight: 1.625
   ),
-  "2lg": (
+  '2lg': (
     fontSize: 18px,
-    lineHeight: 1.556,
+    lineHeight: 1.556
   ),
   xl: (
     fontSize: 20px,
-    lineHeight: 1.6,
+    lineHeight: 1.6
   ),
-  "2xl": (
+  '2xl': (
     fontSize: 24px,
-    lineHeight: 1.333,
+    lineHeight: 1.333
   ),
-  "3xl": (
+  '3xl': (
     fontSize: 32px,
-    lineHeight: 1.313,
-  ),
+    lineHeight: 1.313
+  )
 );
 
 // 브레이크포인트 변수