Merge pull request #176 from DevKor-github/feat/#175/chatlist-item

feat: 채팅 리스트에서 아이템 썸네일 추가

Author: jw0202058

src/features/chatList/components/ChatList/index.tsx

@@ -11,7 +11,9 @@ import useDrawer from '@/common/hooks/useDrawer';
 import ChatDrawer from '../ChatDrawer';
 import { useState } from 'react';
 import CustomAlert from '@/common/components/CustomAlert';
-import { usePatchExit } from '../../api/usePatchExit';
+import { usePatchExit, type ExitResponse } from '../../api/usePatchExit';
+import type { AxiosError } from 'axios';
+import getImageUrl from '@/common/utils/getImageUrl';
 import { getInProgress } from '../../api/useGetInProgess';
 
 export interface Props {
@@ -25,6 +27,8 @@ const ChatList = ({ data }: Props) => {
   const [showExitAlert, setShowExitAlert] = useState(false);
   const [showErrorAlert, setShowErrorAlert] = useState(false);
 
+  const thumbnail = data.itemThumbnailUrl ? getImageUrl(data.itemThumbnailUrl) : 'base-url';
+
   const onUnshowAlert = () => {
     if (showExitAlert) setShowExitAlert(false);
     if (showErrorAlert) setShowErrorAlert(false);
@@ -65,7 +69,10 @@ const ChatList = ({ data }: Props) => {
   return (
     <>
       <Link className={s.List} to={`/chatroom/${data.chatRoomId}`} {...bind()}>
-        <UserProfileImage nickname={data.opponentNickname} src={data.opponentProfileImageUrl} />
+        <div className={s.Img}>
+          <img className={s.Thumbnail} src={thumbnail} />
+          <UserProfileImage nickname={data.opponentNickname} src={data.opponentProfileImageUrl} />
+        </div>
         <div className={s.Contents}>
           <div className={s.TimeInfo}>
             <div className={s.UserInfo}>

src/features/chatList/components/ChatList/style.css.ts

@@ -6,6 +6,29 @@ export const List = css({
   gap: '0.87rem',
 });
 
+export const Img = css({
+  w: '3.5rem',
+  h: '3.5rem',
+  position: 'relative',
+  display: 'inline-block',
+});
+
+export const Thumbnail = css({
+  display: 'flex',
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  w: '2rem',
+  h: '2rem',
+  bg: 'systemGray',
+  flexShrink: 0,
+  aspectRatio: '1/1',
+  objectFit: 'cover',
+  borderRadius: '0.375rem',
+  border: '1px solid var(--100, #FFF)',
+  boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.10)',
+});
+
 export const Contents = css({
   display: 'flex',
   flex: 1,

src/features/chatList/types.ts

@@ -10,6 +10,7 @@ export interface ChatListInterface {
   mostRecentChatIsPick: boolean | null;
   lastChatAt: string | null;
   unreadChatCount: number;
+  itemThumbnailUrl: string;
 }
 
 export interface SubChatListInterface {

src/features/chatRoom/components/ChatRoomLayout/ChatRoomHeader/style.css.ts

@@ -14,6 +14,14 @@ export const UserInfo = css({
   gap: '0.875rem',
   justifyContent: 'center',
   alignItems: 'center',
+
+  color: '100',
+  fontFamily: 'Pretendard',
+  fontSize: ' 1rem',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  lineHeight: 'normal',
+  letterSpacing: '-0.04rem',
 });
 
 export const Verifiy = css({