From 1c83aab119275806cc499d132aca2823a7b2870e Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Sat, 15 Feb 2025 23:36:37 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20Context=20Menu=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=20=ED=8B=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/right-arrow.svg | 3 ++ src/components/shared/ContextMenu.tsx | 47 +++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 src/assets/right-arrow.svg create mode 100644 src/components/shared/ContextMenu.tsx diff --git a/src/assets/right-arrow.svg b/src/assets/right-arrow.svg new file mode 100644 index 0000000..400f9cb --- /dev/null +++ b/src/assets/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx new file mode 100644 index 0000000..3eb638d --- /dev/null +++ b/src/components/shared/ContextMenu.tsx @@ -0,0 +1,47 @@ +// import RightArrow from '../../assets/right-arrow.svg' +import RightArrow from '../../assets/right-arrow.svg' +function Item({ + name, + isDropdown, + isWarning, +}: { + name: string + isDropdown?: boolean + isWarning?: boolean +}) { + console.log('RightArrow', RightArrow) + return ( +
+
+ {name} +
+ {isDropdown && ( +
+ dropdown btn +
+ )} +
+ ) +} + +export default function ContextMenu() { + return ( +
+ + + + + +
+ + + + + +
+ +
+ ) +} From 04c226742b6ef7629ee232ca0f462aae53ca1fc0 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Sat, 15 Feb 2025 23:39:03 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20sub=20menu=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/ContextMenu.tsx | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index 3eb638d..b3fa9c0 100644 --- a/src/components/shared/ContextMenu.tsx +++ b/src/components/shared/ContextMenu.tsx @@ -4,15 +4,17 @@ function Item({ name, isDropdown, isWarning, + children, }: { name: string isDropdown?: boolean isWarning?: boolean + children?: React.ReactNode }) { console.log('RightArrow', RightArrow) return (
{name} @@ -22,25 +24,40 @@ function Item({ dropdown btn
)} + {children}
) } +function SubMenu() { + return ( +
+ + + + +
+ ) +} export default function ContextMenu() { return ( -
+
- - + + + + + + -
+
) From 0f2a1fe75e09fadf4b8f1266ec6af5c7fb5bcf61 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Sun, 16 Feb 2025 16:44:52 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EC=97=AC=EB=9F=AC=20sub=20menu?= =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=98=B8=EB=B2=84=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/ContextMenu.tsx | 77 +++++++++++++++++++++------ 1 file changed, 62 insertions(+), 15 deletions(-) diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index b3fa9c0..aabf0d6 100644 --- a/src/components/shared/ContextMenu.tsx +++ b/src/components/shared/ContextMenu.tsx @@ -1,4 +1,4 @@ -// import RightArrow from '../../assets/right-arrow.svg' +import { Dispatch, SetStateAction, useRef, useState } from 'react' import RightArrow from '../../assets/right-arrow.svg' function Item({ name, @@ -11,10 +11,9 @@ function Item({ isWarning?: boolean children?: React.ReactNode }) { - console.log('RightArrow', RightArrow) return (
{name} @@ -29,17 +28,59 @@ function Item({ ) } -function SubMenu() { +function SubMenu({ + name, + list, + openSubMenu, + setOpenSubMenu, +}: { + name: string + list: string[] + openSubMenu: string | null + setOpenSubMenu: Dispatch> +}) { + const timeoutRef = useRef(null) + + const handleMouseEnter = () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + setOpenSubMenu(name) + } + + const handleMouseLeave = () => { + timeoutRef.current = setTimeout(() => { + setOpenSubMenu((prevOpenSubMenu: string | null) => { + return prevOpenSubMenu === name ? null : prevOpenSubMenu + }) + }, 300) + } + return ( -
- - - - +
+ + + {openSubMenu === name && ( +
+ {list.map((item, index) => ( + + ))} +
+ )}
) } export default function ContextMenu() { + const [openSubMenu, setOpenSubMenu] = useState(null) + return (
@@ -48,12 +89,18 @@ export default function ContextMenu() {
- - - - - - + + From c2e1289eaaf17facd638297cc89e8ba75c88fa74 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Sun, 16 Feb 2025 16:50:56 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20context=20menu=20item=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=95=B8?= =?UTF-8?q?=EB=93=A4=EB=9F=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/ContextMenu.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index aabf0d6..fb12e44 100644 --- a/src/components/shared/ContextMenu.tsx +++ b/src/components/shared/ContextMenu.tsx @@ -1,18 +1,22 @@ import { Dispatch, SetStateAction, useRef, useState } from 'react' import RightArrow from '../../assets/right-arrow.svg' + function Item({ name, isDropdown, isWarning, + onClick, children, }: { name: string isDropdown?: boolean isWarning?: boolean + onClick?: () => void children?: React.ReactNode }) { return (
@@ -78,6 +82,7 @@ function SubMenu({
) } + export default function ContextMenu() { const [openSubMenu, setOpenSubMenu] = useState(null)