Skip to content

Commit

Permalink
feat: 커피챗 QA (#1665)
Browse files Browse the repository at this point in the history
* feat: 진행 방식 디폴트 선택 방식 변경

* feat: 수정 후, 멤버 정보 리패치 추가

* feat: mds ui 버전 업

* feat: 딤드 처리

* feat: css 수정

* feat: 커피챗 존재하는 경우 여부 서버 데이터 받아오기

* feat: 이미 커피챗을 연 유저가 url로 업로드 페이지 접속 시 예외처리

* fix: 빌드 타입 에러 수정

* feat: 삭제 후 me 데이터 리패치

* feat: 진행방식 defaultValue 수정

* feat: 예외처리 수정

* feat: hasCoffeeChat 변경 및 비활성된 커피챗 예외처리
  • Loading branch information
seojisoosoo authored Nov 6, 2024
1 parent c899651 commit 8a020c5
Show file tree
Hide file tree
Showing 14 changed files with 104 additions and 46 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@
"@radix-ui/react-slot": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.5",
"@sopt-makers/colors": "^3.0.0",
"@sopt-makers/colors": "^3.0.2",
"@sopt-makers/fonts": "^1.0.0",
"@sopt-makers/icons": "^1.0.5",
"@sopt-makers/ui": "^2.7.1",
"@sopt-makers/ui": "^2.7.6",
"@tanstack/react-query": "^5.4.3",
"@toss/emotion-utils": "^1.1.10",
"@toss/error-boundary": "^1.4.6",
Expand Down
6 changes: 3 additions & 3 deletions src/api/endpoint/coffeechat/getCoffeechatDetail.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ const CoffeechatDetailSchema = z.object({
career: z.string(),
organization: z.string().nullable(),
memberCareerTitle: z.string().nullable(),
phone: z.string(),
phone: z.string().nullable(),
email: z.string(),
introduction: z.string(),
introduction: z.string().nullable(), // TODO: 커피챗 오픈 후, nullable 삭제 필요
topicTypeList: z.array(z.string()),
topic: z.string(),
topic: z.string().nullable(), // TODO: 커피챗 오픈 후, nullable 삭제 필요
meetingType: z.string(),
guideline: z.string().nullable(),
isMine: z.boolean().nullable(),
Expand Down
1 change: 1 addition & 0 deletions src/api/endpoint/members/getMemberOfMe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const getMemberOfMe = createEndpoint({
hasProfile: z.boolean(),
profileImage: z.string().nullable(),
editActivitiesAble: z.boolean(),
hasCoffeeChat: z.boolean(),
}),
});

Expand Down
11 changes: 4 additions & 7 deletions src/components/coffeechat/CoffeeRecentChatList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
import { playgroundLink } from 'playground-common/export';
import { ReactNode, startTransition, useEffect, useState } from 'react';

import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
import { useGetRecentCoffeeChat } from '@/api/endpoint/members/getRecentCoffeeChats';
import CoffeeChatCard from '@/components/coffeechat/CoffeeChatCard';
import ScrollCarousel from '@/components/coffeechat/CoffeeRecentChatList/scrollCarousel';
Expand Down Expand Up @@ -44,7 +45,7 @@ export default function CoffeeChatList() {
const { logClickEvent } = useEventLogger();
const { open } = useDialog();
const { data, isLoading } = useGetRecentCoffeeChat();

const { data: me } = useGetMemberOfMe();
const isEmptyData = data?.coffeeChatList == null;
const dataList = !isEmptyData ? data.coffeeChatList : COFFECHAT_SAMPLE_DATA.coffeeChatList;
const formatSoptActivities = (soptActivities: string[])=> {
Expand Down Expand Up @@ -166,8 +167,6 @@ export default function CoffeeChatList() {
},
});
};
// TODO: 서버 데이터로 변경
const hasCoffeechat = false;

return (
<Container>
Expand All @@ -180,8 +179,7 @@ export default function CoffeeChatList() {
size='lg'
theme='white'
onClick={() => {
router.push(playgroundLink.coffeechatUpload());
hasCoffeechat ? alreadyOpenedOption() : startOpenOption();
me?.hasCoffeeChat ? alreadyOpenedOption() : startOpenOption();
}}
>
커피챗 오픈하기
Expand All @@ -194,8 +192,7 @@ export default function CoffeeChatList() {
size='md'
theme='white'
onClick={() => {
router.push(playgroundLink.coffeechatUpload());
hasCoffeechat ? alreadyOpenedOption() : startOpenOption();
me?.hasCoffeeChat ? alreadyOpenedOption() : startOpenOption();
}}
>
커피챗 오픈하기
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function CoffeechatContents({ memberId }: CoffeechatContentsProps
<>
{openerProfile && (
<CoffeechatContentsWrapper>
{openerProfile.introduction.trim() && (
{openerProfile.introduction && openerProfile.introduction.trim() && (
<ContentsBox>
<Text>{openerProfile.introduction}</Text>
</ContentsBox>
Expand Down
20 changes: 18 additions & 2 deletions src/components/coffeechat/detail/OpenerProfile/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import RegisterCoffeechatButton from '@/components/coffeechat/detail/RegisterCof
import ShowCoffeechatToggle from '@/components/coffeechat/detail/ShowCoffeechatToggle';
import useModalState from '@/components/common/Modal/useModalState';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import { useDialog } from '@sopt-makers/ui';

interface OpenerProfileProps {
memberId: string;
Expand All @@ -19,6 +20,21 @@ interface OpenerProfileProps {
export default function OpenerProfile({ memberId }: OpenerProfileProps) {
const { data: openerProfile } = useGetCoffeechatDetail(memberId);
const { isOpen: isOpenMessageModal, onOpen: onOpenMessageModal, onClose: onCloseMessageModal } = useModalState();
const { open } = useDialog();

const handleImpossibleToRegister = () => {
open({
title: `비활성화된 커피챗이에요.`,
description: ``,
type: 'single',
typeOptions: {
approveButtonText: '확인',
buttonFunction: async () => {
//
},
},
});
};

return (
<>
Expand Down Expand Up @@ -57,7 +73,7 @@ export default function OpenerProfile({ memberId }: OpenerProfileProps) {
) : (
<RegisterCoffeechatButton
onClick={() => {
onOpenMessageModal();
openerProfile.isCoffeeChatActivate ? onOpenMessageModal() : handleImpossibleToRegister();
}}
/>
)}
Expand Down Expand Up @@ -174,7 +190,7 @@ const OpenerProfileSection = styled.section<{ isMine: boolean }>`
grid: [row1-start] 'profileImageBox profileInfoBox buttonSection' auto [row1-end]/ auto;
grid-template-columns: 1fr 5fr 2fr;
gap: 28px;
align-items: ${({ isMine }) => (isMine ? 'flex-end' : 'center')};
align-items: center;
justify-content: space-between;
width: 100%;
Expand Down
8 changes: 4 additions & 4 deletions src/components/coffeechat/detail/SeemoreSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export default function SeemoreSelect({ memberId }: SeemoreSelectProp) {
queryClient.invalidateQueries({
predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
});
queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
toastOpen({ icon: 'success', content: '커피챗이 삭제되었어요. 다음에 또 만나요!' });
await router.push(playgroundLink.coffeechat());
},
Expand Down Expand Up @@ -128,9 +129,6 @@ const BottomSheetSeemore = ({ onEdit, onDelete }: SeemoreContentProps) => {
<DotsVerticalIcon />
</Dialog.Trigger>
<DialogPortal>
<Dialog.Overlay asChild>
<Overlay />
</Dialog.Overlay>
<Dialog.Content asChild>
<StyledContent>
<StyledContentItem
Expand All @@ -154,6 +152,7 @@ const BottomSheetSeemore = ({ onEdit, onDelete }: SeemoreContentProps) => {
</StyledContentItem>
</StyledContent>
</Dialog.Content>
<Overlay />
</DialogPortal>
</Dialog.Root>
);
Expand All @@ -163,7 +162,7 @@ const Overlay = styled.div`
position: fixed;
inset: 0;
z-index: 101;
background-color: rgb(0 0 0 / 70%);
background-color: ${colors.backgroundDimmed};
animation: overlay-show 0.3s cubic-bezier(0.16, 1, 0.3, 1);
@keyframes overlay-show {
Expand All @@ -183,6 +182,7 @@ const StyledContent = styled.div`
gap: 6px;
border-radius: 13px;
background-color: ${colors.gray800};
cursor: pointer;
padding: 8px;
@media ${MOBILE_MEDIA_QUERY} {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,13 @@ const ToggleSection = styled.div`
display: flex;
gap: 8px;
justify-content: flex-end;
margin-bottom: 8px;
margin-top: 85px;
color: ${colors.gray300};
${fonts.BODY_16_R};
@media ${MOBILE_MEDIA_QUERY} {
float: left;
margin-top: 0;
margin-bottom: 0;
}
Expand Down
26 changes: 22 additions & 4 deletions src/components/coffeechat/detail/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { colors } from '@sopt-makers/colors';
import { fonts } from '@sopt-makers/fonts';
import { useMemo } from 'react';
import { useEffect, useMemo } from 'react';

import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
Expand All @@ -17,16 +17,20 @@ 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;
}

export default function CoffeechatDetail({ memberId }: CoffeechatDetailProp) {
const { data: openerProfile } = useGetCoffeechatDetail(memberId);
const { data: openerProfile, isError, error } = useGetCoffeechatDetail(memberId);
const { data: profile } = useGetMemberProfileById(safeParseInt(memberId) ?? undefined);

const { data: me } = useGetMemberOfMe();
const router = useRouter();
const { open } = useDialog();

const sortedSoptActivities = useMemo(() => {
if (!profile?.soptActivities) {
Expand All @@ -37,14 +41,28 @@ export default function CoffeechatDetail({ memberId }: CoffeechatDetailProp) {
return sorted;
}, [profile?.soptActivities]);

useEffect(() => {
isError &&
open({
title: `커피챗 정보를 확인할 수 없는 유저입니다.`,
description: `${error.message}`,
type: 'single',
typeOptions: {
approveButtonText: '확인',
buttonFunction: async () => {
await router.push(playgroundLink.coffeechat());
},
},
});
}, [isError]);

return (
<DetailPageLayout>
<DetailPage>
{openerProfile && profile && me ? (
<>
<CoffeechatHeader>
<CoffeechatTitle>{openerProfile.bio}</CoffeechatTitle>
{/* TODO: 더보기 버튼 기능 구현 */}
<>{openerProfile.isMine && <SeemoreSelect memberId={memberId} />}</>
</CoffeechatHeader>
<OpenerProfile memberId={memberId} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { COFFEECHAT_MOBILE_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import styled from '@emotion/styled';
import { ReactNode } from 'react';

import { COFFEECHAT_MOBILE_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';

interface MobileCoffeechatUploadLayoutProps {
main: ReactNode;
submitButton: ReactNode;
Expand All @@ -28,7 +29,7 @@ const Layout = styled.div`
}
@media ${COFFEECHAT_MOBILE_MEDIA_QUERY} {
margin-top: 0;
margin-top: 30px;
}
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,7 @@ export default function CoffeechatInfoForm() {
<SelectV2.Root
type='text'
visibleOptions={3}
defaultValue={
MEETING_TYPE_OPTIONS.find((option) => option.value === field.value) ??
MEETING_TYPE_OPTIONS[MEETING_TYPE_OPTIONS.length - 1]
}
defaultValue={MEETING_TYPE_OPTIONS.find((option) => option.value === field.value)}
onChange={(value) => field.onChange(value)}
>
<SelectV2.Trigger>
Expand Down
10 changes: 6 additions & 4 deletions src/pages/coffeechat/edit/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { playgroundLink } from 'playground-common/export';
import { FieldValues } from 'react-hook-form';

import { editCoffeechat } from '@/api/endpoint/coffeechat/editCoffeechat';
import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
import { getCoffeechatDetail, useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
import AuthRequired from '@/components/auth/AuthRequired';
import CoffeechatLoading from '@/components/coffeechat/Loading';
Expand Down Expand Up @@ -44,21 +44,23 @@ const CoffeechatEdit = () => {
: memberInfo.career
: null,
},
coffeeChatInfo: { ...coffeeChatInfo, meetingType: coffeeChatInfo.meetingType ?? '온/오프라인' },
coffeeChatInfo: { ...coffeeChatInfo },
},
{
onSuccess: async () => {
queryClient.invalidateQueries({
predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
});

queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(memberId) });
toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
logSubmitEvent('editCoffeechat');
await router.push(playgroundLink.coffeechatDetail(me?.id ?? ''));
},
onError: (error) => {
const option: DialogOptionType = {
title: `${error.message}`,
description: ``,
title: `오류가 발생했어요.`,
description: `${error.message}`,
type: 'single',
typeOptions: {
approveButtonText: '확인',
Expand Down
24 changes: 20 additions & 4 deletions src/pages/coffeechat/upload.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 { useMemo } from 'react';
import { useEffect, useMemo } from 'react';
import { FieldValues } from 'react-hook-form';

import { uploadCoffeechat } from '@/api/endpoint/coffeechat/uploadCoffeechat';
Expand All @@ -25,6 +25,21 @@ 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 [];
Expand Down Expand Up @@ -55,13 +70,14 @@ const CoffeechatUpload = () => {
: memberInfo.career
: null,
},
coffeeChatInfo: { ...coffeeChatInfo, meetingType: coffeeChatInfo.meetingType ?? '온/오프라인' },
coffeeChatInfo: { ...coffeeChatInfo },
},
{
onSuccess: async () => {
queryClient.invalidateQueries({
predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
});
queryClient.invalidateQueries({ queryKey: ['getMemberOfMe'] });
logSubmitEvent('openCoffeechat', {
career: memberInfo.career
? Array.isArray(memberInfo.career)
Expand All @@ -88,8 +104,8 @@ const CoffeechatUpload = () => {
},
onError: (error) => {
const option: DialogOptionType = {
title: `${error.message}`,
description: ``,
title: `오류가 발생했어요.`,
description: `${error.message}`,
type: 'single',
typeOptions: {
approveButtonText: '확인',
Expand Down
Loading

0 comments on commit 8a020c5

Please sign in to comment.