refactor(web-domains): Profile Image -> Avatar로 일괄 변경 및 objectFit: co…

…ver 적용 (#157) * refactor: home 지면, 릴레이 질문 답변 관련 지면 objectFit cover 일괄 적용 * refactor: 릴레이 질문 시작 지면 objectFit cover 적용 * refactor: 나머지 지면 프로필 관련 Image 태그는 Avatar 로 일괄 변경 및 ObjectFit 적용 * rename: Avatar web-domains common 으로 이동 * refactor: Avatar 컴포넌트 css 대신 style 사용토록 변경
depromeet · Aug 26, 2024 · b16d350 · b16d350
1 parent 08e2fd4
commit b16d350
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 27 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 '@/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
@@ -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/.../home/common/components/Avatar/Avatar.tsx → ...s/src/common/components/Avatar/Avatar.tsx b/.../home/common/components/Avatar/Avatar.tsx → ...s/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/...ns/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx b/...ns/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/.../src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx b/.../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/...domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx b/...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/...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx b/...mains/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/...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 '@/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 '@/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 '@/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}_프로필_이미지`}