diff --git a/src/components/postDetail/DefaultBanner/DefaultBanner.module.scss b/src/components/postDetail/DefaultBanner/DefaultBanner.module.scss index 5a82f7ce..c5867fa5 100644 --- a/src/components/postDetail/DefaultBanner/DefaultBanner.module.scss +++ b/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; + } } } } diff --git a/src/components/postDetail/DefaultBanner/index.tsx b/src/components/postDetail/DefaultBanner/index.tsx index 50ca843b..d021b6ae 100644 --- a/src/components/postDetail/DefaultBanner/index.tsx +++ b/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 (
- 배너 이미지 - {gameName} + 배너 이미지 +
+ {PRICE_TO_MATCH_TYPE[price]} + {gameName} +
); diff --git a/src/components/postDetail/PostDetailContent/index.tsx b/src/components/postDetail/PostDetailContent/index.tsx index 419d183b..c9e8be72 100644 --- a/src/components/postDetail/PostDetailContent/index.tsx +++ b/src/components/postDetail/PostDetailContent/index.tsx @@ -99,7 +99,7 @@ const PostDetailContent = ({ isLoggedIn }: PostPageProps) => { {isImageSlide && imageUrls ? ( ) : ( - + )}
diff --git a/src/constants/games.ts b/src/constants/games.ts index 8e7058e1..75220cc3 100644 --- a/src/constants/games.ts +++ b/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 = { 'LEAGUE OF LEGENDS': '리그오브레전드', @@ -44,3 +45,10 @@ export const GAME_PATH_NAME_TO_GAME_NAME_EN: Record = { 'overwatch-2': GAME_NAME_LIST_EN[2], minecraft: GAME_NAME_LIST_EN[3], }; + +export const PRICE_TO_MATCH_TYPE: Record = { + 0: MATCH_TYPE_LIST_EN[0], + 1: MATCH_TYPE_LIST_EN[1], + 2: MATCH_TYPE_LIST_EN[2], + 3: MATCH_TYPE_LIST_EN[3], +}; diff --git a/src/types/games.ts b/src/types/games.ts index a01df922..82b1075e 100644 --- a/src/types/games.ts +++ b/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';