Add social share preview and reduce mobile fighter size

constants/branding.ts

@@ -1 +1,4 @@
 export const GAME_NAME = '쎄쎄쎄:기공대전';
+export const GAME_DESCRIPTION = '기를 모으고, 공격하고, 막아라! 친구 또는 봇과 즐기는 심리전 대전 게임.';
+export const GAME_URL = 'https://ssessesse.horoli.kr/';
+export const GAME_SHARE_IMAGE = `${GAME_URL}assets/share-home.png`;

src/client/match.css

@@ -170,7 +170,7 @@ body:is([data-screen=match], [data-screen=result]) #reconnect {
     --edge: 16px; --stage-bottom: 16px;
     --self-position: 25.09%;
     --stage-top: calc(100px + env(safe-area-inset-top));
-    --fighter-size: min(60vw, calc((100cqh - 38px) * .866667), 360px);
+    --fighter-size: min(48vw, calc((100cqh - 38px) * .866667), 288px);
   }
   #match[data-self="1"] { --self-position: 74.91%; }
   #match[data-phase=finished] { --stage-top: calc(210px + env(safe-area-inset-top)); }

vite.config.ts

@@ -1,7 +1,33 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'node:path';
+import { GAME_NAME, GAME_DESCRIPTION, GAME_URL, GAME_SHARE_IMAGE } from './constants/branding.js';
 export default defineConfig({
   root: 'src/client',
+  plugins: [{
+    name: 'game-share-metadata',
+    transformIndexHtml(_html, context) {
+      if (context.path !== '/index.html' && context.path !== '/') return [];
+      return [
+        { name: 'description', content: GAME_DESCRIPTION },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:locale', content: 'ko_KR' },
+        { property: 'og:site_name', content: GAME_NAME },
+        { property: 'og:title', content: GAME_NAME },
+        { property: 'og:description', content: GAME_DESCRIPTION },
+        { property: 'og:url', content: GAME_URL },
+        { property: 'og:image', content: GAME_SHARE_IMAGE },
+        { property: 'og:image:type', content: 'image/png' },
+        { property: 'og:image:width', content: '1200' },
+        { property: 'og:image:height', content: '630' },
+        { property: 'og:image:alt', content: `${GAME_NAME} 타이틀과 세 캐릭터` },
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: GAME_NAME },
+        { name: 'twitter:description', content: GAME_DESCRIPTION },
+        { name: 'twitter:image', content: GAME_SHARE_IMAGE },
+        { name: 'twitter:image:alt', content: `${GAME_NAME} 타이틀과 세 캐릭터` },
+      ].map(attrs => ({ tag: 'meta', attrs, injectTo: 'head' as const }));
+    },
+  }],
   build: { outDir: '../../dist/client', emptyOutDir: true,
     rollupOptions: { input: { game: resolve('src/client/index.html'), admin: resolve('src/client/admin/analytics/index.html') } },
   },