Feat/theme-color: Theme color 변경 기능 구현 (#119)

* feat: CdsProvider에 themeColor props 추가 * refactor: theme 객체 사용하는 부분 useTheme 훅으로 대체 * fix: themeColor props 타입 수정 * docs: README 반영 및 ColorSet 타이핑 개선 * fix: themeColor optional props로 수정 * docs: README 설명 보완 * chore: package.json 버전 업데이트 * fix: COLOR as const 키워드 복원 컴포넌트 개발 시점에 색상코드 확인 가능 * docs: README 수정 * fix: theme 사용하는 스토리 수정 * docs: 스토리북 링크 수정
c-h-w-h · Apr 25, 2023 · bda4e96 · bda4e96
1 parent 764cdfc
commit bda4e96
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,14 @@
 
 일관적인 UI 디자인과 접근성을 고려한 사용자 인터랙션을 제공합니다.
 
+[Storybook 문서](https://640054c53834f08f15bbad68-sscshdmgyf.chromatic.com/) 에서 제공하는 컴포넌트의 종류와 용례를 확인할 수 있습니다.
+
 <!-- ## Table of contents
 - [Usage](#usage)
 - [Documentation](#documentation)
 - [Contributors](#contributors) -->
 
-## Usage
+## Installation
 
 ```zsh
 npm install @chwh/cds
@@ -19,11 +21,11 @@ npm install @chwh/cds
 yarn add @chwh/cds
 ```
 
-<br />
+## Usage
 
 ⚠️ 사용을 위해 상위 컴포넌트를 `CdsProvider`로 감싸야 합니다.
 
-```jsx
+```tsx
 const App = () => {
   return (
     <CdsProvider>
@@ -33,9 +35,30 @@ const App = () => {
 };
 ```
 
-## Documentation
+💅 아래 인터페이스 중 일부를 재정의한 객체를 `CdsProvider`의 `themeColor` props로 전달해 테마 컬러를 변경할 수 있습니다.
+
+```tsx
+type ColorSet = {
+  primary: Property.Color;
+  primaryLight: Property.Color;
+  primaryDark: Property.Color;
 
-[Storybook 문서](https://640054c53834f08f15bbad68-gkurucdpms.chromatic.com/) 에서 제공하는 컴포넌트의 종류와 용례를 확인해보세요.
+  alert: Property.Color;
+  info: Property.Color;
+  success: Property.Color;
+  warning: Property.Color;
+  error: Property.Color;
+
+  black: Property.Color;
+  white: Property.Color;
+  offWhite: Property.Color;
+  background: Property.Color;
+  gray100: Property.Color;
+  gray200: Property.Color;
+  gray300: Property.Color;
+  gray400: Property.Color;
+};
+```
 
 ## Contributors
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chwh/cds",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "cold design system for React apps",
   "keywords": [
     "React",

diff --git a/src/@types/emotion.d.ts b/src/@types/emotion.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
 import '@emotion/react';
-import type { Theme as CdsTheme } from '@components-common/CdsProvider/theme';
+import type { Theme as CdsTheme } from '@components-common/CdsProvider';
 
 declare module '@emotion/react' {
   export interface Theme extends CdsTheme {}

diff --git a/src/components/@common/CdsProvider/index.tsx b/src/components/@common/CdsProvider/index.tsx
@@ -1,4 +1,5 @@
 import Global from '@components-common/Global';
+import { COLOR, ColorSet } from '@constants/color';
 import {
   DRAWER_PORTAL_ROOT_ID,
   TOAST_PORTAL_ROOT_ID,
@@ -7,17 +8,25 @@ import {
 import { ThemeProvider } from '@emotion/react';
 import { ReactNode } from 'react';
 
-import { theme } from './theme';
-
 interface CdsProviderProps {
+  themeColor?: Partial<ColorSet>;
   children: ReactNode;
 }
 
-const CdsProvider = ({ children }: CdsProviderProps) => {
+export interface Theme {
+  color: ColorSet;
+}
+
+const CdsProvider = ({ themeColor, children }: CdsProviderProps) => {
+  const color = {
+    ...COLOR,
+    ...themeColor,
+  };
+
   return (
     <>
       <Global />
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={{ color }}>
         {children}
         <div id={DRAWER_PORTAL_ROOT_ID}></div>
         <div id={TOAST_PORTAL_ROOT_ID}></div>

diff --git a/src/components/@common/CdsProvider/theme.ts b/src/components/@common/CdsProvider/theme.ts
diff --git a/src/components/RadioButton/RadioButton.stories.tsx b/src/components/RadioButton/RadioButton.stories.tsx
@@ -1,5 +1,5 @@
-import { theme } from '@components/@common/CdsProvider/theme';
 import Center from '@components-layout/Center';
+import { COLOR } from '@constants/color';
 import styled from '@emotion/styled';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
@@ -31,7 +31,7 @@ export default {
   args: {
     size: '16px',
     disabled: false,
-    color: theme.color.primary,
+    color: COLOR.primary,
     clickableSize: '30px',
     direction: 'right',
   },
@@ -54,7 +54,7 @@ export default {
       description: '기본 버튼의 색상을 지정합니다.',
       table: {
         type: { summary: "CSSProperties['color']" },
-        defaultValue: { summary: 'theme.primary' },
+        defaultValue: { summary: 'theme.color.primary' },
       },
       control: {
         type: 'color',

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -1,7 +1,6 @@
-import { theme } from '@components/@common/CdsProvider/theme';
 import Flexbox from '@components/@layout/Flexbox';
 import Typography from '@components/Typography';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import {
   createContext,
   ReactNode,
@@ -91,7 +90,7 @@ interface TrackProps {
 const Track = ({ color, children }: TrackProps) => {
   const { label, trackRef, getStyles, onMoveSlider } =
     useSafeContext(SliderContext);
-  const { color: themeColor } = theme;
+  const { color: themeColor } = useTheme();
   const { gray100 } = themeColor;
   const { trackStyle } = getStyles();
 
@@ -119,7 +118,7 @@ interface FilledProps {
 
 const Filled = ({ color }: FilledProps) => {
   const { label, filledRef, getStyles } = useSafeContext(SliderContext);
-  const { color: themeColor } = theme;
+  const { color: themeColor } = useTheme();
   const { primary } = themeColor;
   const { filledStyle } = getStyles();
 
@@ -156,7 +155,7 @@ const Thumb = ({ color, children }: ThumbProps) => {
     onPressArrow,
   } = useSafeContext(SliderContext);
   const [isDraggable, setIsDraggable] = useState<boolean>(false);
-  const { color: themeColor } = theme;
+  const { color: themeColor } = useTheme();
   const { primary, white } = themeColor;
   const { thumbStyle } = getStyles();
 

diff --git a/src/components/Toast/ToastCore.tsx b/src/components/Toast/ToastCore.tsx
@@ -1,4 +1,3 @@
-import { theme } from '@components/@common/CdsProvider/theme';
 import Flexbox from '@components/@layout/Flexbox';
 import Typography from '@components/Typography';
 import {
@@ -10,7 +9,7 @@ import {
   MAIN_ICON_SIZE,
   CLOSE_ICON_SIZE,
 } from '@constants/toast';
-import { css, keyframes } from '@emotion/react';
+import { css, keyframes, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { DefaultProps } from '@utils/types/DefaultProps';
 import { useEffect } from 'react';
@@ -42,7 +41,7 @@ const ToastCore = ({
   open,
   onClose,
 }: ToastProps) => {
-  const { color: themeColor } = theme;
+  const { color: themeColor } = useTheme();
   const { white } = themeColor;
 
   useEffect(() => {

diff --git a/src/constants/color.ts b/src/constants/color.ts
@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export const COLOR = {
   primary: '#1493FF',
   primaryLight: '#66B9FF',
@@ -20,4 +22,8 @@ export const COLOR = {
   gray400: '#555F6D',
 } as const;
 
-export type Color = typeof COLOR;
+type Color = Exclude<CSSProperties['color'], undefined>;
+
+export type ColorSet = {
+  [P in keyof typeof COLOR]: Color;
+};
diff --git a/src/styles/dimmed.ts b/src/styles/dimmed.ts
@@ -1,15 +1,10 @@
-import { Color } from '@constants/color';
+import { ColorSet } from '@constants/color';
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
 
-/**
- * @param {CSSProperties['position']} position
- * @param {Color} {black}
- * @returns {SerializedStyles}
- */
 export const dimmerStyle = (
   position: CSSProperties['position'],
-  { black }: Color,
+  { black }: ColorSet,
 ) => css`
   position: ${position};
   top: 0;