[#32] feat : 로고 적용 (OG 태그, favicon, Header)

IISweetHeartII · IISweetHeartII · commit bdb4e545ad90 · 2026-01-11T05:13:12.000+09:00
diff --git a/index.html b/index.html
@@ -2,9 +2,26 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GoodGame</title>
+    <title>BONBON - 굿게임</title>
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="BONBON - 굿게임" />
+    <meta property="og:description" content="소통이 어려운 커플들을 위한 갈등 중재 서비스" />
+    <meta property="og:image" content="/logo.svg" />
+    <meta property="og:url" content="https://goodgame-fe.snowfrost.kr" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="BONBON - 굿게임" />
+    <meta name="twitter:description" content="소통이 어려운 커플들을 위한 갈등 중재 서비스" />
+    <meta name="twitter:image" content="/logo.svg" />
+
+    <!-- 기타 메타 -->
+    <meta name="description" content="소통이 어려운 커플들을 위한 갈등 중재 서비스" />
+    <meta name="theme-color" content="#fc8080" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/logo.svg b/public/logo.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <style>
+      .cls-1 {
+        font-family: HancomMalangMalang-Regular, 'Hancom MalangMalang';
+        font-size: 39.31px;
+        stroke: #231815;
+        stroke-miterlimit: 10;
+        stroke-width: 4.9px;
+      }
+
+      .cls-2 {
+        fill: #fc8080;
+      }
+
+      .cls-3 {
+        fill: #fcc;
+      }
+
+      .cls-4 {
+        letter-spacing: .1em;
+      }
+
+      .cls-5 {
+        letter-spacing: .05em;
+      }
+
+      .cls-6 {
+        letter-spacing: .09em;
+      }
+
+      .cls-7 {
+        letter-spacing: .06em;
+      }
+    </style>
+  </defs>
+  <text class="cls-1" transform="translate(10.86 140.99) scale(.99 1)"><tspan class="cls-5" x="0" y="0">B</tspan><tspan class="cls-6" x="25.04" y="0">ON</tspan><tspan class="cls-7" x="91.58" y="0">B</tspan><tspan class="cls-4" x="117.13" y="0">O</tspan><tspan class="cls-6" x="153.53" y="0">N</tspan></text>
+  <g>
+    <path class="cls-2" d="M68.36,75.27c1.46-10.11-4.12-20.26-14.03-24.18-9.91-3.92-20.93-.34-26.78,8.03-1.02-.29-2.11.23-2.51,1.23l-2,7.85c-.17.73.06,1.41.5,2-.8,9.65,4.72,19.09,14.18,22.83s19.88.66,25.91-6.86c.63-.09,1.33-.4,1.83-1.18l3.91-7.1c.4-1.02-.06-2.16-1.02-2.64Z"/>
+    <path class="cls-3" d="M120.53,66.83c-2.36-9.93-11.29-17.32-21.94-17.32s-19.58,7.39-21.95,17.33c-1.05.11-1.88.99-1.88,2.07l1.03,8.04c.12.74.57,1.29,1.2,1.68,2.81,9.27,11.41,16.01,21.59,16.01s18.73-6.7,21.57-15.92c.56-.31,1.09-.86,1.27-1.77l1.03-8.04c0-1.1-.85-1.99-1.92-2.07Z"/>
+    <path class="cls-2" d="M170.75,60.91c-5.05-8.88-15.68-13.47-25.91-10.49-10.23,2.98-16.73,12.57-16.22,22.77-.98.4-1.53,1.47-1.22,2.51l3.23,7.43c.32.68.91,1.08,1.63,1.27,5.29,8.11,15.43,12.18,25.21,9.33s16.11-11.67,16.25-21.31c.45-.46.81-1.13.72-2.05l-1.26-8.01c-.31-1.05-1.37-1.67-2.42-1.46Z"/>
+    <path class="cls-2" d="M83.39,80.49c4.99,2.04,10.05,3.32,15.49,3.28,5.65-.04,11.05-1.56,16.09-4.03,1.4-.69.17-2.78-1.22-2.09-4.8,2.35-9.95,3.73-15.32,3.7-5.07-.03-9.74-1.3-14.39-3.2-1.44-.59-2.07,1.76-.64,2.34h0Z"/>
+  </g>
+</svg>
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/icons/graybox.svg b/src/assets/icons/graybox.svg
diff --git a/src/assets/icons/logo-horizontal.svg b/src/assets/icons/logo-horizontal.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.82 42.79">
+  <defs>
+    <style>
+      .cls-1 {
+        font-family: HancomMalangMalang-Regular, 'Hancom MalangMalang';
+        font-size: 25.68px;
+        stroke: #231815;
+        stroke-miterlimit: 10;
+        stroke-width: 3.2px;
+      }
+
+      .cls-2 {
+        letter-spacing: .06em;
+      }
+
+      .cls-3 {
+        fill: #fc8080;
+      }
+
+      .cls-4 {
+        fill: #fcc;
+      }
+
+      .cls-5 {
+        letter-spacing: .09em;
+      }
+
+      .cls-6 {
+        letter-spacing: .1em;
+      }
+
+      .cls-7 {
+        letter-spacing: .09em;
+      }
+
+      .cls-8 {
+        letter-spacing: .05em;
+      }
+    </style>
+  </defs>
+  <text class="cls-1" transform="translate(48.8 30.69) scale(.99 1)"><tspan class="cls-8" x="0" y="0">B</tspan><tspan class="cls-7" x="16.36" y="0">ON</tspan><tspan class="cls-2" x="59.84" y="0">B</tspan><tspan class="cls-6" x="76.54" y="0">O</tspan><tspan class="cls-5" x="100.32" y="0">N</tspan></text>
+  <g>
+    <path class="cls-4" d="M37.99,17.79c-1.62-6.83-7.76-11.91-15.09-11.91s-13.46,5.08-15.09,11.91c-.72.07-1.29.68-1.29,1.42l.71,5.53c.08.51.39.89.83,1.15,1.93,6.37,7.85,11.01,14.85,11.01s12.88-4.61,14.83-10.94c.38-.22.75-.59.87-1.22l.71-5.53c0-.75-.58-1.36-1.32-1.43Z"/>
+    <path class="cls-3" d="M12.45,27.18c3.43,1.4,6.91,2.29,10.65,2.26s7.6-1.07,11.06-2.77c.96-.47.12-1.91-.84-1.44-3.3,1.62-6.84,2.57-10.54,2.54-3.49-.02-6.69-.89-9.89-2.2-.99-.41-1.43,1.21-.44,1.61h0Z"/>
+  </g>
+</svg>
diff --git a/src/assets/icons/logo-symbol.svg b/src/assets/icons/logo-symbol.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <style>
+      .cls-1 {
+        font-family: HancomMalangMalang-Regular, 'Hancom MalangMalang';
+        font-size: 39.31px;
+        stroke: #231815;
+        stroke-miterlimit: 10;
+        stroke-width: 4.9px;
+      }
+
+      .cls-2 {
+        fill: #fc8080;
+      }
+
+      .cls-3 {
+        fill: #fcc;
+      }
+
+      .cls-4 {
+        letter-spacing: .1em;
+      }
+
+      .cls-5 {
+        letter-spacing: .05em;
+      }
+
+      .cls-6 {
+        letter-spacing: .09em;
+      }
+
+      .cls-7 {
+        letter-spacing: .06em;
+      }
+    </style>
+  </defs>
+  <text class="cls-1" transform="translate(10.86 140.99) scale(.99 1)"><tspan class="cls-5" x="0" y="0">B</tspan><tspan class="cls-6" x="25.04" y="0">ON</tspan><tspan class="cls-7" x="91.58" y="0">B</tspan><tspan class="cls-4" x="117.13" y="0">O</tspan><tspan class="cls-6" x="153.53" y="0">N</tspan></text>
+  <g>
+    <path class="cls-2" d="M68.36,75.27c1.46-10.11-4.12-20.26-14.03-24.18-9.91-3.92-20.93-.34-26.78,8.03-1.02-.29-2.11.23-2.51,1.23l-2,7.85c-.17.73.06,1.41.5,2-.8,9.65,4.72,19.09,14.18,22.83s19.88.66,25.91-6.86c.63-.09,1.33-.4,1.83-1.18l3.91-7.1c.4-1.02-.06-2.16-1.02-2.64Z"/>
+    <path class="cls-3" d="M120.53,66.83c-2.36-9.93-11.29-17.32-21.94-17.32s-19.58,7.39-21.95,17.33c-1.05.11-1.88.99-1.88,2.07l1.03,8.04c.12.74.57,1.29,1.2,1.68,2.81,9.27,11.41,16.01,21.59,16.01s18.73-6.7,21.57-15.92c.56-.31,1.09-.86,1.27-1.77l1.03-8.04c0-1.1-.85-1.99-1.92-2.07Z"/>
+    <path class="cls-2" d="M170.75,60.91c-5.05-8.88-15.68-13.47-25.91-10.49-10.23,2.98-16.73,12.57-16.22,22.77-.98.4-1.53,1.47-1.22,2.51l3.23,7.43c.32.68.91,1.08,1.63,1.27,5.29,8.11,15.43,12.18,25.21,9.33s16.11-11.67,16.25-21.31c.45-.46.81-1.13.72-2.05l-1.26-8.01c-.31-1.05-1.37-1.67-2.42-1.46Z"/>
+    <path class="cls-2" d="M83.39,80.49c4.99,2.04,10.05,3.32,15.49,3.28,5.65-.04,11.05-1.56,16.09-4.03,1.4-.69.17-2.78-1.22-2.09-4.8,2.35-9.95,3.73-15.32,3.7-5.07-.03-9.74-1.3-14.39-3.2-1.44-.59-2.07,1.76-.64,2.34h0Z"/>
+  </g>
+</svg>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -1,13 +1,13 @@
-import Logo from "../../assets/icons/graybox.svg";
+import Logo from "../../assets/icons/logo-horizontal.svg";
 
 export default function Header() {
   return (
     <header className="sticky top-0 z-50 bg-white">
       <div className="mx-auto flex h-[67px] max-w-[430px] items-center px-5">
         <img
           src={Logo}
-          alt="logo"
-          className="h-6 object-contain"
+          alt="BONBON 로고"
+          className="h-8 object-contain"
         />
       </div>
     </header>
