feat: 커피챗 qa (#1671)

sopt-makers · Nov 6, 2024 · 3df1f29 · 3df1f29
1 parent 223de36
commit 3df1f29
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 52 deletions.
diff --git a/src/components/coffeechat/detail/SeemoreSelect/index.tsx b/src/components/coffeechat/detail/SeemoreSelect/index.tsx
@@ -69,12 +69,10 @@ export default function SeemoreSelect({ memberId }: SeemoreSelectProp) {
     mutate(undefined, {
       onSuccess: async () => {
         logSubmitEvent('coffeechatDelete');
-        queryClient.invalidateQueries({
-          predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
-        });
-        queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
+        queryClient.invalidateQueries({ queryKey: ['getRecentCoffeeChat'] });
         queryClient.invalidateQueries({ queryKey: ['getMembersCoffeeChat'] });
-        toastOpen({ icon: 'success', content: '커피챗이 삭제되었어요. 다음에 또 만나요!' });
+        queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
+        await toastOpen({ icon: 'success', content: '커피챗이 삭제되었어요. 다음에 또 만나요!' });
         await router.push(playgroundLink.coffeechat());
       },
     });

diff --git a/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx b/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx
@@ -8,7 +8,6 @@ import { playgroundLink } from 'playground-common/export';
 
 import { getCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
 import { changeIsBlindCoffeechat } from '@/api/endpoint/coffeechat/postCoffeechatIsBlind';
-import { getMembersCoffeeChat } from '@/api/endpoint/members/getMembersCoffeeChat';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
@@ -34,8 +33,11 @@ export default function ShowCoffeechatToggle({ isBlind, memberId }: ShowCoffeech
         } else {
           logClickEvent('coffeechatToggleOff');
         }
-        queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(memberId) });
+        queryClient.invalidateQueries({ queryKey: ['getRecentCoffeeChat'] });
         queryClient.invalidateQueries({ queryKey: ['getMembersCoffeeChat'] });
+        queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
+        queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(memberId) });
+
         await router.push(playgroundLink.coffeechatDetail(memberId));
       },
     });

diff --git a/src/components/coffeechat/detail/index.tsx b/src/components/coffeechat/detail/index.tsx
@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
+import { useDialog } from '@sopt-makers/ui';
+import { useRouter } from 'next/router';
+import { playgroundLink } from 'playground-common/export';
 import { useEffect, useMemo } from 'react';
 
 import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
@@ -10,16 +13,12 @@ import CoffeechatContents from '@/components/coffeechat/detail/CoffeechatContent
 import OpenerProfile from '@/components/coffeechat/detail/OpenerProfile';
 import SeemoreSelect from '@/components/coffeechat/detail/SeemoreSelect';
 import CoffeechatLoading from '@/components/coffeechat/Loading';
-import Loading from '@/components/common/Loading';
 import CareerSection from '@/components/members/detail/CareerSection';
 import DetailInfoSection from '@/components/members/detail/DetailinfoSection';
 import ProjectSection from '@/components/members/detail/ProjectSection';
 import SoptActivitySection from '@/components/members/detail/SoptActivitySection';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { safeParseInt } from '@/utils';
-import { useDialog } from '@sopt-makers/ui';
-import { useRouter } from 'next/router';
-import { playgroundLink } from 'playground-common/export';
 
 interface CoffeechatDetailProp {
   memberId: string;
@@ -137,7 +136,7 @@ const DetailPage = styled.div`
   max-width: 790px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    margin: 24px 30px;
+    margin: 20px 24px;
     width: 100%;
   }
 `;

diff --git a/src/components/coffeechat/page/CoffeechatUploadPage.tsx b/src/components/coffeechat/page/CoffeechatUploadPage.tsx
@@ -68,7 +68,7 @@ export default function CoffeechatUploadPage({ uploadType, form, onSubmit }: Cof
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onOpen, onError)}>
-        <SubmitDialog isOpen={isOpen} onClose={onClose} onSubmit={onSubmit} />
+        <SubmitDialog isOpen={isOpen} onClose={onClose} onSubmit={onSubmit} uploadType={uploadType} />
         <>
           <Responsive only='desktop'>
             <DesktopCoffeechatUploadLayout

diff --git a/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/MyInfoForm/index.tsx
@@ -47,7 +47,9 @@ export default function MyInfoForm() {
                   value={field.value ?? ''}
                   maxLength={200}
                   fixedHeight={126}
-                  lineBreakPlaceholder={['• 직무 경험이나 관심 분야를 적어주면 더 좋아요!']}
+                  lineBreakPlaceholder={[
+                    'ex. 안녕하세요, 서버 파트 수료 후 지금은 게임 업계 PM으로 일하고 있습니다. 개발자에서 PM으로 직무를 전환하는 과정이 쉽지 않았던 만큼, 제가 느낀 인사이트를 나누고 함께 고민하고 싶어요!',
+                  ]}
                   isError={!!errors.memberInfo?.introduction}
                   errorMessage={errors.memberInfo?.introduction?.message}
                   onChange={(e) => field.onChange(e.target.value)}
@@ -59,7 +61,9 @@ export default function MyInfoForm() {
                   value={field.value ?? ''}
                   maxLength={200}
                   fixedHeight={150}
-                  lineBreakPlaceholder={['• 직무 경험이나 관심 분야를 적어주면 더 좋아요!']}
+                  lineBreakPlaceholder={[
+                    'ex. 안녕하세요, 서버 파트 수료 후 지금은 게임 업계 PM으로 일하고 있습니다. 개발자에서 PM으로 직무를 전환하는 과정이 쉽지 않았던 만큼, 제가 느낀 인사이트를 나누고 함께 고민하고 싶어요!',
+                  ]}
                   isError={!!errors.memberInfo?.introduction}
                   errorMessage={errors.memberInfo?.introduction?.message}
                   onChange={(e) => field.onChange(e.target.value)}

diff --git a/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx b/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.stories.tsx
@@ -1,10 +1,11 @@
-import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema';
-import SubmitDialog from '@/components/coffeechat/upload/CoffeechatForm/SubmitDialog';
-import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Meta } from '@storybook/react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema';
+import SubmitDialog from '@/components/coffeechat/upload/CoffeechatForm/SubmitDialog';
+import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+
 const form = {
   memberInfo: {
     career: '주니어',
@@ -40,6 +41,7 @@ export default {
             onSubmit={() => {
               //
             }}
+            uploadType='오픈'
           />
         </FormProvider>
       );

diff --git a/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx
@@ -1,22 +1,24 @@
-import Responsive from '@/components/common/Responsive';
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import styled from '@emotion/styled';
 import { Button, Dialog } from '@sopt-makers/ui';
 import { FieldValues, useFormContext } from 'react-hook-form';
 
+import Responsive from '@/components/common/Responsive';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
 interface SubmitDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: <T extends FieldValues>(values: T) => void;
+  uploadType: '오픈' | '수정';
 }
 
-export default function SubmitDialog({ isOpen, onClose, onSubmit }: SubmitDialogProps) {
+export default function SubmitDialog({ isOpen, onClose, onSubmit, uploadType }: SubmitDialogProps) {
   const { getValues } = useFormContext();
 
   return (
     <>
       <Dialog isOpen={isOpen} onClose={onClose}>
-        <Dialog.Title>커피챗을 오픈하시겠습니까?</Dialog.Title>
+        <Dialog.Title>커피챗을 {uploadType}하시겠습니까?</Dialog.Title>
         <DescriptionWrapper>
           <Dialog.Description>
             커피챗은 한 개만 오픈할 수 있어요. 커피챗에 대한 설명이 충분히 작성되었는지 확인해주세요.
@@ -28,7 +30,7 @@ export default function SubmitDialog({ isOpen, onClose, onSubmit }: SubmitDialog
               취소
             </Button>
             <Button type='button' onClick={() => onSubmit(getValues())} rounded='md' size='md' theme='white'>
-              오픈하기
+              {uploadType}하기
             </Button>
           </Dialog.Footer>
         </Responsive>
@@ -45,7 +47,7 @@ export default function SubmitDialog({ isOpen, onClose, onSubmit }: SubmitDialog
               theme='white'
               style={{ width: '100%' }}
             >
-              오픈하기
+              {uploadType}하기
             </Button>
           </Dialog.Footer>
         </Responsive>

diff --git a/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { IconPlus } from '@sopt-makers/icons';
 import { Button } from '@sopt-makers/ui';
 
 import Responsive from '@/components/common/Responsive';
@@ -12,12 +11,12 @@ export default function UploadButton({ uploadType }: UploadButtonProp) {
   return (
     <div>
       <Responsive only='desktop'>
-        <Button size='md' LeftIcon={IconPlus} type='submit'>
+        <Button size='md' type='submit'>
           커피챗 {uploadType}하기
         </Button>
       </Responsive>
       <Responsive only='mobile'>
-        <MobileButton size='lg' LeftIcon={IconPlus} type='submit'>
+        <MobileButton size='lg' type='submit'>
           커피챗 {uploadType}하기
         </MobileButton>
       </Responsive>

diff --git a/src/pages/coffeechat/edit/[id].tsx b/src/pages/coffeechat/edit/[id].tsx
@@ -48,12 +48,11 @@ const CoffeechatEdit = () => {
       },
       {
         onSuccess: async () => {
-          queryClient.invalidateQueries({
-            predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
-          });
-
+          queryClient.invalidateQueries({ queryKey: ['getRecentCoffeeChat'] });
+          queryClient.invalidateQueries({ queryKey: ['getMembersCoffeeChat'] });
+          queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
           queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(memberId) });
-          toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
+          toastOpen({ icon: 'success', content: '커피챗이 수정됐어요! 경험을 나눠주셔서 감사해요.' });
           logSubmitEvent('editCoffeechat');
           await router.push(playgroundLink.coffeechatDetail(me?.id ?? ''));
         },

diff --git a/src/pages/coffeechat/upload.tsx b/src/pages/coffeechat/upload.tsx
@@ -2,9 +2,10 @@ import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { playgroundLink } from 'playground-common/export';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FieldValues } from 'react-hook-form';
 
+import { getCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
 import { uploadCoffeechat } from '@/api/endpoint/coffeechat/uploadCoffeechat';
 import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
 import { useGetMemberProfileById } from '@/api/endpoint_LEGACY/hooks';
@@ -25,21 +26,6 @@ const CoffeechatUpload = () => {
   const { data: me } = useGetMemberOfMe();
   const { data: profile } = useGetMemberProfileById(me?.id ?? undefined);
 
-  useEffect(() => {
-    me?.hasCoffeeChat &&
-      open({
-        title: `이미 오픈한 커피챗이 있어요!`,
-        description: `커피챗은 한 개만 오픈할 수 있어요. 등록된 커피챗을 삭제한 후 다시 시도해주세요.`,
-        type: 'single',
-        typeOptions: {
-          approveButtonText: '확인',
-          buttonFunction: async () => {
-            await router.push(playgroundLink.coffeechat());
-          },
-        },
-      });
-  }, [me?.hasCoffeeChat]);
-
   const sortedSoptActivities = useMemo(() => {
     if (!profile?.soptActivities) {
       return [];
@@ -74,10 +60,11 @@ const CoffeechatUpload = () => {
       },
       {
         onSuccess: async () => {
-          queryClient.invalidateQueries({
-            predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
-          });
+          queryClient.invalidateQueries({ queryKey: ['getRecentCoffeeChat'] });
+          queryClient.invalidateQueries({ queryKey: ['getMembersCoffeeChat'] });
           queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
+          queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(String(me?.id)) });
+
           logSubmitEvent('openCoffeechat', {
             career: memberInfo.career
               ? Array.isArray(memberInfo.career)
@@ -99,7 +86,7 @@ const CoffeechatUpload = () => {
             generation: generations ?? [],
             part: part ?? [],
           });
-          toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
+          await toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
           await router.push(playgroundLink.coffeechat());
         },
         onError: (error) => {