fix(web-domains): Home Layout padding 변경, Empty View 삭제, 모임홈 디자인 정의서 …

…업데이트 (#206)

* fix: Home Layout padding 변경

* fix: 홈 EMPTY VIEW 삭제 및 본인 프로필 나로 표시

* fix: 모임 표시 왕관 아이콘 적용

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

* fix: 본인 프로필인 경우 마이로 이동

* fix: 모임리스트 본인 추가로 인한 릴레이 질문 시작 변경

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"

packages/web-domains/src/home/common/apis/schema/useGetProgressingQuestionQuery.type.ts

@@ -19,4 +19,8 @@ export type MemberType = {
   profileImageFileUrl?: string;
   role: 'OWNER' | 'ADMIN' | 'MEMBER';
   isHandWaved: boolean;
+  isMe: boolean;
+  handWavingStatus: HandWavingStatusType;
 };
+
+export type HandWavingStatusType = 'NOT_REQUESTED' | 'REQUESTED' | 'ACCEPTED' | 'REJECTED';

packages/web-domains/src/home/common/components/Layout/HomeLayout.tsx

@@ -3,5 +3,5 @@
 import { PropsWithChildren } from 'react';
 
 export const HomeLayout = ({ children }: PropsWithChildren) => {
-  return <div style={{ height: 'calc(100vh - 78px)', position: 'relative', paddingBottom: '78px' }}>{children}</div>;
+  return <div style={{ minHeight: 'calc(100vh - 78px)', position: 'relative', paddingBottom: '78px' }}>{children}</div>;
 };

packages/web-domains/src/home/common/constants/meetingActivatedLimit.ts

@@ -0,0 +1 @@
+export const MEETING_ACTIVATED_LIMIT = 2;

packages/web-domains/src/home/features/floating-button/services/useFloatingButtonService.ts

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useDialogContext } from '@/common/contexts/DialogProvider';
 import { useGetGatherMemberList } from '@/home/common/apis/queries/useGetGatherMemberList';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
+import { MEETING_ACTIVATED_LIMIT } from '@/home/common/constants/meetingActivatedLimit';
 
 export const useFloatingButtonService = () => {
   const currentMeeting = useAtomValue(HomeAtoms.currentMeeting);
@@ -49,7 +50,7 @@ export const useFloatingButtonService = () => {
     close();
   };
 
-  const isOnlyOne = !!memberList && memberList.contents.length < 1;
+  const isOnlyOne = !!memberList && memberList.contents.length < MEETING_ACTIVATED_LIMIT;
 
   return {
     meetingId: currentMeeting?.meetingId,

packages/web-domains/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 } = member;
+  const { name, role, profileImageFileUrl, meetingMemberId, isHandWaved, isMe, handWavingStatus } = member;
   const isOwner = role === 'OWNER';
 
   return (
@@ -25,29 +25,54 @@ export const GatherMemberProfile = ({ meetingId, member }: GatherMemberProfilePr
         padding: '12px 16px',
       }}
     >
-      <Link href={`${meetingId}/about/${meetingMemberId}`}>
+      <Link href={isMe ? '/home/me' : `${meetingId}/about/${meetingMemberId}`}>
         <div css={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
-          <ProfileImage imageUrl={profileImageFileUrl} isConnection={isHandWaved} />
+          <ProfileImage
+            imageUrl={profileImageFileUrl}
+            isConnection={isHandWaved}
+            isOnwer={isOwner}
+            handWavingStatus={handWavingStatus}
+          />
           <Txt typography="title2" css={{ marginTop: '12px' }}>
-            {name}
-            {isOwner && (
-              <Txt typography="title1" css={{ paddingLeft: '4px', bottom: '1px', position: 'relative' }}>
-                👑
-              </Txt>
-            )}
+            {isMe ? '나' : name}
           </Txt>
         </div>
       </Link>
     </li>
   );
 };
 
-const ProfileImage = ({ imageUrl, isConnection = false }: { imageUrl?: string; isConnection?: boolean }) => {
-  const borderStyles = isConnection ? { border: `3px solid ${colors.primary500}` } : {};
+interface ProfileImageProps {
+  imageUrl?: string;
+  isConnection?: boolean;
+  isOnwer?: boolean;
+  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%', ...borderStyles }}>
-      {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"
+          color={colors.primary500}
+          css={{ position: 'absolute', top: '-12px', left: '50%', transform: 'translate(-50%, 0)' }}
+        />
+      )}
       <Avatar imageUrl={imageUrl} width={64} height={64} css={{ borderRadius: '50%' }} />
     </span>
   );

packages/web-domains/src/home/features/gather-member/containers/GatherMemberProfileListContainer.tsx

@@ -3,7 +3,6 @@
 import { Icon } from '@sds/components';
 
 import { KakaoShareModal } from '@/common';
-import { EmptyView } from '@/common/components';
 
 import { GatherMemberProfileList } from '../components/GatherMemberProfile/GatherMemberProfileList';
 import { GatherMemberSearchInput } from '../components/GatherMemberSearch/GatherMemberSearchInput';
@@ -22,10 +21,6 @@ export const GatherMemberProfileListContainer = () => {
     inviteModalOpen,
   } = useGatherMemberProfileListService();
 
-  if (!gatherMemberList.length) {
-    return <EmptyView title="아직 입장한 모임원이 없어요!" />;
-  }
-
   return (
     <section css={{ width: '100%', padding: '24px 20px' }}>
       <div css={{ display: 'flex' }}>

packages/web-domains/src/home/features/notification/services/useNotificationService.ts

@@ -11,6 +11,7 @@ import { useGetNotification } from '@/home/common/apis/queries/useGetNotificatio
 import { NotificationType } from '@/home/common/apis/schema/Notification.schema';
 import { ProgressingQuestionType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
+import { MEETING_ACTIVATED_LIMIT } from '@/home/common/constants/meetingActivatedLimit';
 
 export const useNotificationService = () => {
   const queryClient = useQueryClient();
@@ -72,7 +73,7 @@ export const useNotificationService = () => {
     }
   }, [notfication, currentMeeting]);
 
-  const isOnlyOne = !!memberList && memberList.contents.length < 1;
+  const isOnlyOne = !!memberList && memberList.contents.length < MEETING_ACTIVATED_LIMIT;
 
   return {
     meetingId,

packages/web-domains/src/home/features/progressing-question/services/useProgressingQuestionService.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { useGetGatherMemberList } from '@/home/common/apis/queries/useGetGatherMemberList';
 import { useGetMyInfo } from '@/home/common/apis/queries/useGetMyInfo';
 import { HomeAtoms } from '@/home/common/atoms/home.atom';
+import { MEETING_ACTIVATED_LIMIT } from '@/home/common/constants/meetingActivatedLimit';
 import { useSetCurrentMeeting } from '@/home/common/hooks/useSetCurrentMeeting';
 
 import { useGetProgressingQuestion } from '../../../common/apis/queries/useGetProgressingQuestion';
@@ -75,7 +76,7 @@ export const useProgressingQuestionService = () => {
     }
   }, [progressingQuestion, myInfo]);
 
-  const isOnlyOne = !!memberList && memberList.contents.length < 1;
+  const isOnlyOne = !!memberList && memberList.contents.length < MEETING_ACTIVATED_LIMIT;
 
   return {
     isOnlyOne,