Heroineeee · YerinDoi · Oct 12, 2025 · Sep 24, 2025 · Sep 24, 2025 · Oct 4, 2025
diff --git a/index.html b/index.html
@@ -73,9 +73,12 @@
     <!-- Google Search Console ownership -->
     <meta name="google-site-verification" content="MgWIj6pzr0s3wno-nIkU2nVbY5bWWXviIcULcJ5FcRg" />
 
-    <!-- Pretendard -->
+    <!-- Pretendard (비차단 로딩) -->
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css" />
+    </noscript>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,9 +67,11 @@
     "kakao.maps.d.ts": "^0.1.40",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^6.0.4",
     "sitemap": "^8.0.0",
     "storybook": "^8.6.12",
     "tailwindcss": "^3.4.1",
+    "terser": "^5.44.0",
     "ts-jest": "^29.3.2",
     "ts-node": "^10.9.2",
     "typescript": "~5.7.2",

diff --git a/src/components/Community/CategorySelector.tsx b/src/components/Community/CategorySelector.tsx
@@ -36,7 +36,7 @@
 //     <div>
 //       <button
 //         onClick={() => setIsOpen(true)}
-//         className="w-full border-[1px] border-[#C3C3C3] rounded-[12px] px-4 py-3 text-left text-body-md-description fort-reular text-[#919191]"
+//         className="w-full border-[1px] border-sub-gray rounded-[12px] px-4 py-3 text-left text-body-md-description fort-reular text-main-gray"
 //       >
 //         {selectedLabel || '카테고리를 선택하세요'}
 //       </button>
@@ -112,7 +112,7 @@ export default function CategorySelector({
           setIsOpen(true);
           setTempValue(value);
         }}
-        className="w-full border-[1px] border-[#C3C3C3] rounded-[12px] px-4 py-3 text-left text-body-md-description font-regular text-[#919191]"
+        className="w-full border-[1px] border-sub-gray rounded-[12px] px-4 py-3 text-left text-body-md-description font-regular text-main-gray"
       >
         {selectedLabel || '게시글의 카테고리를 선택해주세요'}
       </button>
@@ -138,10 +138,10 @@ export default function CategorySelector({
                     className="w-full flex items-center gap-5 px-2 py-2 text-left"
                   >
                     <div
-                      className={`w-[24px] h-[24px] rounded-full flex items-center justify-center bg-[#E6E6E6]`}
+                      className={`w-[24px] h-[24px] rounded-full flex items-center justify-center bg-disabled`}
                     >
                       {tempValue === categoryValue && (
-                        <div className="w-[18px] h-[18px] bg-[#65CE58] rounded-full" />
+                        <div className="w-[18px] h-[18px] bg-main-color rounded-full" />
                       )}
                     </div>
                     <span className="text-title-sb-button font-semibold">

diff --git a/src/components/Community/CommentInput.tsx b/src/components/Community/CommentInput.tsx
@@ -69,7 +69,7 @@ const CommentInput: React.FC<CommentInputProps> = ({
   };
 
   return (
-    <div className="relative flex items-center mb-[12px] px-[16px] py-[10px] border border-[#C3C3C3] rounded-[12px] text-[#919191] text-[12px]">
+    <div className="relative flex items-center mb-[12px] px-[16px] py-[10px] border border-sub-gray rounded-[12px] text-main-gray text-[12px]">
       <textarea
         ref={textareaRef}
         value={content}
@@ -80,7 +80,7 @@ const CommentInput: React.FC<CommentInputProps> = ({
         }
         spellCheck={false}
         rows={1}
-        className="flex-1 resize-none overflow-hidden border-none outline-none bg-transparent text-black placeholder:text-[#C3C3C3]"
+        className="flex-1 resize-none overflow-hidden border-none outline-none bg-transparent text-black placeholder:text-sub-gray"
       />
 
       {!isLoggedIn && (

diff --git a/src/components/Community/CommentItem.tsx b/src/components/Community/CommentItem.tsx
@@ -271,8 +271,8 @@ const CommentItem: React.FC<CommentItemProps> = ({
       <div
         className={`
     ${isReply ? 'pl-0 pr-[20px] border-none pt-0' : `px-[20px] pt-[12px]`}
-    pb-[12px] border-b-[1.5px] border-[#E6E6E6]
-    ${isNew ? 'bg-[#F4F6F8]' : ''}
+    pb-[12px] border-b-[1.5px] border-disabled
+    ${isNew ? 'bg-bg-gray' : ''}
   `}
       >
         {/* 상단: 프로필 + 닉네임/작성자/시간 + more 아이콘 */}
@@ -291,12 +291,12 @@ const CommentItem: React.FC<CommentItemProps> = ({
                 </span>
 
                 {isAuthor && (
-                  <span className="px-[8px] py-[2px] text-body-md-description font-regular rounded-[8px] bg-[#E6E6E6] text-[#616161]">
+                  <span className="px-[8px] py-[2px] text-body-md-description font-regular rounded-[8px] bg-disabled text-text-gray">
                     작성자
                   </span>
                 )}
 
-                <span className="text-[#919191] text-[12px]">
+                <span className="text-main-gray text-[12px]">
                   {isModified && '수정됨 · '}
                   {createdAt}
                 </span>
@@ -320,7 +320,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
               />
             ))}
         </div>
-        <div className="text-[#616161] font-regular text-body-md-title pl-[48px] whitespace-pre-wrap break-words">
+        <div className="text-text-gray font-regular text-body-md-title pl-[48px] whitespace-pre-wrap break-words">
           {content}
         </div>
 
@@ -341,7 +341,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
             </div>
             <div
               className={`flex gap-[4px] text-title-sb-button items-center font-bold font-semibold ${
-                isLiked ? 'text-main-color' : 'text-[#C3C3C3]'
+                isLiked ? 'text-main-color' : 'text-sub-gray'
               }`}
             >
               <button onClick={handleLikeClick} className="cursor-pointer">
@@ -376,14 +376,14 @@ const CommentItem: React.FC<CommentItemProps> = ({
       {isReplyInputOpen &&
         createPortal(
           <div className="fixed bottom-0 w-full z-50 bg-white border-t shadow-lg">
-            <div className="pl-[20px] pr-[22px] py-[9px] bg-[#F4F6F8] font-regular text-body-md-description text-[#919191]">
-              <span className="text-[#616161]">
+            <div className="pl-[20px] pr-[22px] py-[9px] bg-bg-gray font-regular text-body-md-description text-main-gray">
+              <span className="text-text-gray">
                 {replyTargetNickname || '[없음]'}
               </span>
               님에게 답글 남기는 중
               <button
                 onClick={handlecloseReplyInput}
-                className="float-right text-[#616161]"
+                className="float-right text-text-gray"
               >
                 ✕
               </button>

diff --git a/src/components/Community/CommunitySearchEmptyView.tsx b/src/components/Community/CommunitySearchEmptyView.tsx
@@ -27,19 +27,19 @@ const CommunitySearchEmptyView = ({keyword}:CommunitySearchEmptyViewProps) => {
   };
   return (
   <div className="min-h-screen flex flex-col">
-    <div className="flex flex-col gap-[20px] w-full flex-1 items-center pt-[165px] bg-[#F4F6F8]">
+    <div className="flex flex-col gap-[20px] w-full flex-1 items-center pt-[165px] bg-bg-gray">
       <EmptyView
         title={
           <span>
             <span className="text-[#212121]">'{keyword}'</span>
-            <span className="text-[#919191]">와 관련한 검색 결과가 없어요</span>
+            <span className="text-main-gray">와 관련한 검색 결과가 없어요</span>
           </span>
         }
         actionType="text"
         actionText="나누고 싶은 이야기가 있다면, \n첫 글을 남겨주세요!"
       />
       <button
-        className="flex items-center justify-center px-[20px] py-[12px] gap-[8px] bg-[#65CE58] text-white font-pretendard rounded-[24px] text-[16px] font-medium leading-normal tracking-[0.016px]"
+        className="flex items-center justify-center px-[20px] py-[12px] gap-[8px] bg-main-color text-white font-pretendard rounded-[24px] text-[16px] font-medium leading-normal tracking-[0.016px]"
         onClick={handleClick}
       >
         <img src={plusIcon} />

diff --git a/src/components/Community/EditOrDeleteBottomSheet.tsx b/src/components/Community/EditOrDeleteBottomSheet.tsx
@@ -41,7 +41,7 @@ const EditOrDeleteBottomSheet: React.FC<Props> = ({
           </div>
         </div>
         <div
-          className="flex justify-center border-t-[2px] border-[#F4F6F8] py-[12px] cursor-pointer"
+          className="flex justify-center border-t-[2px] border-bg-gray py-[12px] cursor-pointer"
           onClick={onClose}
         >
           취소

diff --git a/src/components/Community/ImageUploader.tsx b/src/components/Community/ImageUploader.tsx
@@ -25,11 +25,14 @@ export default function ImageUploader({
         maxSizeMB: 1,
         maxWidthOrHeight: 1024,
         useWebWorker: true,
+        fileType: "image/webp", //webp파일로 저장되게 하여 공간 절약
       });
 
+      const newFileName = file.name.replace(/\.[^/.]+$/, ".webp");
+
       //  압축된 Blob을 다시 File로 변환하면서 name 보존
-      const compressedFile = new File([compressedBlob], file.name, {
-        type: compressedBlob.type,
+      const compressedFile = new File([compressedBlob], newFileName, {
+        type: "image/webp",
         lastModified: Date.now(),
       });
 

diff --git a/src/components/Community/PopularPosts.tsx b/src/components/Community/PopularPosts.tsx
@@ -53,10 +53,10 @@ const PopularPosts = () => {
                     onClick={() => handleClick(post.communityPostId)}
                     className="text-caption-m text-left truncate w-full flex items-center gap-[8px]"
                   >
-                    <span className="text-[#029F64] font-semibold">
+                    <span className="text-sub-color font-semibold">
                       {idx + 1}.
                     </span>
-                    <span className="text-[#919191] font-regular text-body-md-description ">
+                    <span className="text-main-gray font-regular text-body-md-description ">
                       {post.title}
                     </span>
                   </button>

diff --git a/src/components/Community/PostItem.tsx b/src/components/Community/PostItem.tsx
@@ -31,7 +31,7 @@ const PostItem = ({ post, keyword = '' }: PostItemProps) => {
 
   return (
     <div
-      className="flex flex-col px-[20px] gap-[12px] py-[12px] border-b border-[#C3C3C3] cursor-pointer"
+      className="flex flex-col px-[20px] gap-[12px] py-[12px] border-b border-sub-gray cursor-pointer"
       onClick={handleClick}
     >
       <div className={`flex ${hasThumbnail ? 'flex-row justify-between gap-[19px]' : 'flex-col gap-[12px]'}`}>
@@ -50,7 +50,7 @@ const PostItem = ({ post, keyword = '' }: PostItemProps) => {
             )}
 
             {post.contentPreview && (
-              <p className="text-body-md-title text-[#C3C3C3]">
+              <p className="text-body-md-title text-sub-gray">
                 {highlightKeyword(
                   post.contentPreview.length > 50
                     ? post.contentPreview.slice(0, 50) + '…'
@@ -71,6 +71,7 @@ const PostItem = ({ post, keyword = '' }: PostItemProps) => {
               alt="thumbnail"
               className="w-full h-full object-cover"
               loading="lazy"
+              decoding="async"
             />
             {(post.imageCount ?? 0) > 1 && (
               <div className="flex justify-center absolute top-0 left-0 w-[29.3px] h-[29.3px] bg-[rgba(68,60,54,0.94)] items-center text-center  text-white text-[12px] px-[7px] py-[2px] rounded-[8px]">
@@ -81,7 +82,7 @@ const PostItem = ({ post, keyword = '' }: PostItemProps) => {
         )}
       </div>
 
-      <div className="flex justify-between text-body-md-title text-[#C3C3C3]">
+      <div className="flex justify-between text-body-md-title text-sub-gray">
         <div className="flex gap-[2px]">
           <span> 좋아요 {post.likeCount}</span> ·<span>{post.createdAt}</span> ·
           <span> 조회 {post.viewCount}</span>
@@ -115,7 +116,7 @@ export const highlightKeyword = (
     regex.test(part) ? (
       <span
         key={i}
-        className={isTitle ? 'font-bold underline underline-offset-2' : 'font-regular text-[#616161]'}
+        className={isTitle ? 'font-bold underline underline-offset-2' : 'font-regular text-text-gray'}
       >
         {part}
       </span>

diff --git a/src/components/Community/RecentKeyword.tsx b/src/components/Community/RecentKeyword.tsx
@@ -7,7 +7,7 @@ interface RecentKeywordProps {
 
 const RecentKeyword = ({ label, onDelete, onClick }: RecentKeywordProps) => {
   return (
-    <div className="flex w-fit items-center px-[12px] py-[4px] bg-[#F4F6F8] border border-[#919191] text-body-md-title rounded-[6px] font-regular gap-[10px]" onClick={onClick}>
+    <div className="flex w-fit items-center px-[12px] py-[4px] bg-bg-gray border border-main-gray text-body-md-title rounded-[6px] font-regular gap-[10px]" onClick={onClick}>
       <span>{label}</span>
       <button
         onClick={(e) => {

diff --git a/src/components/Community/ReplyItem.tsx b/src/components/Community/ReplyItem.tsx
@@ -12,7 +12,7 @@ interface ReplyItemProps {
 const ReplyItem = ({ data, postId, onReload, isNew, parentNickname }: ReplyItemProps) => {
   return (
     <div
-      className={`border-b-[1.5px] border-[#E6E6E6] ${isNew ? 'bg-[#F4F6F8]' : ''}`}
+      className={`border-b-[1.5px] border-disabled ${isNew ? 'bg-bg-gray' : ''}`}
     >
       <div className="pt-[12px] flex gap-[12px] pl-[20px] ">
         <Icon name="reply" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ const EditOrDeleteBottomSheet: React.FC<Props> = ({ @@
               </div>
             </div>
             <div
-              className="flex justify-center border-t-[2px] border-[#F4F6F8] py-[12px] cursor-pointer"
+              className="flex justify-center border-t-[2px] border-bg-gray py-[12px] cursor-pointer"
               onClick={onClose}
             >
               취소
@@ Expand Down @@