이미지 최적화 (issue #192)

src/components/common/avatar/AvartarList.tsx

@@ -2,6 +2,7 @@ import * as S from './AvatarList.styled';
 import { ProjectSkillTag } from '../../../models/manageMyProject';
 import Avatar from './Avatar';
 import { UserSkillTag } from '../../../models/applicant';
+import { formatImgPath } from '../../../util/formatImgPath';
 export interface AvartarListProps {
   avatars: ProjectSkillTag[] | UserSkillTag[] | null;
   size?: string;
@@ -22,7 +23,9 @@ function AvartarList({
         <Avatar
           key={avatar.skillTagId}
           size={size}
-          image={avatar.SkillTag.img}
+          image={`${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath(
+            avatar.SkillTag.img
+          )}?w=62&h=62&fit=crop&crop=entropy&q=60`}
         />
       ))}
     </S.Wrapper>

src/components/common/header/Header.tsx

@@ -12,6 +12,7 @@ import { UserCircleIcon } from '@heroicons/react/24/outline';
 import loadingImg from '../../../assets/loadingImg.svg';
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../modal/Modal';
+import { formatImgPath } from '../../../util/formatImgPath';
 
 function Header() {
   const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
@@ -32,7 +33,14 @@ function Header() {
             isLoading ? (
               <Avatar size='45px' image={loadingImg} />
             ) : isLoggedIn ? (
-              <Avatar size='45px' image={profileImg} />
+              <Avatar
+                size='45px'
+                image={`${
+                  import.meta.env.VITE_APP_IMAGE_CDN_URL
+                }/${formatImgPath(
+                  profileImg
+                )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60`}
+              />
             ) : (
               <UserCircleIcon color='#6D6D6D' width='48' height='48' />
             )

src/util/__tests__/formatImgPath.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest';
+import { formatImgPath } from '../formatImgPath';
+
+test('formatImgPath 함수를 테스트합니다.', () => {
+  const date =
+    'https://example.com/users/profile_b4dc06af-410c-497e-9e01-f543e1682423.jpeg';
+  const formattedDate = formatImgPath(date);
+
+  expect(formattedDate).toBe(
+    'users/profile_b4dc06af-410c-497e-9e01-f543e1682423.jpeg'
+  );
+});

src/util/formatImgPath.ts

@@ -0,0 +1,4 @@
+export const formatImgPath = (imgPath: string) => {
+  const path = imgPath.split('/').slice(3).join('/');
+  return path;
+};