feat: 8방향에 대한 스타일 추가

#178
boostcampwm-2024 · Nov 23, 2024 · 0604428 · 0604428
1 parent dae1b3a
commit 0604428
Showing 1 changed file with 92 additions and 6 deletions.
diff --git 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",
+    }),
+  ),
+};