Merge pull request #93 from Nexters/feat#92

Feat#92

Author: ljh0608

src/tarot/apis/getTarotFollowQuestion.ts

@@ -16,10 +16,13 @@ const validate = (data: serverResponse): TarotFollowQuestion => {
   return validatedData;
 };
 
-export const getTarotFollowQuestion = (chatRoomId: number): Promise<TarotFollowQuestion> => {
+export const getTarotFollowQuestion = (
+  chatRoomId: number,
+  resultId: number
+): Promise<TarotFollowQuestion> => {
   return apiClient
     .get<serverResponse>(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/tarot/question/follow?chatRoomId=${chatRoomId}`
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/tarot/question/follow?chatRoomId=${chatRoomId}&tarotResultId=${resultId}`
     )
     .then((res) => validate(res.data))
     .catch((error) => {

src/tarot/components/NextRecommendQuestion.tsx

@@ -3,13 +3,13 @@ import styled from "styled-components";
 import { useTarotFollowQuestion } from "../hooks/useTarotFollowQuestion";
 import { useParams } from "next/navigation";
 interface NextRecommendQuestionProps {
-  handleRecommendQuestionChat: (id: number, question: string) => void;
+  handleRecommendQuestionChat: (question: string) => void;
 }
 
-const NextRecommendQuestion = ({}: NextRecommendQuestionProps) => {
-  const { chatId } = useParams<{ chatId: string }>();
+const NextRecommendQuestion = ({ handleRecommendQuestionChat }: NextRecommendQuestionProps) => {
+  const { chatId, resultId } = useParams<{ chatId: string; resultId: string }>();
 
-  const { data: NextQuestion } = useTarotFollowQuestion(Number(chatId));
+  const { data: NextQuestion } = useTarotFollowQuestion(Number(chatId), Number(resultId));
 
   console.log(NextQuestion);
   return (
@@ -20,10 +20,7 @@ const NextRecommendQuestion = ({}: NextRecommendQuestionProps) => {
       </div>
       <RecommendContainer>
         {NextQuestion?.questions.map((item, idx) => (
-          <RecommendQuestionBtn
-            key={idx}
-            // onClick={() => handleRecommendQuestionChat(item.recommendQuestionId, item.question)}
-          >
+          <RecommendQuestionBtn key={idx} onClick={() => handleRecommendQuestionChat(item)}>
             <QuestionTitle>{item} </QuestionTitle>
 
             <NextQuestionAffordance>이 질문하기 &gt;</NextQuestionAffordance>

src/tarot/components/TarotResultAfterView.tsx

@@ -6,7 +6,7 @@ import LinkIcon from "@/shared/assets/icons/link.svg";
 import ColorStar from "@/shared/assets/icons/tarot-card-result-color-star.svg";
 import Star from "@/shared/assets/icons/tarot-card-result-star.svg";
 import CatWithCard from "@/shared/assets/images/cardWithCat.png";
-
+import NextRecommendQuestion from "./NextRecommendQuestion";
 import Button from "@/shared/components/Button";
 import Toast from "@/shared/components/Toast";
 import { checkBrowserForWebShare } from "@/shared/utils/checkBrowserForWebShare";
@@ -16,7 +16,8 @@ import findCardById from "@/tarot/utils/findCardById";
 import { useQueryClient } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-// import NextRecommendQuestion from "./NextRecommendQuestion";
+import { SendChatMessageRequest } from "@/chat/apis/sendChatMessage";
+import { usePathname } from "next/navigation";
 
 const TarotResultAfterView = () => {
   const { resultId, chatId } = useParams<{
@@ -25,7 +26,9 @@ const TarotResultAfterView = () => {
   }>();
 
   const [toastOpen, setToastOpen] = useState(false);
-  const shareURL = process.env.NEXT_PUBLIC_BASE_URL || "https://tarotnyang.me";
+  const pathname = usePathname();
+  console.log(pathname);
+  const shareURL = process.env.NEXT_PUBLIC_BASE_URL + pathname || "https://tarotnyang.me";
   const { handleWebShare, handleCopyToClipboard } = shareLink(shareURL);
   const router = useRouter();
   const { data, isError } = useTarotReadingResult(Number(resultId));
@@ -43,17 +46,16 @@ const TarotResultAfterView = () => {
     router.push(`/chats/${chatId}`);
   };
 
-  // const handleRecommendQuestionChat = (recommendQuestionId: number, message: string) => {
-  //   const object: SendChatMessageRequest = {
-  //     roomId: Number(chatId),
-  //     referenceQuestionId: recommendQuestionId,
-  //     intent: "RECOMMEND_QUESTION",
-  //     message: message,
-  //   };
+  const handleRecommendQuestionChat = (message: string) => {
+    const object: SendChatMessageRequest = {
+      roomId: Number(chatId),
+      intent: "NORMAL",
+      message: message,
+    };
 
-  //   queryClient.invalidateQueries({ queryKey: ["chatMessages"] });
-  //   router.push(`/chats/${chatId}?message=${JSON.stringify(object)}`);
-  // };
+    queryClient.invalidateQueries({ queryKey: ["chatMessages"] });
+    router.push(`/chats/${chatId}?message=${JSON.stringify(object)}`);
+  };
 
   const handleNewChat = () => {
     router.push("/");
@@ -186,14 +188,14 @@ const TarotResultAfterView = () => {
             </Button>
           )}
         </NextQuestionFlow>
-        {/* {/<Divider /> */}
+        <Divider />
 
-        {/* {data?.isOwner ? (
+        {data?.isOwner ? (
           <>
             <NextRecommendQuestion handleRecommendQuestionChat={handleRecommendQuestionChat} />
             <Divider />
           </>
-        ) : null} */}
+        ) : null}
 
         <PopularQuestions />
       </TarotResultWrapper>
@@ -367,6 +369,16 @@ const TarotResultWrapper = styled.div`
   margin-inline: auto;
   background-color: white;
 `;
+
+const Divider = styled.div`
+  height: 11px;
+  width: calc(100% + 44px * 2);
+
+  margin: 44px 0 44px 0;
+  background-color: ${({ theme }) => theme.colors.grey10};
+
+  overflow: hidden;
+`;
 // const DownloadInfoWrapper = styled.div`
 //   display: flex;
 //   flex-direction: column;

src/tarot/hooks/useTarotFollowQuestion.ts

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { getTarotFollowQuestion } from "../apis/getTarotFollowQuestion";
 
-export const useTarotFollowQuestion = (chatId: number) => {
+export const useTarotFollowQuestion = (chatId: number, resultId: number) => {
   return useQuery({
     queryKey: ["getTarotFollowQuestion"],
-    queryFn: () => getTarotFollowQuestion(chatId),
+    queryFn: () => getTarotFollowQuestion(chatId, resultId),
   });
 };