Merge pull request #90 from cskime/feature/#83

[#83] DangerousButton component 개발

Author: cskime

src/components/button/button.jsx

@@ -215,4 +215,37 @@ function OutlinedButton({ className, title, icon, size, ...props }) {
   );
 }
 
-export { OutlinedButton, PrimaryButton, SecondaryButton };
+/* Dangerous Button */
+
+const StyledDangerousButton = styled(BaseButton)`
+  padding: 0 24px;
+  background-color: ${Colors.red(600)};
+  color: white;
+
+  &:hover {
+    background-color: ${Colors.red(700)};
+  }
+
+  &:active {
+    background-color: ${Colors.red(800)};
+  }
+
+  &:focus {
+    background-color: ${Colors.red(800)};
+    box-shadow: 0 0 0 1px ${Colors.red(900)} inset;
+  }
+
+  &:disabled {
+    background-color: ${Colors.gray(300)};
+  }
+`;
+
+function DangerousButton({ title, size, ...props }) {
+  return (
+    <StyledDangerousButton $size={size} {...props}>
+      <span>{title}</span>
+    </StyledDangerousButton>
+  );
+}
+
+export { DangerousButton, OutlinedButton, PrimaryButton, SecondaryButton };

src/components/color/colors.js

@@ -18,6 +18,9 @@ const Colors = {
   gray: function (value) {
     return `var(--color-gray-${shade({ value })})`;
   },
+  red: function (value) {
+    return `var(--color-red-${shade({ value })})`;
+  },
   error: "var(--color-error)",
   surface: "var(--color-surface)",
 };

src/pages/messages-page.jsx

@@ -1,7 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router";
 import styled from "styled-components";
-import { OutlinedButton, PrimaryButton } from "../components/button/button";
+import {
+  DangerousButton,
+  OutlinedButton,
+  PrimaryButton,
+} from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import BACKGROUND_COLOR from "../components/color/background-color";
 import {
@@ -74,14 +78,14 @@ function ViewerButtons({ onEdit }) {
 function EditingButtons({ onDelete, onCancel }) {
   return (
     <ButtonContainer>
-      <PrimaryButton
+      <DangerousButton
         size={BUTTON_SIZE.medium}
         title="삭제하기"
         onClick={onDelete}
       />
       <OutlinedButton
         size={BUTTON_SIZE.medium}
-        title="완료하기"
+        title="완료"
         onClick={onCancel}
       />
     </ButtonContainer>

src/styles/colors.css

@@ -1,9 +1,4 @@
 :root {
-  /* Semantics */
-
-  --color-error: #dc3a3a;
-  --color-surface: #f6f8ff;
-
   /* Palette */
 
   --color-purple-100: #f8f0ff;
@@ -43,4 +38,19 @@
   --color-gray-700: #3a3a3a;
   --color-gray-800: #2b2b2b;
   --color-gray-900: #181818;
+
+  --color-red-100: #fef2f2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #dc3a3a;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+
+  /* Semantics */
+
+  --color-error: var(--color-red-500);
+  --color-surface: #f6f8ff;
 }

src/tests/test-api-page.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
-import { PrimaryButton } from "../components/button/button";
+import { DangerousButton, PrimaryButton } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import Colors from "../components/color/colors";
 import {
@@ -250,23 +250,13 @@ function TestApiPage() {
           />
         </Row>
         <Row>
-          <PrimaryButton
-            style={
-              recipients.length === 0
-                ? undefined
-                : { backgroundColor: Colors.error }
-            }
+          <DangerousButton
             size={buttonSize}
             title="롤링페이퍼 삭제"
             onClick={handleDeleteRecipientsClick}
             disabled={recipients.length === 0}
           />
-          <PrimaryButton
-            style={
-              recipients.length === 0
-                ? undefined
-                : { backgroundColor: Colors.error }
-            }
+          <DangerousButton
             size={buttonSize}
             title="메시지 삭제"
             onClick={handleDeleteMessagesClick}

src/tests/test-components-page.jsx

@@ -9,6 +9,7 @@ import EmojiBadge from "../components/badge/emoji-badge";
 import ArrowButton from "../components/button/arrow-button";
 import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction";
 import {
+  DangerousButton,
   OutlinedButton,
   PrimaryButton,
   SecondaryButton,
@@ -79,6 +80,13 @@ function TestComponentsPage() {
         <OutlinedButton size={BUTTON_SIZE.extraSmall} title="Hello" />
         <OutlinedButton size={BUTTON_SIZE.extraSmall} title="Hello" disabled />
       </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <DangerousButton size={BUTTON_SIZE.large} title="Hello" />
+        <DangerousButton size={BUTTON_SIZE.medium} title="Hello" />
+        <DangerousButton size={BUTTON_SIZE.small} title="Hello" />
+        <DangerousButton size={BUTTON_SIZE.extraSmall} title="Hello" />
+        <DangerousButton size={BUTTON_SIZE.extraSmall} title="Hello" disabled />
+      </div>
       <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
         <OutlinedButton
           size={BUTTON_SIZE.medium}