From 4446e25b7464fe3a80af2e4f10f25a5b4451d019 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Tue, 19 Nov 2024 14:28:53 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20button=20type=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20hover=20=EC=8B=9C=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/ui/button/Button.tsx | 12 +++++++----- .../frontend/src/pages/stock-detail/StockDetail.tsx | 5 +---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/components/ui/button/Button.tsx b/packages/frontend/src/components/ui/button/Button.tsx index 7000fb44..04915e29 100644 --- a/packages/frontend/src/components/ui/button/Button.tsx +++ b/packages/frontend/src/components/ui/button/Button.tsx @@ -3,17 +3,17 @@ import { cva, VariantProps } from 'class-variance-authority'; import { cn } from '@/utils/cn'; export const ButtonVariants = cva( - `display-bold12 border rounded shadow-black`, + `display-bold12 border rounded shadow-black py-1`, { variants: { backgroundColor: { - default: 'bg-white', + default: 'bg-white hover:bg-orange', gray: 'bg-gray', - orange: 'bg-orange', + orange: 'bg-orange hover:bg-white', }, textColor: { - default: 'text-orange', - white: 'text-white', + default: 'text-orange hover:text-white', + white: 'text-white hover:text-orange', }, size: { default: 'w-24', @@ -35,6 +35,7 @@ export interface ButtonProps } export const Button = ({ + type = 'button', backgroundColor, textColor, size, @@ -44,6 +45,7 @@ export const Button = ({ }: ButtonProps) => { return ( From df3e85135995f4574ba08e88f59f9b3b3759d3c9 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Tue, 19 Nov 2024 14:29:14 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20type=20import=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/pages/stocks/components/StockIndexCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx b/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx index 66ff74c7..f9ae9e55 100644 --- a/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx +++ b/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import { type ReactNode } from 'react'; import { cn } from '@/utils/cn'; interface StockIndexCardProps { From 5fbf6ed2f70b0fb50b67914f1880dd86fcbcd471 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Tue, 19 Nov 2024 14:29:48 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20feat:=20input=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ui/input/Input.tsx | 19 +++++++++++++++++++ .../frontend/src/components/ui/input/index.ts | 1 + 2 files changed, 20 insertions(+) create mode 100644 packages/frontend/src/components/ui/input/Input.tsx create mode 100644 packages/frontend/src/components/ui/input/index.ts diff --git a/packages/frontend/src/components/ui/input/Input.tsx b/packages/frontend/src/components/ui/input/Input.tsx new file mode 100644 index 00000000..dea815e4 --- /dev/null +++ b/packages/frontend/src/components/ui/input/Input.tsx @@ -0,0 +1,19 @@ +import { type InputHTMLAttributes } from 'react'; +import { cn } from '@/utils/cn'; + +interface InputProps extends InputHTMLAttributes { + className?: string; +} + +export const Input = ({ placeholder, className, ...props }: InputProps) => { + return ( + + ); +}; diff --git a/packages/frontend/src/components/ui/input/index.ts b/packages/frontend/src/components/ui/input/index.ts new file mode 100644 index 00000000..ba9fe7eb --- /dev/null +++ b/packages/frontend/src/components/ui/input/index.ts @@ -0,0 +1 @@ +export * from './Input'; From ef363c774ff7c946d63f8baca5e2b0a16a8b0ea6 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Tue, 19 Nov 2024 14:31:37 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20MenuList=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layouts/MenuList.tsx | 38 +++++++++++-------- .../src/components/layouts/Sidebar.tsx | 24 +++++++++--- packages/frontend/src/constants/menuItems.tsx | 27 +++++-------- packages/frontend/src/types/menu.ts | 8 ++++ 4 files changed, 59 insertions(+), 38 deletions(-) create mode 100644 packages/frontend/src/types/menu.ts diff --git a/packages/frontend/src/components/layouts/MenuList.tsx b/packages/frontend/src/components/layouts/MenuList.tsx index dc1940c2..7afebc1a 100644 --- a/packages/frontend/src/components/layouts/MenuList.tsx +++ b/packages/frontend/src/components/layouts/MenuList.tsx @@ -1,11 +1,12 @@ import { type ReactNode } from 'react'; import { useNavigate } from 'react-router-dom'; -import { type MenuItemData } from '@/constants/menuItems'; +import { type MenuSection } from '@/types/menu'; import { cn } from '@/utils/cn'; interface MenuListProps { - items: MenuItemData[]; + items: MenuSection[]; isHovered: boolean; + onItemClick?: (item: MenuSection) => void; } interface MenuItemProps { @@ -15,28 +16,33 @@ interface MenuItemProps { onClick?: () => void; } -export const MenuList = ({ items, isHovered }: MenuListProps) => { +export const MenuList = ({ items, isHovered, onItemClick }: MenuListProps) => { const navigate = useNavigate(); + const handleClick = (item: MenuSection) => { + if (item.path) { + navigate(item.path); + } + + onItemClick?.(item); + }; + return (
    - {items.map((menu) => { - const { id, icon, text, url } = menu; - return ( - url && navigate(url)} - /> - ); - })} + {items.map((item) => ( + handleClick(item)} + /> + ))}
); }; -const MenuItem = ({ icon, text, onClick, isHovered }: MenuItemProps) => { +const MenuItem = ({ icon, text, isHovered, onClick }: MenuItemProps) => { return (
  • + + {searchResult.map((word) => ( + // TODO: 추후 Link로 수정 +

    {word}

    + ))} + + ); +}; diff --git a/packages/frontend/src/components/layouts/search/index.ts b/packages/frontend/src/components/layouts/search/index.ts new file mode 100644 index 00000000..addd5330 --- /dev/null +++ b/packages/frontend/src/components/layouts/search/index.ts @@ -0,0 +1 @@ +export * from './Search'; From 9c22b07366f032883422fb78044683f15db9fc32 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Tue, 19 Nov 2024 14:33:29 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=94=EA=B9=A5=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=ED=96=88=EC=9D=84=20=EB=95=8C=20callback=20=EC=8B=A4=ED=96=89?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=BB=A4=EC=8A=A4=ED=85=80=ED=9B=85=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layouts/Sidebar.tsx | 55 +++++++++++-------- .../frontend/src/hooks/useOutsideClick.ts | 23 ++++++++ 2 files changed, 54 insertions(+), 24 deletions(-) create mode 100644 packages/frontend/src/hooks/useOutsideClick.ts diff --git a/packages/frontend/src/components/layouts/Sidebar.tsx b/packages/frontend/src/components/layouts/Sidebar.tsx index f57af1e6..bf4a5682 100644 --- a/packages/frontend/src/components/layouts/Sidebar.tsx +++ b/packages/frontend/src/components/layouts/Sidebar.tsx @@ -4,6 +4,7 @@ import logoTitle from '/logoTitle.png'; import { MenuList } from './MenuList'; import { Search } from './search'; import { BOTTOM_MENU_ITEMS, TOP_MENU_ITEMS } from '@/constants/menuItems'; +import { useOutsideClick } from '@/hooks/useOutsideClick'; import { type MenuSection } from '@/types/menu'; import { cn } from '@/utils/cn'; @@ -11,6 +12,12 @@ export const Sidebar = () => { const [isHovered, setIsHovered] = useState(false); const [showSearch, setShowSearch] = useState(false); + const ref = useOutsideClick(() => { + if (showSearch) { + setShowSearch(false); + } + }); + const handleMenuItemClick = (item: MenuSection) => { if (item.text === '검색') { setShowSearch((prev) => !prev); @@ -19,26 +26,26 @@ export const Sidebar = () => { return (
    - +
    + +
    { > {showSearch && }
    - + ); }; diff --git a/packages/frontend/src/hooks/useOutsideClick.ts b/packages/frontend/src/hooks/useOutsideClick.ts new file mode 100644 index 00000000..bd99fdcd --- /dev/null +++ b/packages/frontend/src/hooks/useOutsideClick.ts @@ -0,0 +1,23 @@ +import { useEffect, useRef } from 'react'; + +export const useOutsideClick = (callback: () => void) => { + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent | TouchEvent) => { + if (!ref.current?.contains(event.target as Node)) { + callback(); + } + }; + + document.addEventListener('mouseup', handleClickOutside); + document.addEventListener('touchend', handleClickOutside); + + return () => { + document.removeEventListener('mouseup', handleClickOutside); + document.removeEventListener('touchend', handleClickOutside); + }; + }, [callback]); + + return ref; +};