feat: theme, useTheme export문 추가 (#30)

* feat: theme export문 추가

* 0.1.1

* chore: tsconfig 설정 수정

* 0.1.2

* chore: tsconfig 설정 수정

* 0.1.3

* chore: styled.d.ts 파일 src로 이동

* 0.1.4

* feat: useTheme 훅 추가

* feat: useTheme export  추가

* 0.1.5

* feat: theme 타입 설정

* 0.1.6

---------

Co-authored-by: Leejin-Yang <ejin1996@gmail.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fun-eat/design-system",
   "description": "펀잇 디자인시스템 라이브러리",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

src/hooks/useTheme.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+
+import type { Theme } from '../styles/theme';
+
+const useTheme = () => {
+  const theme = useContext(ThemeContext);
+
+  if (!theme) {
+    throw new Error('theme을 사용하려면 App을 FunEatProvider로 감싸주세요.');
+  }
+
+  return theme as Theme;
+};
+
+export default useTheme;

src/index.ts

@@ -1,4 +1,6 @@
 export { default as FunEatProvider } from './FunEatProvider';
+export { default as theme } from './styles/theme';
+export { default as useTheme } from './hooks/useTheme';
 
 export { default as Badge } from './Badge';
 export { default as BottomSheet } from './BottomSheet';

src/styles/styled.d.ts → src/styled.d.ts

@@ -11,7 +11,7 @@ import type {
   FontWeights,
   LineHeights,
   TextColors,
-} from './theme';
+} from './styles/theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme {

src/styles/theme.ts

@@ -1,5 +1,3 @@
-import type { DefaultTheme } from 'styled-components';
-
 export type Colors = typeof colors;
 export type TextColors = typeof textColors;
 export type BorderColors = typeof borderColors;
@@ -84,7 +82,7 @@ const borderRadius = {
   xl: '14px',
 } as const;
 
-const theme: DefaultTheme = {
+const theme = {
   colors,
   textColors,
   borderColors,
@@ -99,5 +97,6 @@ const theme: DefaultTheme = {
 };
 
 export type ColorKeys = keyof typeof colors;
+export type Theme = typeof theme;
 
 export default theme;

tsconfig.json

@@ -11,8 +11,9 @@
     "skipLibCheck": true,
     "jsx": "react-jsx",
     "declaration": true,
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "rootDir": "src"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["**/*.tsx", "**/*.ts", "styled.d.ts"],
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx"]
 }