Feat(client): tooltip component 구현 (#262)

* refactor: Tooltip 컴포넌트를 TooltipCard로 변경

* feat:  Tooltip component 추가

* feat: Balloon 컴포넌트 추가 및 TooltipContent에 variant prop 추가

* feat: Tooltip 컴포넌트 삭제

* chore: 안쓰는 의존성 정리

* fix: ReactNode 타입 임포트 수정

* feat: 버튼에 type 속성 추가

Author: jjangminii

apps/client/src/pages/jobPins/JobPins.tsx

@@ -1,5 +1,38 @@
+import { Icon } from '@pinback/design-system/icons';
+import { Balloon } from '@shared/components/balloon/Balloon';
+
 const JobPins = () => {
-  return <div>관심 직무 핀 페이지</div>;
+  return (
+    <div>
+      {' '}
+      <Balloon variant="main" side="bottom">
+        <div className="text-lg font-semibold">치삐가 방금</div>
+
+        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
+      </Balloon>
+      <Balloon variant="gray" side="left" onClose={() => alert('닫힘')}>
+        <div className="text-lg font-semibold">치삐가 방금</div>
+
+        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
+      </Balloon>
+      <Balloon variant="gray" side="left">
+        <Icon name="ic_info" size={16} />
+        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
+      </Balloon>
+      <Balloon variant="main" side="bottom">
+        <div className="flex items-center gap-3">
+          {/* 캐릭터 이미지 */}
+          <Icon name="chippi_profile" size={40} />
+
+          {/* 텍스트 영역 */}
+          <div className="flex flex-col">
+            <div className="text-[18px] font-semibold">치삐가 방금</div>
+            <div className="text-[16px]">도토리 1개를 모았어요!</div>
+          </div>
+        </div>
+      </Balloon>
+    </div>
+  );
 };
 
 export default JobPins;

apps/client/src/pages/login/Login.tsx

@@ -35,6 +35,7 @@ const Login = () => {
           </p>
 
           <button
+            type="button"
             onClick={handleGoogleLogin}
             className="sub2-sb flex h-[5.2rem] w-[29.8rem] items-center justify-between gap-3 rounded-full border border-gray-100 bg-white px-[2rem]"
           >

apps/client/src/pages/myBookmark/MyBookmark.tsx

@@ -13,7 +13,7 @@ import {
   useDeleteRemindArticle,
   usePutArticleReadStatus,
 } from '@shared/apis/queries';
-import Tooltip from '@shared/components/tooltip/Tooltip';
+import TooltipCard from '@shared/components/tooltipCard/TooltipCard';
 import ArticlesLoadingBoundary from '@shared/components/articlesLoadingBoundary/ArticlesLoadingBoundary';
 import ArticlesErrorBoundary from '@shared/components/articlesErrorBoundary/ArticlesErrorBoundary';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -87,7 +87,7 @@ const MyBookmark = () => {
         <p className="head3 text-main500">{category || ''}</p>
       </div>
 
-      <Tooltip />
+      <TooltipCard />
 
       <Suspense fallback={<ArticlesLoadingBoundary />}>
         <ErrorBoundary FallbackComponent={ArticlesErrorBoundary}>

apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx

@@ -30,6 +30,7 @@ const SocialLoginStep = () => {
       </p>
 
       <button
+        type="button"
         onClick={handleGoogleLogin}
         className="sub2-sb flex h-[5.2rem] w-[22.7rem] items-center justify-between gap-3 rounded-full border border-gray-100 bg-white px-[2rem]"
       >

apps/client/src/pages/remind/Remind.tsx

@@ -22,7 +22,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import NoRemindArticles from './components/noRemindArticles/NoRemindArticles';
 import FetchCard from './components/fetchCard/FetchCard';
 import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
-import Tooltip from '@shared/components/tooltip/Tooltip';
+import TooltipCard from '@shared/components/tooltipCard/TooltipCard';
 import Footer from './components/footer/Footer';
 
 const Remind = () => {
@@ -138,7 +138,7 @@ const Remind = () => {
           isActive={activeBadge === 'read'}
         />
       </div>
-      <Tooltip />
+      <TooltipCard />
 
       {articlesToDisplay.length > 0 ? (
         <div

apps/client/src/shared/components/balloon/Balloon.tsx

@@ -0,0 +1,55 @@
+import { Icon } from '@pinback/design-system/icons';
+import { cn } from '@pinback/design-system/utils';
+import { ReactNode } from 'react';
+
+type BalloonVariant = 'gray' | 'main';
+
+interface BalloonProps {
+  variant?: BalloonVariant;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+export function Balloon({
+  variant = 'gray',
+  side = 'bottom',
+  onClose,
+  children,
+}: BalloonProps) {
+  const variantStyle = {
+    gray: 'bg-gray900 text-white',
+    main: 'bg-main500 text-white',
+  };
+
+  return (
+    <div className="relative inline-block">
+      <div
+        className={cn(
+          'relative flex items-start gap-3 rounded-[4px] p-[1.2rem]',
+          variantStyle[variant]
+        )}
+      >
+        <div className="flex-1">{children}</div>
+
+        {onClose && (
+          <button type="button" onClick={onClose}>
+            <Icon name="ic_close" size={16} />
+          </button>
+        )}
+      </div>
+
+      {/* 꼬리 */}
+      <div
+        className={cn(
+          'absolute h-[12px] w-[12px] rotate-45',
+          variantStyle[variant],
+          side === 'bottom' && '-bottom-1 left-1/2 -translate-x-1/2',
+          side === 'top' && '-top-1 left-1/2 -translate-x-1/2',
+          side === 'left' && '-left-1 top-1/2 -translate-y-1/2',
+          side === 'right' && '-right-1 top-1/2 -translate-y-1/2'
+        )}
+      />
+    </div>
+  );
+}

…c/shared/components/tooltip/InfoCard.tsx …ared/components/tooltipCard/InfoCard.tsxapps/client/src/shared/components/tooltip/InfoCard.tsx renamed to apps/client/src/shared/components/tooltipCard/InfoCard.tsx apps/client/src/shared/components/tooltip/InfoCard.tsx renamed to apps/client/src/shared/components/tooltipCard/InfoCard.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@pinback/design-system/icons';
 import InfoCard from './InfoCard';
 
-export default function Tooltip() {
+export default function TooltipCard() {
   return (
     <div className="mt-[0.8rem] flex items-center">
       <p className="body3-r text-font-gray-3">