feat: 구글폼 버튼에 툴팁 추가 및 레이아웃 수정

Author: grimza99

src/features/google-form/ui/GoogleFormButton.tsx

@@ -1,20 +1,16 @@
-import { Button } from '@/components/ui/button';
-
 import GoogleForm from './../../../../public/icons/google-form.png';
 import Image from 'next/image';
 export const GoogleFormBtn = () => {
   return (
-    <>
-      <Button
-        onClick={() =>
-          window.open(
-            'https://docs.google.com/forms/d/e/1FAIpQLSfRoquj0yyevkgalFsJwKl4UcvZ3FRhuRyK1j8edJLS7S4aFw/viewform?usp=header'
-          )
-        }
-        className="bg-[#214d35] hover:bg-[#276e48] text-white rounded-full w-14 h-14 p-0 shadow-lg hover:shadow-xl transition-all duration-200"
-      >
-        <Image src={GoogleForm} alt="google-form" width={24} height={24} />
-      </Button>
-    </>
+    <div
+      onClick={() =>
+        window.open(
+          'https://docs.google.com/forms/d/e/1FAIpQLSfRoquj0yyevkgalFsJwKl4UcvZ3FRhuRyK1j8edJLS7S4aFw/viewform?usp=header'
+        )
+      }
+      className="bg-primary flex justify-center items-center hover:bg-hover-primary rounded-full w-14 h-14 p-0 shadow-lg hover:shadow-xl transition-all duration-200"
+    >
+      <Image src={GoogleForm} alt="google-form" width={24} height={24} />
+    </div>
   );
 };

src/widgets/globalFloatingWidget/ui/index.tsx

@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation';
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
 import { GoogleFormBtn } from '@/features/google-form/ui/GoogleFormButton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 export function GlobalFloatingWidget() {
   const problemId = usePathname().split('/')[2];
   const [isLogged, setIsLogged] = useState(false);
@@ -22,13 +23,22 @@ export function GlobalFloatingWidget() {
 
   if (problemId) return null;
 
+  const tooltipContent = '오류 사항, 제안 사항을 구글폼에 남겨주세요!';
   return (
-    <div className="fixed top-[calc(100vh-15%)] left-[calc(100vw-5%)] flex flex-col gap-2">
+    <div className="fixed bottom-[calc(100vh-95%)] left-[calc(100vw-5%)] flex flex-col gap-2">
       {isLogged && <ChatDialogOpenButton />}
       {isLogged && (
         <GameModalButton hasCharacter={characterData?.data?.result?.isCharacterExist || false} />
       )}
-      <GoogleFormBtn />
+
+      <Tooltip>
+        <TooltipTrigger>
+          <GoogleFormBtn />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltipContent}</p>
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }