From 5b90fc731b875372395356cb56ad04f62d044f9a Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Fri, 29 Nov 2024 19:31:02 +0900 Subject: [PATCH 1/4] =?UTF-8?q?style:=20=EC=A0=9C=EB=AA=A9=EC=9D=B4=20?= =?UTF-8?q?=EA=B8=B8=EC=96=B4=EC=A7=80=EB=A9=B4=20overflow=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #246 --- .../src/features/page/components/PageTitle/PageTitle.style.ts | 2 +- client/src/features/page/components/PageTitle/PageTitle.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/features/page/components/PageTitle/PageTitle.style.ts b/client/src/features/page/components/PageTitle/PageTitle.style.ts index 4fe1ed80..d6628537 100644 --- a/client/src/features/page/components/PageTitle/PageTitle.style.ts +++ b/client/src/features/page/components/PageTitle/PageTitle.style.ts @@ -5,11 +5,11 @@ export const pageTitleContainer = css({ gap: "8px", flexDirection: "row", alignItems: "center", + overflow: "hidden", }); export const pageTitle = css({ textStyle: "display-medium24", - display: "flex", alignItems: "center", paddingTop: "3px", color: "gray.500", diff --git a/client/src/features/page/components/PageTitle/PageTitle.tsx b/client/src/features/page/components/PageTitle/PageTitle.tsx index 03b3e890..9b336742 100644 --- a/client/src/features/page/components/PageTitle/PageTitle.tsx +++ b/client/src/features/page/components/PageTitle/PageTitle.tsx @@ -11,7 +11,7 @@ export const PageTitle = ({ title, icon }: PageTitleProps) => { const { icon: IconComponent, color } = iconComponents[icon]; return (
- +

{title || "Title"}

); From 20d6d3c1bf8a2bb9cbc07868642e76b03f8cff5a Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sat, 30 Nov 2024 17:23:50 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20Modal=20=EC=B0=BD=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EC=97=94=ED=84=B0=EC=B0=BD=20=EC=9E=85=EB=A0=A5=EC=8B=9C,?= =?UTF-8?q?=20primaryButton=ED=81=B4=EB=A6=AD=ED=95=98=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #246 --- client/src/components/modal/modal.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/src/components/modal/modal.tsx b/client/src/components/modal/modal.tsx index 21f06934..d4107eab 100644 --- a/client/src/components/modal/modal.tsx +++ b/client/src/components/modal/modal.tsx @@ -1,4 +1,5 @@ import { motion, AnimatePresence } from "framer-motion"; +import { useEffect } from "react"; import { createPortal } from "react-dom"; import { TextButton } from "../button/textButton"; import { modalContainerAnimation, overlayAnimation } from "./modal.animation"; @@ -29,6 +30,26 @@ export const Modal = ({ }: ModalProps) => { const portal = document.getElementById("modal") as HTMLElement; + useEffect(() => { + const handleKeyPress = (event: KeyboardEvent) => { + if (isOpen && event.key === "Enter") { + event.preventDefault(); + primaryButtonOnClick?.(); + } + }; + + // 모달이 열려있을 때만 이벤트 리스너 추가 + if (isOpen) { + window.addEventListener("keydown", handleKeyPress); + } + + // 클린업 함수 + return () => { + window.removeEventListener("keydown", handleKeyPress); + }; + }, [isOpen, primaryButtonOnClick]); + + if (!isOpen) return null; return createPortal( {isOpen && ( From a2a4d35091ddc1c384bc768df810f75bf526f0a2 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sat, 30 Nov 2024 23:24:50 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20white=20=EC=9E=98=EB=AA=BB=20HEX?= =?UTF-8?q?=EA=B0=92=20=EB=93=A4=EC=96=B4=EA=B0=80=20=EC=9E=88=EB=8A=94?= =?UTF-8?q?=EA=B2=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ColorOptionModal/BackgroundColorOptionModal.style.ts | 2 +- .../components/ColorOptionModal/TextColorOptionModal.style.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts index f1a65f64..f9acb08b 100644 --- a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts +++ b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts @@ -47,7 +47,7 @@ const colorVariants: ColorVariants = { yellow: { backgroundColor: "#FEA642" }, purple: { backgroundColor: "#A142FE" }, brown: { backgroundColor: "#8B4513" }, - white: { backgroundColor: "#EEEEEE" }, + white: { backgroundColor: "#FFFFFF" }, }; export const backgroundColorIndicator = cva({ diff --git a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts index 090bcdca..0e207244 100644 --- a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts +++ b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts @@ -46,7 +46,7 @@ const colorVariants: ColorVariants = { yellow: { color: "#FEA642" }, purple: { color: "#A142FE" }, brown: { color: "#8B4513" }, - white: { color: "#C1D7F4" }, + white: { color: "#FFFFFF" }, }; export const textColorIndicator = cva({ From 2b125b9e4fcb3a8d7f0ce3a915dcec46ba6754d8 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sat, 30 Nov 2024 23:46:20 +0900 Subject: [PATCH 4/4] =?UTF-8?q?style:=20=ED=8C=8C=EC=8A=A4=ED=85=94?= =?UTF-8?q?=ED=86=A4=EC=9C=BC=EB=A1=9C=20=EA=B8=80=EC=9E=90=20=EC=83=89?= =?UTF-8?q?=EC=83=81=EB=93=A4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/constants/color.ts | 12 ++++++------ .../BackgroundColorOptionModal.style.ts | 14 +++++++------- .../ColorOptionModal/TextColorOptionModal.style.ts | 14 +++++++------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/client/src/constants/color.ts b/client/src/constants/color.ts index 3c3e2871..90fd934c 100644 --- a/client/src/constants/color.ts +++ b/client/src/constants/color.ts @@ -6,10 +6,10 @@ export const COLOR = { GRAY_700: "#4E637C", GRAY_900: "#2B4158", SHADOW: "#004585", - RED: "#F24150", - YELLOW: "#FEA642", - GREEN: "#1BBF44", - PURPLE: "#A142FE", - BROWN: "#8B4513", - BLUE: "#4285F4", + RED: "#E25D68", + YELLOW: "#EEAF66", + GREEN: "#3BC05C", + PURPLE: "#9862CD", + BROWN: "#985728", + BLUE: "#6293E5", }; diff --git a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts index f9acb08b..211080d8 100644 --- a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts +++ b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts @@ -41,13 +41,13 @@ export const colorOptionButton = css({ const colorVariants: ColorVariants = { transparent: { backgroundColor: "#C1D7F4" }, black: { backgroundColor: "#2B4158" }, - red: { backgroundColor: "#F24150" }, - green: { backgroundColor: "#1BBF44" }, - blue: { backgroundColor: "#4285F4" }, - yellow: { backgroundColor: "#FEA642" }, - purple: { backgroundColor: "#A142FE" }, - brown: { backgroundColor: "#8B4513" }, - white: { backgroundColor: "#FFFFFF" }, + red: { backgroundColor: "#E25D68" }, + green: { backgroundColor: "#3BC05C" }, + blue: { backgroundColor: "#6293E5" }, + yellow: { backgroundColor: "#EEAF66" }, + purple: { backgroundColor: "#9862CD" }, + brown: { backgroundColor: "#985728" }, + white: { backgroundColor: "#EEEEEE" }, }; export const backgroundColorIndicator = cva({ diff --git a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts index 0e207244..8ec0cc79 100644 --- a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts +++ b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts @@ -40,13 +40,13 @@ export const colorOptionButton = css({ const colorVariants: ColorVariants = { black: { color: "#2B4158" }, - red: { color: "#F24150" }, - green: { color: "#1BBF44" }, - blue: { color: "#4285F4" }, - yellow: { color: "#FEA642" }, - purple: { color: "#A142FE" }, - brown: { color: "#8B4513" }, - white: { color: "#FFFFFF" }, + red: { color: "#E25D68" }, + green: { color: "#3BC05C" }, + blue: { color: "#6293E5" }, + yellow: { color: "#EEAF66" }, + purple: { color: "#9862CD" }, + brown: { color: "#985728" }, + white: { color: "#EEEEEE" }, }; export const textColorIndicator = cva({