Chore/#37: 디자인 시스템 등록

[DandelionQZ]

⚙️ Related ISSUE Number

#37

📄 Work Description

색상 및 텍스트 스타일 디자인 시스템 설정을 추가했습니다.

색상 시스템 사용 방법

피그마에서 요소 클릭시 우측에 스타일 색상 이름 참고 (배경색이든, 텍스트 색이든 전부 가능)

코드 작성

import { colors } from "@/styles/colors"; import 후 아래 변경 사항처럼 사용

텍스트 스타일 시스템 사용 방법

피그마에서 텍스트 클릭시 우측에 적용된 스타일 확인

코드 작성

import { textStyles } from "@/styles/typography/textStyles"; import 후 아래 변경 사항처럼 사용

예시
<View style={[styles.socialText, textStyles.title18_SB135]}>

• styles.socialText : 기존 StyleSheet의 styles에서 가져온 스타일
• textStyles.title18_SB135 : font-family, font-size, font-weight, line-height를 한 번에 설정하는 스타일 (텍스트 컬러는 별도 설정!!!!!)

폰트 선택 설명

[타이틀/18/SB_135]가 title18_SB135가 된 이유는

• 타이틀 -> title / 본문 -> body
• 18 -> font-size가 18px
• SB -> 위 사진 파란 동그라미에 SB라고 되어있음 (정확히는 font-weight 600이 semibold임)
• 135 -> line-height가 135%임

! 추가로 font-style은 기본 설정이 normal이라서 italic 같은 값으로 특별히 지정된 게 아니면 스타일 명시하지 않음

📷 Screenshot

💬 To Reviewers

디자인 시스템 적용은 2025/12/13 23:59부터 2025/12/14 03:00 사이에 진행하려고 하는데 괜찮을까요? 이 작업을 하기 위해선 나머지 pr들이 모두 머지된 상태여야해서요! 혹은 디자인 시스템 적용 시간을 조금 더 늦출까요?

🔗 Reference

Expo Font

[Copilot]

Pull request overview

This PR establishes a design system for the TinyBite project by adding color and typography utilities. The implementation provides a structured approach to managing design tokens and font loading, making it easier to maintain consistent styling across the application.

• Added color palette with main, sub, background, and semantic colors (gray, green, red)
• Implemented typography system with predefined text styles and font scales for titles and body text
• Integrated Pretendard font family with expo-font loading system

Reviewed changes

Copilot reviewed 6 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
TinyBite/styles/colors.ts	Defines the color palette with primary, semantic, and neutral colors
TinyBite/styles/typography/scale.ts	Defines font size and line height scales for title and body text styles
TinyBite/styles/typography/textStyles.ts	Combines font scales with Pretendard font families to create reusable text styles
TinyBite/app/index.tsx	Adds font loading with useFonts hook and updates splash screen logic to wait for fonts
TinyBite/app.json	Registers expo-font plugin for font loading support
TinyBite/package.json	Updates expo-font dependency from 14.0.9 to 14.0.10
TinyBite/package-lock.json	Updates package lock with new expo-font version

Files not reviewed (1)

• TinyBite/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[donut74]

제가 11시 59분 전까지 제 pr부분 수정해보겠습니다!
너무 고생하셨습니다... 감사합니다!

[DandelionQZ]

제가 11시 59분 전까지 제 pr부분 수정해보겠습니다!

너무 고생하셨습니다... 감사합니다!

앗 지금 보니까 제가 새벽에 작업해서 제대로 못 적은 부분이 있더라고요.. [텍스트 스타일 시스템 적용] 부분 설명 수정해뒀습니다! 혼란드려서 죄송해요 ㅜ

사진에 표시해둔 부분 수정했어요!