Merge pull request #42 from Nexters/feat/#32

[ Feat/#32 ] Tarot reading page 기능 및 라우팅 구현 & 바텀시트 공유하기 기능 적용

Author: ljh0608

package-lock.json

@@ -18,6 +18,7 @@
     "@tanstack/react-query": "^5.63.0",
     "@tanstack/react-query-devtools": "^5.63.0",
     "axios": "^1.7.9",
+    "ismobilejs": "^1.1.1",
     "motion": "^12.0.5",
     "next": "14.2.23",
     "react": "^18",

package.json

@@ -1,8 +1,8 @@
 "use client";
 
 import MainContent from "@/shared/components/MainContent";
-import TarotInteraction from "./components/TarotInteraction";
-import TarotResult from "./components/TarotResult";
+import TarotInteraction from "../../../../../tarot/components/TarotInteraction";
+import TarotResult from "../../../../../tarot/components/TarotResult";
 import { useState } from "react";
 import ChatHeader from "@/chat/components/ChatHeader";
 
@@ -11,18 +11,17 @@ import { useParams } from "next/navigation";
 export default function TarotReadingResultPage() {
   const { resultId } = useParams();
   const [tarotInteractation, setTarotInteractation] = useState(true);
-
-  console.log(resultId);
   const { data, isLoading } = useTarotReadingResult(Number(resultId));
 
-  console.log(data);
-
   return (
     <>
       {!tarotInteractation && <ChatHeader />}
       <MainContent>
         {tarotInteractation || isLoading ? (
-          <TarotInteraction setTarotInteractation={setTarotInteractation} />
+          <TarotInteraction
+            setTarotInteractation={setTarotInteractation}
+            tarotId={data?.tarot}
+          />
         ) : (
           <TarotResult />
         )}

src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx

@@ -7,11 +7,20 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useRouter } from "next/navigation";
 import { css } from "styled-components";
 import { useCreateChatRoom } from "../hooks/useCreateChatRoom";
+import { checkBrowserForWebShare } from "@/shared/utils/checkBrowserForWebShare";
+import shareLink from "@/shared/utils/shareLink";
+import Toast from "@/shared/components/Toast";
+import { useState } from "react";
 
 export default function ChatHeader() {
   const { mutate: createChatRoom } = useCreateChatRoom();
   const router = useRouter();
 
+  const tarotNyangUrl = window.location.hostname;
+
+  const { handleWebShare, handleCopyToClipboard } = shareLink(tarotNyangUrl);
+  const [toastOpen, setToastOpen] = useState(false);
+
   const handleResetChatClick = () => {
     createChatRoom(undefined, {
       onSuccess: (data) => {
@@ -20,6 +29,17 @@ export default function ChatHeader() {
     });
   };
 
+  const handleShare = async () => {
+    if (checkBrowserForWebShare()) {
+      handleWebShare();
+    } else {
+      const shareSuccess = await handleCopyToClipboard();
+      if (shareSuccess) {
+        setToastOpen(true);
+      }
+    }
+  };
+
   return (
     <HeaderContent
       /**
@@ -40,13 +60,17 @@ export default function ChatHeader() {
               />
             </button>
           </BottomSheet.Trigger>
+
           <BottomSheet.Portal>
             <BottomSheet.Overlay />
             <BottomSheet.Content>
               <VisuallyHidden>
                 <BottomSheet.Title>메뉴</BottomSheet.Title>
-                <BottomSheet.Description>외부를 클릭하면 닫힙니다. 원하는 작업을 선택하세요.</BottomSheet.Description>
+                <BottomSheet.Description>
+                  외부를 클릭하면 닫힙니다. 원하는 작업을 선택하세요.
+                </BottomSheet.Description>
               </VisuallyHidden>
+
               <ul
                 css={css`
                   & > li > button {
@@ -60,7 +84,10 @@ export default function ChatHeader() {
               >
                 <li>
                   {/* TODO: 메뉴 버튼 액션 추가 */}
-                  <button type="button">친구에게 타로냥 알리기</button>
+
+                  <button type="button" onClick={handleShare}>
+                    친구에게 타로냥 알리기
+                  </button>
                 </li>
                 <li>
                   <button type="button" onClick={handleResetChatClick}>
@@ -80,25 +107,38 @@ export default function ChatHeader() {
           gap: 4px;
         `}
       >
-        <span
-          css={css`
-            ${({ theme }) => theme.fonts.subHead3}
-            color: ${({ theme }) => theme.colors.grey90};
-          `}
-        >
-          타로냥
-        </span>
-        <span
-          css={css`
-            padding-inline: 8px;
-            ${({ theme }) => theme.fonts.subHead1}
-            color: ${({ theme }) => theme.colors.primary03};
-            background-color: ${({ theme }) => theme.colors.primary00};
-            border-radius: 40px;
-          `}
-        >
-          AI
-        </span>
+        <Toast.Provider>
+          <Toast.Root
+            open={toastOpen}
+            onOpenChange={setToastOpen}
+            duration={3000}
+          >
+            <Toast.Title>
+              링크 복사 완료! 타로냥을 알리고 싶은 친구에게 링크를 전송해
+              주세요.
+            </Toast.Title>
+          </Toast.Root>
+          <Toast.Viewport />
+          <span
+            css={css`
+              ${({ theme }) => theme.fonts.subHead3}
+              color: ${({ theme }) => theme.colors.grey90};
+            `}
+          >
+            타로냥
+          </span>
+          <span
+            css={css`
+              padding-inline: 8px;
+              ${({ theme }) => theme.fonts.subHead1}
+              color: ${({ theme }) => theme.colors.primary03};
+              background-color: ${({ theme }) => theme.colors.primary00};
+              border-radius: 40px;
+            `}
+          >
+            AI
+          </span>
+        </Toast.Provider>
       </h1>
     </HeaderContent>
   );

src/chat/components/ChatHeader.tsx

@@ -0,0 +1,15 @@
+import isMobile from "ismobilejs";
+
+export const checkBrowserForWebShare = () => {
+  const isFirefoxForAndroid = /Android.*Firefor/.test(navigator.userAgent);
+
+  const isAndroidWebView = /wv|WebView/.test(navigator.userAgent);
+
+  const checkMobile = isMobile().phone;
+  const checkTablet = isMobile().tablet;
+  return !(
+    isFirefoxForAndroid ||
+    isAndroidWebView ||
+    !(checkMobile || checkTablet)
+  );
+};

src/shared/utils/checkBrowserForWebShare.ts

@@ -1,13 +1,13 @@
-const shareLink = () => {
-  const inviteURL = window.location.href;
+const shareLink = (shareUrl: string) => {
+  // const inviteURL = window.location.href;
 
-  console.log(inviteURL);
+  // console.log(inviteURL);
   const handleWebShare = async () => {
     const shareData = {
       meet: {
-        title: "타로냥이",
-        text: "귀여운 타로냥이가 봐주는 타로 보러 보러가기 \n",
-        url: inviteURL,
+        title: "타로냥 - 고양이 타로술사 \n",
+        text: "고양이 타로술사 타로냥이 당신의 질문에 답해주는 AI 타로 서비스입니다. \n",
+        url: shareUrl,
       },
     };
 
@@ -22,14 +22,14 @@ const shareLink = () => {
   const handleCopyToClipboard = async () => {
     try {
       console.log("복사성공");
-      await navigator.clipboard.writeText(inviteURL);
+      await navigator.clipboard.writeText(shareUrl);
       return true;
     } catch {
       alert("링크복사에 실패했습니다. \n 다시 시도해주세요.");
       return false;
     }
   };
-  return { handleWebShare };
+  return { handleWebShare, handleCopyToClipboard };
 };
 
 export default shareLink;

src/shared/utils/shareLink.ts

@@ -4,13 +4,15 @@ import * as motion from "motion/react-client";
 import Image from "next/image";
 import catHand from "@/shared/assets/images/catHand.png";
 import cardBack from "@/shared/assets/images/cardBack.webp";
-import cardFront from "@/shared/assets/images/Card1.jpg";
 import styled from "styled-components";
 import { easeInOut } from "motion";
 import { SetStateAction, useState, Dispatch } from "react";
+import { TarotCardIdType } from "@/tarot/models/tarotCardId";
+import findCardById from "@/tarot/utils/findCardById";
 
 type PropTypes = {
   setTarotInteractation: Dispatch<SetStateAction<boolean>>;
+  tarotId: TarotCardIdType | undefined;
 };
 
 const putCardtransition = {
@@ -29,7 +31,7 @@ const cardRotateTransition = {
   duration: 0.6,
 };
 
-const TarotInteraction = ({ setTarotInteractation }: PropTypes) => {
+const TarotInteraction = ({ setTarotInteractation, tarotId }: PropTypes) => {
   const [isVisible, setIsVisible] = useState(true);
 
   const routingTarotResult = () => {
@@ -38,6 +40,11 @@ const TarotInteraction = ({ setTarotInteractation }: PropTypes) => {
     }, 1000);
   };
 
+  if (!tarotId) {
+    return null;
+  }
+
+  const card = findCardById(tarotId);
   return (
     <TarotWaitingWrapper>
       <Center>
@@ -56,7 +63,7 @@ const TarotInteraction = ({ setTarotInteractation }: PropTypes) => {
               transition={cardRotateTransition}
               onAnimationComplete={routingTarotResult}
             >
-              <CardFront alt="카드 앞면" src={cardFront} />
+              <CardFront alt="카드 앞면" src={card.imgSrc} />
               <CardBack alt="카드 뒷면" src={cardBack} />
             </CardInner>