[NW-36] 나무 설명 툴팁 추가, 제작 정보 추가

components/compositions/header/developer-info/index.tsx

@@ -0,0 +1,130 @@
+import Drawer from '@/components/ui/drawer'
+import React, { useEffect, useRef, useState } from 'react'
+import WriteListCard from '@/components/compositions/header/write-list/wirte-list-card'
+import useFilter, { Filter } from '@/hooks/use-filter'
+import { motion } from 'framer-motion'
+import { useIntersectionObserver } from '@/hooks/use-observer'
+import Ch from '@/components/svgs/mimoticons/ch'
+import Yk from '@/components/svgs/mimoticons/yk'
+import Yh from '@/components/svgs/mimoticons/yh'
+import Es from '@/components/svgs/mimoticons/es'
+import Aa from '@/components/svgs/mimoticons/aa'
+import Logo from '@/components/svgs/logo'
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+}
+
+const DeveloperInfo = () => {
+  const { selectedFilter } = useFilter()
+  const [openAlert, setOpenAlert] = useState(false)
+  const [length, setLength] = useState(10)
+  const { ref } = useIntersectionObserver<HTMLDivElement>({
+    hasNextPage: true,
+    fetchNextPage: () => setLength((prev) => prev + 10),
+  })
+
+  return (
+    <Drawer
+      header={{
+        center: <p className="text-body1-bold">제작 정보</p>,
+        options: {
+          onBackClick() {
+            setOpenAlert(false)
+          },
+          showRight: false,
+        },
+      }}
+      open={openAlert}
+      onChangeOpen={setOpenAlert}
+      trigger={
+        <p className="py-[14px] text-body1-bold text-text-main-black11">
+          제작 정보
+        </p>
+      }
+    >
+      <div className="p-5 flex flex-col space-y-8">
+        <h1 className="text-mainTitle2-bold text-text-main-black11">
+          GRRREW Team
+        </h1>
+        <div className="divide-y space-y-6">
+          <div className="grid grid-cols-2 gap-6 py-4">
+            <div className="flex space-x-2">
+              <Ch />
+              <div className="flex flex-col justify-start">
+                <p className="text-body3-bold text-text-main-black11">김찬현</p>
+                <p className="text-body3-medium text-text-sub-gray76">
+                  BE Developer
+                </p>
+              </div>
+            </div>
+
+            <div className="flex space-x-2">
+              <Yk />
+              <div className="flex flex-col justify-start">
+                <p className="text-body3-bold text-text-main-black11">송여경</p>
+                <p className="text-body3-medium text-text-sub-gray76">
+                  FE Developer
+                </p>
+              </div>
+            </div>
+
+            <div className="flex space-x-2">
+              <Yh />
+              <div className="flex flex-col justify-start">
+                <p className="text-body3-bold text-text-main-black11">엽용현</p>
+                <p className="text-body3-medium text-text-sub-gray76">
+                  FE Developer
+                </p>
+              </div>
+            </div>
+
+            <div className="flex space-x-2">
+              <Es />
+              <div className="flex flex-col justify-start">
+                <p className="text-body3-bold text-text-main-black11">이은성</p>
+                <p className="text-body3-medium text-text-sub-gray76">
+                  BE Developer
+                </p>
+              </div>
+            </div>
+
+            <div className="flex space-x-2">
+              <Aa />
+              <div className="flex flex-col justify-start">
+                <p className="text-body3-bold text-text-main-black11">하아얀</p>
+                <p className="text-body3-medium text-text-sub-gray76">
+                  Product Designer
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col text-body-medium gap-1">
+            <div className="py-4">
+              <Logo />
+            </div>
+
+            {/* <b> Front-end github :</b>
+            <p className="text-body3-medium text-text-sub-gray4f">
+              https://github.com/dnd-side-project/dnd-10th-6-frontend
+            </p>
+            <b> Back-end github :</b>
+            <p className="text-body3-medium text-text-sub-gray4f">
+              https://github.com/dnd-side-project/dnd-10th-6-backend
+            </p> */}
+            <p className="text-body3-medium text-text-sub-gray4f">
+              Copyright 2024. GRRREW. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  )
+}
+
+export default DeveloperInfo

components/compositions/header/setting/index.tsx

@@ -8,6 +8,7 @@ import { useSession } from '@/provider/session-provider'
 import { NamuiApi } from '@/lib/namui-api'
 import { toastError } from '@/lib/client/alert'
 import { FilterProvider } from '@/hooks/use-filter'
+import DeveloperInfo from '../developer-info'
 
 const Setting = () => {
   const [openSetting, setOpenSetting] = useState(false)
@@ -121,6 +122,7 @@ const Setting = () => {
           <h4 className="text-body3-medium text-text-sub-gray4f py-2">
             남의 위키
           </h4>
+          <DeveloperInfo />
           <FilterProvider>
             <WriteList />
           </FilterProvider>

components/svgs/info-icon.tsx

@@ -0,0 +1,12 @@
+const InfoIcon = () => {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clipRule="evenodd" d="M9 16.8C13.3078 16.8 16.8 13.3078 16.8 9C16.8 4.69218 13.3078 1.2 9 1.2C4.69218 1.2 1.2 4.69218 1.2 9C1.2 13.3078 4.69218 16.8 9 16.8ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z" fill="#4F4F4F"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M10.0494 6.80241C10.2077 6.98004 10.2461 7.23441 10.1472 7.45083C9.7549 8.30992 9.22896 9.62032 8.92061 10.7597C8.76499 11.3348 8.67552 11.8282 8.6714 12.1847C8.66936 12.3614 8.68913 12.4679 8.70817 12.5219C8.9919 12.6471 9.18099 12.6034 9.31362 12.5357C9.48431 12.4486 9.61271 12.2899 9.66775 12.1828C9.81918 11.888 10.1809 11.7719 10.4756 11.9233C10.7704 12.0747 10.8866 12.4364 10.7351 12.7312C10.5902 13.0133 10.2986 13.3802 9.85927 13.6045C9.38866 13.8448 8.79044 13.8975 8.13891 13.5804C7.84082 13.4354 7.67027 13.1809 7.58023 12.9315C7.49325 12.6906 7.46855 12.4244 7.47148 12.1709C7.47736 11.6625 7.59789 11.0537 7.76228 10.4463C7.96473 9.69814 8.25007 8.89407 8.53439 8.17806L7.98433 8.3563C7.6691 8.45845 7.33075 8.28571 7.2286 7.97047C7.12645 7.65524 7.29919 7.31688 7.61443 7.21474L9.41649 6.6308C9.64282 6.55746 9.89111 6.62478 10.0494 6.80241Z" fill="#4F4F4F"/>
+    <path d="M10.1984 4.49766C10.1984 4.99471 9.79549 5.39766 9.29844 5.39766C8.80138 5.39766 8.39844 4.99471 8.39844 4.49766C8.39844 4.0006 8.80138 3.59766 9.29844 3.59766C9.79549 3.59766 10.1984 4.0006 10.1984 4.49766Z" fill="#4F4F4F"/>
+    </svg>
+  )
+}
+
+
+export default InfoIcon

components/svgs/logo.tsx

@@ -0,0 +1,38 @@
+const Logo = () => {
+  return (
+    <svg
+      width="89"
+      height="24"
+      viewBox="0 0 89 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M87.9824 23.6726H83.1445V7.69141H87.9824V23.6726Z"
+        fill="#00BC68"
+      />
+      <path
+        d="M70.8802 23.9988C69.6481 23.9988 68.561 23.7089 67.6188 23.1291C66.6766 22.5674 65.9427 21.752 65.4173 20.6829C64.9099 19.6139 64.6562 18.3546 64.6562 16.9051V7.69141H69.4941V16.0897C69.4941 17.3037 69.7297 18.2368 70.2008 18.8891C70.69 19.5233 71.3876 19.8404 72.2935 19.8404C73.2357 19.8404 73.9786 19.4871 74.5222 18.7804C75.0658 18.0738 75.3376 17.1044 75.3376 15.8723V7.69141H80.1754V23.6183H75.3376V21.9875C74.341 23.3284 72.8552 23.9988 70.8802 23.9988Z"
+        fill="#111111"
+      />
+      <path
+        d="M37.4219 7.69301H42.2597V9.21503C42.7489 8.56273 43.3016 8.08257 43.9176 7.77454C44.5518 7.46651 45.3038 7.3125 46.1735 7.3125C47.1701 7.3125 48.076 7.51181 48.8914 7.91044C49.7068 8.29094 50.3772 8.85264 50.9026 9.59553C51.5006 8.83452 52.2344 8.26376 53.1041 7.88326C53.9739 7.50275 55.0067 7.3125 56.2025 7.3125C57.4165 7.3125 58.4856 7.60241 59.4096 8.18223C60.3337 8.74393 61.0494 9.55929 61.5568 10.6283C62.0641 11.6974 62.3178 12.9567 62.3178 14.4062V23.6199H57.4799V15.2216C57.4799 14.0076 57.2534 13.0835 56.8005 12.4493C56.3475 11.797 55.6771 11.4709 54.7892 11.4709C54.0101 11.4709 53.4031 11.7698 52.9682 12.3678C52.5515 12.9657 52.325 13.8354 52.2888 14.977V23.6199H47.4509V15.2216C47.4509 14.0076 47.2244 13.0835 46.7714 12.4493C46.3185 11.797 45.648 11.4709 44.7602 11.4709C43.9811 11.4709 43.3741 11.7698 42.9392 12.3678C42.5225 12.9657 42.296 13.8354 42.2597 14.977V23.6199H37.4219V7.69301Z"
+        fill="#00BC68"
+      />
+      <path
+        d="M0 7.69301H4.83785V9.32374C5.83441 7.98292 7.3202 7.3125 9.2952 7.3125C10.5273 7.3125 11.6145 7.60241 12.5567 8.18223C13.4989 8.74393 14.2236 9.55929 14.731 10.6283C15.2564 11.6974 15.5192 12.9567 15.5192 14.4062V23.6199H10.6813V15.2216C10.6813 14.0076 10.4367 13.0835 9.94749 12.4493C9.47639 11.797 8.78786 11.4709 7.88189 11.4709C6.93969 11.4709 6.1968 11.8242 5.65322 12.5309C5.10964 13.2375 4.83785 14.2069 4.83785 15.439V23.6199H0V7.69301Z"
+        fill="#111111"
+      />
+      <path
+        d="M87.684 0.842548C87.1223 0.280849 86.4157 0 85.5641 0C84.7125 0 84.0058 0.280849 83.4441 0.842548C82.8824 1.40425 82.6016 2.1109 82.6016 2.96251C82.6016 3.81411 82.8824 4.52077 83.4441 5.08246C84.0058 5.64416 84.7125 5.92501 85.5641 5.92501C86.4157 5.92501 87.1223 5.64416 87.684 5.08246C88.2457 4.52077 88.5266 3.81411 88.5266 2.96251C88.5266 2.1109 88.2457 1.40425 87.684 0.842548Z"
+        fill="#00BC68"
+      />
+      <path
+        d="M25.0429 24.0004C23.539 24.0004 22.1981 23.638 21.0204 22.9132C19.8426 22.2066 18.9276 21.2191 18.2753 19.9507C17.623 18.6824 17.2969 17.2509 17.2969 15.6564C17.2969 14.0619 17.623 12.6305 18.2753 11.3622C18.9276 10.0938 19.8426 9.10631 21.0204 8.39966C22.1981 7.67489 23.539 7.3125 25.0429 7.3125C27.0904 7.3125 28.6124 7.98292 29.6089 9.32374V7.69301H34.4468V23.6199H29.6089V21.9891C28.6124 23.33 27.0904 24.0004 25.0429 24.0004ZM25.8039 19.8692C26.9816 19.8692 27.9238 19.4796 28.6305 18.7005C29.3371 17.9032 29.6905 16.8886 29.6905 15.6564C29.6905 14.4243 29.3371 13.4187 28.6305 12.6396C27.9238 11.8423 26.9816 11.4437 25.8039 11.4437C24.6624 11.4437 23.7473 11.8423 23.0588 12.6396C22.3703 13.4187 22.026 14.4243 22.026 15.6564C22.026 16.8886 22.3703 17.9032 23.0588 18.7005C23.7473 19.4796 24.6624 19.8692 25.8039 19.8692Z"
+        fill="#00BC68"
+      />
+    </svg>
+  )
+}
+
+export default Logo

pages/garden/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import BaseLayout from '@/layout/base-layout'
 import withAuth from '@/layout/HOC/with-auth'
 import Button from '@/components/button'
@@ -13,6 +13,8 @@ import { AnimatePresence } from 'framer-motion'
 import { motion } from 'framer-motion'
 import { fadeInProps } from '@/variants'
 import ShareModal from '@/components/share-modal'
+import InfoIcon from '@/components/svgs/info-icon'
+
 const Pages = () => {
   const { data } = useSession()
   const {
@@ -71,6 +73,23 @@ const Pages = () => {
     () => surveys?.pages[0].data.totalCount ?? 0,
     [surveys],
   )
+
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  useEffect(() => {
+    if (showTooltip) {
+      const handleClose = () => {
+        setShowTooltip(false)
+      }
+
+      document.addEventListener('click', handleClose)
+
+      return () => {
+        document.removeEventListener('click', handleClose)
+      }
+    }
+  }, [showTooltip])
+
   return (
     <BaseLayout
       className="bg-gray-gray50 h-calc-h flex flex-col"
@@ -99,10 +118,53 @@ const Pages = () => {
         </Link>
       </div>
       <section className="bg-white grow flex flex-col">
-        <div className=" w-full px-[30px] py-6">
-          <p className=" text-subTitle2-bold text-text-sub-gray4f text-left">
+        <div className="flex justify-start items-center px-[30px] py-4">
+          <div className="text-subTitle2-medium text-text-sub-gray4f text-left relative">
             받은 친구
-          </p>
+            <AnimatePresence mode="wait">
+              {showTooltip && (
+                <motion.div
+                  onClick={() => setShowTooltip(false)}
+                  initial={{ scale: 0, y: 10, opacity: 0 }}
+                  animate={{ scale: 1, y: 0, opacity: 1 }}
+                  exit={{
+                    scale: 0,
+                    y: 10,
+                    opacity: 0,
+                    transformOrigin: '25% 0%',
+                  }}
+                  className="text-center absolute z-10 transform -translate-x-1/2 origin-[25%_0%]"
+                >
+                  <svg
+                    className="relative left-3 z-20"
+                    width="18"
+                    height="10"
+                    viewBox="0 0 18 10"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.4866 1.65177C9.6921 0.769006 8.3079 0.769005 7.51341 1.65177L8.74228e-07 10L18 10L10.4866 1.65177Z"
+                      fill="#313131"
+                    />
+                  </svg>
+
+                  <div className="w-full h-full bg-gray-gray800 py-3 px-4 z-10 rounded-lg flex-1 relative text-white text-body3-medium whitespace-nowrap">
+                    알게 된 기간, 경로에 따라 <br /> 나무 모양과 색이 달라져요
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+          <button
+            onClick={(event) => {
+              event.stopPropagation()
+              setShowTooltip((prev) => !prev)
+            }}
+            className="ml-2 focus:outline-none"
+          >
+            <InfoIcon />
+          </button>
         </div>
         <div className="w-full items-center flex flex-col space-y-2 pb-10 grow">
           <AnimatePresence mode="wait">

pages/login/index.tsx

@@ -11,4 +11,4 @@ const Page = () => {
 
 export default Page
 
-Page.getLayout = (page: ReactNode) => page
+Page.getLayout = (page: ReactNode) => page