이미지 최적화 및 아이콘 위치 변경

src/entities/chat/ui/ChattingRoom/ChattingRoom.tsx

@@ -5,7 +5,7 @@ import { uploadImage } from "@/shared/api/uploadImage";
 import { useModalStore } from "@/shared/model/modal.store";
 import Button from "@/shared/ui/Button/Button";
 import { TextField } from "@/shared/ui/TextField/TextField";
-import DeleteIcon from "@/shared/images/delete.svg";
+import DeleteIcon from "@/shared/icons/delete.svg";
 
 import { apiFetch } from "@/shared/api/fetcher";
 import { useChatMessages } from "../../lib/useChatMessages";
@@ -213,7 +213,7 @@ export const ChattingRoom = ({
         ref={scrollContainerRef}
         className="absolute top-[100px] bottom-[100px] left-0 w-full overflow-y-auto p-4"
       >
-        <div ref={messagesTopRef} className="h-[1px]" />
+        <div ref={messagesTopRef} className="h-px" />
         {isMessagesLoading && (
           <div className="py-2 text-center text-sm text-gray-400">
             이전 메시지를 불러오는 중...
@@ -235,7 +235,7 @@ export const ChattingRoom = ({
 
       {image && (
         <div className="absolute bottom-[100px] left-0 px-8">
-          <div className="relative flex items-center justify-center rounded-md bg-gradient-to-r from-[rgba(80,151,250,0.4)] to-[rgba(83,99,255,0.4)] p-8 px-20">
+          <div className="relative flex items-center justify-center rounded-md bg-linear-to-r from-[rgba(80,151,250,0.4)] to-[rgba(83,99,255,0.4)] p-8 px-20">
             <img
               src={URL.createObjectURL(image)}
               alt="Selected image"
@@ -264,7 +264,7 @@ export const ChattingRoom = ({
           <img
             src="/icons/image-select.svg"
             alt="Upload Icon"
-            className="h-[24px] w-[24px] md:h-[25px] md:w-[25px] xl:h-[34px] xl:w-[34px]"
+            className="h-6 w-6 md:h-[25px] md:w-[25px] xl:h-[34px] xl:w-[34px]"
           />
           <input
             type="file"

src/entities/post/ui/card/PostCard.tsx

@@ -25,14 +25,15 @@ const PostCard = ({
 }: PostCardProps) => {
   return (
     <Link href={`/detail/${postingId}`}>
-      <article className="w-full rounded-[8px] border border-[#353542] bg-[#252530] p-[10px] md:pb-[20px] xl:pb-[25px]">
-        <div className="flex flex-col gap-[10px] md:gap-[20px] xl:gap-[25px]">
-          <div className="relative h-[98px] w-full overflow-hidden rounded-[6px] md:h-[160px] xl:h-[220px]">
+      <article className="w-full rounded-lg border border-[#353542] bg-[#252530] p-2.5 md:pb-5 xl:pb-6">
+        <div className="flex flex-col gap-2.5 md:gap-5 xl:gap-6">
+          <div className="relative h-24 w-full overflow-hidden rounded-md md:h-40 xl:h-56">
             {thumbnail ? (
               <Image
                 src={thumbnail}
                 alt={title}
                 fill
+                sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                 className="object-cover transition-transform duration-200 ease-in-out hover:scale-105"
               />
             ) : (
@@ -41,31 +42,36 @@ const PostCard = ({
               </div>
             )}
           </div>
-          <div className="flex flex-col gap-[5px] md:gap-[10px]">
-            <h1 className="line-clamp-2 h-[28px] text-sm leading-none font-medium text-[#F1F1F5] md:h-[32px] md:text-[16px] xl:h-[36px] xl:text-[18px]">
+
+          <div className="flex flex-col gap-1.5 md:gap-2.5">
+            <h1 className="line-clamp-2 h-7 text-sm leading-none font-medium text-[#F1F1F5] md:h-8 md:text-base xl:h-9 xl:text-lg">
               {title}
             </h1>
+
             <p className="text-xs text-[#9FA6B2] md:text-sm">
               {price?.toLocaleString()} 원
             </p>
-            <div className="flex w-full flex-col gap-[5px] text-xs leading-none font-light text-[#6E6E82] md:flex-row md:justify-between md:text-[14px] xl:text-[16px]">
-              <div className="flex gap-[5px]">
+
+            <div className="flex w-full flex-col gap-1.5 text-xs leading-none font-light text-[#6E6E82] md:flex-row md:justify-between md:text-sm xl:text-base">
+              <div className="flex gap-1.5">
                 <span aria-label="조회 수" title="조회 수">
                   조회
                 </span>
                 <span>{viewCount}</span>
               </div>
-              <div className="flex items-center gap-[4px]">
+
+              <div className="flex items-center gap-1">
                 <img
                   src="/icons/chat.svg"
                   alt="채팅 수"
-                  className="h-[10px] w-[10px]"
+                  className="h-2.5 w-2.5"
                 />
                 <span>{chatCount}</span>
+
                 <img
                   src="/icons/heart.svg"
                   alt="좋아요 수"
-                  className="h-[10px] w-[10px]"
+                  className="h-2.5 w-2.5"
                 />
                 <span>{likeCount}</span>
               </div>

src/entities/user/ui/card/Profile.tsx

@@ -31,56 +31,58 @@ const Profile = ({
   const { logout } = useAuthStore();
 
   return (
-    <article className="flex h-[556px] w-[335px] items-center justify-center rounded-[12px] border border-[#353542] bg-[#252530] px-[20px] py-[30px] md:h-[601px] md:w-[509px] md:px-[30px] xl:h-[753px] xl:w-[340px] xl:px-[20px] xl:pt-[40px]">
+    <article className="flex h-[556px] w-[335px] items-center justify-center rounded-lg border border-[#353542] bg-[#252530] px-5 py-7 md:h-[601px] md:w-[509px] md:px-7 xl:h-[753px] xl:w-[340px] xl:px-5 xl:pt-10">
       <div className="flex h-full w-full flex-col items-center justify-between">
         <Image
           src={imageUrl || DefaultProfileImage}
           alt="프로필"
           width={120}
           height={120}
+          priority
+          fetchPriority="high"
+          sizes="(max-width:1280px) 120px, 180px"
           className="rounded-full xl:h-[180px] xl:w-[180px]"
         />
 
         <div className="w-full">
-          <h1 className="mb-[10px] text-center text-xl leading-7 font-semibold text-white xl:text-[24px]">
+          <h1 className="mb-2.5 text-center text-xl leading-7 font-semibold text-white xl:text-2xl">
             {nickname}
           </h1>
-          <p className="text-sm leading-5 font-normal break-words text-gray-600 xl:font-[16px]">
+          <p className="text-sm leading-5 font-normal break-words text-gray-600 xl:text-base">
             {introduction}
           </p>
         </div>
 
         <div className="w-full">
           <div className="mb-2 flex justify-between text-center">
             <div className="relative flex-1">
-              <dd className="text-[18px] font-semibold text-[#F1F1F5]">
+              <dd className="text-lg font-semibold text-[#F1F1F5]">
                 {buyCount}
               </dd>
-              <dt className="mt-1 text-[14px] text-[#9FA6B2]">구매내역</dt>
-              <span className="absolute top-0 right-0 h-full w-[1px] bg-[#353542]" />
+              <dt className="mt-1 text-sm text-[#9FA6B2]">구매내역</dt>
+              <span className="absolute top-0 right-0 h-full w-px bg-[#353542]" />
             </div>
             <div className="relative flex-1">
-              <dd className="text-[18px] font-semibold text-[#F1F1F5]">
+              <dd className="text-lg font-semibold text-[#F1F1F5]">
                 {sellCount}
               </dd>
-              <dt className="mt-1 text-[14px] text-[#9FA6B2]">판매내역</dt>
+              <dt className="mt-1 text-sm text-[#9FA6B2]">판매내역</dt>
             </div>
           </div>
         </div>
+
         <div className="w-full text-center">
-          <dd className="text-[18px] font-semibold text-[#F1F1F5]">
-            {category}
-          </dd>
-          <dt className="mt-1 text-[14px] text-[#9FA6B2]">관심 카테고리</dt>
+          <dd className="text-lg font-semibold text-[#F1F1F5]">{category}</dd>
+          <dt className="mt-1 text-sm text-[#9FA6B2]">관심 카테고리</dt>
         </div>
 
-        <div className="flex w-full flex-col gap-[10px] md:gap-[15px] lg:gap-[20px]">
-          <Button className="w-full md:w-full xl:w-full" onClick={onEdit}>
+        <div className="flex w-full flex-col gap-2.5 md:gap-4 lg:gap-5">
+          <Button className="w-full" onClick={onEdit}>
             프로필 편집
           </Button>
           <Button
             variant="tertiary"
-            className="w-full md:w-full xl:w-full"
+            className="w-full"
             onClick={async () => {
               await apiFetch("/auth/logout", {
                 method: "POST",

src/features/createPost/ui/PostCreateButton/PostCreateButton.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import cn from "@/shared/lib/cn";
-import AddIcon from "@/shared/images/add.svg";
 
 interface PostCreateButtonProps {
   onClick: () => void;
@@ -17,11 +16,11 @@ export const PostCreateButton = ({
     <button
       onClick={onClick}
       className={cn(
-        `fixed right-8 bottom-8 flex h-[60px] w-[60px] items-center justify-center rounded-full bg-gradient-to-r from-[#5097fa] to-[#5363ff] shadow-lg shadow-blue-400/30 transition-all duration-200 hover:scale-105 active:scale-95`,
+        `fixed right-8 bottom-8 flex h-[60px] w-[60px] items-center justify-center rounded-full bg-linear-to-r from-[#5097fa] to-[#5363ff] shadow-lg shadow-blue-400/30 transition-all duration-200 hover:scale-105 active:scale-95`,
         className,
       )}
     >
-      <AddIcon />
+      <img src="/icons/add.svg" alt="게시글 작성" />
     </button>
   );
 };

src/features/createPost/ui/PostCreateModal/PostCreateModal.tsx

@@ -125,9 +125,9 @@ export const PostCreateModal = ({
                 onClick={() => handleRemoveImage(idx)}
               >
                 <img
-                  src="icons/delete.svg"
+                  src="/icons/delete.svg"
                   alt="삭제"
-                  className="h-[10px] w-[10px]"
+                  className="h-2.5 w-2.5"
                 />
               </button>
             </div>
@@ -153,9 +153,9 @@ export const PostCreateModal = ({
           onClick={onClose}
         >
           <img
-            src="icons/delete.svg"
+            src="/icons/delete.svg"
             alt="닫기"
-            className="h-[24px] w-[24px] text-gray-600"
+            className="h-6 w-6 text-gray-600"
           />
         </button>
 
@@ -167,7 +167,7 @@ export const PostCreateModal = ({
             onClick={() => inputRef.current?.click()}
           >
             <img
-              src="icons/image-select.svg"
+              src="/icons/image-select.svg"
               alt="이미지 선택"
               className="h-8 w-8"
             />

src/features/editPost/ui/PostEditModal.tsx

@@ -39,7 +39,7 @@ const ImageSwiperSlide = (
           onClick={() => onRemoveButtonClick(idx)}
         >
           <img
-            src="icons/delete.svg"
+            src="/icons/delete.svg"
             alt="삭제"
             className="h-2 w-2 md:h-3 md:w-3 xl:h-3 xl:w-3"
           />
@@ -185,11 +185,7 @@ export const PostEditModal = ({
           className="absolute top-4 right-4"
           onClick={onClose}
         >
-          <img
-            src="icons/delete.svg"
-            alt="닫기"
-            className="h-[24px] w-[24px]"
-          />
+          <img src="/icons/delete.svg" alt="닫기" className="h-6 w-6" />
         </button>
 
         <h2 className="text-lg font-semibold text-white">게시물 수정</h2>
@@ -200,7 +196,7 @@ export const PostEditModal = ({
             onClick={() => inputRef.current?.click()}
           >
             <img
-              src="icons/image-select.svg"
+              src="/icons/image-select.svg"
               alt="이미지 선택"
               className="h-8 w-8"
             />

src/features/editProfile/ui/ProfileEditModal/ProfileEditModal.tsx

@@ -93,7 +93,7 @@ export const ProfileEditModal = ({
       className={cn(
         "bg-black-900 relative flex flex-col rounded-lg",
         "w-[300px] gap-[15px] p-5",
-        "md:w-[520px] md:gap-[20px] md:p-10",
+        "md:w-[520px] md:gap-5 md:p-10",
         "xl:w-[620px] xl:gap-[30px] xl:p-10",
         className,
       )}
@@ -104,7 +104,7 @@ export const ProfileEditModal = ({
         className="absolute top-3 right-3"
       >
         <img
-          src="icons/delete.svg"
+          src="/icons/delete.svg"
           alt="닫기"
           aria-label="닫기"
           width={24}

src/features/editProfile/ui/ProfileImageChangeInput/ProfileImageChangeInput.tsx

@@ -31,8 +31,8 @@ export const ProfileImageChangeInput = ({
   return (
     <label
       className={cn(
-        "bg-black-800 flex cursor-pointer items-center justify-center overflow-hidden rounded-lg",
-        "h-[130px] w-[130px] md:h-[135px] md:w-[135px] xl:h-[160px] xl:w-[160px]",
+        "flex cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-gray-800",
+        "h-32 w-32 md:h-36 md:w-36 xl:h-40 xl:w-40",
         className,
       )}
     >
@@ -46,10 +46,10 @@ export const ProfileImageChangeInput = ({
         />
       ) : (
         <img
-          src="icons/image-select.svg"
+          src="/icons/image-select.svg"
           alt="Upload Icon"
           aria-label="Upload Icon"
-          className="h-[24px] w-[24px] md:h-[25px] md:w-[25px] xl:h-[34px] xl:w-[34px]"
+          className="h-6 w-6 md:h-6 md:w-6 xl:h-8 xl:w-8"
         />
       )}
       <input

src/features/like/ui/LikeButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import cn from "@/shared/lib/cn";
-import HeartIcon from "@/shared/images/heart.svg";
+import HeartIcon from "@/shared/icons/heart.svg";
 
 interface LikeButtonProps {
   liked: boolean;

src/widgets/header/ui/MobileSideMenu.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import DeleteIcon from "@/shared/images/delete.svg";
 import { useAuthStore } from "@/features/auth/model/auth.store";
 import cn from "@/shared/lib/cn";
 import { apiFetch } from "@/shared/api/fetcher";
@@ -46,7 +45,7 @@ export default function MobileSideMenu({
     <div>
       <div
         className={cn(
-          "fixed inset-0 z-[900] bg-black/40 transition-opacity md:hidden",
+          "fixed inset-0 z-900 bg-black/40 transition-opacity md:hidden",
           isVisible ? "opacity-100" : "opacity-0",
         )}
         onTransitionEnd={handleTransitionEnd}
@@ -57,15 +56,17 @@ export default function MobileSideMenu({
         role="dialog"
         aria-modal="true"
         className={cn(
-          "fixed top-0 left-0 z-[901] h-dvh w-[78%] max-w-[320px] transform bg-[#1C1C22] shadow-2xl transition-transform ease-out md:hidden",
+          "fixed top-0 left-0 z-901 h-dvh w-[78%] max-w-[320px] transform bg-[#1C1C22] shadow-2xl transition-transform ease-out md:hidden",
           isVisible ? "translate-x-0" : "-translate-x-full",
         )}
       >
         <header className="flex items-center justify-between border-b border-white/10 px-4 py-3">
           <h2 className="text-base font-semibold text-white">메뉴</h2>
-          <DeleteIcon
+          <img
+            src="/icons/delete.svg"
+            alt="닫기"
             onClick={handleClose}
-            className="h-6 w-6 cursor-pointer text-white/80 hover:bg-white/10"
+            className="cursor-pointe h-6 w-6"
           />
         </header>
 

src/widgets/main/ui/Select/Select.tsx

@@ -3,9 +3,6 @@
 import { useState, useRef, useEffect } from "react";
 import cn from "@/shared/lib/cn";
 
-import ArrowUpIcon from "@/shared/images/arrow-up.svg";
-import ArrowDownIcon from "@/shared/images/arrow-down.svg";
-
 interface Item {
   label: string;
   value: string;
@@ -52,7 +49,7 @@ const Select = ({
   }, [open]);
 
   return (
-    <div ref={selectRef} className="relative z-20 w-[160px] text-white">
+    <div ref={selectRef} className="relative z-20 w-40 text-white">
       <button
         type="button"
         aria-haspopup="listbox"
@@ -65,7 +62,19 @@ const Select = ({
         )}
       >
         <span>{selectedLabel || placeholder}</span>
-        {open ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        {open ? (
+          <img
+            src="/icons/arrow-up.svg"
+            alt="Arrow Up"
+            className="h-auto w-auto"
+          />
+        ) : (
+          <img
+            src="/icons/arrow-down.svg"
+            alt="Arrow Down"
+            className="h-auto w-auto"
+          />
+        )}
       </button>
 
       <div