feat: ✨ feat(#192): 서비스 소개 배너 영역 추가

src/app/page.tsx

@@ -2,13 +2,12 @@
 
 import { useRouter } from "next/navigation";
 import { MATCH_PAGE_DATA } from "@/constants/match";
-import Image from "next/image";
 import styled from "styled-components";
 import { theme } from "@/styles/theme";
 import { useState } from "react";
 import Alert from "@/components/common/Alert";
 import { getAccessToken } from "@/utils/storage";
-import { AuthAxios } from "@/api/auth";
+import Banner from "@/components/common/Banner";
 
 const HomePage = () => {
   const router = useRouter();
@@ -30,16 +29,7 @@ const HomePage = () => {
         />
       )}
       <HomeContent>
-        <Header>
-          <Image
-            src="/assets/icons/logo.svg"
-            width={371}
-            height={117}
-            priority
-            alt="logo"
-          />
-          <SubTitle>겜구 커뮤니티에 오신 것을 환영합니다.</SubTitle>
-        </Header>
+        <Banner />
         <Main>
           {MATCH_PAGE_DATA.map((content) => {
             return (

src/components/common/Banner.tsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+const Banner = () => {
+  return (
+    <BannerWrapper>
+      <TextContainer>
+        <p>
+          <HighlightText>겜구 커뮤니티에 오신 것을 환영해요 🎉</HighlightText>
+        </p>
+        <Description>게임 친구를 쉽고 빠르게 구해줄게요!</Description>
+      </TextContainer>
+      <Logo>GAMGOO</Logo>
+    </BannerWrapper>
+  );
+};
+
+export default Banner;
+
+const BannerWrapper = styled.div`
+  width: 100%;
+  height: 128px;
+  background: #f0f0fc;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  padding: 40px;
+  position: relative;
+  margin-bottom: 32px;
+`;
+
+const TextContainer = styled.div`
+  flex: 1;
+`;
+
+const HighlightText = styled.span`
+  color: #8a63d2;
+  font-weight: bold;
+`;
+
+const Description = styled.p`
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+`;
+
+const Logo = styled.div`
+  font-size: 72px;
+  font-weight: bold;
+  font-family: "TimeForSalad", sans-serif;
+  color: #c1b7ff;
+  opacity: 0.3;
+  position: absolute;
+  right: 20px;
+  letter-spacing: 5px;
+`;

src/styles/GlobalStyles.ts

@@ -53,6 +53,14 @@ button {
     src: url("/public/assets/fonts/PretendardVariable.woff2") format('font-woff2'),
     url("/assets/fonts/PretendardVariable.ttf") format('truetype'); 
   }
+/* 새로 추가한 Time For Salad */
+@font-face {
+  font-family: "TimeForSalad";
+  src: url("/assets/fonts/TimeForSalad.woff2") format("woff2"),
+       url("/assets/fonts/TimeForSalad.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
 `;
 
-export default GlobalStyles;
+export default GlobalStyles;