Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update font and tailwindcss theme configuration #22

Merged
merged 8 commits into from
Jun 28, 2024

Conversation

hee-suh
Copy link
Member

@hee-suh hee-suh commented Jun 26, 2024

Issue Number

#21

Description

구현 내용 및 작업한 내용

  • font를 pretendard variable로 업데이트했습니다.
  • tailwindcss의 theme을 extends 했습니다.
    • colors를 추가했습니다.
    • border-radius 중 rounded-3xl을 업데이트했습니다.

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

  • font fallback으로 어떤 폰트를 사용해줄지 고민중입니다.
  • 아직 디자인 시스템이 확정되지 않은 것 같아서 libraries에서 확인 가능한 색상들만 추가해뒀습니다.
  • 디자인에서 사용된 border-radius를 화인해보니, 20px을 제외하고는 tailwind css에서 정의된 값들을 사용하고 있어서, 기존에 24px로 설정되어있던 rounded-3xl20px로 업데이트해주기만 했습니다.

Checklist

PR 등록 전 확인한 것

  • 올바른 타켓 브랜치를 설정하였는가
  • PR 제목은 포맷과 내용 둘 다 알맞게 작성되었는가 (e.g., feat: add login page)
  • Description에 PR을 구체적으로 설명했는가

Copy link

The latest updates on your projects. Preview: https://vitamin-c-7kr6mpa19-poiu694s-projects.vercel.app

Name Status Preview Updated
VitaminC_Web ✅ Ready Visit Preview 2024-06-26T16:52:01Z

Copy link
Member

@poiu694 poiu694 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

크~ fallback은 고민되긴 하는데 천천히 정해도 될 것 같네요! 디자인쪽이랑 얘기해보거나 일단 브라우저 기본 폰트쓰게 만드는 것도 좋을 것 같아여~

title: 'Create Next App',
description: 'Generated by create next app',
title: '꼬르륵',
description: '전설의 보물섬으로 가는 맛집 지도',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

센스 👍

tailwind.config.ts Show resolved Hide resolved
src/styles/pretendard-variable.ttf Outdated Show resolved Hide resolved
src/app/layout.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@Pridesd Pridesd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 오늘 논의사항에 파레트 확정여부 물어보고 색상 추가만 하면 될 것 같네요!

@@ -19,7 +17,9 @@ export default function RootLayout({
}>) {
return (
<html lang="ko">
<body className={inter.className}>{children}</body>
<body className={`${pretendard.className} ${pretendard.variable}`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 여기에 pretendard.className 은 body 전역에 pretendard를 적용할 수 있는 tailwind 방법인가요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next.js에서 제공하는 기능입니다~!

https://nextjs.org/docs/app/api-reference/components/font#classname

Copy link

The latest updates on your projects. Preview: https://vitamin-c-pjml7p5gf-poiu694s-projects.vercel.app

Name Status Preview Updated
VitaminC_Web ✅ Ready Visit Preview 2024-06-28T06:20:35Z

Copy link
Member

@poiu694 poiu694 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

@hee-suh hee-suh merged commit 5d6cc30 into main Jun 28, 2024
3 checks passed
@hee-suh hee-suh deleted the feature/theme-setting branch June 28, 2024 06:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants