Feat(client): 리마인드, 북마크 페이지 tooltip 구현 (#174)

* feat: tooltip 구현

* feat: info card

* feat: info card  연결

* feat: 페이지에서 tooltip import

* chore: 오타 수정

Author: jjangminii

apps/client/src/assets/card_img.svg

@@ -22,6 +22,7 @@ import {
 import NoUnreadArticles from '@pages/myBookmark/components/noUnreadArticles/NoUnreadArticles';
 import FetchCard from '@pages/myBookmark/components/fetchCard/FetchCard';
 import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
+import Tooltip from '@shared/components/tooltip/Tooltip';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -175,6 +176,7 @@ const MyBookmark = () => {
           isActive={activeBadge === 'notRead'}
         />
       </div>
+      <Tooltip />
 
       {articlesToDisplay.length > 0 ? (
         <div

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

@@ -18,6 +18,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';
 
 const Remind = () => {
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -129,6 +130,7 @@ const Remind = () => {
           isActive={activeBadge === 'read'}
         />
       </div>
+      <Tooltip />
 
       {articlesToDisplay.length > 0 ? (
         <div

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

@@ -0,0 +1,20 @@
+import CardImg from '@assets/card_img.svg';
+export default function InfoCard() {
+  return (
+    <div className="common-shadow bg-white-bg w-[24.6rem] rounded-[12px] px-[1.6rem] py-[2.4rem]">
+      <p className="sub2-sb text-font-black-1 mb-[1.6rem] text-center">
+        치삐가 고치고 있어요 <span aria-hidden>🚧</span>
+      </p>
+
+      <div className="mb-[1.6rem] flex justify-center">
+        <img src={CardImg} alt="메타 정보가 없을 때 표시되는 안내 이미지" />
+      </div>
+
+      <p className="caption2-m text-font-gray-3">
+        현재 제목과 이미지 자동 불러오기 기능은 개선 중이에요. 저장한 콘텐츠를
+        쉽게 구분하려면, 메모에 직접 제목이나 키워드를 기록해 두면 더 편리해요.
+        <span aria-hidden>📝</span>
+      </p>
+    </div>
+  );
+}

apps/client/src/shared/components/tooltip/InfoCard.tsx

@@ -0,0 +1,29 @@
+import { Icon } from '@pinback/design-system/icons';
+import InfoCard from './InfoCard';
+
+export default function Tooltip() {
+  return (
+    <div className="mt-[0.8rem] flex items-center">
+      <p className="body3-r text-font-gray-3">
+        일부 콘텐츠는 제목·이미지가 불러와지지 않을 수 있어요.
+      </p>
+
+      <div className="relative inline-flex items-center">
+        <button
+          type="button"
+          aria-describedby="info-card"
+          className="peer rounded p-[0.4rem]"
+        >
+          <Icon name="ic_info" size={16} />
+        </button>
+
+        <div
+          id="info-card"
+          className="pointer-events-none absolute left-0 top-[calc(100%+8px)] z-[100] opacity-0 transition-opacity duration-150 peer-hover:opacity-100 peer-focus-visible:opacity-100"
+        >
+          <InfoCard />
+        </div>
+      </div>
+    </div>
+  );
+}