From 624932ec8eea4adef6996443bd1642e675a2f4a7 Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Thu, 29 Aug 2024 23:46:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=A7=A4=EC=B9=AD=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=ED=9B=84=EC=97=90=EB=8A=94=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=85=B8=EC=B6=9C=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/about-me/features/containers/ScreenContainer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx b/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx index 852cd60e..acc16ac9 100644 --- a/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx +++ b/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx @@ -31,6 +31,7 @@ export const ScreenContainer = () => { }); const { mutate, isSuccess: sendWavingSuccess } = useCreateHandWavings(); + const hiddenForWavingButton = wavingStatusData?.status === 'ACCEPTED'; const isProgressHandWavings = sendWavingSuccess || wavingStatusData?.status === 'REQUESTED'; const handleHandWaving = () => { @@ -68,7 +69,7 @@ export const ScreenContainer = () => { - {!isMy && getWavingStatusSuccess && ( + {!isMy && getWavingStatusSuccess && !hiddenForWavingButton && ( Date: Fri, 30 Aug 2024 00:41:12 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20StarIcon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sds/src/components/Icon/assets/Star.tsx | 20 +++++++++++++++++++ .../core/sds/src/components/Icon/constants.ts | 2 ++ 2 files changed, 22 insertions(+) create mode 100644 packages/core/sds/src/components/Icon/assets/Star.tsx diff --git a/packages/core/sds/src/components/Icon/assets/Star.tsx b/packages/core/sds/src/components/Icon/assets/Star.tsx new file mode 100644 index 00000000..2fd3c9d0 --- /dev/null +++ b/packages/core/sds/src/components/Icon/assets/Star.tsx @@ -0,0 +1,20 @@ +import { IconAssetProps } from '../types'; + +export const StarIcon = ({ color, size = 20 }: IconAssetProps) => { + return ( + + + + + + + + + + + ); +}; diff --git a/packages/core/sds/src/components/Icon/constants.ts b/packages/core/sds/src/components/Icon/constants.ts index dca731bc..09bc0097 100644 --- a/packages/core/sds/src/components/Icon/constants.ts +++ b/packages/core/sds/src/components/Icon/constants.ts @@ -22,6 +22,7 @@ import { QuestionIcon } from './assets/QuestionIcon'; import { SadUserIcon } from './assets/SadUserIcon'; import { SearchIcon } from './assets/SearchIcon'; import { ShareIcon } from './assets/Share'; +import { StarIcon } from './assets/Star'; import { Stats } from './assets/Stats'; import { UpAndDown } from './assets/UpAndDown'; import { Upload } from './assets/Upload'; @@ -58,4 +59,5 @@ export const iconMap = { upload: Upload, check: CheckIcon, 'cross-circle': CrossCircle, + star: StarIcon, }; From d53e3c6a9b3621e3064ef24f416b636eae33b256 Mon Sep 17 00:00:00 2001 From: Doeunnkimm Date: Fri, 30 Aug 2024 00:41:43 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20accepted=20=EB=90=98=EC=97=88?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=B2=84=ED=8A=BC=20=EC=88=A8=EA=B8=B0?= =?UTF-8?q?=EA=B8=B0,=20=ED=94=84=EB=A1=9C=ED=95=84=EC=97=90=20=EB=A7=A4?= =?UTF-8?q?=EC=B9=AD=20UI=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/components/Profile/Profile.tsx | 41 +++++++++++++++---- .../features/components/Profile/constants.ts | 7 ++++ .../features/components/Profile/styles.ts | 24 ++++++++++- .../features/containers/ScreenContainer.tsx | 4 +- .../about-me/features/containers/constants.ts | 8 ++++ 5 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 packages/web-domains/src/about-me/features/components/Profile/constants.ts diff --git a/packages/web-domains/src/about-me/features/components/Profile/Profile.tsx b/packages/web-domains/src/about-me/features/components/Profile/Profile.tsx index 8d607ea1..a596498f 100644 --- a/packages/web-domains/src/about-me/features/components/Profile/Profile.tsx +++ b/packages/web-domains/src/about-me/features/components/Profile/Profile.tsx @@ -1,12 +1,17 @@ 'use client'; -import { Badge, Txt } from '@sambad/sds/components'; +import { If } from '@sambad/react-utils'; +import { Badge, Icon, Txt } from '@sambad/sds/components'; import { borderRadiusVariants, colors } from '@sambad/sds/theme'; import { Fragment } from 'react'; +import { useGetHandWavingsStatus } from '@/about-me/common/apis/queries/useGetHandWavingsStatus'; import { Avatar } from '@/common/components/Avatar/Avatar'; -import { badgeContainerCss, nameCss } from './styles'; +import { useConvertTypeParams } from '../../hooks/useConvertTypeParams'; + +import { wavingAcceptedMemberAttribute } from './constants'; +import { AvatarCss, badgeContainerCss, nameCss, wavingAcceptedBadgeCss } from './styles'; import { generateAge, generateGender } from './utils'; interface ProfileProps { @@ -24,6 +29,14 @@ const colorMap = [colors.secondary100, colors.primary100, colors.tertiary50, col export const Profile = (props: ProfileProps) => { const { name, imageUrl, birth: birthFromProps, gender: genderFromProps, mbti, location, job } = props; + const { meetingId, meetingMemberId } = useConvertTypeParams(); + const { data: wavingStatusData } = useGetHandWavingsStatus({ + meetingId, + receiverMemberId: meetingMemberId, + }); + + const isWavingAcceptedMember = wavingStatusData?.status === 'ACCEPTED'; + const age = birthFromProps && generateAge(birthFromProps); const gender = generateGender(genderFromProps); @@ -32,14 +45,24 @@ export const Profile = (props: ProfileProps) => { return ( {imageUrl != null && ( - +
+ + + + + + +
)} + {name} diff --git a/packages/web-domains/src/about-me/features/components/Profile/constants.ts b/packages/web-domains/src/about-me/features/components/Profile/constants.ts new file mode 100644 index 00000000..eb3b9e28 --- /dev/null +++ b/packages/web-domains/src/about-me/features/components/Profile/constants.ts @@ -0,0 +1,7 @@ +const wavingAcceptedMemberAttrKey = 'data-sambad-waving-accepted-member'; +export const wavingAcceptedMemberAttribute = { + attribute: (isAccepted: boolean) => ({ + [wavingAcceptedMemberAttrKey]: isAccepted ? '' : undefined, + }), + querySelector: `[${wavingAcceptedMemberAttrKey}=""]`, +}; diff --git a/packages/web-domains/src/about-me/features/components/Profile/styles.ts b/packages/web-domains/src/about-me/features/components/Profile/styles.ts index f10e236c..cb2dff23 100644 --- a/packages/web-domains/src/about-me/features/components/Profile/styles.ts +++ b/packages/web-domains/src/about-me/features/components/Profile/styles.ts @@ -1,10 +1,18 @@ import { css } from '@emotion/react'; -import { size } from '@sambad/sds/theme'; +import { borderRadiusVariants, colors, size } from '@sambad/sds/theme'; + +import { wavingAcceptedMemberAttribute } from './constants'; export const nameCss = css({ marginTop: size['2xs'], }); +export const AvatarCss = css({ + [`&${wavingAcceptedMemberAttribute.querySelector}`]: { + border: `4.5px solid ${colors.primary500}`, + }, +}); + export const badgeContainerCss = css({ paddingTop: size['4xs'], display: 'flex', @@ -23,3 +31,17 @@ export const badgeContainerCss = css({ }, }, }); + +export const wavingAcceptedBadgeCss = css({ + position: 'absolute', + width: '32px', + height: '32px', + backgroundColor: colors.primary500, + borderRadius: borderRadiusVariants.round, + // NOTE: 위치 보정 + bottom: 4, + left: 0, + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', +}); diff --git a/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx b/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx index acc16ac9..b9bc7776 100644 --- a/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx +++ b/packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx @@ -31,7 +31,7 @@ export const ScreenContainer = () => { }); const { mutate, isSuccess: sendWavingSuccess } = useCreateHandWavings(); - const hiddenForWavingButton = wavingStatusData?.status === 'ACCEPTED'; + const hiddenForWavingButton = isMy || wavingStatusData?.status === 'ACCEPTED' || !getWavingStatusSuccess; const isProgressHandWavings = sendWavingSuccess || wavingStatusData?.status === 'REQUESTED'; const handleHandWaving = () => { @@ -69,7 +69,7 @@ export const ScreenContainer = () => { - {!isMy && getWavingStatusSuccess && !hiddenForWavingButton && ( + {!hiddenForWavingButton && ( ({ + [wavingAcceptedAttributeKey]: isAccepted ? '' : undefined, + }), + querySelector: `[${wavingAcceptedAttributeKey}=""]`, +};