refactor: 공용 스타일(폰트,색상), 로컬 폰트 적용 및 기타 오류 해결 #19
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. |
seoyoung-min
changed the title
src/styles/pretendardFont.css.ts
Outdated
There was a problem hiding this comment.
이렇게 전역적으로 사용할 수 있는 Pretendard라는 custom fontface를 만든 파일입니다.
| globalStyle('body *', { | ||
| 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.
회색 색상은 숫자로 구분했는데, 홀수만 적은 이유는 혹시 중간 또는 앞 뒤로 새로운 색상이 추가 될 경우를 대비함 입니다!
| 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 저희 스타일 파일은 컴포넌트 명과 동일하게 가져가기로 한 것 같아, 파일명을 변경했습니다~! 참고 부탁드려요🙇♀️
개요
작업 사항
참고 사항 (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}])로컬 폰트 적용이 계속 안돼서 시간이 오래걸렸습니다. 빠르게 전달 드리고 싶었는데...🥹
리뷰어에게
공용폰트는 저것이 최선인지 확신은 없습니다.🥲 중복 코드를 최대한 작성 안하도록 생각한 방안입니다.
각자 담당한 것은 직접 수정하는 게 좋을 것 같아, 제가 담당했던 item 부분 + 공용 컴포넌트에만 공용폰트, 색상을 적용했습니다.
@kanglocal 현지님 라이브러리 색상과 다른 것이 있어, 제가 임의로 가장 비슷한 색상들로 골랐습니다! 참고 부탁드립니다 :)
앱 구조가 바뀌어 충돌이 날 것입니다. pull 받으시기 전에 꼭 앱 구조를 먼저 바꾸시고 pull 받으시는 걸 추천 드려요 :) (아래 참고)
url 경로에 맞게