Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(web-domains): Profile Image -> Avatar로 일괄 변경 및 objectFit: cover 적용 #157

Merged
merged 5 commits into from
Aug 26, 2024
Merged

refactor(web-domains): Profile Image -> Avatar로 일괄 변경 및 objectFit: cover 적용 #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c92e78
refactor: home 지면, 릴레이 질문 답변 관련 지면 objectFit cover 일괄 적용
semnil5202 Aug 26, 2024
2abc8e1
refactor: 릴레이 질문 시작 지면 objectFit cover 적용
semnil5202 Aug 26, 2024
894f4f5
refactor: 나머지 지면 프로필 관련 Image 태그는 Avatar 로 일괄 변경 및 ObjectFit 적용
semnil5202 Aug 26, 2024
209e612
rename: Avatar web-domains common 으로 이동
semnil5202 Aug 26, 2024
64ca8c1
refactor: Avatar 컴포넌트 css 대신 style 사용토록 변경
semnil5202 Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/web-domains/src/about-me/features/components/Profile/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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}_프로필_이미지`}
Expand Down
2 changes: 1 addition & 1 deletion packages/web-domains/src/answer/features/progressing-question/components/QuestionInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions .../home/common/components/Avatar/Avatar.tsx → ...s/src/common/components/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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} />;
};
2 changes: 1 addition & 1 deletion ...ns/src/home/features/gather-member/components/GatherMemberProfile/GatherMemberProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion .../src/home/features/previous-question/components/PreviousQuestion/PreviousQuestionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 @/common/... 경로로도 가능해요 다

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요건 나중에 일괄 변경하시죠 ㅠ 이런게 한 둘이 아니라서,,,,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

흠 이거 급한 건 아니였던 거 같은데 쌓여만 가는군요 😢

import { PreviousQuestionType } from '../../../../common/apis/schema/useGetPreviousQuestionListQuery.type';
import { Avatar } from '../../../../common/components/Avatar/Avatar';

interface PreviousQuestionItemProps {
meetingId?: number;
Expand Down
2 changes: 1 addition & 1 deletion ...domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ...mains/src/home/features/progressing-question/components/QuestionInfo/InActiveQuestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
5 changes: 3 additions & 2 deletions ...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions ...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions ...b-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
);
};
Expand Down
5 changes: 3 additions & 2 deletions packages/web-domains/src/result/features/components/SelectedDataCard/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions packages/web-domains/src/result/features/components/SelectedDataCard/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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> {
Expand All @@ -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>
);
Expand Down
5 changes: 3 additions & 2 deletions packages/web-domains/src/result/features/list/components/MemberListItem/MemberListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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> {
Expand All @@ -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}>
Expand Down
5 changes: 3 additions & 2 deletions packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions packages/web-domains/src/result/features/main/components/SelectedDataCard/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand All @@ -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}_프로필_이미지`}
Expand Down