diff --git a/src/components/coffeechat/detail/SeemoreSelect/index.tsx b/src/components/coffeechat/detail/SeemoreSelect/index.tsx index 9fc53f026..5b8cfe429 100644 --- 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 index d45a8152b..a6ee006e2 100644 --- 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 index 39c7f8cd4..a6a73796e 100644 --- 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 index f2be2faae..71db31cbe 100644 --- 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 (
- + <> 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 index 08db4b955..e49bc2dea 100644 --- 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='오픈' /> ); diff --git a/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/SubmitDialog/index.tsx index ff8826866..03da2a088 100644 --- 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: (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 ( <> - 커피챗을 오픈하시겠습니까? + 커피챗을 {uploadType}하시겠습니까? 커피챗은 한 개만 오픈할 수 있어요. 커피챗에 대한 설명이 충분히 작성되었는지 확인해주세요. @@ -28,7 +30,7 @@ export default function SubmitDialog({ isOpen, onClose, onSubmit }: SubmitDialog 취소 @@ -45,7 +47,7 @@ export default function SubmitDialog({ isOpen, onClose, onSubmit }: SubmitDialog theme='white' style={{ width: '100%' }} > - 오픈하기 + {uploadType}하기 diff --git a/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx index 55fe1dd86..f97aa0ff2 100644 --- 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 (
- - + 커피챗 {uploadType}하기 diff --git a/src/pages/coffeechat/edit/[id].tsx b/src/pages/coffeechat/edit/[id].tsx index 39c4d40ac..550437123 100644 --- 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 index 8ad872f60..a231af21a 100644 --- 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) => {