diff --git a/.gitignore b/.gitignore
index 2bbd80d8..57f2ee97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,7 @@ coverage
 
 *storybook.log
 storybook-static
-.serena
\ No newline at end of file
+.serena
+
+CLAUDE.md
+.claude
diff --git a/src/assets/default-profile.svg b/src/assets/default-profile.svg
new file mode 100644
index 00000000..eff724aa
--- /dev/null
+++ b/src/assets/default-profile.svg
@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="88" height="88" rx="44" fill="#A3A3A3"/>
+<path d="M44 50.4286C52.5604 50.4286 59.5 43.393 59.5 34.7143C59.5 26.0355 52.5604 19 44 19C35.4396 19 28.5 26.0355 28.5 34.7143C28.5 43.393 35.4396 50.4286 44 50.4286Z" fill="#232323"/>
+<path d="M59.5 58C63.6107 58 67.5532 60.1069 70.46 63.8574C72.8794 66.9792 74.4149 71.0274 74.8623 75.3555C66.9202 83.1734 56.0248 88 44 88C31.9749 88 21.0789 83.1737 13.1367 75.3555C13.5841 71.0274 15.1206 66.9792 17.54 63.8574C20.4468 60.1069 24.3893 58 28.5 58H59.5Z" fill="#232323"/>
+</svg>
diff --git a/src/features/manager/home/lib/worker.ts b/src/features/manager/home/lib/worker.ts
index 471558ea..855bb9cf 100644
--- a/src/features/manager/home/lib/worker.ts
+++ b/src/features/manager/home/lib/worker.ts
@@ -28,5 +28,6 @@ export function adaptWorkerDto(dto: WorkerDto): ManagerWorkerItem {
     position: dto.position.description || dto.position.type,
     colorCode: dto.colorCode,
     nextWorkDate: formatNextShiftDate(dto.nextShiftDateTime),
+    profileImageUrl: dto.user.profileImageUrl ?? undefined,
   }
 }
diff --git a/src/features/manager/home/types/substitute.ts b/src/features/manager/home/types/substitute.ts
index ff302eb6..09455e62 100644
--- a/src/features/manager/home/types/substitute.ts
+++ b/src/features/manager/home/types/substitute.ts
@@ -15,6 +15,7 @@ export interface SubstituteRequesterDto {
   workerId: number
   workerName: string
   workerRole?: string
+  profileImageUrl?: string | null
 }
 
 export interface SubstituteStatusDto {
@@ -87,6 +88,7 @@ export function adaptSubstituteRequestDto(
     name: dto.requester.workerName,
     role: dto.schedule.position,
     workerRole: mapApiWorkerRole(dto.requester.workerRole),
+    imageUrl: dto.requester.profileImageUrl ?? null,
     dateRange: formatDateRange(
       dto.schedule.startDateTime,
       dto.schedule.endDateTime
diff --git a/src/features/manager/home/types/worker.ts b/src/features/manager/home/types/worker.ts
index 8565599d..259184c6 100644
--- a/src/features/manager/home/types/worker.ts
+++ b/src/features/manager/home/types/worker.ts
@@ -7,6 +7,7 @@ export interface WorkerUserDto {
   name: string
   contact: string
   gender: string
+  profileImageUrl?: string | null
 }
 
 export interface WorkerStatusDto {
diff --git a/src/features/manager/home/ui/StoreWorkerListItem.tsx b/src/features/manager/home/ui/StoreWorkerListItem.tsx
index 79a75f5c..d84e5ced 100644
--- a/src/features/manager/home/ui/StoreWorkerListItem.tsx
+++ b/src/features/manager/home/ui/StoreWorkerListItem.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import MoreVerticalIcon from '@/assets/icons/home/more-vertical.svg'
 import { WorkerRoleBadge } from '@/shared/ui/home/WorkerRoleBadge'
 import { ActionMenu, type ActionMenuItem } from '@/shared/ui/common/ActionMenu'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import type { StoreWorkerRole } from '@/features/manager/home/types/storeWorkerRole'
 
 interface StoreWorkerListItemProps {
@@ -28,15 +29,7 @@ export function StoreWorkerListItem({
       className={`relative flex h-[60px] items-center justify-between rounded-lg bg-white px-3 py-1 ${className}`}
     >
       <div className="flex items-center gap-4">
-        <div className="h-[38px] w-[38px] overflow-hidden rounded-full bg-bg-dark">
-          {profileImageUrl ? (
-            <img
-              src={profileImageUrl}
-              alt={name}
-              className="h-full w-full object-cover"
-            />
-          ) : null}
-        </div>
+        <Avatar src={profileImageUrl} alt={name} size={38} />
 
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
diff --git a/src/features/manager/home/ui/TodayWorkerList.tsx b/src/features/manager/home/ui/TodayWorkerList.tsx
index dde39b71..3407a02e 100644
--- a/src/features/manager/home/ui/TodayWorkerList.tsx
+++ b/src/features/manager/home/ui/TodayWorkerList.tsx
@@ -1,3 +1,5 @@
+import { Avatar } from '@/shared/ui/common/Avatar'
+
 interface TodayWorkerItem {
   id: number | string
   name: string
@@ -13,15 +15,7 @@ interface TodayWorkerListProps {
 function TodayWorkerCard({ worker }: { worker: TodayWorkerItem }) {
   return (
     <div className="h-[188px] w-[148px] rounded-2xl border border-line-1 bg-white px-[30px] py-6">
-      <div className="h-[88px] w-[88px] overflow-hidden rounded-full bg-bg-dark">
-        {worker.profileImageUrl ? (
-          <img
-            src={worker.profileImageUrl}
-            alt={worker.name}
-            className="h-full w-full object-cover"
-          />
-        ) : null}
-      </div>
+      <Avatar src={worker.profileImageUrl} alt={worker.name} size={88} />
       <p className="mt-3 text-center typography-body02-semibold text-text-100">
         {worker.name}
       </p>
diff --git a/src/features/manager/worker-list/ui/WorkerListItem.tsx b/src/features/manager/worker-list/ui/WorkerListItem.tsx
index 3058925c..b47ac118 100644
--- a/src/features/manager/worker-list/ui/WorkerListItem.tsx
+++ b/src/features/manager/worker-list/ui/WorkerListItem.tsx
@@ -4,6 +4,7 @@ import type { ScheduleColor } from '@/features/manager/worker-schedule/types/sch
 import { SwipeActionButton } from '@/shared/ui/SwipeActionButton'
 import { SwipeableRow } from '@/shared/ui/SwipeableRow'
 import { WorkerRoleBadge } from '@/shared/ui/home/WorkerRoleBadge'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import type { WorkerRole } from '@/shared/types/workerRole'
 
 interface WorkerListItemProps {
@@ -30,16 +31,8 @@ export function WorkerListItem({
   const content = (
     <div className="flex h-[70px] min-w-[358px] items-center justify-between bg-white px-6 py-1">
       <div className="flex items-center gap-4">
-        <div className="relative size-[38px] shrink-0">
-          {profileImageUrl ? (
-            <img
-              src={profileImageUrl}
-              alt={`${name} 프로필`}
-              className="size-full rounded-full object-cover"
-            />
-          ) : (
-            <div className="size-full rounded-full bg-bg-dark" />
-          )}
+        <div className="relative shrink-0">
+          <Avatar src={profileImageUrl} alt={`${name} 프로필`} size={38} />
           <div
             className="absolute inset-0 rounded-full"
             style={{ boxShadow: `inset 0 0 0 3px ${scheduleColor}` }}
diff --git a/src/features/user/home/workspace/api/workspaceMembers.ts b/src/features/user/home/workspace/api/workspaceMembers.ts
index baa42195..25c9e24a 100644
--- a/src/features/user/home/workspace/api/workspaceMembers.ts
+++ b/src/features/user/home/workspace/api/workspaceMembers.ts
@@ -46,6 +46,7 @@ export function adaptWorkerDto(dto: WorkspaceWorkerDto): WorkspaceWorkerItem {
     id: dto.id,
     userId: dto.user.id,
     name: dto.user.name,
+    profileImageUrl: dto.user.profileImageUrl ?? null,
     positionType: dto.position.type,
     positionDescription: dto.position.description,
     positionEmoji: dto.position.emoji,
@@ -61,6 +62,7 @@ export function adaptManagerDto(
     id: dto.id,
     managerId: dto.manager.id,
     name: dto.manager.name,
+    profileImageUrl: dto.manager.profileImageUrl ?? null,
     positionType: dto.position.type,
     positionDescription: dto.position.description,
     positionEmoji: dto.position.emoji,
diff --git a/src/features/user/home/workspace/types/workspaceMembers.ts b/src/features/user/home/workspace/types/workspaceMembers.ts
index ec5f04cc..54cd1a06 100644
--- a/src/features/user/home/workspace/types/workspaceMembers.ts
+++ b/src/features/user/home/workspace/types/workspaceMembers.ts
@@ -9,7 +9,7 @@ export interface WorkspacePositionDto {
 
 export interface WorkspaceWorkerDto {
   id: number
-  user: { id: number; name: string }
+  user: { id: number; name: string; profileImageUrl?: string | null }
   position: WorkspacePositionDto
   employedAt: string
   nextShiftDateTime: string
@@ -17,7 +17,7 @@ export interface WorkspaceWorkerDto {
 
 export interface WorkspaceManagerDto {
   id: number
-  manager: { id: number; name: string }
+  manager: { id: number; name: string; profileImageUrl?: string | null }
   position: WorkspacePositionDto
 }
 
@@ -48,6 +48,7 @@ export interface WorkspaceWorkerItem {
   id: number
   userId: number
   name: string
+  profileImageUrl?: string | null
   positionType: string
   positionDescription: string
   positionEmoji: string
@@ -59,6 +60,7 @@ export interface WorkspaceManagerItem {
   id: number
   managerId: number
   name: string
+  profileImageUrl?: string | null
   positionType: string
   positionDescription: string
   positionEmoji: string
diff --git a/src/features/user/substitute/lib/adaptUserSubstituteRequest.test.ts b/src/features/user/substitute/lib/adaptUserSubstituteRequest.test.ts
new file mode 100644
index 00000000..bb8748ba
--- /dev/null
+++ b/src/features/user/substitute/lib/adaptUserSubstituteRequest.test.ts
@@ -0,0 +1,174 @@
+import { describe, expect, it } from 'vitest'
+
+import type {
+  ReceivedSubstituteRequestDto,
+  SentSubstituteRequestDetailApiDto,
+  SentSubstituteRequestDetailDto,
+  SentSubstituteRequestListItemDto,
+  SubstituteTargetDto,
+} from '@/features/user/substitute/types'
+
+import {
+  adaptReceivedSubstituteDetail,
+  adaptSentSubstituteDetail,
+  adaptUserSubstituteListItem,
+  normalizeSentSubstituteDetailDto,
+} from './adaptUserSubstituteRequest'
+
+const schedule = {
+  scheduleId: 1,
+  startDateTime: '2026-04-05T09:00:00',
+  endDateTime: '2026-04-05T13:00:00',
+  position: 'STAFF',
+}
+const workspace = { workspaceId: 10, workspaceName: '카페' }
+
+function received(
+  profileImageUrl?: string | null
+): ReceivedSubstituteRequestDto {
+  return {
+    id: 1,
+    schedule,
+    workspace,
+    requester: { workerId: 5, workerName: '요청자', profileImageUrl },
+    requestType: 'SPECIFIC',
+    status: 'PENDING',
+    createdAt: '2026-04-01T00:00:00',
+  }
+}
+
+function target(profileImageUrl?: string | null): SubstituteTargetDto {
+  return {
+    targetId: 7,
+    workerName: '대상자',
+    profileImageUrl,
+    status: 'PENDING',
+  }
+}
+
+function sentList(opts: {
+  acceptedWorker?: {
+    workerId: number
+    workerName: string
+    profileImageUrl?: string | null
+  } | null
+  targets?: SubstituteTargetDto[]
+}): SentSubstituteRequestListItemDto {
+  return {
+    id: 2,
+    schedule,
+    workspace,
+    requestType: 'SPECIFIC',
+    status: 'PENDING',
+    createdAt: '2026-04-01T00:00:00',
+    targets: opts.targets,
+    acceptedWorker: opts.acceptedWorker ?? null,
+  }
+}
+
+function sentDetail(opts: {
+  acceptedWorker?: {
+    workerId: number
+    workerName: string
+    profileImageUrl?: string | null
+  } | null
+  targets?: SubstituteTargetDto[]
+}): SentSubstituteRequestDetailDto {
+  return {
+    id: 3,
+    schedule,
+    workspace,
+    requester: { workerId: 5, workerName: '요청자' },
+    requestType: 'SPECIFIC',
+    targets: opts.targets ?? [],
+    acceptedWorker: opts.acceptedWorker ?? null,
+    status: 'PENDING',
+    createdAt: '2026-04-01T00:00:00',
+  }
+}
+
+describe('대타요청 프로필 이미지 데이터 흐름', () => {
+  it('RECEIVED 목록은 요청자의 profileImageUrl을 imageUrl로 매핑한다', () => {
+    const item = adaptUserSubstituteListItem(
+      received('https://img/requester.png'),
+      'RECEIVED'
+    )
+    expect(item.imageUrl).toBe('https://img/requester.png')
+  })
+
+  it('RECEIVED 상세는 요청자의 profileImageUrl을 imageUrl로 매핑한다', () => {
+    const detail = adaptReceivedSubstituteDetail(
+      received('https://img/requester.png')
+    )
+    expect(detail.imageUrl).toBe('https://img/requester.png')
+  })
+
+  it('SENT은 수락자가 있으면 수락자의 이미지를 사용한다', () => {
+    const accepted = {
+      workerId: 9,
+      workerName: '수락자',
+      profileImageUrl: 'https://img/accepted.png',
+    }
+    const targets = [target('https://img/target.png')]
+
+    expect(
+      adaptUserSubstituteListItem(
+        sentList({ acceptedWorker: accepted, targets }),
+        'SENT'
+      ).imageUrl
+    ).toBe('https://img/accepted.png')
+    expect(
+      adaptSentSubstituteDetail(
+        sentDetail({ acceptedWorker: accepted, targets })
+      ).imageUrl
+    ).toBe('https://img/accepted.png')
+  })
+
+  it('SENT은 수락자가 없으면 첫 대상자의 이미지를 사용한다', () => {
+    const targets = [target('https://img/target.png')]
+
+    expect(
+      adaptUserSubstituteListItem(sentList({ targets }), 'SENT').imageUrl
+    ).toBe('https://img/target.png')
+    expect(adaptSentSubstituteDetail(sentDetail({ targets })).imageUrl).toBe(
+      'https://img/target.png'
+    )
+  })
+
+  it('이미지 필드가 없으면 null로 정규화한다', () => {
+    expect(
+      adaptUserSubstituteListItem(received(), 'RECEIVED').imageUrl
+    ).toBeNull()
+    expect(adaptReceivedSubstituteDetail(received()).imageUrl).toBeNull()
+    expect(
+      adaptUserSubstituteListItem(sentList({ targets: [target()] }), 'SENT')
+        .imageUrl
+    ).toBeNull()
+  })
+
+  it('normalize는 API target의 profileImageUrl을 정규화 target으로 전달한다', () => {
+    const api: SentSubstituteRequestDetailApiDto = {
+      id: 4,
+      schedule,
+      workspace,
+      requester: { workerId: 5, workerName: '요청자' },
+      requestType: 'SPECIFIC',
+      targets: [
+        {
+          target: {
+            workerId: 7,
+            workerName: '대상자',
+            profileImageUrl: 'https://img/target.png',
+          },
+          status: 'PENDING',
+        },
+      ],
+      status: 'PENDING',
+      createdAt: '2026-04-01T00:00:00',
+    }
+
+    expect(
+      normalizeSentSubstituteDetailDto(api).targets[0].profileImageUrl
+    ).toBe('https://img/target.png')
+  })
+})
diff --git a/src/features/user/substitute/lib/adaptUserSubstituteRequest.ts b/src/features/user/substitute/lib/adaptUserSubstituteRequest.ts
index eaa3467a..3197d655 100644
--- a/src/features/user/substitute/lib/adaptUserSubstituteRequest.ts
+++ b/src/features/user/substitute/lib/adaptUserSubstituteRequest.ts
@@ -40,6 +40,7 @@ export function normalizeSentSubstituteDetailDto(
       targetId: item.target.workerId,
       workerName: item.target.workerName,
       targetName: item.target.workerName,
+      profileImageUrl: item.target.profileImageUrl ?? null,
       status: unwrapSubstituteEnum(item.status),
       rejectionReason: item.rejectionReason,
       respondedAt: item.respondedAt,
@@ -166,6 +167,25 @@ function resolveSentPersonName(dto: {
   return requestType === 'ALL' ? '전체 공개' : '대상'
 }
 
+/** resolveSentPersonName과 동일 우선순위(수락자 → 첫 대상자)로 이미지를 해석 */
+function resolveSentPersonImage(dto: {
+  targets?: SubstituteTargetDto[]
+  acceptedWorker?: {
+    workerName?: string
+    profileImageUrl?: string | null
+  } | null
+}): string | null {
+  const accepted = dto.acceptedWorker
+  if (accepted) {
+    return accepted.profileImageUrl ?? null
+  }
+  const firstTarget = dto.targets?.[0]
+  if (resolveTargetWorkerName(firstTarget)) {
+    return firstTarget?.profileImageUrl ?? null
+  }
+  return null
+}
+
 function resolveSentRequestType(
   dto: Pick<SentSubstituteRequestListItemDto, 'requestType'>
 ): SubstituteRequestType {
@@ -187,7 +207,7 @@ function adaptReceivedListItem(
     scheduledDateLabel: formatScheduledDate(dto.schedule.startDateTime),
     uiStatus,
     statusLabel: statusLabelForApi(rawStatus, uiStatus),
-    imageUrl: null,
+    imageUrl: dto.requester.profileImageUrl ?? null,
     rawStatus,
     dto,
   }
@@ -212,7 +232,7 @@ function adaptSentListItem(
     scheduledDateLabel: formatScheduledDate(dto.schedule.startDateTime),
     uiStatus,
     statusLabel: statusLabelForApi(rawStatus, uiStatus),
-    imageUrl: null,
+    imageUrl: resolveSentPersonImage(dto) ?? null,
     rawStatus,
     dto,
   }
@@ -236,6 +256,7 @@ function detailFromSchedulePerson(
     requestReason?: string | null
   },
   personName: string,
+  personImage: string | null,
   direction: SubstituteRequestDirection
 ): UserSubstituteDetailViewModel {
   const storeName = dto.workspace.workspaceName?.trim() ?? '매장'
@@ -247,6 +268,7 @@ function detailFromSchedulePerson(
     id: 0,
     displayName: `${storeName} / ${personName}`,
     role: positionToRole(dto.schedule.position),
+    imageUrl: personImage,
     dateTitle: formatDetailDateTitle(dto.schedule.startDateTime),
     totalHoursLabel: totalHoursLabel(
       dto.schedule.startDateTime,
@@ -271,6 +293,7 @@ export function adaptReceivedSubstituteDetail(
     ...detailFromSchedulePerson(
       dto,
       dto.requester.workerName?.trim() ?? '이름',
+      dto.requester.profileImageUrl ?? null,
       'RECEIVED'
     ),
     id: dto.id,
@@ -281,9 +304,10 @@ export function adaptSentSubstituteDetail(
   dto: SentSubstituteRequestDetailDto
 ): UserSubstituteDetailViewModel {
   const personName = resolveSentPersonName(dto)
+  const personImage = resolveSentPersonImage(dto)
 
   return {
-    ...detailFromSchedulePerson(dto, personName, 'SENT'),
+    ...detailFromSchedulePerson(dto, personName, personImage, 'SENT'),
     id: dto.id,
   }
 }
diff --git a/src/features/user/substitute/types.ts b/src/features/user/substitute/types.ts
index ba0c2a56..ddc09b49 100644
--- a/src/features/user/substitute/types.ts
+++ b/src/features/user/substitute/types.ts
@@ -27,6 +27,7 @@ export interface SubstituteEnumValueDto<T extends string = string> {
 export interface SubstituteTargetWorkerDto {
   workerId: number
   workerName: string
+  profileImageUrl?: string | null
 }
 
 /** GET sent/{requestId} — targets[] 항목 */
@@ -52,11 +53,13 @@ export interface SubstituteWorkspaceDto {
 export interface SubstituteRequesterDto {
   workerId: number
   workerName: string
+  profileImageUrl?: string | null
 }
 
 export interface SubstituteAcceptedWorkerDto {
   workerId: number
   workerName: string
+  profileImageUrl?: string | null
 }
 
 /** 어댑터용 정규화된 대상 */
@@ -64,6 +67,7 @@ export interface SubstituteTargetDto {
   targetId: number
   workerName: string
   targetName?: string
+  profileImageUrl?: string | null
   status: string
   rejectionReason?: string | null
   respondedAt?: string | null
@@ -189,6 +193,7 @@ export interface UserSubstituteDetailViewModel {
   id: number
   displayName: string
   role: WorkerRole
+  imageUrl?: string | null
   dateTitle: string
   totalHoursLabel: string
   startTimeLabel: string
diff --git a/src/pages/manager/substitute-request/index.tsx b/src/pages/manager/substitute-request/index.tsx
index e91522a5..77b1279d 100644
--- a/src/pages/manager/substitute-request/index.tsx
+++ b/src/pages/manager/substitute-request/index.tsx
@@ -1,7 +1,7 @@
 import DownIcon from '@/assets/icons/home/chevron-down.svg?react'
 import { Navbar } from '@/shared/ui/common/Navbar'
 import { Spinner } from '@/shared/ui/Spinner'
-import { SubstituteProfileAvatar } from '@/pages/user/substitute-request/components/SubstituteProfileAvatar'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { SubstituteRequestResponseActions } from '@/pages/user/substitute-request/components/SubstituteRequestResponseActions'
 import { SubstituteRequestStatusBadge } from '@/pages/user/substitute-request/components/SubstituteRequestStatusBadge'
 import { useManagerSubstituteRequestViewModel } from '@/features/manager/substitute/hooks/useManagerSubstituteRequestViewModel'
@@ -12,7 +12,11 @@ import type { SubstituteRequestItem } from '@/shared/types/substituteRequest'
 function CardBase({ item }: { item: SubstituteRequestItem }) {
   return (
     <>
-      <SubstituteProfileAvatar imageUrl={item.imageUrl} alt={item.name} />
+      <Avatar
+        src={item.imageUrl}
+        alt={item.name}
+        className="border border-line-1"
+      />
       <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-center gap-1">
           <span className="min-w-0 typography-body01-semibold text-text-100">
diff --git a/src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx b/src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx
index d9a0b6ee..d5d8a4fb 100644
--- a/src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx
+++ b/src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx
@@ -1,3 +1,4 @@
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { WorkerRoleBadge } from '@/shared/ui/home/WorkerRoleBadge'
 import chevronDownIcon from '@/assets/icons/home/chevron-down.svg'
 import type { ManagerWorkerItem } from '@/features/manager/home/types/worker'
@@ -11,15 +12,6 @@ interface WorkerSelectSectionProps {
   onSelectWorker: (workerId: number) => void
 }
 
-function WorkerAvatar() {
-  return (
-    <div
-      className="size-[38px] shrink-0 rounded-full bg-[repeating-conic-gradient(#ececec_0%_25%,transparent_0%_50%)] [background-size:8px_8px]"
-      aria-hidden="true"
-    />
-  )
-}
-
 function WorkerRow({
   worker,
   isSelected,
@@ -31,7 +23,7 @@ function WorkerRow({
 }) {
   const content = (
     <>
-      <WorkerAvatar />
+      <Avatar src={worker.profileImageUrl} alt={worker.name} size={38} />
       <div className="flex min-w-0 items-center gap-1">
         <p className="typography-body01-semibold text-text-100">
           {worker.name}
@@ -84,7 +76,7 @@ export function WorkerSelectSection({
         className="flex h-[70px] w-full items-center rounded-2xl bg-white px-3"
       >
         <div className="flex min-w-0 flex-1 items-center gap-4">
-          <WorkerAvatar />
+          <Avatar src={worker.profileImageUrl} alt={worker.name} size={38} />
           <div className="flex min-w-0 items-center gap-1">
             <p className="typography-body01-semibold text-text-100">
               {worker.name}
diff --git a/src/pages/my/components/ProfileCard.tsx b/src/pages/my/components/ProfileCard.tsx
index ee735f88..8cd28684 100644
--- a/src/pages/my/components/ProfileCard.tsx
+++ b/src/pages/my/components/ProfileCard.tsx
@@ -1,5 +1,6 @@
 import EditIcon from '@/assets/icons/my/edit.svg?react'
 import CrownIcon from '@/assets/icons/my/crown.svg?react'
+import { Avatar } from '@/shared/ui/common/Avatar'
 
 interface ProfileCardProps {
   nickname: string
@@ -21,15 +22,7 @@ export function ProfileCard({
   return (
     <div className="relative flex h-[120px] w-full flex-col justify-center rounded-2xl bg-white pl-[18px] pr-4">
       <div className="flex items-center gap-3.5">
-        <div className="size-[60px] shrink-0 overflow-hidden rounded-full bg-line-2">
-          {avatarUrl && (
-            <img
-              src={avatarUrl}
-              alt={`${nickname} 프로필 이미지`}
-              className="size-full object-cover"
-            />
-          )}
-        </div>
+        <Avatar src={avatarUrl} alt={`${nickname} 프로필 이미지`} size={60} />
         <div className="flex flex-col items-start justify-center gap-0.5">
           <p className="text-text-100 typography-headline01">{nickname}</p>
           <div className="flex items-center gap-2">
diff --git a/src/pages/my/profile/index.tsx b/src/pages/my/profile/index.tsx
index ef75c63b..05e6f405 100644
--- a/src/pages/my/profile/index.tsx
+++ b/src/pages/my/profile/index.tsx
@@ -7,6 +7,7 @@ import { Navbar } from '@/shared/ui/common/Navbar'
 import { MenuListItem } from '../components/MenuListItem'
 import { ReadOnlyField } from './components/ReadOnlyField'
 import CameraCircleIcon from '@/assets/icons/my/camera-circle.svg?react'
+import { Avatar } from '@/shared/ui/common/Avatar'
 
 interface DeleteProfileImageModalProps {
   open: boolean
@@ -137,15 +138,11 @@ export function ProfileEditPage() {
 
       <div className="flex flex-col items-center pt-10">
         <div className="relative">
-          <div className="size-[146px] overflow-hidden rounded-full bg-line-2">
-            {avatarUrl && (
-              <img
-                src={avatarUrl}
-                alt={`${nickname} 프로필 이미지`}
-                className="size-full object-cover"
-              />
-            )}
-          </div>
+          <Avatar
+            src={avatarUrl}
+            alt={`${nickname} 프로필 이미지`}
+            size={146}
+          />
           <button
             type="button"
             aria-label="프로필 이미지 변경"
diff --git a/src/pages/user/substitute-request/components/SubstituteProfileAvatar.tsx b/src/pages/user/substitute-request/components/SubstituteProfileAvatar.tsx
deleted file mode 100644
index e32d1cc2..00000000
--- a/src/pages/user/substitute-request/components/SubstituteProfileAvatar.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-interface SubstituteProfileAvatarProps {
-  imageUrl?: string | null
-  alt?: string
-  size?: number
-}
-
-export function SubstituteProfileAvatar({
-  imageUrl,
-  alt = '',
-  size = 38,
-}: SubstituteProfileAvatarProps) {
-  const dimension = `${size}px`
-
-  return (
-    <div
-      className="shrink-0 overflow-hidden rounded-full border border-line-1 bg-bg-light"
-      style={{ width: dimension, height: dimension }}
-    >
-      {imageUrl ? (
-        <img src={imageUrl} alt={alt} className="h-full w-full object-cover" />
-      ) : (
-        <div
-          className="h-full w-full bg-[repeating-conic-gradient(#ececec_0%_25%,transparent_0%_50%)] [background-size:8px_8px]"
-          aria-hidden
-        />
-      )}
-    </div>
-  )
-}
diff --git a/src/pages/user/substitute-request/components/SubstituteRequestCard.tsx b/src/pages/user/substitute-request/components/SubstituteRequestCard.tsx
index 9b13a23f..0dba642f 100644
--- a/src/pages/user/substitute-request/components/SubstituteRequestCard.tsx
+++ b/src/pages/user/substitute-request/components/SubstituteRequestCard.tsx
@@ -1,5 +1,5 @@
 import type { SubstituteDirectionTab } from '@/pages/user/substitute-request/components/SubstituteRequestTabs'
-import { SubstituteProfileAvatar } from '@/pages/user/substitute-request/components/SubstituteProfileAvatar'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { SubstituteRequestResponseActions } from '@/pages/user/substitute-request/components/SubstituteRequestResponseActions'
 import { SubstituteRequestStatusBadge } from '@/pages/user/substitute-request/components/SubstituteRequestStatusBadge'
 import type { UserSubstituteListItem } from '@/features/user/substitute/types'
@@ -47,10 +47,13 @@ export function SubstituteRequestCard({
       }
       className={`flex h-[72px] w-full items-center gap-4 rounded-2xl border border-line-1 bg-white px-5 text-left transition-colors active:bg-bg-light${isClickable ? ' cursor-pointer' : ''}`}
     >
-      <SubstituteProfileAvatar
-        imageUrl={item.imageUrl}
-        alt={item.displayName}
-      />
+      {directionTab === 'received' && (
+        <Avatar
+          src={item.imageUrl}
+          alt={item.displayName}
+          className="border border-line-1"
+        />
+      )}
       <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-center gap-1">
           <span className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
diff --git a/src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx b/src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx
index a0146c57..bcebde7c 100644
--- a/src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx
+++ b/src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 
 import ChevronLeftIcon from '@/assets/icons/nav/chevron-left.svg'
 import type { SubstituteDirectionTab } from '@/pages/user/substitute-request/components/SubstituteRequestTabs'
-import { SubstituteProfileAvatar } from '@/pages/user/substitute-request/components/SubstituteProfileAvatar'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { SubstituteRejectReasonModal } from '@/pages/user/substitute-request/components/SubstituteRejectReasonModal'
 import { useUserSubstituteRequestDetailViewModel } from '@/features/user/substitute/hooks/useUserSubstituteRequestDetailViewModel'
 import type { ReceivedSubstituteRequestDto } from '@/features/user/substitute/types'
@@ -105,7 +105,12 @@ export function SubstituteRequestDetailView({
               className={`flex-1 overflow-y-auto px-4 pt-4 ${showFooter ? 'pb-36' : 'pb-8'}`}
             >
               <div className="flex h-[70px] items-center gap-4 rounded-2xl border border-line-1 px-3">
-                <SubstituteProfileAvatar alt={detail.displayName} size={38} />
+                <Avatar
+                  src={detail.imageUrl}
+                  alt={detail.displayName}
+                  size={38}
+                  className="border border-line-1"
+                />
                 <div className="min-w-0 flex-1">
                   <div className="flex min-w-0 items-center gap-1">
                     <span className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
diff --git a/src/pages/user/substitute-request/components/SubstituteStoreSelectModal.tsx b/src/pages/user/substitute-request/components/SubstituteStoreSelectModal.tsx
index b0a968c7..4865159d 100644
--- a/src/pages/user/substitute-request/components/SubstituteStoreSelectModal.tsx
+++ b/src/pages/user/substitute-request/components/SubstituteStoreSelectModal.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import type { WorkingStoreItem } from '@/features/user/home/workspace/types/workingStore'
-import { SubstituteProfileAvatar } from '@/pages/user/substitute-request/components/SubstituteProfileAvatar'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { cn } from '@/shared/lib/utils'
 
 interface SubstituteStoreSelectModalProps {
@@ -101,10 +101,12 @@ export function SubstituteStoreSelectModal({
                       )}
                       onClick={() => setSelectedWorkspaceId(store.workspaceId)}
                     >
-                      <SubstituteProfileAvatar
-                        imageUrl={store.thumbnailUrl}
+                      <Avatar
+                        src={store.thumbnailUrl}
                         alt={store.businessName}
                         size={48}
+                        fallback="neutral"
+                        className="border border-line-1 bg-bg-light"
                       />
                       <span className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
                         {store.businessName}
diff --git a/src/pages/user/workspace-detail/index.tsx b/src/pages/user/workspace-detail/index.tsx
index b65a895a..327cebfb 100644
--- a/src/pages/user/workspace-detail/index.tsx
+++ b/src/pages/user/workspace-detail/index.tsx
@@ -143,6 +143,7 @@ export function WorkspaceDetailPage() {
                       name={manager.name}
                       role={manager.positionDescription || manager.positionType}
                       variant="manager"
+                      imageUrl={manager.profileImageUrl}
                       onOptions={() => {}}
                     />
                   ))}
@@ -192,6 +193,7 @@ export function WorkspaceDetailPage() {
                       role={worker.positionDescription || worker.positionType}
                       variant="worker"
                       nextWorkDate={formatNextShift(worker.nextShiftDateTime)}
+                      imageUrl={worker.profileImageUrl}
                       onOptions={() => {}}
                     />
                   ))}
diff --git a/src/pages/user/workspace-members/components/ManagersSection.tsx b/src/pages/user/workspace-members/components/ManagersSection.tsx
index 979be3d6..6c370df2 100644
--- a/src/pages/user/workspace-members/components/ManagersSection.tsx
+++ b/src/pages/user/workspace-members/components/ManagersSection.tsx
@@ -1,4 +1,5 @@
 import type { WorkspaceManagerItem } from '@/features/user/home/workspace/types/workspaceMembers'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { LoadMoreButton } from './LoadMoreButton'
 
 type Props = {
@@ -21,14 +22,21 @@ export function ManagersSection({ managers, hasMore, onLoadMore }: Props) {
             key={manager.id}
             className="flex items-center justify-between py-2 px-3 rounded-xl bg-bg-light"
           >
-            <div className="flex flex-col gap-0.5">
-              <span className="font-pretendard font-semibold text-3 text-text-100">
-                {manager.name}
-              </span>
-              <span className="font-pretendard text-2 text-text-70">
-                {manager.positionEmoji}{' '}
-                {manager.positionDescription || manager.positionType}
-              </span>
+            <div className="flex items-center gap-3">
+              <Avatar
+                src={manager.profileImageUrl}
+                alt={manager.name}
+                size={38}
+              />
+              <div className="flex flex-col gap-0.5">
+                <span className="font-pretendard font-semibold text-3 text-text-100">
+                  {manager.name}
+                </span>
+                <span className="font-pretendard text-2 text-text-70">
+                  {manager.positionEmoji}{' '}
+                  {manager.positionDescription || manager.positionType}
+                </span>
+              </div>
             </div>
           </li>
         ))}
diff --git a/src/pages/user/workspace-members/components/WorkersSection.tsx b/src/pages/user/workspace-members/components/WorkersSection.tsx
index 50b854a6..5d0a3655 100644
--- a/src/pages/user/workspace-members/components/WorkersSection.tsx
+++ b/src/pages/user/workspace-members/components/WorkersSection.tsx
@@ -1,4 +1,5 @@
 import type { WorkspaceWorkerItem } from '@/features/user'
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { LoadMoreButton } from './LoadMoreButton'
 
 type Props = {
@@ -21,14 +22,21 @@ export function WorkersSection({ workers, hasMore, onLoadMore }: Props) {
             key={worker.id}
             className="flex items-center justify-between py-2 px-3 rounded-xl bg-bg-light"
           >
-            <div className="flex flex-col gap-0.5">
-              <span className="font-pretendard font-semibold text-3 text-text-100">
-                {worker.name}
-              </span>
-              <span className="font-pretendard text-2 text-text-70">
-                {worker.positionEmoji}{' '}
-                {worker.positionDescription || worker.positionType}
-              </span>
+            <div className="flex items-center gap-3">
+              <Avatar
+                src={worker.profileImageUrl}
+                alt={worker.name}
+                size={38}
+              />
+              <div className="flex flex-col gap-0.5">
+                <span className="font-pretendard font-semibold text-3 text-text-100">
+                  {worker.name}
+                </span>
+                <span className="font-pretendard text-2 text-text-70">
+                  {worker.positionEmoji}{' '}
+                  {worker.positionDescription || worker.positionType}
+                </span>
+              </div>
             </div>
             <div className="flex flex-col items-end gap-0.5">
               <span className="font-pretendard text-[11px] text-text-50">
diff --git a/src/shared/ui/common/Avatar.tsx b/src/shared/ui/common/Avatar.tsx
new file mode 100644
index 00000000..6ec6ee37
--- /dev/null
+++ b/src/shared/ui/common/Avatar.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import DefaultProfileImg from '@/assets/default-profile.svg'
+import { cn } from '@/shared/lib/utils'
+
+interface AvatarProps {
+  src?: string | null
+  alt?: string
+  size?: number
+  // 'person'(기본): 이미지 없으면 기본 프로필 이미지. 'neutral': 매장 썸네일 등 사람이 아닌 경우 중립 폴백.
+  fallback?: 'person' | 'neutral'
+  className?: string
+}
+
+export function Avatar({
+  src,
+  alt = '',
+  size = 38,
+  fallback = 'person',
+  className,
+}: AvatarProps) {
+  const [neutralError, setNeutralError] = useState(false)
+  const style = { width: `${size}px`, height: `${size}px` }
+
+  if (fallback === 'neutral') {
+    const placeholder = (
+      <div
+        aria-hidden
+        style={style}
+        className={cn(
+          'shrink-0 rounded-full bg-[repeating-conic-gradient(theme(colors.line.1)_0%_25%,transparent_0%_50%)] [background-size:8px_8px]',
+          className
+        )}
+      />
+    )
+
+    return src && !neutralError ? (
+      <img
+        src={src}
+        alt={alt}
+        style={style}
+        onError={() => setNeutralError(true)}
+        className={cn('shrink-0 rounded-full object-cover', className)}
+      />
+    ) : (
+      placeholder
+    )
+  }
+
+  return (
+    <img
+      src={src || DefaultProfileImg}
+      alt={alt}
+      style={style}
+      onError={e => {
+        e.currentTarget.src = DefaultProfileImg
+      }}
+      className={cn('shrink-0 rounded-full object-cover', className)}
+    />
+  )
+}
diff --git a/src/shared/ui/home/WorkerListItem.tsx b/src/shared/ui/home/WorkerListItem.tsx
index 7d7102c2..4161176d 100644
--- a/src/shared/ui/home/WorkerListItem.tsx
+++ b/src/shared/ui/home/WorkerListItem.tsx
@@ -1,4 +1,5 @@
 import { colors } from '@/shared/lib/tokens'
+import { Avatar } from '@/shared/ui/common/Avatar'
 
 export type WorkerVariant = 'manager' | 'worker'
 
@@ -45,15 +46,7 @@ export function WorkerListItem({
   return (
     <div className="flex h-[70px] items-center justify-between rounded-2xl bg-white px-3 py-1">
       <div className="flex items-center gap-4">
-        <div className="size-[38px] shrink-0 overflow-hidden rounded-full bg-bg-light">
-          {imageUrl ? (
-            <img
-              src={imageUrl}
-              alt={name}
-              className="h-full w-full object-cover"
-            />
-          ) : null}
-        </div>
+        <Avatar src={imageUrl} alt={name} size={38} />
 
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
diff --git a/src/shared/ui/manager/SubstituteApprovalCard.tsx b/src/shared/ui/manager/SubstituteApprovalCard.tsx
index 9d2d389b..069746ef 100644
--- a/src/shared/ui/manager/SubstituteApprovalCard.tsx
+++ b/src/shared/ui/manager/SubstituteApprovalCard.tsx
@@ -1,4 +1,5 @@
 // 대타 승인 요청 카드
+import { Avatar } from '@/shared/ui/common/Avatar'
 import { MoreButton } from '@/shared/ui/common/MoreButton'
 import { SUBSTITUTE_STATUS_LABEL } from '@/shared/types/substituteStatus'
 import type {
@@ -44,20 +45,12 @@ function RequestRow({
       className={`flex w-full items-center justify-between py-4 text-left transition-colors hover:bg-gray-50/50 ${!isLast ? 'border-b border-line-1' : ''}`}
     >
       <div className="flex min-w-0 items-center gap-4">
-        <div className="flex size-[38px] shrink-0 items-center justify-center overflow-hidden rounded-full border border-line-1 bg-bg-light">
-          {item.imageUrl ? (
-            <img
-              src={item.imageUrl}
-              alt={item.name}
-              className="h-full w-full object-cover"
-            />
-          ) : (
-            <div
-              className="h-full w-full bg-[repeating-conic-gradient(#ececec_0%_25%,transparent_0%_50%)] [background-size:8px_8px]"
-              aria-hidden
-            />
-          )}
-        </div>
+        <Avatar
+          src={item.imageUrl}
+          alt={item.name}
+          size={38}
+          className="border border-line-1"
+        />
         <div className="min-w-0">
           <div className="flex items-center gap-1">
             <span className="typography-body01-semibold text-black">
diff --git a/src/shared/ui/manager/WorkerImageCard.tsx b/src/shared/ui/manager/WorkerImageCard.tsx
index 9743cee9..d3834e5a 100644
--- a/src/shared/ui/manager/WorkerImageCard.tsx
+++ b/src/shared/ui/manager/WorkerImageCard.tsx
@@ -1,4 +1,5 @@
 // 사장님 홈 - 근무자 카드 (원형 이미지 + 이름 + 시간대)
+import { Avatar } from '@/shared/ui/common/Avatar'
 
 interface WorkerImageCardProps {
   name: string
@@ -17,20 +18,12 @@ export function WorkerImageCard({
     <div
       className={`flex flex-col items-center rounded-xl bg-white p-4 shadow-sm min-w-[140px] shrink-0 ${className}`}
     >
-      <div className="w-20 h-20 rounded-full overflow-hidden bg-gray-100 border border-gray-200 flex items-center justify-center">
-        {imageUrl ? (
-          <img
-            src={imageUrl}
-            alt={name}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div
-            className="w-full h-full bg-[repeating-conic-gradient(#e5e7eb_0%_25%,transparent_0%_50%)] [background-size:12px_12px]"
-            aria-hidden
-          />
-        )}
-      </div>
+      <Avatar
+        src={imageUrl}
+        alt={name}
+        size={80}
+        className="border border-gray-200"
+      />
       <p className="typography-body02-semibold text-gray-900 mt-3 text-center">
         {name}
       </p>