fix(web-domains): 손 흔들기 상태에 따른 버튼 및 Avatar UI 처리

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 (
+    <svg width={size} height={size} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="fi-sr-star" clipPath="url(#clip0_5651_74229)">
+        <path
+          id="Vector"
+          d="M1.38284 8.26696L3.75618 10.0003L2.85484 12.7916C2.70918 13.2246 2.70734 13.693 2.84958 14.127C2.99183 14.5611 3.27054 14.9375 3.64418 15.2003C4.01141 15.4715 4.45644 15.6168 4.91294 15.6145C5.36945 15.6122 5.813 15.4625 6.17751 15.1876L8.49818 13.4796L10.8195 15.1856C11.1861 15.4553 11.6287 15.6017 12.0838 15.6039C12.5388 15.6062 12.9828 15.464 13.352 15.198C13.7212 14.9319 13.9965 14.5557 14.1384 14.1233C14.2802 13.6909 14.2813 13.2247 14.1415 12.7916L13.2402 10.0003L15.6135 8.26696C15.9796 7.9993 16.2517 7.6228 16.3911 7.19122C16.5304 6.75965 16.5298 6.29509 16.3893 5.86389C16.2488 5.43269 15.9757 5.05691 15.6089 4.79023C15.242 4.52355 14.8003 4.37961 14.3468 4.37896H11.4315L10.5468 1.62163C10.4077 1.1876 10.1344 0.808971 9.76616 0.540339C9.39796 0.271706 8.95395 0.126953 8.49818 0.126953C8.0424 0.126953 7.5984 0.271706 7.2302 0.540339C6.862 0.808971 6.58863 1.1876 6.44951 1.62163L5.56484 4.37896H2.65218C2.19867 4.37961 1.75697 4.52355 1.39016 4.79023C1.02335 5.05691 0.750203 5.43269 0.609723 5.86389C0.469244 6.29509 0.468622 6.75965 0.607947 7.19122C0.747271 7.6228 1.01942 7.9993 1.38551 8.26696H1.38284Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5651_74229">
+          <rect width={size} height={size} fill={color} transform="translate(0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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,
 };

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 (
     <Fragment>
       {imageUrl != null && (
-        <Avatar
-          imageUrl={imageUrl}
-          width={80}
-          height={80}
-          alt={`${name}_프로필_이미지`}
-          style={{ borderRadius: borderRadiusVariants.round }}
-        />
+        <div style={{ position: 'relative' }}>
+          <Avatar
+            imageUrl={imageUrl}
+            width={120}
+            height={120}
+            alt={`${name}_프로필_이미지`}
+            style={{ borderRadius: borderRadiusVariants.round }}
+            css={AvatarCss}
+            {...wavingAcceptedMemberAttribute.attribute(isWavingAcceptedMember)}
+          />
+          <If condition={isWavingAcceptedMember}>
+            <span css={wavingAcceptedBadgeCss}>
+              <Icon name="star" size={16} color={colors.white} />
+            </span>
+          </If>
+        </div>
       )}
+
       <Txt typography="heading2" css={nameCss}>
         {name}
       </Txt>

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}=""]`,
+};

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',
+});

packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx

@@ -31,6 +31,7 @@ export const ScreenContainer = () => {
   });
   const { mutate, isSuccess: sendWavingSuccess } = useCreateHandWavings();
 
+  const hiddenForWavingButton = isMy || wavingStatusData?.status === 'ACCEPTED' || !getWavingStatusSuccess;
   const isProgressHandWavings = sendWavingSuccess || wavingStatusData?.status === 'REQUESTED';
 
   const handleHandWaving = () => {
@@ -68,7 +69,7 @@ export const ScreenContainer = () => {
         <ProfileContainer style={{ marginBottom: size['5xs'] }} isMy={isMy} />
         <SegmentedControlContainer ref={segmentedRef} style={sectionStyle} />
       </div>
-      {!isMy && getWavingStatusSuccess && (
+      {!hiddenForWavingButton && (
         <FloatingButton
           size="large"
           disabled={isProgressHandWavings}

packages/web-domains/src/about-me/features/containers/constants.ts

@@ -13,3 +13,11 @@ export const checkboxAttribute = {
   },
   querySelector: `[${checkboxAttributeKey}=""]`,
 };
+
+const wavingAcceptedAttributeKey = 'data-sambad-waving-accepted';
+export const wavingAcceptedAttribute = {
+  attribute: (isAccepted: boolean) => ({
+    [wavingAcceptedAttributeKey]: isAccepted ? '' : undefined,
+  }),
+  querySelector: `[${wavingAcceptedAttributeKey}=""]`,
+};