From b16d3509eb40534ba96637b3ee4f9772bfdea864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?=
 <89172499+semnil5202@users.noreply.github.com>
Date: Tue, 27 Aug 2024 01:13:52 +0900
Subject: [PATCH] =?UTF-8?q?refactor(web-domains):=20Profile=20Image=20->?=
 =?UTF-8?q?=20Avatar=EB=A1=9C=20=EC=9D=BC=EA=B4=84=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20objectFit:=20cover=20=EC=A0=81=EC=9A=A9=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: home 지면, 릴레이 질문 답변 관련 지면 objectFit cover 일괄 적용

* refactor: 릴레이 질문 시작 지면 objectFit cover 적용

* refactor: 나머지 지면 프로필 관련 Image 태그는 Avatar 로 일괄 변경 및 ObjectFit 적용

* rename: Avatar web-domains common 으로 이동

* refactor: Avatar 컴포넌트 css 대신 style 사용토록 변경
---
 .../src/about-me/features/components/Profile/Profile.tsx   | 7 ++++---
 .../progressing-question/components/QuestionInfo.tsx       | 2 +-
 .../src/{home => }/common/components/Avatar/Avatar.tsx     | 4 ++--
 .../components/GatherMemberProfile/GatherMemberProfile.tsx | 2 +-
 .../components/PreviousQuestion/PreviousQuestionItem.tsx   | 2 +-
 .../components/QuestionInfo/ActiveQuestion.tsx             | 2 +-
 .../components/QuestionInfo/InActiveQuestion.tsx           | 2 +-
 .../components/Questioner/Questioner.tsx                   | 5 +++--
 .../components/QuestionerDetail/QuestionerDetail.tsx       | 5 +++--
 .../start-relay-question/components/Profile/Profile.tsx    | 5 +++--
 .../features/components/SelectedDataCard/Comment.tsx       | 5 +++--
 .../features/components/SelectedDataCard/Profile.tsx       | 5 +++--
 .../list/components/MemberListItem/MemberListItem.tsx      | 5 +++--
 .../features/main/components/SelectedDataCard/Comment.tsx  | 5 +++--
 .../features/main/components/SelectedDataCard/Profile.tsx  | 7 ++++---
 15 files changed, 36 insertions(+), 27 deletions(-)
 rename packages/web-domains/src/{home => }/common/components/Avatar/Avatar.tsx (76%)

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 9f23c2f2..13941de5 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
@@ -2,9 +2,10 @@
 
 import { Badge, Txt } from '@sambad/sds/components';
 import { borderRadiusVariants, colors } from '@sambad/sds/theme';
-import Image from 'next/image';
 import { Fragment } from 'react';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
+
 import { badgeContainerCss, nameCss } from './styles';
 import { generateAge, generateGender } from './utils';
 
@@ -31,8 +32,8 @@ export const Profile = (props: ProfileProps) => {
   return (
     <Fragment>
       {imageUrl != null && (
-        <Image
-          src={imageUrl}
+        <Avatar
+          imageUrl={imageUrl}
           width={80}
           height={80}
           alt={`${name}_프로필_이미지`}
diff --git a/packages/web-domains/src/answer/features/progressing-question/components/QuestionInfo.tsx b/packages/web-domains/src/answer/features/progressing-question/components/QuestionInfo.tsx
index ef6655ae..3ec25af8 100644
--- a/packages/web-domains/src/answer/features/progressing-question/components/QuestionInfo.tsx
+++ b/packages/web-domains/src/answer/features/progressing-question/components/QuestionInfo.tsx
@@ -1,8 +1,8 @@
 import { Txt } from '@sambad/sds/components';
 import { borderRadiusVariants, colors } from '@sambad/sds/theme';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
 import { ProgressingQuestionType } from '@/home/common/apis/schema/useGetProgressingQuestionQuery.type';
-import { Avatar } from '@/home/common/components/Avatar/Avatar';
 
 interface QuestionInfoProps {
   question: ProgressingQuestionType;
diff --git a/packages/web-domains/src/home/common/components/Avatar/Avatar.tsx b/packages/web-domains/src/common/components/Avatar/Avatar.tsx
similarity index 76%
rename from packages/web-domains/src/home/common/components/Avatar/Avatar.tsx
rename to packages/web-domains/src/common/components/Avatar/Avatar.tsx
index e9b21750..58b6a22c 100644
--- a/packages/web-domains/src/home/common/components/Avatar/Avatar.tsx
+++ b/packages/web-domains/src/common/components/Avatar/Avatar.tsx
@@ -7,7 +7,7 @@ interface AvatarProps extends Omit<ImageProps, 'src' | 'alt'> {
   Icon?: React.ComponentType<{ size?: number }>;
 }
 
-export const Avatar = ({ imageUrl, alt = 'profile-image', size, Icon, ...rest }: AvatarProps) => {
+export const Avatar = ({ imageUrl, alt = 'profile-image', size, Icon, style, ...rest }: AvatarProps) => {
   if (!imageUrl) {
     return (
       <span css={{ display: 'inline-flex' }} {...rest}>
@@ -16,5 +16,5 @@ export const Avatar = ({ imageUrl, alt = 'profile-image', size, Icon, ...rest }:
     );
   }
 
-  return <Image src={imageUrl} alt={alt} {...rest} />;
+  return <Image src={imageUrl} alt={alt} style={{ ...style, objectFit: 'cover' }} {...rest} />;
 };
diff --git a/packages/web-domains/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx b/packages/web-domains/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx
index eedffde7..2ee49f41 100644
--- a/packages/web-domains/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx
+++ b/packages/web-domains/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx
@@ -2,8 +2,8 @@ import { Icon, Txt } from '@sambad/sds/components';
 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 { Avatar } from '@/home/common/components/Avatar/Avatar';
 
 interface GatherMemberProfileProps {
   meetingId: number;
diff --git a/packages/web-domains/src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx b/packages/web-domains/src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx
index fbfae28b..91003317 100644
--- a/packages/web-domains/src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx
+++ b/packages/web-domains/src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx
@@ -3,8 +3,8 @@ import { borderRadiusVariants, colors } from '@sambad/sds/theme';
 import dayjs from 'dayjs';
 import Link from 'next/link';
 
+import { Avatar } from '../../../../../common/components/Avatar/Avatar';
 import { PreviousQuestionType } from '../../../../common/apis/schema/useGetPreviousQuestionListQuery.type';
-import { Avatar } from '../../../../common/components/Avatar/Avatar';
 
 interface PreviousQuestionItemProps {
   meetingId?: number;
diff --git a/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx b/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx
index de27727f..8cbd708c 100644
--- a/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx
+++ b/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx
@@ -5,8 +5,8 @@ import Link from 'next/link';
 import { ToolTip } from '@/common/components/ToolTip/ToolTip';
 
 import { ArrowIcon } from '../../../../../common/asset/arrow';
+import { Avatar } from '../../../../../common/components/Avatar/Avatar';
 import { ProgressingQuestionType } from '../../../../common/apis/schema/useGetProgressingQuestionQuery.type';
-import { Avatar } from '../../../../common/components/Avatar/Avatar';
 
 interface ActiveQuestionProps {
   meetingId?: number;
diff --git a/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx b/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
index b751fe6f..4a636eeb 100644
--- a/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
+++ b/packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
@@ -6,8 +6,8 @@ import dynamic from 'next/dynamic';
 import Countdown from 'react-countdown';
 
 import { ClockIcon } from '../../../../../common/asset/clock';
+import { Avatar } from '../../../../../common/components/Avatar/Avatar.tsx';
 import { MemberType } from '../../../../common/apis/schema/useGetProgressingQuestionQuery.type';
-import { Avatar } from '../../../../common/components/Avatar/Avatar';
 import { getRemainTime } from '../../../../common/utils/getRemainTime';
 
 const CountdownRender = dynamic(
diff --git a/packages/web-domains/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx b/packages/web-domains/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
index a776bef9..0b05bd18 100644
--- a/packages/web-domains/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
+++ b/packages/web-domains/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
@@ -1,8 +1,9 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sds/theme';
-import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
+
 import { useModal } from '../../../../hooks/useModal';
 import { usePostRelayQuestionInfo } from '../../hooks/mutations/usePostRelayQuestionInfo';
 import { QuestionerDetail } from '../QuestionerDetail/QuestionerDetail';
@@ -46,7 +47,7 @@ export const Questioner = ({ meetingId, meetingMemberId, imageUrl, name }: Quest
   return (
     <li css={wrapperCss} onClick={handleOpenModal}>
       <div css={imgWrapperCss}>
-        <Image src={imageUrl} alt={name} width={40} height={40} style={{ objectFit: 'cover' }} />
+        <Avatar imageUrl={imageUrl} alt={name} width={40} height={40} />
       </div>
       <Txt typography="title2" color={colors.black} fontWeight="medium">
         {name}
diff --git a/packages/web-domains/src/relay-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx b/packages/web-domains/src/relay-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
index dc62299a..f381b9d3 100644
--- a/packages/web-domains/src/relay-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
+++ b/packages/web-domains/src/relay-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
@@ -1,7 +1,8 @@
 import { css } from '@emotion/react';
 import { Button, Txt } from '@sambad/sds/components';
 import { colors, size } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/common/components/Avatar/Avatar';
 
 import { RelayRePickQuestioner } from '../../../../assets/RelayRePickQuestioner';
 import { RePick } from '../RePick/RePick';
@@ -28,7 +29,7 @@ export const QuestionerDetail = ({
   return (
     <div css={wrapperCss}>
       <div css={imgWrapperCss}>
-        <Image src={imageUrl} alt={name} width={80} height={80} style={{ objectFit: 'cover' }} />
+        <Avatar imageUrl={imageUrl} alt={name} width={80} height={80} />
       </div>
       <Txt typography="heading2" color={colors.black} fontWeight="bold" css={nameCss}>
         {name}
diff --git a/packages/web-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx b/packages/web-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx
index 9117725d..53eb4596 100644
--- a/packages/web-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx
+++ b/packages/web-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx
@@ -1,6 +1,7 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/common/components/Avatar/Avatar';
 
 import { RelayStartDecoCircle } from '../../../../assets/RelayStartDecoCircle';
 import { RelayStartDecoStar } from '../../../../assets/RelayStartDecoStar';
@@ -25,7 +26,7 @@ const convertProfileImage = (profileImageUrl: string) => {
 
   return (
     <div css={profileImgWrapperCss}>
-      <Image src={profileImageUrl} alt="profile image" width={142} height={142} />
+      <Avatar imageUrl={profileImageUrl} width={142} height={142} />
     </div>
   );
 };
diff --git a/packages/web-domains/src/result/features/components/SelectedDataCard/Comment.tsx b/packages/web-domains/src/result/features/components/SelectedDataCard/Comment.tsx
index ea46359a..e769c1db 100644
--- a/packages/web-domains/src/result/features/components/SelectedDataCard/Comment.tsx
+++ b/packages/web-domains/src/result/features/components/SelectedDataCard/Comment.tsx
@@ -2,7 +2,8 @@
 
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/common/components/Avatar/Avatar';
 
 import { commentAttribute } from './constants';
 import { commentCss, commentProfileCss } from './styles';
@@ -22,7 +23,7 @@ export const Comment = (props: CommentProps) => {
         {comment}
       </Txt>
       <div css={commentProfileCss}>
-        <Image src={imgUrl} width={16} height={16} alt={`${name}_프로필_이미지`} />
+        <Avatar imageUrl={imgUrl} width={16} height={16} alt={`${name}_프로필_이미지`} />
         <Txt typography="body4" color={colors.grey600}>
           {name}
         </Txt>
diff --git a/packages/web-domains/src/result/features/components/SelectedDataCard/Profile.tsx b/packages/web-domains/src/result/features/components/SelectedDataCard/Profile.tsx
index a51005af..4039958e 100644
--- a/packages/web-domains/src/result/features/components/SelectedDataCard/Profile.tsx
+++ b/packages/web-domains/src/result/features/components/SelectedDataCard/Profile.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { Txt, TxtProps } from '@sambad/sds/components';
-import Image from 'next/image';
 import { HTMLAttributes } from 'react';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
+
 import { profileCss } from './styles';
 
 export interface ProfileProps extends HTMLAttributes<HTMLDivElement> {
@@ -18,7 +19,7 @@ export const Profile = (props: ProfileProps) => {
 
   return (
     <div css={profileCss} {...restProps}>
-      {imgUrl && <Image src={imgUrl} width={imgSize} height={imgSize} alt={`${name}_프로필_이미지`} />}
+      {imgUrl && <Avatar imageUrl={imgUrl} width={imgSize} height={imgSize} alt={`${name}_프로필_이미지`} />}
       {name && <Txt typography={nameTypography}>{name}</Txt>}
     </div>
   );
diff --git a/packages/web-domains/src/result/features/list/components/MemberListItem/MemberListItem.tsx b/packages/web-domains/src/result/features/list/components/MemberListItem/MemberListItem.tsx
index b3ad90e6..64d421e8 100644
--- a/packages/web-domains/src/result/features/list/components/MemberListItem/MemberListItem.tsx
+++ b/packages/web-domains/src/result/features/list/components/MemberListItem/MemberListItem.tsx
@@ -1,7 +1,8 @@
 import { Txt } from '@sambad/sds/components';
-import Image from 'next/image';
 import { HTMLAttributes } from 'react';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
+
 import { containerCss, ownerEmojiCss } from './styles';
 
 interface MemberListItemProps extends HTMLAttributes<HTMLDivElement> {
@@ -15,7 +16,7 @@ export const MemberListItem = (props: MemberListItemProps) => {
 
   return (
     <div css={containerCss} {...restProps}>
-      {imgUrl && <Image src={imgUrl} width={40} height={40} alt={`${name}_프로필_이미지`} />}
+      {imgUrl && <Avatar imageUrl={imgUrl} width={40} height={40} alt={`${name}_프로필_이미지`} />}
       <Txt typography="title2">{name}</Txt>
       {isOwner && (
         <Txt typography="title1" css={ownerEmojiCss}>
diff --git a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx
index ea46359a..e769c1db 100644
--- a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx
+++ b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx
@@ -2,7 +2,8 @@
 
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/common/components/Avatar/Avatar';
 
 import { commentAttribute } from './constants';
 import { commentCss, commentProfileCss } from './styles';
@@ -22,7 +23,7 @@ export const Comment = (props: CommentProps) => {
         {comment}
       </Txt>
       <div css={commentProfileCss}>
-        <Image src={imgUrl} width={16} height={16} alt={`${name}_프로필_이미지`} />
+        <Avatar imageUrl={imgUrl} width={16} height={16} alt={`${name}_프로필_이미지`} />
         <Txt typography="body4" color={colors.grey600}>
           {name}
         </Txt>
diff --git a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Profile.tsx b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Profile.tsx
index c8b43c0c..96be41cf 100644
--- a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Profile.tsx
+++ b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Profile.tsx
@@ -2,9 +2,10 @@
 
 import { Txt, TxtProps } from '@sambad/sds/components';
 import { borderRadiusVariants } from '@sds/theme';
-import Image from 'next/image';
 import { HTMLAttributes } from 'react';
 
+import { Avatar } from '@/common/components/Avatar/Avatar';
+
 import { profileCss } from './styles';
 
 export interface ProfileProps extends HTMLAttributes<HTMLDivElement> {
@@ -20,8 +21,8 @@ export const Profile = (props: ProfileProps) => {
   return (
     <div css={profileCss} {...restProps}>
       {imgUrl && (
-        <Image
-          src={imgUrl}
+        <Avatar
+          imageUrl={imgUrl}
           width={imgSize}
           height={imgSize}
           alt={`${name}_프로필_이미지`}