디자인 시스템 구축하기

[joyswim]

📝작업 내용

• [x] favicon 적용
• [x] tailwind.config.ts 커스텀 정의

🧪테스트 코드

// layout.tsx
<div className="bg-gradient-purple text-base text-gray-700 h-lg w-md">
  Test1
</div>
<div className="bg-primary text-error text-xl h-lg w-xl shadow rounded-lg">
  Test2
</div>

✨PR Point

tailwindCSS의 기본에 커스텀 설정을 추가하는 방법으로 extend 내부에 정의했습니다. 기존 컬러도 사용 가능하지만 디자인 일관성을 위해 커스텀를 사용을 권장합니다.

• 보다 쉬운 사용을 위해 3번째 컬러(tertiary)를 yellow로 수정했습니다.
• 기본 설정으로 충분한 경우 커스텀을 제외했습니다.(예: fontWeight 등)
• 빠른 개발 생산성을 위해 일부 DEFAULT값이 설정되어 있습니다. DEFAULT값이 설정된 경우, 별도의 접미사('-sm')없이 사용 가능합니다. (예: shadow, rounded, opacity 등)
• ✋ 개발 중 추가 설정값이 필요하다면 말씀해 주세요.

[SoJuSo]

@joyswim 타겟 브랜치가 main으로 되어있어서 dev로 변경했습니다..! 아마 default 브랜치가 main이라 그랬던 것 같은데 default 브랜치를 dev로 변경하는게 어떠실까요ㅎㅎ

@kim-hyunjoo

[joyswim]

@SoJuSo 개발 환경이라서 main에 넣기는 했는데 dev도 좋습니다! default dev로 변경 필요할 것 같아요~

[SoJuSo]

변경완료했습니다~