Merge pull request #324 from prgrms-web-devcourse-final-project/feat/image-size

[feat] 이미지 크기를 명시하여 레이아웃 쉬프트 방지

Author: kangsuyeong

src/App.tsx

@@ -8,7 +8,7 @@ import { useSheetStore } from './store/sheetStore';
 import KaKaoRedirection from '@/components/KaKaoRedirection';
 import { useYotube } from '@/hooks/useYoutube';
 import PublicRoute from '@/routes/PublicRoute';
-import CardDetailModalTemp from '@/components/modalSheet/CardDetailModalTemp';
+
 import {
   Home,
   Landing,
@@ -23,6 +23,7 @@ import {
   MyPage,
   UserPage,
 } from '@/pages';
+import CardDetailModal from '@/components/modalSheet/CardDetailModal';
 
 function App() {
   const { isRequestSendingSheetOpen, isRequestReceivingSheetOpen } = useSheetStore();
@@ -42,19 +43,19 @@ function App() {
           {/* PrivateRoute 적용 */}
           <Route element={<PrivateRoute />}>
             <Route path="/home" element={<Home />}>
-              <Route path=":id" element={<CardDetailModalTemp />} />
+              <Route path=":id" element={<CardDetailModal />} />
             </Route>
             <Route path="/chat" element={<Chat />} />
             <Route path="/post" element={<Post />} />
             <Route path="/post/:postId/edit" element={<Post />} />
             <Route path="/chatroom/:chatRoomId" element={<ChatRoom />} />
             <Route path="/mypage" element={<MyPage />}>
-              <Route path=":id" element={<CardDetailModalTemp />} />
+              <Route path=":id" element={<CardDetailModal />} />
             </Route>
             <Route path="/mypage/edit" element={<EditProfile />} />
             <Route path="/mypage/blocklist" element={<BlockList />} />
             <Route path="/user/:userId" element={<UserPage />}>
-              <Route path=":id" element={<CardDetailModalTemp />} />
+              <Route path=":id" element={<CardDetailModal />} />
             </Route>
           </Route>
 

src/components/ImageKitImg.tsx

@@ -1,4 +1,5 @@
 import defaultImage from '@assets/images/default.png';
+
 interface ImageKitImgProps {
   src: string; // Spotify 이미지 URL
   width: number;
@@ -20,6 +21,8 @@ export default function ImageKitImg({
     <img
       className={className}
       src={`https://ik.imagekit.io/${import.meta.env.VITE_IMAGEKIT_ID}/${imagePath}?tr=w-${width},h-${height}`}
+      width={width}
+      height={height}
       onError={(e) => {
         const target = e.target as HTMLImageElement;
         target.onerror = null; // 무한 루프 방지

src/components/modalSheet/CardDetailModalTemp.tsx renamed to src/components/modalSheet/CardDetailModal.tsx

@@ -1,16 +1,16 @@
 import EmotionBadge from '@/components/EmotionBadge';
 import ChatActionButtons from '@/components/modalSheet/ChatActionButtons';
-import defaultImage from '@assets/images/default.png';
 import { useQuery } from '@tanstack/react-query';
 import { getEmotionRecordById } from '@/apis/emotionRecord';
 import { formatDate } from '@/utils/formatDate';
 import ModalSheetLayoutTemp from '@/layouts/ModalSheetLayoutTemp';
 import { useParams } from 'react-router';
 import { Loading } from '@/components/loading';
+import ImageKitImg from '@/components/ImageKitImg';
 
 interface CardDetailModalProps {}
 
-function CardDetailModalTemp({}: CardDetailModalProps) {
+function CardDetailModal({}: CardDetailModalProps) {
   const id = useParams().id!;
 
   const { data: record, isLoading } = useQuery({
@@ -27,7 +27,6 @@ function CardDetailModalTemp({}: CardDetailModalProps) {
           <div className="flex flex-col items-center gap-1">
             <div className="flex items-center gap-1 caption-r text-gray-60">
               <span>{record?.nickName}</span>
-              {/* <img src={headsetIcon} alt="헤드셋 아이콘" /> */}
             </div>
             <div className="flex items-center gap-2">
               <span className=" font-light text-gray-60 text-[10px]">
@@ -39,15 +38,11 @@ function CardDetailModalTemp({}: CardDetailModalProps) {
 
           <div className="flex flex-col gap-2 max-w-[250px]">
             <div className="flex flex-col items-center gap-2">
-              <img
+              <ImageKitImg
                 src={record?.spotifyMusic.albumImage}
-                alt="앨범 이미지"
-                onError={(e) => {
-                  const target = e.target as HTMLImageElement;
-                  target.onerror = null; // 무한 루프 방지
-                  target.src = defaultImage; // 기본 이미지로 변경
-                }}
-                className="w-[80px] h-[80px] rounded-[8px]"
+                height={80}
+                width={80}
+                className="rounded-lg"
               />
               <div className="flex flex-col items-center min-w-0">
                 <span className="overflow-hidden body-large-b text-ellipsis whitespace-nowrap">
@@ -75,8 +70,4 @@ function CardDetailModalTemp({}: CardDetailModalProps) {
   );
 }
 
-export default CardDetailModalTemp;
-
-// 사용예시
-
-// <CardDetailModal recordId={selectedRecordId} isChatting={true} />;
+export default CardDetailModal;