Fix: SEO metadata && mainimg to webp

index.html

@@ -32,9 +32,13 @@
     <link
       rel="preload"
       as="image"
-      href="/png/coffee_mainimg.png"
-      srcset="/png/coffee_mainimg.png 120w"
+      href="https://ddocker.kro.kr/png/coffee_mainimg.webp"
+      srcset="/png/coffee_mainimg.webp 120w"
       sizes="(min-width: 360px) 120px, (max-width: 500px) 120px" />
+    <link
+      rel="preload"
+      as="image"
+      href="https://ddocker.kro.kr/sprite.svg" />
     <link
       rel="preconnect"
       href="https://ddocker.kro.kr" />

package.json

@@ -54,7 +54,6 @@
     "rollup-plugin-visualizer": "^5.10.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.6",
-    "vite-plugin-compression2": "^1.1.1",
     "vite-plugin-remove-console": "^2.2.0",
     "vite-tsconfig-paths": "^4.2.1"
   }

public/pwabuilder-sw.js

@@ -1,4 +1,4 @@
-const STATIC_CACHE_NAME = 'ddocker-static-v6';
+const STATIC_CACHE_NAME = 'ddocker-static-v7';
 const DYNAMIC_CACHE_NAME = 'ddocker-dynamic-v1';
 
 const ASSETS = [
@@ -25,7 +25,7 @@ const ASSETS = [
   '/png/angelinus.png',
   '/png/banapresso.png',
   '/png/bbak.png',
-  '/png/coffee_mainimg.png',
+  '/png/coffee_mainimg.webp',
   '/png/coffeebean.png',
   '/png/compose.png',
   '/png/ediya.png',

src/components/common/SEOMeta.tsx

@@ -11,7 +11,7 @@ type Props = {
 const SEOMeta = ({ pageData }: Props) => {
   const { title, pageUrl, description } = pageData;
   const baseTitle = 'DDocker - ';
-  const keywords = 'ddocker, coffee, caffeine, 또커, 커피, 카페인, 커피사진';
+  const keywords = 'ddocker, coffee, caffeine, 똑커, 커피, 카페인, 커피사진';
   const siteUrl = 'https://ddocker.kro.kr/';
   const ogImage = '';
 

src/components/home/TodayCaffeineText.tsx

@@ -42,9 +42,9 @@ const TodayCaffeineText = () => {
           </div>
         )}
         <CoffeeImage
-          src="/png/coffee_mainimg.png"
+          src="/png/coffee_mainimg.webp"
           alt="coffee"
-          srcSet="/png/coffee_mainimg.png 120w"
+          srcSet="/png/coffee_mainimg.webp 120w"
           sizes="(min-width: 360px) 120px, (max-width: 500px) 120px"
         />
       </div>

src/constants/SEOData.ts

@@ -13,48 +13,48 @@ const SEO_DATA = {
       'DDocker 서비스에 가입하고 건강하고 즐거운 똑똑한 커피 생활을 시작해보세요.'
   },
   home: {
-    title: '또커, 똑똑한 커피 생활',
+    title: '똑커, 똑똑한 커피 생활',
     pageUrl: '',
     description: '모임, 일상, 취미가 된 커피를 건강하고 똑똑하게 즐겨보세요.'
   },
   follow: {
     title: '팔로워',
     pageUrl: routes[2],
-    description: '나를 팔로우하는 또커들을 확인하고 방문해보세요.'
+    description: '나를 팔로우하는 똑커들을 확인하고 방문해보세요.'
   },
   following: {
     title: '팔로잉',
     pageUrl: routes[2],
-    description: '내가 팔로우하는 또커들의 프로필을 확인하고 방문해보세요.'
+    description: '내가 팔로우하는 똑커들의 프로필을 확인하고 방문해보세요.'
   },
   myPage: {
     title: '프로필 수정',
     pageUrl: routes[3],
     description:
-      '또커 계정의 프로필을 변경해보세요. 닉네임 변경, 프로필 사진 업로드, 한 줄 소개 등을 통해 나만의 프로필을 만들 수 있습니다.'
+      '똑커 계정의 프로필을 변경해보세요. 닉네임 변경, 프로필 사진 업로드, 한 줄 소개 등을 통해 나만의 프로필을 만들 수 있습니다.'
   },
   notification: {
     title: '알림',
     pageUrl: routes[4],
-    description: '또커 계정의 새로운 팔로우, 댓글, 종아요를 확인해보세요.'
+    description: '똑커 계정의 새로운 팔로우, 댓글, 종아요를 확인해보세요.'
   },
   post: {
     title: '게시물',
     pageUrl: `${routes[5]}`,
     description:
-      '또커 게시물의 브랜드, 메뉴, 카페인을 확인하고 좋아요, 댓글을 통해 소통해보세요. 또커의 커피 사진과 게시글을 공유하기 버튼을 통해 공유해보세요.'
+      '똑커 게시물의 브랜드, 메뉴, 카페인을 확인하고 좋아요, 댓글을 통해 소통해보세요. 똑커의 커피 사진과 게시글을 공유하기 버튼을 통해 공유해보세요.'
   },
   register: {
     title: '게시물 등록',
     pageUrl: `${routes[5]}/register`,
     description:
-      '또커 게시물을 등록해보세요. 브랜드, 메뉴, 샷 이나 사이즈 등의 추가정보를 입력해 보다 더 정확하게 내가 마신 카페인을 기록 할 수 있습니다.'
+      '똑커 게시물을 등록해보세요. 브랜드, 메뉴, 샷 이나 사이즈 등의 추가정보를 입력해 보다 더 정확하게 내가 마신 카페인을 기록 할 수 있습니다.'
   },
   update: {
     title: '게시물 수정',
     pageUrl: routes[5],
     description:
-      '또커 게시물의 정보를 잘못 입력하거나 수정하고 싶을 때 언제든지 게시물 정보를 변경 할 수 있습니다.'
+      '똑커 게시물의 정보를 잘못 입력하거나 수정하고 싶을 때 언제든지 게시물 정보를 변경 할 수 있습니다.'
   },
   postsTrend: {
     title: '트렌드 피드',
@@ -66,18 +66,18 @@ const SEO_DATA = {
     title: '팔로잉 피드',
     pageUrl: routes[6],
     description:
-      '내가 팔로잉 하는 또커 유저들의 촤신 게시물들을 확인하고 좋아요와 댓글을 남겨보세요.'
+      '내가 팔로잉 하는 똑커 유저들의 촤신 게시물들을 확인하고 좋아요와 댓글을 남겨보세요.'
   },
   search: {
     title: '검색',
     pageUrl: routes[7],
     description:
-      '검색을 통해 다른 또커 유저를 검색헤보세요. 또커 유저의 프로필에 방문해 게시물, 팔로우, 팔로잉 목록을 살펴 볼 수 있습니다.'
+      '검색을 통해 다른 똑커 유저를 검색헤보세요. 똑커 유저의 프로필에 방문해 게시물, 팔로우, 팔로잉 목록을 살펴 볼 수 있습니다.'
   },
   profile: {
     title: '프로필',
     pageUrl: routes[8],
-    description: '또커의 프로필을 확인하고 게시물을 둘러보세요'
+    description: '똑커의 프로필을 확인하고 게시물을 둘러보세요'
   },
   coffee: {
     title: '나의 커피',
@@ -109,7 +109,7 @@ const SEO_DATA = {
     title: '신고하기',
     pageUrl: routes[11],
     description:
-      '신고 내용을 제출해주세요. 또커 팀이 최대한 빠르게 검토하여 대응하겠습니다.'
+      '신고 내용을 제출해주세요. 똑커 팀이 최대한 빠르게 검토하여 대응하겠습니다.'
   }
 };
 export default SEO_DATA;

vite.config.ts

@@ -8,16 +8,11 @@ import imageminPngQuant from 'imagemin-pngquant';
 import viteImagemin from '@vheemstra/vite-plugin-imagemin';
 import imageminSvgo from 'imagemin-svgo';
 import prerender from '@prerenderer/rollup-plugin';
-import compression from 'vite-plugin-compression2';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
-    compression({
-      include: [/\.js/, /\.css/],
-      threshold: 1400
-    }),
     prerender({
       routes: [
         '/',