fix: handWavingStatus에 따른 모임원 프로필 디자인 수정

depromeet · Sep 12, 2024 · 08e26f3 · 08e26f3
1 parent ab801e1
commit 08e26f3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/packages/core/sds/src/components/Icon/assets/ConnectStar.tsx b/packages/core/sds/src/components/Icon/assets/ConnectStar.tsx
@@ -1,11 +1,11 @@
 import { IconAssetProps } from '../types';
 
 export const ConnectStar = (props: IconAssetProps) => {
-  const { size = 20 } = props;
+  const { size = 20, color } = props;
 
   return (
     <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="10" cy="10" r="10" fill="#FF7664" />
+      <circle cx="10" cy="10" r="10" fill={color} />
       <path
         d="M5.55129 10.1656L7.03462 11.249L6.47129 12.9935C6.38025 13.2641 6.3791 13.5569 6.468 13.8282C6.5569 14.0995 6.7311 14.3347 6.96462 14.499C7.19414 14.6685 7.47229 14.7593 7.7576 14.7578C8.04292 14.7564 8.32014 14.6628 8.54796 14.491L9.99837 13.4235L11.4492 14.4898C11.6783 14.6583 11.955 14.7499 12.2394 14.7512C12.5238 14.7526 12.8013 14.6638 13.032 14.4975C13.2628 14.3312 13.4348 14.0961 13.5235 13.8258C13.6122 13.5556 13.6128 13.2642 13.5255 12.9935L12.9621 11.249L14.4455 10.1656C14.6743 9.99834 14.8444 9.76303 14.9314 9.49329C15.0185 9.22356 15.0181 8.93321 14.9303 8.66371C14.8425 8.39421 14.6718 8.15935 14.4425 7.99267C14.2133 7.826 13.9372 7.73603 13.6538 7.73563H11.8317L11.2788 6.0123C11.1918 5.74103 11.021 5.50439 10.7909 5.33649C10.5607 5.1686 10.2832 5.07812 9.99837 5.07812C9.71351 5.07812 9.43601 5.1686 9.20588 5.33649C8.97576 5.50439 8.8049 5.74103 8.71796 6.0123L8.16504 7.73563H6.34462C6.06118 7.73603 5.78512 7.826 5.55586 7.99267C5.32661 8.15935 5.15589 8.39421 5.06809 8.66371C4.98029 8.93321 4.9799 9.22356 5.06698 9.49329C5.15406 9.76303 5.32415 9.99834 5.55295 10.1656H5.55129Z"
         fill="white"

diff --git a/packages/web-domains/src/home/common/apis/schema/useGetProgressingQuestionQuery.type.ts b/packages/web-domains/src/home/common/apis/schema/useGetProgressingQuestionQuery.type.ts
@@ -20,4 +20,7 @@ export type MemberType = {
   role: 'OWNER' | 'ADMIN' | 'MEMBER';
   isHandWaved: boolean;
   isMe: boolean;
+  handWavingStatus: HandWavingStatusType;
 };
+
+export type HandWavingStatusType = 'NOT_REQUESTED' | 'REQUESTED' | 'ACCEPTED' | 'REJECTED';
diff --git a/...ns/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx b/...ns/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx
@@ -3,15 +3,15 @@ import { colors } from '@sds/theme';
 import Link from 'next/link';
 
 import { Avatar } from '@/common/components/Avatar/Avatar';
-import { MemberType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
+import { HandWavingStatusType, MemberType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 
 interface GatherMemberProfileProps {
   meetingId: number;
   member: MemberType;
 }
 
 export const GatherMemberProfile = ({ meetingId, member }: GatherMemberProfileProps) => {
-  const { name, role, profileImageFileUrl, meetingMemberId, isHandWaved, isMe } = member;
+  const { name, role, profileImageFileUrl, meetingMemberId, isHandWaved, isMe, handWavingStatus } = member;
   const isOwner = role === 'OWNER';
 
   return (
@@ -27,7 +27,12 @@ export const GatherMemberProfile = ({ meetingId, member }: GatherMemberProfilePr
     >
       <Link href={`${meetingId}/about/${meetingMemberId}`}>
         <div css={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
-          <ProfileImage imageUrl={profileImageFileUrl} isConnection={isHandWaved} isOnwer={isOwner} />
+          <ProfileImage
+            imageUrl={profileImageFileUrl}
+            isConnection={isHandWaved}
+            isOnwer={isOwner}
+            handWavingStatus={handWavingStatus}
+          />
           <Txt typography="title2" css={{ marginTop: '12px' }}>
             {isMe ? '나' : name}
           </Txt>
@@ -37,20 +42,30 @@ export const GatherMemberProfile = ({ meetingId, member }: GatherMemberProfilePr
   );
 };
 
-const ProfileImage = ({
-  imageUrl,
-  isConnection = false,
-  isOnwer = false,
-}: {
+interface ProfileImageProps {
   imageUrl?: string;
   isConnection?: boolean;
   isOnwer?: boolean;
-}) => {
-  const borderColorStyles = isConnection ? { borderColor: `${colors.primary500}` } : {};
+  handWavingStatus: HandWavingStatusType;
+}
+
+const ProfileImage = ({ imageUrl, isConnection = false, isOnwer = false, handWavingStatus }: ProfileImageProps) => {
+  const isHandWaving = isConnection || handWavingStatus === 'REQUESTED' || handWavingStatus === 'ACCEPTED';
+
+  const color = handWavingStatus === 'ACCEPTED' ? colors.primary500 : colors.grey500;
 
   return (
-    <span css={{ position: 'relative', borderRadius: '50%', border: '3px solid transparent', ...borderColorStyles }}>
-      {isConnection && <Icon name="connect-star" css={{ position: 'absolute', bottom: '-4px', left: '-4px' }} />}
+    <span
+      css={{
+        position: 'relative',
+        borderRadius: '50%',
+        border: '3px solid transparent',
+        ...(isHandWaving && { borderColor: color }),
+      }}
+    >
+      {isHandWaving && (
+        <Icon name="connect-star" color={color} css={{ position: 'absolute', bottom: '-4px', left: '-4px' }} />
+      )}
       {isOnwer && (
         <Icon
           name="crown"