feat: 플로팅 버튼 개발

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: <SubscriptionModalContent />,
-      isVisibleBtn: false
+      isVisibleBtn: false,
     });
   };
 
@@ -226,7 +226,8 @@ export default function HomePage() {
               <Button
                 css={css`
                   width: 11.4rem !important;
-                  height: 4.5rem;
+                  height: 4.5rem;import FloatingWidget from '../../components/app/home/floating/FloatingWidget';
+
 
                   ${DESIGN_SYSTEM_COLOR.GRAY_50}
                   font-size: 1.6rem;
@@ -505,6 +506,7 @@ export default function HomePage() {
             </div>
           </div>
         </div>
+        <FloatingWidget />
       </section>
 
       {/* 하단 이미지 */}

src/components/app/home/floating/AIChartAnalyze.tsx

@@ -0,0 +1,3 @@
+export default function AIChartAnalyze() {
+  return <div>AIChartAnalyze</div>;
+}

src/components/app/home/floating/AIChartRecommendation.tsx

@@ -0,0 +1,3 @@
+export default function AIChartRecommendation() {
+  return <div>AIChartRecommendation</div>;
+}

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 (
+    <button onClick={onClick}>
+      {isOpen ? <IconFloatingClose /> : <IconFloatingOpen />}
+    </button>
+  );
+}

src/components/app/home/floating/FloatingPanel.tsx

@@ -0,0 +1,71 @@
+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<keyof typeof TabKey>(TabKey.CHART_ANALYZE);
+
+  const tabItems = [
+    {
+      key: TabKey.CHART_ANALYZE,
+      label: "AI 차트해석",
+      activeIcon: <IconAIChartAnalyzeActive />,
+      inactiveIcon: <IconAIChartAnalyzeInactive />,
+      content: <AIChartAnalyze />,
+    },
+    {
+      key: TabKey.CHART_RECOMMENDATION,
+      label: "AI 추천판단",
+      activeIcon: <IconAIChartRecommendActive />,
+      inactiveIcon: <IconAIChartRecommendInactive />,
+      content: <AIChartRecommendation />,
+    },
+    {
+      key: TabKey.FUNCTION_HELP,
+      label: "기능 도움말",
+      activeIcon: <IconFunctionHelpActive />,
+      inactiveIcon: <IconFunctionHelpInactive />,
+      content: <FunctionHelp />,
+    },
+  ];
+
+  return (
+    <FloatingPanelLayout>
+      <Tabs>
+        <Tabs.List>
+          {tabItems.map(({ key, label, activeIcon, inactiveIcon }) => (
+            <Tabs.Trigger
+              key={key}
+              value={key}
+              activeIcon={activeIcon}
+              inactiveIcon={inactiveIcon}
+            >
+              {label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        <Tabs.ContentWrapper>
+          {tabItems.map(({ key, content }) => (
+            <Tabs.Content key={key} value={key}>
+              {content}
+            </Tabs.Content>
+          ))}
+        </Tabs.ContentWrapper>
+      </Tabs>
+    </FloatingPanelLayout>
+  );
+}

src/components/app/home/floating/FloatingPanelLayout.tsx

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from "react";
+import { css } from "@emotion/react";
+
+export default function FloatingPanelLayout({ children }: PropsWithChildren) {
+  return (
+    <div css={containerStyle}>
+      <div css={panelStyle}>
+        {children}
+        <div css={arrowStyle} />
+      </div>
+    </div>
+  );
+}
+
+const containerStyle = css`
+  position: absolute;
+  bottom: 9rem;
+  right: 1rem;
+`;
+
+const panelStyle = css`
+  width: 390px;
+  height: calc(100dvh - 450px);
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 24px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+  position: relative;
+`;
+
+const arrowStyle = css`
+  position: absolute;
+  right: 2rem;
+  bottom: -0.5rem;
+  width: 2rem;
+  height: 2rem;
+  background-color: white;
+  transform: rotate(45deg);
+  border-bottom-right-radius: 2px;
+`;

src/components/app/home/floating/FloatingWidgetLayout.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, forwardRef } from "react";
+import { css } from "@emotion/react";
+
+interface FloatingWidgetLayoutProps extends PropsWithChildren {
+  containerRef: React.RefObject<HTMLDivElement>;
+}
+
+const FloatingWidgetLayout = forwardRef<
+  HTMLDivElement,
+  FloatingWidgetLayoutProps
+>(({ children, containerRef }) => {
+  return (
+    <div css={wrapperStyle}>
+      <div ref={containerRef} css={containerStyle}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+const wrapperStyle = css`
+  position: fixed;
+  bottom: 5rem;
+  right: 8rem;
+  button {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+  }
+`;
+
+const containerStyle = css`
+  position: relative;
+`;
+
+FloatingWidgetLayout.displayName = "FloatingWidgetLayout";
+
+export default FloatingWidgetLayout;

src/components/app/home/floating/FunctionHelp.tsx

@@ -0,0 +1,3 @@
+export default function FunctionHelp() {
+  return <div>FunctionHelp</div>;
+}

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<HTMLDivElement>(null);
+  const {
+    value: isOpen,
+    toggleValue: toggleOpen,
+    setValue: setIsOpen,
+  } = useToggle(false);
+
+  useClickOutside(floatingRef, () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  });
+
+  return (
+    <FloatingWidgetLayout containerRef={floatingRef}>
+      {isOpen && <FloatingPanel />}
+      <FloatingButton isOpen={isOpen} onClick={toggleOpen} />
+    </FloatingWidgetLayout>
+  );
+}

src/hooks/useClickOutside.tsx

@@ -0,0 +1,23 @@
+import { RefObject, useEffect } from "react";
+
+export default function useClickOutside(
+  ref: RefObject<HTMLElement>,
+  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]);
+}