From d8b34fec9a82ab7fa98cee062f98c30d43fa7b21 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:24:29 +0900 Subject: [PATCH 01/16] =?UTF-8?q?chore:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20SV?= =?UTF-8?q?G=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80=20(?= =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EB=B0=8F=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94=20=EC=83=81=ED=83=9C=20=ED=8F=AC=ED=95=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/IconAIChartAnalyzeActive.svg | 5 +++++ src/assets/IconAIChartAnalyzeInactive.svg | 5 +++++ src/assets/IconAIChartRecommendActive.svg | 5 +++++ src/assets/IconAIChartRecommendInactive.svg | 5 +++++ src/assets/IconFloatingClose.svg | 10 ++++++++++ src/assets/IconFloatingOpen.svg | 20 ++++++++++++++++++++ src/assets/IconFunctionHelpActive.svg | 4 ++++ src/assets/IconFunctionHelpInactive.svg | 4 ++++ 8 files changed, 58 insertions(+) create mode 100644 src/assets/IconAIChartAnalyzeActive.svg create mode 100644 src/assets/IconAIChartAnalyzeInactive.svg create mode 100644 src/assets/IconAIChartRecommendActive.svg create mode 100644 src/assets/IconAIChartRecommendInactive.svg create mode 100644 src/assets/IconFloatingClose.svg create mode 100644 src/assets/IconFloatingOpen.svg create mode 100644 src/assets/IconFunctionHelpActive.svg create mode 100644 src/assets/IconFunctionHelpInactive.svg diff --git a/src/assets/IconAIChartAnalyzeActive.svg b/src/assets/IconAIChartAnalyzeActive.svg new file mode 100644 index 0000000..cc69be6 --- /dev/null +++ b/src/assets/IconAIChartAnalyzeActive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/IconAIChartAnalyzeInactive.svg b/src/assets/IconAIChartAnalyzeInactive.svg new file mode 100644 index 0000000..9393f36 --- /dev/null +++ b/src/assets/IconAIChartAnalyzeInactive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/IconAIChartRecommendActive.svg b/src/assets/IconAIChartRecommendActive.svg new file mode 100644 index 0000000..aa2272d --- /dev/null +++ b/src/assets/IconAIChartRecommendActive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/IconAIChartRecommendInactive.svg b/src/assets/IconAIChartRecommendInactive.svg new file mode 100644 index 0000000..4b1fdfc --- /dev/null +++ b/src/assets/IconAIChartRecommendInactive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/IconFloatingClose.svg b/src/assets/IconFloatingClose.svg new file mode 100644 index 0000000..92a502f --- /dev/null +++ b/src/assets/IconFloatingClose.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/IconFloatingOpen.svg b/src/assets/IconFloatingOpen.svg new file mode 100644 index 0000000..3480377 --- /dev/null +++ b/src/assets/IconFloatingOpen.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/IconFunctionHelpActive.svg b/src/assets/IconFunctionHelpActive.svg new file mode 100644 index 0000000..832aafc --- /dev/null +++ b/src/assets/IconFunctionHelpActive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/IconFunctionHelpInactive.svg b/src/assets/IconFunctionHelpInactive.svg new file mode 100644 index 0000000..e47dd50 --- /dev/null +++ b/src/assets/IconFunctionHelpInactive.svg @@ -0,0 +1,4 @@ + + + + From 89211d1b7ef4e69a09aa1d6daa9e12b9e5f5907c Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:25:12 +0900 Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=EC=99=B8=EB=B6=80=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EA=B0=90=EC=A7=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useClickOutside.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/hooks/useClickOutside.tsx diff --git a/src/hooks/useClickOutside.tsx b/src/hooks/useClickOutside.tsx new file mode 100644 index 0000000..3ca1828 --- /dev/null +++ b/src/hooks/useClickOutside.tsx @@ -0,0 +1,23 @@ +import { RefObject, useEffect } from "react"; + +export default function useClickOutside( + ref: RefObject, + handler: () => void, +) { + useEffect(() => { + const listener = (event: MouseEvent | TouchEvent) => { + if (!ref.current || ref.current.contains(event.target as Node)) { + return; + } + handler(); + }; + + document.addEventListener("mousedown", listener); + document.addEventListener("touchstart", listener); + + return () => { + document.removeEventListener("mousedown", listener); + document.removeEventListener("touchstart", listener); + }; + }, [ref, handler]); +} From d5932585ad872bfa2463853ca6b4337c8607233b Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:25:23 +0900 Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=ED=86=A0=EA=B8=80=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useToggle.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/hooks/useToggle.ts diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts new file mode 100644 index 0000000..15c84b4 --- /dev/null +++ b/src/hooks/useToggle.ts @@ -0,0 +1,13 @@ +import { useState } from "react"; + +export default function useToggle(initialValue: boolean) { + const [value, setValue] = useState(initialValue); + + const toggleValue = () => setValue((prev) => !prev); + + return { + value, + toggleValue, + setValue, + }; +} From db5605e4d769155227eb992bbe7f1387cd94e493 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:25:33 +0900 Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=ED=83=AD=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=9B=85=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?= =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20=EC=84=9C=EB=B8=8C=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=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/hooks/useTab.tsx | 134 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 src/hooks/useTab.tsx diff --git a/src/hooks/useTab.tsx b/src/hooks/useTab.tsx new file mode 100644 index 0000000..4537e66 --- /dev/null +++ b/src/hooks/useTab.tsx @@ -0,0 +1,134 @@ +/** @jsxImportSource @emotion/react */ +import { ReactElement, ReactNode, useState } from "react"; +import { css } from "@emotion/react"; + +interface TabsProps { + direction: "row" | "column"; + children: ReactNode; + className?: string; +} + +interface TabsListProps { + direction: "row" | "column"; + children: ReactNode; + className?: string; +} + +interface TabsTriggerProps { + value: T; + children: ReactNode; + className?: string; + activeIcon?: ReactElement; + inactiveIcon?: ReactElement; +} + +interface TabsContentWrapperProps { + children: ReactNode; +} + +interface TabsContentProps { + value: T; + children: ReactNode; +} + +export function useTab(initialTab: T) { + const [activeTab, setActiveTab] = useState(initialTab); + + function Tabs({ direction, children, className }: TabsProps) { + return ( +
+ {children} +
+ ); + } + + function List({ direction, children, className }: TabsListProps) { + return ( +
+ {children} +
+ ); + } + + function Trigger({ + value, + children, + className, + activeIcon, + inactiveIcon, + }: TabsTriggerProps) { + const isActive = activeTab === value; + + return ( + + ); + } + + function ContentWrapper({ children }: TabsContentWrapperProps) { + return ( +
+ {children} +
+ ); + } + + function Content({ value, children }: TabsContentProps) { + if (activeTab !== value) return null; + return <>{children}; + } + + Tabs.List = List; + Tabs.Trigger = Trigger; + Tabs.Content = Content; + Tabs.ContentWrapper = ContentWrapper; + + return { + Tabs, + }; +} From b29b7f5078f400292f8a497a0d6b4f70e6846593 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:47:11 +0900 Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EB=B0=8F=20=EC=9C=84=EC=A0=AF=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=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 --- .../app/home/floating/FloatingPanelLayout.tsx | 43 +++++++++++++++++++ .../home/floating/FloatingWidgetLayout.tsx | 42 ++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 src/components/app/home/floating/FloatingPanelLayout.tsx create mode 100644 src/components/app/home/floating/FloatingWidgetLayout.tsx diff --git a/src/components/app/home/floating/FloatingPanelLayout.tsx b/src/components/app/home/floating/FloatingPanelLayout.tsx new file mode 100644 index 0000000..1daa302 --- /dev/null +++ b/src/components/app/home/floating/FloatingPanelLayout.tsx @@ -0,0 +1,43 @@ +/** @jsxImportSource @emotion/react */ +import { PropsWithChildren } from "react"; +import { css } from "@emotion/react"; + +export default function FloatingPanelLayout({ children }: PropsWithChildren) { + return ( +
+
+ {children} +
+
+
+ ); +} diff --git a/src/components/app/home/floating/FloatingWidgetLayout.tsx b/src/components/app/home/floating/FloatingWidgetLayout.tsx new file mode 100644 index 0000000..227ec94 --- /dev/null +++ b/src/components/app/home/floating/FloatingWidgetLayout.tsx @@ -0,0 +1,42 @@ +/** @jsxImportSource @emotion/react */ +import { PropsWithChildren, forwardRef } from "react"; +import { css } from "@emotion/react"; + +interface FloatingWidgetLayoutProps extends PropsWithChildren { + containerRef: React.RefObject; +} + +const FloatingWidgetLayout = forwardRef< + HTMLDivElement, + FloatingWidgetLayoutProps +>(({ children, containerRef }) => { + return ( +
+
+ {children} +
+
+ ); +}); + +FloatingWidgetLayout.displayName = "FloatingWidgetLayout"; + +export default FloatingWidgetLayout; From e4a4c48fd322ed71dab2b6d931eb72e2250bf9f9 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:47:31 +0900 Subject: [PATCH 06/16] =?UTF-8?q?feat:=20AI=20=EC=B0=A8=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=84=EC=84=9D=20=EB=B0=8F=20=EC=B6=94=EC=B2=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=99=80=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EB=8F=84=EC=9B=80=EB=A7=90=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=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/app/home/floating/AIChartAnalyze.tsx | 3 +++ src/components/app/home/floating/AIChartRecommendation.tsx | 3 +++ src/components/app/home/floating/FunctionHelp.tsx | 3 +++ 3 files changed, 9 insertions(+) create mode 100644 src/components/app/home/floating/AIChartAnalyze.tsx create mode 100644 src/components/app/home/floating/AIChartRecommendation.tsx create mode 100644 src/components/app/home/floating/FunctionHelp.tsx diff --git a/src/components/app/home/floating/AIChartAnalyze.tsx b/src/components/app/home/floating/AIChartAnalyze.tsx new file mode 100644 index 0000000..9003ff6 --- /dev/null +++ b/src/components/app/home/floating/AIChartAnalyze.tsx @@ -0,0 +1,3 @@ +export default function AIChartAnalyze() { + return
AIChartAnalyze
; +} diff --git a/src/components/app/home/floating/AIChartRecommendation.tsx b/src/components/app/home/floating/AIChartRecommendation.tsx new file mode 100644 index 0000000..9654096 --- /dev/null +++ b/src/components/app/home/floating/AIChartRecommendation.tsx @@ -0,0 +1,3 @@ +export default function AIChartRecommendation() { + return
AIChartRecommendation
; +} diff --git a/src/components/app/home/floating/FunctionHelp.tsx b/src/components/app/home/floating/FunctionHelp.tsx new file mode 100644 index 0000000..7f15828 --- /dev/null +++ b/src/components/app/home/floating/FunctionHelp.tsx @@ -0,0 +1,3 @@ +export default function FunctionHelp() { + return
FunctionHelp
; +} From 754e11b80d21fc05327177aab5b18defc41d152d Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:47:53 +0900 Subject: [PATCH 07/16] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- .../app/home/floating/FloatingButton.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/app/home/floating/FloatingButton.tsx diff --git a/src/components/app/home/floating/FloatingButton.tsx b/src/components/app/home/floating/FloatingButton.tsx new file mode 100644 index 0000000..a6d58f4 --- /dev/null +++ b/src/components/app/home/floating/FloatingButton.tsx @@ -0,0 +1,18 @@ +import IconFloatingOpen from "@/assets/IconFloatingOpen.svg?react"; +import IconFloatingClose from "@/assets/IconFloatingClose.svg?react"; + +interface FloatingButtonProps { + isOpen: boolean; + onClick: () => void; +} + +export default function FloatingButton({ + isOpen, + onClick, +}: FloatingButtonProps) { + return ( + + ); +} From a18e8dfbe1d9f9f2a3f89b89ee5ef4452d17383d Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:47:59 +0900 Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=ED=83=AD=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/home/floating/FloatingPanel.tsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/components/app/home/floating/FloatingPanel.tsx diff --git a/src/components/app/home/floating/FloatingPanel.tsx b/src/components/app/home/floating/FloatingPanel.tsx new file mode 100644 index 0000000..b9fd4de --- /dev/null +++ b/src/components/app/home/floating/FloatingPanel.tsx @@ -0,0 +1,62 @@ +import IconAIChartAnalyzeInactive from "@/assets/IconAIChartAnalyzeInactive.svg?react"; +import IconAIChartAnalyzeActive from "@/assets/IconAIChartAnalyzeActive.svg?react"; +import IconAIChartRecommendInactive from "@/assets/IconAIChartRecommendInactive.svg?react"; +import IconAIChartRecommendActive from "@/assets/IconAIChartRecommendActive.svg?react"; +import IconFunctionHelpInactive from "@/assets/IconFunctionHelpInactive.svg?react"; +import IconFunctionHelpActive from "@/assets/IconFunctionHelpActive.svg?react"; +import FloatingPanelLayout from "./FloatingPanelLayout"; +import { useTab } from "@/hooks/useTab"; +import AIChartAnalyze from "./AIChartAnalyze"; +import AIChartRecommendation from "./AIChartRecommendation"; +import FunctionHelp from "./FunctionHelp"; + +export default function FloatingPanel() { + const TabKey = { + CHART_ANALYZE: "CHART_ANALYZE", + CHART_RECOMMENDATION: "CHART_RECOMMENDATION", + FUNCTION_HELP: "FUNCTION_HELP", + } as const; + + const { Tabs } = useTab(TabKey.CHART_ANALYZE); + + return ( + + + + } + inactiveIcon={} + > + AI 차트해석 + + } + inactiveIcon={} + > + AI 추천판단 + + } + inactiveIcon={} + > + 기능 도움말 + + + + + + + + + + + + + + + + ); +} From 5063936f63d61e5fed559fbca6d9de32c5d23ae9 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:48:14 +0900 Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=EC=9C=84=EC=A0=AF=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- .../app/home/floating/floatingWidget.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/app/home/floating/floatingWidget.tsx diff --git a/src/components/app/home/floating/floatingWidget.tsx b/src/components/app/home/floating/floatingWidget.tsx new file mode 100644 index 0000000..6e029c8 --- /dev/null +++ b/src/components/app/home/floating/floatingWidget.tsx @@ -0,0 +1,28 @@ +import { useRef } from "react"; +import useToggle from "@/hooks/useToggle"; +import useClickOutside from "@/hooks/useClickOutside"; +import FloatingWidgetLayout from "./FloatingWidgetLayout"; +import FloatingPanel from "./FloatingPanel"; +import FloatingButton from "./FloatingButton"; + +export default function FloatingWidget() { + const floatingRef = useRef(null); + const { + value: isOpen, + toggleValue: toggleOpen, + setValue: setIsOpen, + } = useToggle(false); + + useClickOutside(floatingRef, () => { + if (isOpen) { + setIsOpen(false); + } + }); + + return ( + + {isOpen && } + + + ); +} From f5e7c4ef10986fba8f7e751d47f96d2d4e3e15cf Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 20:48:24 +0900 Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=ED=99=88=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=ED=94=8C=EB=A1=9C=ED=8C=85=20=EC=9C=84?= =?UTF-8?q?=EC=A0=AF=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- src/app/home/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/home/index.tsx b/src/app/home/index.tsx index 9c7aa4f..372506d 100644 --- a/src/app/home/index.tsx +++ b/src/app/home/index.tsx @@ -27,7 +27,7 @@ import { useModal } from "@/hooks/useModal.ts"; import { useAtom } from "jotai"; import { loginState } from "@/store/user"; import { SubscriptionModalContent } from "@/components/common/modal/SubscriptionModalContent"; - +import FloatingWidget from "@/components/app/home/floating/floatingWidget"; type CoinInfoType = { [coin in "BTC" | "ETH" | "XRP"]: { @@ -112,14 +112,14 @@ export default function HomePage() { } }; - /** + /** * @description 구독버튼 클릭시 flowbit서비스에 대해 주기적으로 구독할 수 있는 함수입니다. */ - const openSubscriptionModal = () => { + const openSubscriptionModal = () => { open({ title: "구독 설정", content: , - isVisibleBtn: false + isVisibleBtn: false, }); }; @@ -505,6 +505,7 @@ export default function HomePage() {
+ {/* 하단 이미지 */} From ca2f1ac9f3db247d36d2a7fc602f6b3a043188fe Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 22:46:18 +0900 Subject: [PATCH 11/16] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/home/floating/FloatingPanelLayout.tsx | 12 +++++------- .../app/home/floating/FloatingWidgetLayout.tsx | 1 - 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/app/home/floating/FloatingPanelLayout.tsx b/src/components/app/home/floating/FloatingPanelLayout.tsx index 1daa302..a075a33 100644 --- a/src/components/app/home/floating/FloatingPanelLayout.tsx +++ b/src/components/app/home/floating/FloatingPanelLayout.tsx @@ -1,4 +1,3 @@ -/** @jsxImportSource @emotion/react */ import { PropsWithChildren } from "react"; import { css } from "@emotion/react"; @@ -7,8 +6,8 @@ export default function FloatingPanelLayout({ children }: PropsWithChildren) {
diff --git a/src/components/app/home/floating/FloatingWidgetLayout.tsx b/src/components/app/home/floating/FloatingWidgetLayout.tsx index 227ec94..6b9fbea 100644 --- a/src/components/app/home/floating/FloatingWidgetLayout.tsx +++ b/src/components/app/home/floating/FloatingWidgetLayout.tsx @@ -1,4 +1,3 @@ -/** @jsxImportSource @emotion/react */ import { PropsWithChildren, forwardRef } from "react"; import { css } from "@emotion/react"; From f47bbce735d165d57436884770ca7e1ead1bcca4 Mon Sep 17 00:00:00 2001 From: Cllaude99 Date: Wed, 16 Apr 2025 22:54:01 +0900 Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=ED=83=AD=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=B0=A9=ED=96=A5=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/home/floating/FloatingPanel.tsx | 4 +- src/hooks/useTab.tsx | 51 ++++++++----------- 2 files changed, 22 insertions(+), 33 deletions(-) diff --git a/src/components/app/home/floating/FloatingPanel.tsx b/src/components/app/home/floating/FloatingPanel.tsx index b9fd4de..8aa2cbc 100644 --- a/src/components/app/home/floating/FloatingPanel.tsx +++ b/src/components/app/home/floating/FloatingPanel.tsx @@ -21,8 +21,8 @@ export default function FloatingPanel() { return ( - - + + } diff --git a/src/hooks/useTab.tsx b/src/hooks/useTab.tsx index 4537e66..883c50a 100644 --- a/src/hooks/useTab.tsx +++ b/src/hooks/useTab.tsx @@ -1,23 +1,17 @@ -/** @jsxImportSource @emotion/react */ import { ReactElement, ReactNode, useState } from "react"; import { css } from "@emotion/react"; interface TabsProps { - direction: "row" | "column"; children: ReactNode; - className?: string; } interface TabsListProps { - direction: "row" | "column"; children: ReactNode; - className?: string; } interface TabsTriggerProps { value: T; children: ReactNode; - className?: string; activeIcon?: ReactElement; inactiveIcon?: ReactElement; } @@ -34,14 +28,13 @@ interface TabsContentProps { export function useTab(initialTab: T) { const [activeTab, setActiveTab] = useState(initialTab); - function Tabs({ direction, children, className }: TabsProps) { + function Tabs({ children }: TabsProps) { return (
{children} @@ -49,18 +42,15 @@ export function useTab(initialTab: T) { ); } - function List({ direction, children, className }: TabsListProps) { + function List({ children }: TabsListProps) { return (
{children} @@ -71,7 +61,6 @@ export function useTab(initialTab: T) { function Trigger({ value, children, - className, activeIcon, inactiveIcon, }: TabsTriggerProps) { @@ -79,24 +68,24 @@ export function useTab(initialTab: T) { return (