[GGFE-251] 폰트 정리

[yoouyeon]

📌 개요

• 전체 프로젝트에서 사용되는 폰트들을 정리했습니다.

💻 작업사항

1. 사용하는 폰트를 아래와 같이 변수로 저장하고 기존에 직접 font-family에 적용되어 있던 폰트들을 변수로 바꾸었습니다.

   $common-font: 'NotoSansKR', sans-serif;
   $common-en-font: 'Roboto', sans-serif;
   $title-font: 'Lexend', sans-serif;
   $admin-font: 'Inter', sans-serif;
   $logo-font: 'Overgrow', sans-serif;
   $tier-font: 'Jua', sans-serif;
   $trophy-font: 'Montserrat', sans-serif;

2. 사용하지 않는 폰트들을 삭제했습니다.

   • public/font/Agnostic Italic.otf : 예전 로고 폰트인 것 같습니다.
   • public/font/Gugi-Regular.ttf : 예전 티어 폰트
   • public/font/NanumSquare_acEB.ttf : 한글 폰트 ➡️ 기본 한글 폰트를 NotoSansKR로 바꿈
   • public/font/NanumSquare_acR.ttf : 한글 폰트 ➡️ 기본 한글 폰트를 NotoSansKR로 바꿈
   • public/font/Reality Hyper Regular.ttf : 예전 테마에서 사용되던 폰트인데 현재는 admin main page 표시에만 사용되어서 삭제했습니다.

3. 사이트 전체에 기본적으로 적용되는 폰트를 NotoSansKR 로 바꾸었습니다. 피드백 부탁드립니다!!
   ➡️ 폰트를 바꾸면서 정렬이 흐트러진 부분이 있습니다. 이 부분은 따로 작업해 보도록 하겠습니다. 🥲

4. mixin으로 바꿀 수 있는 부분을 일부 바꾸었습니다. (눈에 띄는 부분만 바꾼 거라 아직 바꾸지 않은 부분이 있습니다...ㅜㅜ)

5. 빠른 폰트 다운로드를 위해 woff / woff2도 추가했습니다.

6. 로컬 폰트를 사용하고 있는 부분이 있는 것 같은데 일단은 주석처리 해 두었습니다. 폰트 적용이 되어야 하는 부분이 있다면 알려주세요!

   • Fira Sans
   • Heebo
   • Fenix

폰트 적용이 잘못되었다거나, 적용되어야 하는 곳에 적용되지 않은 부분이 있다면 알려주세요... 😇

✅ 변경로직 (결정사항)

• 사이트 전체에 기본적으로 적용되는 폰트를 Pretendard-Medium 으로 적용했습니다.
• Pretendard-Medium 을 적용했을 때에는 정렬이 흐트러지지 않아서 정렬을 다시 맞추는 작업은 필요하지 않을 것 같습니다.
• 로컬폰트 Fira Sans, Heebo, Fenix 사용하던 부분은 그대로 주석으로 두겠습니다!
• Pretendard-Medium 폰트가 관리자 페이지에 일부 적용하던 Inter 폰트와 거의 비슷한 폰트라서 Inter 폰트를 제거하고 전체적으로 Pretendard-Medium를 적용시켜두었습니다.
• 모달 제목 폰트를 Lexend에서 Pretendard-Black으로 바꾸었습니다.
• 유저 상세 페이지의 레벨과 랭크의 폰트를 Lexend로 적용했습니다.
• 보관함 모달의 "주의사항" 부분은 모달 제목 폰트를 적용시켜 Pretendard-Black 으로 적용해두었습니다.
• AfterGame 모달의 글씨 크기는 그대로 유지하는 것으로 결정되었습니다.

[yoouyeon]

지금 전체 폰트가 NotoSansKR로 되어있긴 한데, 기본적으로 폰트가 큰 바람에 이곳저곳에서 문제가 좀 있는 것 같아요.. (admin 페이지 전체에 기본 폰트를 적용할 수 있는 방법을 모르겠네요........ 🥲)

그래서 다른 폰트도 찾아봤는데 어떤지 봐주시면 감사하겠습니다... (개발자 도구에서 편하게 주석 해제할 수 있더라구요!)

[PHJoon]

와 폰트 적용하고 수정해야할 부분 엄청 많았군요!! 저는 Pretendard Medium이 좋네요!
admin 부분은 components/admin/Layout 에

const theme = createTheme({
    typograpy: {
        fontFamily: " 'NotoSansKR', sans-serif"
    }
})

추가하시고

<ThemeProvider theme={theme}>
    ...
</ThemeProvider>

적용해주시면 될거같아요!
전체적으로 폰트 적용되니까 통일감 있고 보기 좋아요! 고생하셨습니다!! 👍

[hyobb109]

• 랭크 페이지 My rank에 title-font 적용이 빠진 것 같습니다!
  
  
• 상세 프로필 랭크 표시도 title-font 적용해도 좋을 것 같아요
  
• AfterGameModal에서 글자 크기 조금씩 키워도 좋을 것 같습니당
• 보관함 아이템 사용 모달 '주의사항'에 폰트 적용이 안되어있어요!

[hyobb109]

저도 noto sans 는 너무 큰 것 같아서 Pretendard Medium이 좋은 것 같아요! 보관함 모달 타이틀이 지금 영문폰트로 되어있는 것 같아서 이것도 'Pretendard-Medium' 으로 설정하면 좋을 것 같습니다! 정리하기 힘드셨을텐데 고생 너무 많으셨습니다!!👏👏

[yoouyeon]

상세 프로필 랭크 표시에 폰트 lexend로 적용해보자는 의견이 나왔는데, 랭크에만 적용하니까 위에 레벨 표시가 다른게 좀 어색해보이는 것 같기도 해서 레벨에도 적용해보았습니다... 어떻게 하는게 좋을까요... 😇

기존	바꿈

[hyobb109]

저는 상세 프로필 랭크랑 레벨 모두 Lexend 적용하는게 좋은 것 같습니다!

[yoouyeon]

피드백 받은 내용 모두 수정 완료했습니다! (추가로 결정되어 작업한 내용은 아래 ✅ 변경로직 (결정사항) 에 적어두었습니당)