diff --git a/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts b/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts index 2242c885..977a85b3 100644 --- a/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts +++ b/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts @@ -1,23 +1,4 @@ -/* eslint-disable @pandacss/no-dynamic-styling */ -import { TextColorType } from "@noctaCrdt/Interfaces"; -import { colors } from "@src/styles/tokens/color"; -import { css, cva } from "@styled-system/css"; -import { token } from "@styled-system/tokens"; - -type ColorVariants = { - [K in TextColorType]: { color: string }; -}; - -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" }, -}; +import { css } from "@styled-system/css"; export const optionModal = css({ zIndex: 1000, @@ -55,61 +36,3 @@ export const divider = css({ height: "20px", margin: "0 8px", }); - -export const colorOptionButton = css({ - width: "28px", - height: "28px", - margin: "0 2px", - cursor: "pointer", - _hover: { - transform: "scale(1.1)", - }, -}); - -// 색상 표시 원형 스타일 베이스 -const colorIndicatorBase = { - width: "28px", - height: "28px", - borderRadius: "3px", - transition: "all 0.2s", -}; - -// 텍스트 색상 indicator -export const textColorIndicator = cva({ - ...colorIndicatorBase, - variants: { - color: colorVariants, - }, -}); - -export const backgroundColorIndicator = cva({ - ...colorIndicatorBase, - variants: { - color: { - black: { - backgroundColor: `color-mix(in srgb, ${token("colors.gray.900")}, white 20%)`, - }, - red: { - backgroundColor: `color-mix(in srgb, ${token("colors.red")}, white 20%)`, - }, - yellow: { - backgroundColor: `color-mix(in srgb, ${token("colors.yellow")}, white 20%)`, - }, - green: { - backgroundColor: `color-mix(in srgb, ${token("colors.green")}, white 20%)`, - }, - purple: { - backgroundColor: `color-mix(in srgb, ${token("colors.purple")}, white 20%)`, - }, - brown: { - backgroundColor: `color-mix(in srgb, ${token("colors.brown")}, white 20%)`, - }, - blue: { - backgroundColor: `color-mix(in srgb, ${token("colors.blue")}, white 20%)`, - }, - white: { - backgroundColor: token("colors.white"), - }, - }, - }, -}); diff --git a/client/src/features/editor/components/TextOptionModal/TextOptionModal.tsx b/client/src/features/editor/components/TextOptionModal/TextOptionModal.tsx index f69351e9..9996e17b 100644 --- a/client/src/features/editor/components/TextOptionModal/TextOptionModal.tsx +++ b/client/src/features/editor/components/TextOptionModal/TextOptionModal.tsx @@ -5,27 +5,7 @@ import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { BackgroundColorOptionModal } from "../ColorOptionModal/BackgroundColorOptionModal"; import { TextColorOptionModal } from "../ColorOptionModal/TextColorOptionModal"; -import { - modalContainer, - optionButton, - optionModal, - divider, - textColorIndicator, - backgroundColorIndicator, - colorOptionButton, -} from "./TextOptionModal.style"; - -// 사용 가능한 색상 배열 -const COLORS: TextColorType[] = [ - "black", - "red", - "green", - "blue", - "yellow", - "purple", - "brown", - "white", -]; +import { modalContainer, optionButton, optionModal, divider } from "./TextOptionModal.style"; interface SelectionModalProps { selectedNodes: Array | null; @@ -268,7 +248,7 @@ export const TextOptionModal = ({
handleMouseEnter("text")} - onClick={(e) => handleClickButton("text")} + onClick={() => handleClickButton("text")} >