Hotfix: DefaultBanner 리팩토링

src/components/postDetail/DefaultBanner/DefaultBanner.module.scss

@@ -25,22 +25,36 @@
       @include image-fit(cover);
     }
 
-    .game-name {
-      @include text-style-quantico(48, $primary);
+    .text-container {
+      @include column-flexbox;
+      @include pos-center;
 
-      @include responsive(T) {
-        @include text-style-quantico(32);
-      }
+      overflow: hidden;
+      width: 100%;
+
+      .match-name {
+        @include text-style-quantico(24, $gray20, bold);
+
+        @include responsive(T) {
+          font-size: $font-size-16;
+        }
 
-      @include responsive(M) {
-        font-size: 24;
+        line-height: 3rem;
       }
 
-      @include pos-center;
+      .game-name {
+        @include text-style-quantico(32, $white);
 
-      overflow: hidden;
-      width: 100%;
-      text-align: center;
+        @include responsive(T) {
+          font-size: $font-size-24;
+        }
+
+        @include responsive(M) {
+          font-size: $font-size-24;
+        }
+
+        line-height: 4rem;
+      }
     }
   }
 }

src/components/postDetail/DefaultBanner/index.tsx

@@ -2,6 +2,8 @@ import Image from 'next/image';
 
 import classNames from 'classnames/bind';
 
+import { PRICE_TO_MATCH_TYPE } from '@/constants';
+
 import { GameNameEN } from '@/types';
 
 import styles from './DefaultBanner.module.scss';
@@ -10,15 +12,19 @@ const cx = classNames.bind(styles);
 
 type DefaultBannerProps = {
   url: string;
+  price: number;
   gameName: GameNameEN;
 };
 
-const DefaultBanner = ({ url, gameName }: DefaultBannerProps) => {
+const DefaultBanner = ({ url, price, gameName }: DefaultBannerProps) => {
   return (
     <div className={cx('default-banner')}>
       <div className={cx('img-container')}>
-        <Image className={cx('img')} src={url} alt='배너 이미지' fill sizes='100%' />
-        <span className={cx('game-name')}>{gameName}</span>
+        <Image className={cx('img')} src={url} alt='배너 이미지' fill sizes='100%' priority />
+        <div className={cx('text-container')}>
+          <span className={cx('match-name')}>{PRICE_TO_MATCH_TYPE[price]}</span>
+          <span className={cx('game-name')}>{gameName}</span>
+        </div>
       </div>
     </div>
   );

src/components/postDetail/PostDetailContent/index.tsx

@@ -99,7 +99,7 @@ const PostDetailContent = ({ isLoggedIn }: PostPageProps) => {
             {isImageSlide && imageUrls ? (
               <ImageSlide imageList={imageUrls} />
             ) : (
-              <DefaultBanner url={bannerImageUrl} gameName={formatCategoryToGameNameEN(category)} />
+              <DefaultBanner url={bannerImageUrl} price={price} gameName={formatCategoryToGameNameEN(category)} />
             )}
           </section>
           <section className={cx('section-bottom', { 'no-flex': !isReservationAvailable })}>

src/constants/games.ts

@@ -1,6 +1,7 @@
-import { GameNameEN, GameNameKR } from '@/types';
+import { GameNameEN, GameNameKR, MatchTypeEN } from '@/types';
 
 export const GAME_NAME_LIST_EN: GameNameEN[] = ['LEAGUE OF LEGENDS', 'BATTLEGROUNDS', 'OVERWATCH 2', 'MINECRAFT'];
+export const MATCH_TYPE_LIST_EN: MatchTypeEN[] = ['Offline Match', 'Online Match', 'Clan Recruitment', 'Game Strategy'];
 
 export const GAME_NAME_EN_TO_KR: Record<GameNameEN, GameNameKR> = {
   'LEAGUE OF LEGENDS': '리그오브레전드',
@@ -44,3 +45,10 @@ export const GAME_PATH_NAME_TO_GAME_NAME_EN: Record<string, string> = {
   'overwatch-2': GAME_NAME_LIST_EN[2],
   minecraft: GAME_NAME_LIST_EN[3],
 };
+
+export const PRICE_TO_MATCH_TYPE: Record<string, string> = {
+  0: MATCH_TYPE_LIST_EN[0],
+  1: MATCH_TYPE_LIST_EN[1],
+  2: MATCH_TYPE_LIST_EN[2],
+  3: MATCH_TYPE_LIST_EN[3],
+};

src/types/games.ts

@@ -5,3 +5,5 @@ export type GameNameEN = 'LEAGUE OF LEGENDS' | 'BATTLEGROUNDS' | 'OVERWATCH 2' |
 export type LinkName = 'league-of-legends' | 'battlegrounds' | 'overwatch-2' | 'minecraft';
 
 export type Category = '스포츠' | '투어' | '관광' | '웰빙';
+
+export type MatchTypeEN = 'Online Match' | 'Offline Match' | 'Clan Recruitment' | 'Game Strategy';