[Feat/#9] font, color Theme 설정

[ljh0608]

이슈 번호

#9

작업한 내용

• theme관련 타입 및 Provier 초기 세팅
• color 및 font theme 세팅

작업 결과

비고

찾아보니 styled-theming이라는걸 사용해서 다크모드/라이트모드를 조금 더 쉽게 관리할 수 있더라고! 사용하지 않아도 구현 가능해서 이부분은 추후 필요하면 조금 더 알아보고 적용해도 좋을 듯해서 일단 링크 남겨둘게~
https://styled-components.com/docs/tooling#styled-theming

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ddd-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2025 6:56am

[Jxxunnn]

고생했어~ 댓글 몇 개 남겨놨는데 확인 부탁해 👍

[Jxxunnn]

P3. 이렇게 작성해도 기능에 문제 없을 것 같은데 어때?

Suggested change

	import "styled-components";
	import { ColorsTypes, FontsTypes } from "./theme";
	declare module "styled-components" {
	export interface DefaultTheme {
	colors: ColorsTypes;
	fonts: FontsTypes;
	}
	}
	import { ColorsTypes, FontsTypes } from "./theme";
	declare module "styled-components" {
	interface DefaultTheme {
	colors: ColorsTypes;
	fonts: FontsTypes;
	}
	}

[ljh0608]

https://styled-components.com/docs/api#typescript

이부분은 공식문서에 예시를 참고한건데 준근이 말대로 없어도 동작이 동작에는 문제가 없는데 공식문서에서
import "styled-components" 부분은 original module 선언을 import하고 그 아래에서 확장한다고 나와있어서 적용한거거든
내가 적용한 방식이 값을 먼저 지정하고 거기서 타입을 빼오는 방식이라 필요없는건가??

[Jxxunnn]

흐음 나도 이유를 잘 모르겠네.. 문서가 오래된 버전인 걸지도? 우리가 설치한 버전 기준으로 DefaultTheme의 JSDoc 주석에는 이렇게 작성되어 있어.

/**
 * Override DefaultTheme to get accurate typings for your project.
 *
 * ```
 * // create styled-components.d.ts in your project source
 * // if it isn't being picked up, check tsconfig compilerOptions.types
 * import type { CSSProp } from "styled-components";
 * import Theme from './theme';
 *
 * type ThemeType = typeof Theme;
 *
 * declare module "styled-components" {
 *  export interface DefaultTheme extends ThemeType {}
 * }
 *
 * declare module "react" {
 *  interface DOMAttributes<T> {
 *    css?: CSSProp;
 *  }
 * }
 * ```
 */

[Jxxunnn]

리뷰 남긴 부분은 다 해소된 것 같아서 Approve 눌러놓을게 고생 많았어! 👍