feat: 프로필 이미지 데이터 없는 경우 기본 이미지 노출 #85

yemsu · Jul 24, 2024 · d83d05c · d83d05c
1 parent cdfaca9
commit d83d05c
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 11 deletions.
diff --git a/public/images/common/default-profile-image.webp b/public/images/common/default-profile-image.webp
diff --git a/src/shared/ui/header/ui/HeaderMyDropdown.tsx b/src/shared/ui/header/ui/HeaderMyDropdown.tsx
@@ -11,9 +11,13 @@ import { Dropdown } from '@/shared/ui/dropdown'
 
 interface HeaderMyDropdownProps {
 	nickname: string
+	profileImage: string
 }
 
-export const HeaderMyDropdown = ({ nickname }: HeaderMyDropdownProps) => {
+export const HeaderMyDropdown = ({
+	nickname,
+	profileImage,
+}: HeaderMyDropdownProps) => {
 	const router = useRouter()
 	const path = usePathname()
 	const { logout } = useAuthStore()
@@ -30,7 +34,12 @@ export const HeaderMyDropdown = ({ nickname }: HeaderMyDropdownProps) => {
 	return (
 		<Dropdown.Container>
 			<Dropdown.Trigger title={`${nickname} (드롭다운 메뉴 열기)`}>
-				<MemberProfileImage nickname={nickname} onlyImg={true} isLink={false} />
+				<MemberProfileImage
+					nickname={nickname}
+					profileImage={profileImage}
+					onlyImg={true}
+					isLink={false}
+				/>
 			</Dropdown.Trigger>
 			<Dropdown.ContentBox>
 				<Dropdown.MenuList className="text-center">

diff --git a/src/shared/ui/header/ui/Notifications.tsx b/src/shared/ui/header/ui/Notifications.tsx
@@ -57,6 +57,7 @@ export const Notifications = ({ initialPagingData }: NotificationsProps) => {
 					>
 						<MemberProfileImage
 							nickname="임시닉네임"
+							profileImage=""
 							onlyImg={true}
 							className="pr-3sm"
 						/>

diff --git a/src/widget/comment/ui/CommentItemContent.tsx b/src/widget/comment/ui/CommentItemContent.tsx
@@ -23,7 +23,7 @@ export const CommentItemContent = ({
 	const {
 		content,
 		createdAt,
-		member: { nickname },
+		member: { nickname, profileImage },
 	} = comment
 
 	return (
@@ -35,6 +35,7 @@ export const CommentItemContent = ({
 			{type !== 'myComment' && (
 				<MemberProfileImage
 					nickname={nickname}
+					profileImage={profileImage}
 					size={type === 'reply' ? 'sm' : 'md'}
 					className="pr-1md"
 					onlyImg={true}

diff --git a/src/widget/member-profile/ui/MemberProfileImage.tsx b/src/widget/member-profile/ui/MemberProfileImage.tsx
@@ -1,29 +1,42 @@
+import Image from 'next/image'
 import Link from 'next/link'
 import { PAGE_PATH } from '@/shared/config'
 import { cn } from '@/shared/lib'
 import { Sizes_3 } from '@/shared/types'
 
 export interface MemberProfileImageProps {
 	nickname: string
+	profileImage: string
 	size?: Sizes_3
 	onlyImg?: boolean
 	isLink?: boolean
 	className?: string
 }
 
+const sizes = {
+	sm: 22,
+	md: 36,
+	lg: 160,
+}
+
 const sizeStyles = {
-	sm: 'h-[22px] w-[22px]',
-	md: 'h-[36px] w-[36px]',
-	lg: 'h-[160px] w-[160px]',
+	sm: `h-[${sizes.sm}px] w-[${sizes.sm}px]`,
+	md: `h-[${sizes.md}px] w-[${sizes.md}px]`,
+	lg: `h-[${sizes.lg}px] w-[${sizes.lg}px]`,
 }
 
 export const MemberProfileImage = ({
 	nickname,
+	profileImage,
 	size = 'md',
 	onlyImg = false,
 	isLink = true,
 	className,
 }: MemberProfileImageProps) => {
+	const profileImageSrc = profileImage
+		? `${process.env.CONT_URL}/profile/${profileImage}`
+		: '/images/common/default-profile-image.webp'
+
 	return (
 		<Wrapper
 			isLink={isLink}
@@ -33,12 +46,20 @@ export const MemberProfileImage = ({
 				className,
 			)}
 		>
-			<span
+			<div
 				className={cn(
-					'block rounded-full border border-gray-70 bg-point',
+					'relative block overflow-hidden rounded-full border border-gray-70',
 					sizeStyles[size],
 				)}
-			></span>
+			>
+				<Image
+					src={profileImageSrc}
+					alt=""
+					fill
+					sizes={`${sizes[size]}px`}
+					style={{ objectFit: 'cover' }}
+				/>
+			</div>
 			{!onlyImg && <span>{nickname}</span>}
 		</Wrapper>
 	)

diff --git a/src/widget/schematic-list/ui/SchemeListItemInfo.tsx b/src/widget/schematic-list/ui/SchemeListItemInfo.tsx
@@ -18,7 +18,7 @@ const infoStyles = {
 export const SchemeListItemInfo = ({
 	direction,
 	data: {
-		member: { nickname },
+		member: { nickname, profileImage },
 		createdAt,
 	},
 }: SchemeListItemInfoProps) => {
@@ -37,7 +37,11 @@ export const SchemeListItemInfo = ({
 		<div className={infoStyles[direction].wrap}>
 			<div className="flex items-center gap-2sm">
 				{direction === 'column' ? (
-					<MemberProfileImage nickname={nickname} size="sm" />
+					<MemberProfileImage
+						nickname={nickname}
+						profileImage={profileImage}
+						size="sm"
+					/>
 				) : (
 					<PostMetaInfo type="nickname" data={nickname} />
 				)}