🐛 [fix] : 목록에서 회원 프로필 사진 미표시 오류 수정

Author: seorang42

src/components/lists/ListCardTab.vue

@@ -3,11 +3,10 @@
     class="flex gap-2 items-center"
     :style="{ width: width ? `${width}px` : '' }"
     :class="width ? 'shrink-0' : 'grow'">
-    <div
-      v-if="profileImg"
-      class="w-6 h-6 rounded-full overflow-hidden">
-      <img :src="profileImg" />
-    </div>
+    <ImageContainer
+      v-if="profileImg !== undefined"
+      :size="24"
+      :url="profileImg" />
     <TaskStatus
       v-if="isStatus"
       :status="content as Status" />
@@ -23,9 +22,8 @@
 <script setup lang="ts">
 import type { ListCardProps, Status } from '@/types/common'
 import TaskStatus from '../common/TaskStatus.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =
   defineProps<ListCardProps>()
 </script>
-
-<style scoped></style>

src/components/my-request/MyRequestListCard.vue

@@ -47,7 +47,7 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.processorName, width: 120, profileImg: info.processorImg },
+  { content: info.processorName, width: 120, profileImg: info.processorImg || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/my-task/MyTaskListCard.vue

@@ -46,7 +46,7 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg },
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/request-history/RequestHistoryListCard.vue

@@ -46,8 +46,8 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg },
-  { content: info.processorName, width: 120, profileImg: info.processorImg },
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' },
+  { content: info.processorName, width: 120, profileImg: info.processorUrl || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/requested/RequestedListCard.vue

@@ -73,7 +73,7 @@ const requestedTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg }
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' }
 ]
 const router = useRouter()
 const queryClient = useQueryClient()

src/types/manager.ts

@@ -7,7 +7,7 @@ export interface RequestedListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
 }
 
@@ -18,9 +18,9 @@ export interface RequestHistoryListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
-  processorImg?: string
+  processorUrl?: string
   processorName?: string
   taskStatus: string
   finishedAt?: string
@@ -57,7 +57,7 @@ export interface MyTaskListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
   taskStatus: string
   finishedAt?: string

src/views/PwChangeView.vue

@@ -16,7 +16,7 @@
       </ModalView>
       <TitleContainer
         v-if="!isConfirmed"
-        :title="'비밀번호\n재설정'"
+        :title="'비밀번호\n확인'"
         :content="'비밀번호 재설정을 위해\n현재 비밀번호를 입력해주세요'" />
       <TitleContainer
         v-else
@@ -73,7 +73,7 @@
         <p
           v-show="isInvalid"
           class="absolute text-red-1 text-xs font-semibold mt-1">
-          대문자, 소문자, 숫자, 특수문자 포함 8자-20자 입력해주세요
+          대문자, 소문자, 숫자, 특수문자 포함 8자-20자로 입력해주세요
         </p>
       </div>
       <div class="relative">
@@ -92,7 +92,7 @@
         <p
           v-show="isDifferent"
           class="absolute text-red-1 text-xs font-semibold mt-1">
-          비밀번호가 일치하지 않아요
+          비밀번호가 일치하지 않습니다
         </p>
       </div>
       <div class="flex flex-col gap-2 items-center">