Merge pull request #247 from boostcampwm-2024/Feature/#246_제목이_길어지면_요…

…소가_빠져나가는문제

Feature/#246_스타일 개선

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(
     <AnimatePresence>
       {isOpen && (

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",
 };

client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts

@@ -41,12 +41,12 @@ 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" },
+  red: { backgroundColor: "#E25D68" },
+  green: { backgroundColor: "#3BC05C" },
+  blue: { backgroundColor: "#6293E5" },
+  yellow: { backgroundColor: "#EEAF66" },
+  purple: { backgroundColor: "#9862CD" },
+  brown: { backgroundColor: "#985728" },
   white: { backgroundColor: "#EEEEEE" },
 };
 

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: "#C1D7F4" },
+  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({

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",

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 (
     <div className={pageTitleContainer}>
-      <IconComponent color={color} size="24px" />
+      <IconComponent color={color} size="24px" style={{ flexShrink: 0 }} />
       <p className={pageTitle}>{title || "Title"}</p>
     </div>
   );