Style: 로컬폰트, 공용 색상, 공용 폰트스타일 추가 #20
Conversation
auto-assign
bot
requested review from
Eugene-A-01,
kanglocal,
Nahyun-Kang and
ParkSohyunee
|
@seoyoung-min is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel. A member of the Team first needs to authorize it. |
src/styles/pretendardFont.css.ts
Outdated
There was a problem hiding this comment.
Pretendard라는 custom fontface를 만든 파일입니다.
| boxSizing: 'border-box', | ||
| fontFamily: 'Pretendard', | ||
| fontFamily: Pretendard, |
There was a problem hiding this comment.
만들어 둔 fontface를 globalStyle의 fontFamily로 적용하여, 전체 파일에 적용되도록 했습니다.
src/styles/font.css.ts
Outdated
There was a problem hiding this comment.
피그마의 라이브러리, component를 참고하여, 저희가 사용하는 폰트 스타일을 모아두었습니다.
혹시 지금 적용한 폰트의 이름이 무엇인지 궁금하시다면 피그마를 참고하시거나, 이 파일의 fontSize로 비교하시면 선택할 수 있습니다!
src/styles/theme.css.ts
Outdated
There was a problem hiding this comment.
회색 색상은 숫자로 구분했는데, 홀수만 적은 이유는 혹시 중간 또는 앞 뒤로 새로운 색상이 추가 될 경우를 대비함 입니다!
| export const description = style({ | ||
| color: 'gray', | ||
| color: vars.color.gray9, | ||
| }); | ||
|
|
||
| export const url = style({ | ||
| color: 'lightgray', | ||
| color: vars.color.gray7, | ||
| }); |
There was a problem hiding this comment.
@kanglocal 저희 공용색상에 없는 색상이라, 라이브러리 내 색상 중 가장 유사한 것으로 대체했습니다! 아직 적용된 모습은 확인하지 못했습니다ㅠ 확인해주시면 감사하겠습니다!!
| @@ -1,5 +1,5 @@ | |||
| import { useQuery } from '@tanstack/react-query'; | |||
| import * as styles from '@/components/LinkPreview/style.css'; | |||
| import * as styles from '@/components/LinkPreview/LinkPreview.css'; | |||
There was a problem hiding this comment.
@kanglocal 저희 스타일 파일은 컴포넌트 명과 동일하게 가져가기로 한 것 같아, 파일명을 변경했습니다~! 참고 부탁드려요🙇♀️
| @@ -1,5 +1,5 @@ | |||
| import { useState, useEffect } from 'react'; | |||
| import * as styles from '@/components/VideoEmbed/style.css'; | |||
| import * as styles from '@/components/VideoEmbed/VideoEmbed.css'; | |||
There was a problem hiding this comment.
@kanglocal VideoEmbed스타일 파일명도 변경했습니다!
There was a problem hiding this comment.
토스트 메시지 상수 파일입니다. 토스트 메시지 사용하신 분들은 각자의 것을 옮겨주시면 좋을 것 같습니다 :)
| export const button = styleVariants({ | ||
| primary: [ | ||
| baseButton, | ||
| { | ||
| backgroundColor: vars.color.blue, | ||
| color: vars.color.white, | ||
| }, | ||
| ], | ||
| secondary: [ | ||
| baseButton, |
개요
작업 사항
참고 사항 (optional)
공용 색상 사용법
import { vars } from '@/styles/theme.css'backgroundColor: vars.color.색상명,공용 폰트 사용법
폰트 스타일은 fontSize, fontWeight, lineHeight, letterSpacing 모두 함께 이용하면 좋을 것 같아, 각 스타일을 만들어 styles/font.css 파일에 넣어두었습니다.
스타일 파일에서 원하는 폰트 스타일을 가져온다.
import { body1 } form '@/styles/font.css'스타일링 할때 배열로 묶어 사용한다.
const button = styles([body1, {cursor: 'pointer}])로컬 폰트 적용이 계속 안돼서 시간이 오래걸렸습니다. 빠르게 전달 드리고 싶었는데...🥹
리뷰어에게