From 48633ce8d299029a9562e6fadc802252ef9c1f83 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Sat, 23 Aug 2025 12:45:25 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat=20[#83]=20Red=20=EC=83=89=EC=83=81=20p?= =?UTF-8?q?alette=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 디자인 시안과 별개로 임의의 red color palette를 추가해서 사용합니다. --- src/components/color/colors.js | 3 +++ src/styles/colors.css | 20 +++++++++++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/color/colors.js b/src/components/color/colors.js index 4c876bc..3560f9c 100644 --- a/src/components/color/colors.js +++ b/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)", }; diff --git a/src/styles/colors.css b/src/styles/colors.css index 608d4f9..91e7602 100644 --- a/src/styles/colors.css +++ b/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; } From 070a0c9eff64a879c31fdb91cff062022752688f Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Sat, 23 Aug 2025 12:45:55 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat=20[#83]=20`DangerousButton`=20componen?= =?UTF-8?q?t=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/button.jsx | 35 +++++++++++++++++++++++++++++- src/tests/test-components-page.jsx | 8 +++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx index e991737..51a75dd 100644 --- a/src/components/button/button.jsx +++ b/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 ( + + {title} + + ); +} + +export { DangerousButton, OutlinedButton, PrimaryButton, SecondaryButton }; diff --git a/src/tests/test-components-page.jsx b/src/tests/test-components-page.jsx index 7e3cbb7..4fd191f 100644 --- a/src/tests/test-components-page.jsx +++ b/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() { +
+ + + + + +
Date: Sat, 23 Aug 2025 12:47:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat=20[#83]=20API=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=B2=84=ED=8A=BC=EC=9D=84=20`DangerousButton`=20?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tests/test-api-page.jsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/tests/test-api-page.jsx b/src/tests/test-api-page.jsx index 2ed9272..ef9c366 100644 --- a/src/tests/test-api-page.jsx +++ b/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() { /> - - Date: Sat, 23 Aug 2025 12:49:40 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat=20[#83]=20=EB=A1=A4=EB=A7=81=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=ED=8D=BC=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20`DangerousButton`=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/messages-page.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/messages-page.jsx b/src/pages/messages-page.jsx index f4827b7..5584178 100644 --- a/src/pages/messages-page.jsx +++ b/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 ( -