diff --git a/frontend/src/common/assets/fonts/DNFBitBitTTF.ttf b/frontend/src/common/assets/fonts/DNFBitBitTTF.ttf new file mode 100644 index 000000000..276c54824 Binary files /dev/null and b/frontend/src/common/assets/fonts/DNFBitBitTTF.ttf differ diff --git a/frontend/src/common/font.style.ts b/frontend/src/common/font.style.ts index da9e13498..085fd7edd 100644 --- a/frontend/src/common/font.style.ts +++ b/frontend/src/common/font.style.ts @@ -1,3 +1,4 @@ +import bitbit from './assets/fonts/DNFBitBitTTF.ttf'; import { css } from '@emotion/react'; import pretendardBlackWoff2 from './assets/fonts/woff2-subset/Pretendard-Black.subset.woff2'; import pretendardBoldWoff2 from './assets/fonts/woff2-subset/Pretendard-Bold.subset.woff2'; @@ -75,6 +76,11 @@ const fonts = css` font-display: swap; src: url(${pretendardThinWoff2}) format('woff2'); } + + @font-face { + font-family: bitbit; + src: url(${bitbit}); + } `; export default fonts; diff --git a/frontend/src/custom.d.ts b/frontend/src/custom.d.ts index 58e503d61..9d4b85bba 100644 --- a/frontend/src/custom.d.ts +++ b/frontend/src/custom.d.ts @@ -8,6 +8,11 @@ declare module '*.woff2' { export default src; } +declare module '*.ttf' { + const src: string; + export default src; +} + declare module '*.svg?url' { const content: string; export default content; diff --git a/frontend/src/mocks/handler/betHandler.ts b/frontend/src/mocks/handler/betHandler.ts index a49103c67..a15b29c95 100644 --- a/frontend/src/mocks/handler/betHandler.ts +++ b/frontend/src/mocks/handler/betHandler.ts @@ -23,7 +23,7 @@ const dummyBets = [ }, ]; -const deadLine = '2024-10-22T21:14:00'; +const deadLine = '2024-10-21T21:14:00'; const dummyBetDetail: BetDetail = { title: '상세 배팅', currentParticipants: 10, diff --git a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx index 87c1bae13..ac403b1e5 100644 --- a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx +++ b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx @@ -11,6 +11,7 @@ import ProfileCardList from './components/ProfileCardList/ProfileCardList'; import Roulette from '../components/Roulette/Roulette'; import RouletteWrapper from '../components/RouletteWrapper/RouletteWrapper'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; +import { css } from '@emotion/react'; import useBetRefetch from '@_hooks/queries/useBetRefetch'; import useCompleteBet from '@_hooks/mutaions/useCompleteBet'; import useJoinBet from '@_hooks/mutaions/useJoinBet'; @@ -35,6 +36,8 @@ const getIsButtonDisabled = (bet?: BetDetail) => { return false; }; +const bitbit = 'bitbit'; + export default function BetDetailPage() { const navigate = useNavigate(); const params = useParams(); @@ -129,6 +132,9 @@ export default function BetDetailPage() { shape="bar" disabled={getIsButtonDisabled(bet)} onClick={buttonClickHandler} + font={css` + font: 400 normal 2rem ${bitbit}; + `} > {getButtonMessage(bet)} diff --git a/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.style.ts b/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.style.ts index 653f88eda..8ec7d15b4 100644 --- a/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.style.ts +++ b/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.style.ts @@ -1,5 +1,6 @@ import { Theme, css } from '@emotion/react'; +const bitbit = 'bitbit'; export const profileCard = ({ theme }: { theme: Theme }) => css` display: flex; align-items: center; @@ -31,6 +32,7 @@ export const profileImage = ({ theme }: { theme: Theme }) => css` export const profileNickname = ({ theme }: { theme: Theme }) => css` ${theme.coloredTypography.b1(theme.colorPalette.grey[400])} + font: 300 normal 2rem ${bitbit}; text-align: center; white-space: pre-line; `; diff --git a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx index 067e0d6b3..8fba3c327 100644 --- a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx +++ b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx @@ -1,5 +1,6 @@ import * as S from './BetResultPage.style'; +import { css, useTheme } from '@emotion/react'; import { useEffect, useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -11,13 +12,12 @@ import RouletteWrapper from '../components/RouletteWrapper/RouletteWrapper'; import SelectLayout from '@_layouts/SelectLayout/SelectLayout'; import useBet from '@_hooks/queries/useBet'; import useBetResult from '@_hooks/queries/useBetResult'; -import { useTheme } from '@emotion/react'; // import StarFourIcon from '@_components/Icons/StarIcons/StarFourIcon'; // import StarOneIcon from '@_components/Icons/StarIcons/StarOneIcon'; // import StarThreeIcon from '@_components/Icons/StarIcons/StarThreeIcon'; // import StarTwoIcon from '@_components/Icons/StarIcons/StarTwoIcon'; - +const bitbit = 'bitbit'; export default function BetResultPage() { const navigate = useNavigate(); @@ -100,7 +100,14 @@ export default function BetResultPage() { )} {isButtonShown && ( - )} diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx index 6b9e7513b..78c6df9a1 100644 --- a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx +++ b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx @@ -23,7 +23,7 @@ export default function Roulette(props: RouletteProps) { minMs = Infinity, startSpeed = 500, backgroundColor = 'grey', - font = "700 normal 5rem 'Pretendard'", + font = "500 normal 5rem 'bitbit'", fontSize = 32, stopSpeed = 3, fontColor = 'black', diff --git a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts index 1a15a49e9..b7ab40ee8 100644 --- a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts +++ b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts @@ -1,5 +1,7 @@ import { Theme, css } from '@emotion/react'; +const bitbit = 'bitbit'; + export const container = ({ theme }: { theme: Theme }) => css` display: flex; flex-direction: column; @@ -14,7 +16,10 @@ export const container = ({ theme }: { theme: Theme }) => css` export const title = ({ theme }: { theme: Theme }) => css` ${theme.typography.h2} + font:300 normal 5rem ${bitbit}; + width: 30rem; + text-align: center; word-wrap: break-word; white-space: pre-line; @@ -44,6 +49,7 @@ export const time = ({ theme }: { theme: Theme }) => css` ${theme.typography.h2} height: 48px; margin: 3rem 0; + font: 500 normal 4rem ${bitbit}; `; export const rouletteContainer = ({ theme }: { theme: Theme }) => css` diff --git a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx index 82743360a..7f57b22d7 100644 --- a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx +++ b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx @@ -1,13 +1,17 @@ +/* stylelint-disable font-family-no-missing-generic-family-keyword */ + import * as S from './RouletteWrapper.style'; +import { css, useTheme } from '@emotion/react'; + import { PropsWithChildren } from 'react'; -import { useTheme } from '@emotion/react'; interface RouletteWrapperProps extends PropsWithChildren { title: string; description: string; mainDescription: string; } +const bitbit = 'bitbit'; export default function RouletteWrapper(props: RouletteWrapperProps) { const theme = useTheme(); @@ -21,7 +25,15 @@ export default function RouletteWrapper(props: RouletteWrapperProps) { {description.split('*').map((str, index) => ( {str} diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 4fa6c0812..bda972d09 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -73,7 +73,7 @@ module.exports = { ], }, { - test: /\.(png|jpe?g|gif|webp|woff2)$/i, + test: /\.(png|jpe?g|gif|webp|woff2|ttf)$/i, type: 'asset/resource', generator: { outputPath: 'assets/',