메뉴 배너 관리

src/components/common/button/VerticalDotsButton.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const DotsButton = styled.button`
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #f0f0f0;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: #e0e0e0;
+    }
+
+    /* 점 스타일링 */
+    .dot {
+        width: 3px;
+        height: 3px;
+        border-radius: 50%;
+        background-color: #333;
+        margin: 2px 0;
+    }
+`;
+
+const VerticalDotsButton = ({ text, type = 'button', errorMessage, handleClick, size, width, height, borderColor, disabled, name }) => {
+
+	return (
+		<DotsButton
+			onSubmit={e => e.preventDefault()}
+			type={type}
+			disabled={disabled}
+			onClick={handleClick}
+			size={size}
+			bordercolor={borderColor}
+			width={width}
+			height={height}
+			name={name}
+		>
+			<div className="dot"></div>
+			<div className="dot"></div>
+			<div className="dot"></div>
+		</DotsButton>
+	);
+};
+
+export default VerticalDotsButton;