FN-7 나도 써주기 기능 추가

components/bottomsheet-button/index.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { Drawer, DrawerContent } from '../ui/drawer'
+import Image from 'next/image'
+import pen from '@/assets/pen.svg'
+import eye from '@/assets/eye.svg'
+import menu from '@/assets/menu.svg'
+import Modal from '../modal'
+
+interface BottomSheetButtonProps {
+  id: string
+  senderWikiId: string | null
+}
+
+const BottomSheetButton = ({ id, senderWikiId }: BottomSheetButtonProps) => {
+  const [bottomSheet, setBottomSheet] = useState({
+    isOpen: false,
+  })
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const toggleBottomSheet = (e: any) => {
+    setBottomSheet((prev) => ({
+      ...prev,
+      isOpen: !prev.isOpen,
+    }))
+    e.stopPropagation()
+  }
+
+  const handleLinkClick = (e: any) => {
+    if (senderWikiId === null) {
+      e.preventDefault()
+    } else {
+      e.stopPropagation()
+    }
+  }
+
+  const handleDetailClick = (e: any) => {
+    e.stopPropagation()
+  }
+
+  const handleWritingClick = (e: any) => {
+    if (senderWikiId === null) {
+      setModalOpen(true)
+    } else {
+      setBottomSheet((prev) => ({
+        ...prev,
+        isOpen: false,
+      }))
+    }
+  }
+
+  return (
+    <>
+      <button
+        className="absolute z-20 top-3 right-3"
+        onClick={toggleBottomSheet}
+      >
+        <Image src={menu} alt="menu" />
+      </button>
+      <Drawer
+        open={bottomSheet.isOpen}
+        onOpenChange={(open) =>
+          setBottomSheet((prev) => ({
+            ...prev,
+            isOpen: open,
+          }))
+        }
+      >
+        <DrawerContent>
+          <div className="p-4 flex flex-col text-body3-medium">
+            <div className="ml-2 flex flex-col my-auto space-y-4 justify-start items-start">
+              <Link
+                href={`/surveys/questions?wikiId=${senderWikiId}`}
+                onClick={handleLinkClick}
+              >
+                <button
+                  className="flex gap-2 items-center"
+                  onClick={handleWritingClick}
+                >
+                  <Image src={pen} alt="pen" />
+                  친구 소개 쓰러가기
+                </button>
+              </Link>
+              <Link
+                href={`/answers?surveyId=${id}`}
+                onClick={handleDetailClick}
+              >
+                <button className="flex gap-2 items-center">
+                  <Image src={eye} alt="eye" />
+                  소개서 자세히 보기
+                </button>
+              </Link>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+      <Modal
+        open={modalOpen}
+        onOpenChange={(state) => {
+          setModalOpen(state)
+        }}
+        title=""
+        description={
+          <span className="text-body3-bold text-black">
+            비회원으로 작성해서
+            <br />
+            친구에게 소개서를 써줄 수 없어요
+          </span>
+        }
+        trigger={null}
+      />
+    </>
+  )
+}
+
+export default BottomSheetButton

components/compositions/tree-card/index.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { useRef } from 'react'
 import { fadeInProps } from '@/variants'
+import BottomSheetButton from '@/components/bottomsheet-button'
 
 interface TreeCardProps {
   period: string
@@ -12,6 +13,7 @@ interface TreeCardProps {
   onClick: () => void
   id: string
   senderName: string
+  senderWikiId: string
 }
 
 const TreeCard = ({
@@ -20,6 +22,7 @@ const TreeCard = ({
   relation,
   isFlipped,
   senderName,
+  senderWikiId,
   onClick,
 }: TreeCardProps) => {
   const bgColor = (() => {
@@ -44,9 +47,6 @@ const TreeCard = ({
   const handleCardClick = () => {
     onClick()
   }
-  const handleLinkClick = (e: any) => {
-    e.stopPropagation()
-  }
 
   return (
     <motion.div
@@ -70,20 +70,13 @@ const TreeCard = ({
             {treeType.render(period as Period, relation as Relation)}
           </div>
         </div>
+
         <div
           className={`card-back px-y w-full flex flex-col justify-center items-center rounded-md ${bgColor}`}
         >
           <div className="w-full flex flex-col space-y-2 justify-center items-center m-auto">
+            <BottomSheetButton id={id} senderWikiId={senderWikiId} />
             <span className="my-2 text-body1-bold">{senderName}</span>
-            <Link
-              className="z-20"
-              href={`/answers?surveyId=${id}`}
-              onClick={handleLinkClick}
-            >
-              <button className="py-2 px-3 bg-gray-gray600 text-text-main-whiteFF rounded border text-caption1-medium">
-                자세히보기
-              </button>
-            </Link>
           </div>
         </div>
       </div>

components/loading/index.tsx

@@ -39,7 +39,9 @@ const Loading = () => {
           />
         </svg>
       </section>
-      <ManyTrees />
+      <div className="ml-5 mt-5"
+      >
+      <ManyTrees /></div>
     </div>
   )
 }

components/modal/index.tsx

@@ -44,15 +44,9 @@ export const Modal = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(
             key="cancel"
             className="flex-1 py-[14px] px-4 text-brand-sub1-blue600 bg-transparent rounded-none active:bg-bg-gray1 duration-150"
           >
-            취소
+            확인
             <span className="sr-only">Close</span>
           </Close>,
-          <button
-            key="confirm"
-            className="flex-1 py-[14px] px-4 text-brand-sub1-blue600 bg-transparent rounded-none active:bg-bg-gray1 duration-150"
-          >
-            다음
-          </button>,
         ],
       },
       ...rest

components/onboard/onboard-step2/index.tsx

@@ -21,36 +21,42 @@ const surveys: InfiniteData<GetSurveyResponse, unknown> = {
             relation: 'MIDDLE_AND_HIGH_SCHOOL',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
           {
             period: 'ONE_YEAR',
             relation: 'WORK',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
           {
             period: 'FOUR_YEARS',
             relation: 'ETC',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
           {
             period: 'INFINITE',
             relation: 'ELEMENTARY_SCHOOL',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
           {
             period: 'SIX_MONTHS',
             relation: 'SOCIAL',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
           {
             period: 'ONE_YEAR',
             relation: 'WORK',
             senderName: '디엔이',
             surveyId: '',
+            senderWikiId: '',
           },
         ],
       },
@@ -161,6 +167,7 @@ const OnboardStep2 = () => {
                         item ? (
                           <TreeCard
                             senderName={item.senderName}
+                            senderWikiId=""
                             key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
                             id={item.surveyId}
                             period={item.period}
@@ -213,6 +220,7 @@ const OnboardStep2 = () => {
                       >
                         {page.data.content.map((item, index) => (
                           <TreeCard
+                            senderWikiId=""
                             senderName={item.senderName}
                             key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
                             id={item.surveyId}

model/survey.entity.ts

@@ -17,4 +17,5 @@ export interface Survey {
   relation: Relation
   period: Period
   senderName: string
+  senderWikiId: string
 }

pages/garden/index.tsx

@@ -16,6 +16,7 @@ import ShareModal from '@/components/share-modal'
 import InfoIcon from '@/components/svgs/info-icon'
 import WriteList from '@/components/compositions/header/write-list'
 import { FilterProvider } from '@/hooks/use-filter'
+import BottomSheet from '@/components/bottomsheet-button'
 
 const Pages = () => {
   const { data } = useSession()
@@ -196,6 +197,7 @@ const Pages = () => {
                   page.data.content.map((item, index) => (
                     <TreeCard
                       senderName={item.senderName}
+                      senderWikiId={item.senderWikiId}
                       key={`${item.surveyId}-${(pageNo + 1) * (index + 1)}`}
                       id={item.surveyId}
                       period={item.period}

pages/welcome/index.tsx

@@ -1,5 +1,5 @@
 import Button from '@/components/button'
-import WelcomeTrees from '@/components/icons/welcome-trees'
+
 import MetaHead from '@/components/meta-head'
 import Modal from '@/components/modal'
 import FormLayout from '@/layout/form-layout'
@@ -67,7 +67,7 @@ const WelcomePage = () => {
         className="fixed top-0 left-0 z-10 w-full bg-white"
         content={
           <div className="grow -mt-5 flex flex-col items-center justify-center px-5 text-center">
-            <WelcomeTrees />
+            <img src="/assets/trees/welcome-tree.svg" alt="welcome" />
             <p className="text-mainTitle2-bold mt-8 mb-3">
               환영해요 {data?.user?.name}님
             </p>

public/sitemap-0.xml

@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>http://namui-wiki.life</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/answers</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/csrf</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/dashboard</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/garden</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/login</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/onboard</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/signup</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/submit</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/surveys</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/surveys/questions</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>http://namui-wiki.life/welcome</loc><lastmod>2024-03-21T09:08:49.209Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/answers</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/csrf</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/dashboard</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/garden</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/login</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/onboard</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/signup</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/submit</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/surveys</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/surveys/questions</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>http://namui-wiki.life/welcome</loc><lastmod>2024-03-21T10:14:20.216Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>