refactor(web-domains): 카카오톡 공유하기 모달 이미지 및 멘트 등 각종 이슈 해결 (#166)

* refactor: 답변 완료 후 모임원에게 답변 재촉 카카오톡 공유 기능에 image, description 추가 * fix: share-group에서 다음 질문인 이름이 현재 질문인 이름으로 나오는 버그 해결 * feat: kakao share button text 문구 기능 추가 * fix: current meeting name을 잘못 읽어오던 오류 수정 * refactor: 모임 초대 카카오 공유시 누락된 설명 및 이미지 추가 * fix: 다음 질문인 null 대응 * fix: questionDetail 질문 미리보기 고정값으로 나오던 이슈 해결
depromeet · Aug 27, 2024 · be459fb · be459fb
1 parent 26692ff
commit be459fb
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 4 deletions.
diff --git a/...ages/web-domains/src/answer/features/answer-closing/containers/AnswerClosingContainer.tsx b/...ages/web-domains/src/answer/features/answer-closing/containers/AnswerClosingContainer.tsx
@@ -7,8 +7,10 @@ import { ClosingButton } from '../../floating-button/components/ClosingButton';
 import { ClosingMessage } from '../components/ClosingMessage';
 import { useAnswerClosingService } from '../services/useAnswerClosingService';
 
+const KAKAO_SHARE_IMAGE_URL = 'https://file.moring.one/defaults/question_narrow.png';
+
 export const AnswerClosingContainer = () => {
-  const { meetingId, answerGlobalTime, isOpen, basePath, close } = useAnswerClosingService();
+  const { meetingId, meetingName, answerGlobalTime, isOpen, basePath, close } = useAnswerClosingService();
 
   return (
     <>
@@ -27,6 +29,8 @@ export const AnswerClosingContainer = () => {
           onClose={close}
           topTitle="모임원들에게 릴레이 질문을"
           bottomTitle="공유해보세요!"
+          shareDescription={`${meetingName} 모임 질문을 잊진 않으셨나요?`}
+          shareImageUrl={KAKAO_SHARE_IMAGE_URL}
           shareLink={`${basePath}/${meetingId}/answer/opening`}
         />
       </section>

diff --git a/packages/web-domains/src/answer/features/answer-closing/services/useAnswerClosingService.ts b/packages/web-domains/src/answer/features/answer-closing/services/useAnswerClosingService.ts
@@ -6,12 +6,15 @@ import { useGetProgressingQuestion } from '@/answer/common/apis/queries/useGetPr
 import { answerAtoms } from '@/answer/common/atoms/answer.atom';
 import { getWebDomain } from '@/common';
 import { useDialogContext } from '@/common/contexts/DialogProvider';
+import { useGetMeetingInfo } from '@/home/common/apis/queries/useGetMeetingName';
 
 export const useAnswerClosingService = () => {
   const { meetingId } = useParams<{ meetingId: string }>();
   const [answerGlobalTime, setAnswerGlobalTime] = useAtom(answerAtoms.answerGlobalTime);
+  const { data: meetingInfo } = useGetMeetingInfo({});
 
   const { close, isOpen } = useDialogContext();
+  const meetingName = meetingInfo?.meetings.find((meeting) => meeting.meetingId === Number(meetingId))?.name;
   const basePath = getWebDomain();
 
   useGetProgressingQuestion({
@@ -29,6 +32,7 @@ export const useAnswerClosingService = () => {
 
   return {
     meetingId,
+    meetingName,
     answerGlobalTime: answerGlobalTime ?? 0,
     isOpen,
     close,

diff --git a/packages/web-domains/src/common/components/KakaoShare/generateKakaoShare.utils.ts b/packages/web-domains/src/common/components/KakaoShare/generateKakaoShare.utils.ts
@@ -10,6 +10,12 @@ interface ShareToKakaoProps {
   shareLink: string;
 }
 
+const buttonTextMap: Record<string, string> = {
+  'https://file.moring.one/defaults/invite_narrow.png': '모임 참여하기',
+  'https://file.moring.one/defaults/question_narrow.png': '답변하러 가기',
+  'https://file.moring.one/defaults/new_question_narrow.png': '답변하러 가기',
+};
+
 export const generateKakaoShare = ({ shareLink, shareImageUrl, shareDescription }: ShareToKakaoProps) => {
   const { Kakao } = window;
 
@@ -26,5 +32,14 @@ export const generateKakaoShare = ({ shareLink, shareImageUrl, shareDescription
         mobileWebUrl: shareLink,
       },
     },
+    buttons: [
+      {
+        title: buttonTextMap[shareImageUrl],
+        link: {
+          webUrl: shareLink,
+          mobileWebUrl: shareLink,
+        },
+      },
+    ],
   });
 };
diff --git a/...b-domains/src/home/features/gather-member/containers/GatherMemberProfileListContainer.tsx b/...b-domains/src/home/features/gather-member/containers/GatherMemberProfileListContainer.tsx
@@ -11,6 +11,7 @@ import { useGatherMemberProfileListService } from '../services/useGatherMemberPr
 export const GatherMemberProfileListContainer = () => {
   const {
     meetingId,
+    meetingName,
     isOpen,
     gatherMemberList,
     searchInput,
@@ -40,6 +41,8 @@ export const GatherMemberProfileListContainer = () => {
         onClose={inviteModalClose}
         topTitle="모임원들을 모링으로"
         bottomTitle="초대해보세요!"
+        shareDescription={`${meetingName} 모임에 여러분들을 초대합니다`}
+        shareImageUrl="https://file.moring.one/defaults/invite_narrow.png"
         shareLink={inviteLink}
       />
     </section>

diff --git a/...eb-domains/src/home/features/gather-member/services/useGatherMemberProfileListService.tsx b/...eb-domains/src/home/features/gather-member/services/useGatherMemberProfileListService.tsx
@@ -6,6 +6,7 @@ import { getWebDomain } from '@/common';
 import { generateInviteLink } from '@/common/utils/generateInviteLink';
 import { getKeywordRegex } from '@/common/utils/getKeywordRegex';
 import { useGetInviteCode } from '@/home/common/apis/queries/useGetInviteCode';
+import { useGetMeetingInfo } from '@/home/common/apis/queries/useGetMeetingName';
 import { MemberType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
 
@@ -30,6 +31,10 @@ export const useGatherMemberProfileListService = () => {
     options: { enabled: !!meetingId },
   });
 
+  const { data: meetingInfo } = useGetMeetingInfo({});
+
+  const meetingName = meetingInfo?.meetings.find((meeting) => meeting.meetingId === Number(meetingId))?.name;
+
   const handleChangeSearchInput = (value: string) => {
     setSearchInput(value);
   };
@@ -70,6 +75,7 @@ export const useGatherMemberProfileListService = () => {
 
   return {
     meetingId,
+    meetingName,
     isOpen,
     inviteLink: generateInviteLink(inviteCode?.code) ?? `${getWebDomain()}`,
     searchInput,

diff --git a/...omains/src/relay-question/features/select-relay-question/components/Question/Question.tsx b/...omains/src/relay-question/features/select-relay-question/components/Question/Question.tsx
@@ -19,7 +19,7 @@ interface QuestionProps {
 
 export const Question = ({ id, imageUrl, title, usedCount, meetingId }: QuestionProps) => {
   const openModal = useModal();
-  const { refetch } = useRelayQuestionQuery(1);
+  const { refetch } = useRelayQuestionQuery(id);
 
   const router = useRouter();
 

diff --git a/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx b/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx
@@ -37,7 +37,7 @@ export const CurrentRelayQuestionCountContainer = () => {
 
   if (!activeQuestion || !data) return;
 
-  const currentMeetingName = data.meetings.find(({ meetingId }) => meetingId === Number(meetingId))?.name;
+  const currentMeetingName = data.meetings.find((meeting) => meeting.meetingId === Number(meetingId))?.name;
 
   return (
     <>
@@ -89,7 +89,7 @@ export const CurrentRelayQuestionCountContainer = () => {
         topTitle="모임원들에게 릴레이 질문을"
         bottomTitle="공유해 보세요!"
         shareImageUrl={KAKAO_IMAGE_URL}
-        shareDescription={`새로운 질문이 도착했어요! 지금 바로 답변 하러 가볼까요? 다음 질문인은 ${activeQuestion.targetMember.name}님이에요`}
+        shareDescription={`새로운 질문이 도착했어요! 지금 바로 답변 하러 가볼까요? 다음 질문인은 ${activeQuestion?.nextTargetMember?.name || '000'}님이에요`}
         shareLink={`${getWebDomain()}/${meetingId}/answer/opening`}
       />
     </>