feat : TitleSection 커스텀하여 구현

dnd-side-project · Aug 23, 2023 · dc724f3 · dc724f3
1 parent 34c9da6
commit dc724f3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/public/icons/close_white.svg b/public/icons/close_white.svg
diff --git a/src/app/(Main)/talk/components/TitleSection.tsx b/src/app/(Main)/talk/components/TitleSection.tsx
@@ -6,24 +6,44 @@ import { Tooltip } from 'react-tooltip';
 import { Spacing } from '@/components/Spacing';
 
 export default function TitleSection() {
-  const [tooltipOpened, setTooltipOpened] = useState<boolean>(false);
-  console.log(tooltipOpened);
-
+  const [isOpen, setIsOpen] = useState<boolean>(true);
   return (
     <section className="flex flex-col items-center">
       <div className="flex items-center">
         <h3 className="text-main-violet">뽑은 제시어</h3>
         <a
           data-tooltip-id="my-tooltip"
-          data-tooltip-content={`제시어에 맞춰 포즈를 취해 보세요!\n독특한 나만의 포즈가 완성된답니다.`}
           data-tooltip-place="top"
-          onMouseEnter={() => setTooltipOpened(true)}
           style={{ cursor: 'pointer' }}
+          onClick={() => setIsOpen(!isOpen)}
         >
           <Image src="/icons/info.svg" width={24} height={24} alt="info" />
         </a>
       </div>
-      <Tooltip id="my-tooltip" style={{ fontSize: '1rem', fontWeight: 400 }} />
+      <Tooltip
+        id="my-tooltip"
+        style={{ fontSize: '1rem', fontWeight: 400 }}
+        closeOnEsc
+        openOnClick
+        isOpen={isOpen}
+        render={() => (
+          <div className="flex ">
+            <div>
+              <p>제시어에 맞춰 포즈를 취해 보세요!</p>
+              <p>독특한 나만의 포즈가 완성된답니다.</p>
+            </div>
+            <Spacing size={8} direction="horizontal" />
+            <Image
+              src="/icons/close_white.svg"
+              width={20}
+              height={20}
+              alt="close"
+              className="mb-auto"
+            />
+          </div>
+        )}
+        clickable
+      />
       <Spacing size={8} />
     </section>
   );