From 06044280a235e860db5d2e162bf460c029211ddd Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Sun, 24 Nov 2024 07:26:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=208=EB=B0=A9=ED=96=A5=EC=97=90=20?=
 =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#178
---
 client/src/features/page/Page.style.ts | 98 ++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 6 deletions(-)

diff --git a/client/src/features/page/Page.style.ts b/client/src/features/page/Page.style.ts
index 563c3748..8483df13 100644
--- a/client/src/features/page/Page.style.ts
+++ b/client/src/features/page/Page.style.ts
@@ -26,11 +26,97 @@ export const pageHeader = css({
   },
 });
 
-export const resizeHandle = css({
+const baseResizeHandle = css({
+  zIndex: 1,
   position: "absolute",
-  right: "-10px",
-  bottom: "-10px",
-  width: "32px",
-  height: "32px",
-  cursor: "se-resize",
 });
+
+export const resizeHandles = {
+  top: cx(
+    baseResizeHandle,
+    css({
+      top: "-5px",
+      left: "5px",
+      right: "5px",
+      height: "10px",
+      cursor: "n-resize",
+    }),
+  ),
+
+  bottom: cx(
+    baseResizeHandle,
+    css({
+      left: "5px",
+      right: "5px",
+      bottom: "-5px",
+      height: "10px",
+      cursor: "s-resize",
+    }),
+  ),
+
+  left: cx(
+    baseResizeHandle,
+    css({
+      top: "5px",
+      left: "-5px",
+      bottom: "5px",
+      width: "10px",
+      cursor: "w-resize",
+    }),
+  ),
+
+  right: cx(
+    baseResizeHandle,
+    css({
+      top: "5px",
+      right: "-5px",
+      bottom: "5px",
+      width: "10px",
+      cursor: "e-resize",
+    }),
+  ),
+
+  topLeft: cx(
+    baseResizeHandle,
+    css({
+      top: "-10px",
+      left: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "nw-resize",
+    }),
+  ),
+
+  topRight: cx(
+    baseResizeHandle,
+    css({
+      top: "-10px",
+      right: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "ne-resize",
+    }),
+  ),
+
+  bottomLeft: cx(
+    baseResizeHandle,
+    css({
+      left: "-10px",
+      bottom: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "sw-resize",
+    }),
+  ),
+
+  bottomRight: cx(
+    baseResizeHandle,
+    css({
+      right: "-10px",
+      bottom: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "se-resize",
+    }),
+  ),
+};