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 (