feat: 텍스트 모달창 구현

- 텍스트 스타일: 기존 레이아웃과 동일 - 텍스트 색상: 버튼에 hover하면 서브 모달 생성. 서브 모달에서 색상 클릭하면 색상 적용 - 배경 색상: 버튼에 hover하면 서브 모달 생성. 서브 모달에서 색상 클릭하면 배경 색상 적욕
boostcampwm-2024 · Nov 25, 2024 · 63a2ac8 · 63a2ac8
1 parent 5212733
commit 63a2ac8
Show file tree

Hide file tree

Showing 6 changed files with 419 additions and 4 deletions.
diff --git a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.style.ts
@@ -0,0 +1,63 @@
+import { BackgroundColorType } from "@noctaCrdt/Interfaces";
+import { css, cva } from "@styled-system/css";
+
+type ColorVariants = {
+  [K in BackgroundColorType]: { backgroundColor: string };
+};
+
+export const colorPaletteModal = css({
+  zIndex: 1001,
+  borderRadius: "4px",
+  minWidth: "120px", // 3x3 그리드를 위한 최소 너비
+  padding: "4px",
+  backgroundColor: "white",
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+});
+
+export const colorPaletteContainer = css({
+  display: "grid",
+  gap: "4px",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  width: "100%",
+});
+
+export const colorOptionButton = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "none",
+  borderRadius: "4px",
+  width: "28px",
+  height: "28px",
+  margin: "0 2px",
+  padding: "2px",
+  transition: "transform 0.2s",
+  cursor: "pointer",
+  "&:hover": {
+    transform: "scale(1.1)",
+  },
+});
+
+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: "#EEEEEE" },
+};
+
+export const backgroundColorIndicator = cva({
+  base: {
+    borderRadius: "3px",
+    width: "100%",
+    height: "100%",
+    transition: "all 0.2s",
+  },
+  variants: {
+    color: colorVariants,
+  },
+});
diff --git a/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.tsx b/client/src/features/editor/components/ColorOptionModal/BackgroundColorOptionModal.tsx
@@ -0,0 +1,52 @@
+import { BackgroundColorType } from "@noctaCrdt/Interfaces";
+import {
+  backgroundColorIndicator,
+  colorOptionButton,
+  colorPaletteContainer,
+  colorPaletteModal,
+} from "./BackgroundColorOptionModal.style.ts";
+
+const COLORS: BackgroundColorType[] = [
+  "black",
+  "red",
+  "blue",
+  "green",
+  "yellow",
+  "purple",
+  "brown",
+  "white",
+  "transparent",
+];
+
+interface BackgroundColorOptionModalProps {
+  onColorSelect: (color: BackgroundColorType) => void;
+  position: { top: number; left: number };
+}
+
+export const BackgroundColorOptionModal = ({
+  onColorSelect,
+  position,
+}: BackgroundColorOptionModalProps) => {
+  return (
+    <div
+      className={colorPaletteModal}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+      }}
+    >
+      <div className={colorPaletteContainer}>
+        {COLORS.map((color) => (
+          <button
+            key={`bg-${color}`}
+            className={colorOptionButton}
+            onClick={() => onColorSelect(color)}
+          >
+            <div className={backgroundColorIndicator({ color })} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.style.ts
@@ -0,0 +1,65 @@
+import { TextColorType } from "@noctaCrdt/Interfaces";
+import { css, cva } from "@styled-system/css";
+
+type ColorVariants = {
+  [K in TextColorType]: { color: string };
+};
+
+export const colorPaletteModal = css({
+  zIndex: 1001,
+  borderRadius: "4px",
+  minWidth: "120px", // 3x3 그리드를 위한 최소 너비
+  padding: "4px",
+  backgroundColor: "white",
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+});
+
+export const colorPaletteContainer = css({
+  display: "grid",
+  gap: "4px",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  width: "100%",
+});
+
+export const colorOptionButton = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "none",
+  borderRadius: "4px",
+  width: "28px",
+  height: "28px",
+  margin: "0 2px",
+  padding: "2px",
+  transition: "transform 0.2s",
+  cursor: "pointer",
+  "&:hover": {
+    transform: "scale(1.1)",
+  },
+});
+
+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" },
+};
+
+export const textColorIndicator = cva({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    fontSize: "16px",
+    fontWeight: "bold",
+  },
+  variants: {
+    color: colorVariants,
+  },
+});
diff --git a/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.tsx b/client/src/features/editor/components/ColorOptionModal/TextColorOptionModal.tsx
@@ -0,0 +1,48 @@
+import { TextColorType } from "@noctaCrdt/Interfaces";
+import {
+  colorOptionButton,
+  colorPaletteContainer,
+  colorPaletteModal,
+  textColorIndicator,
+} from "./TextColorOptionModal.style.ts";
+
+const COLORS: TextColorType[] = [
+  "black",
+  "red",
+  "blue",
+  "green",
+  "yellow",
+  "purple",
+  "brown",
+  "white",
+];
+
+interface TextColorOptionModalProps {
+  onColorSelect: (color: TextColorType) => void;
+  position: { top: number; left: number };
+}
+
+export const TextColorOptionModal = ({ onColorSelect, position }: TextColorOptionModalProps) => {
+  return (
+    <div
+      className={colorPaletteModal}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+      }}
+    >
+      <div className={colorPaletteContainer}>
+        {COLORS.map((color) => (
+          <button
+            key={`text-${color}`}
+            className={colorOptionButton}
+            onClick={() => onColorSelect(color)}
+          >
+            <span className={textColorIndicator({ color })}>A</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts b/client/src/features/editor/components/TextOptionModal/TextOptionModal.style.ts
@@ -1,4 +1,23 @@
-import { css } from "@styled-system/css";
+/* 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" },
+};
 
 export const optionModal = css({
   zIndex: 1000,
@@ -30,3 +49,67 @@ export const optionButton = css({
     background: "#e0e0e0",
   },
 });
+
+export const divider = css({
+  width: "1px",
+  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"),
+      },
+    },
+  },
+});