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

depromeet · Aug 26, 2024 · 894f4f5 · 894f4f5
1 parent 2abc8e1
commit 894f4f5
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 20 deletions.
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
@@ -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 '@/home/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/...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx b/...ns/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 '@/home/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/...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx b/...-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 '@/home/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/...b-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx b/...b-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 '@/home/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} style={{ objectFit: 'cover' }} />
+      <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
@@ -2,7 +2,8 @@
 
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/home/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
@@ -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 '@/home/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
@@ -1,7 +1,8 @@
 import { Txt } from '@sambad/sds/components';
-import Image from 'next/image';
 import { HTMLAttributes } from 'react';
 
+import { Avatar } from '@/home/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
@@ -2,7 +2,8 @@
 
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import Image from 'next/image';
+
+import { Avatar } from '@/home/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
@@ -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 '@/home/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}_프로필_이미지`}