feat;bitbit 폰트 적용

woowacourse-teams · Oct 22, 2024 · 7905085 · 7905085
1 parent 55e7b50
commit 7905085
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 8 deletions.
diff --git a/frontend/src/common/assets/fonts/DNFBitBitTTF.ttf b/frontend/src/common/assets/fonts/DNFBitBitTTF.ttf
diff --git 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
@@ -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
@@ -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
@@ -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)}
           </Button>

diff --git 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
@@ -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() {
             )}
           </RouletteWrapper>
           {isButtonShown && (
-            <Button shape="bar" reversePrimary onClick={buttonClickHandler}>
+            <Button
+              shape="bar"
+              reversePrimary
+              onClick={buttonClickHandler}
+              font={css`
+                font: 400 normal 2rem ${bitbit};
+              `}
+            >
               채팅방으로 가기
             </Button>
           )}

diff --git 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
@@ -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
@@ -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) => (
             <span
               key={`${str}-${index}`}
-              css={index % 2 ? theme.typography.h5 : theme.typography.b4}
+              css={
+                index % 2
+                  ? css`
+                      font: 400 normal 2rem ${bitbit};
+                    `
+                  : css`
+                      font: 300 normal 2rem ${bitbit};
+                    `
+              }
             >
               {str}
             </span>

diff --git 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/',