Feedback/6th week (#20)

* refactor: prop 이름 수정 (*theme -> variant) * refactor: prop type 수정 (*theme -> variant) * refactor: passport provider 대신 emotion 내부의 ThemeProvider을 사용하도록 수정 * refactor: eslint fix * refactor: 기존에 선언된 Theme 타입 제거 * chore: ci workflow step 분리
kakao-tech-campus-2nd-step3 · Oct 7, 2024 · 83e3942 · 83e3942
1 parent eace26d
commit 83e3942
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 105 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -8,7 +8,7 @@ on:
       - 'develop/**'
       - 'weekly/**'
 jobs:
-  test:
+  init:
     runs-on: ubuntu-latest
     steps:
       - name: checkout source code
@@ -21,5 +21,9 @@ jobs:
         run: corepack enable && yarn set version berry
       - name: install dependencies
         run: yarn
-      - name: run test
-        run: yarn ci
+      - name: run eslint
+        run: yarn lint
+      - name: run vitest
+        run: yarn test:ci
+      - name: build test
+        run: yarn build
diff --git a/src/components/avatar/useAvatarStyle.ts b/src/components/avatar/useAvatarStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 
 function useAvatarStyle() {
   const theme = useTheme();

diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {
 
-    buttonTheme: {
+    variant: {
       control: 'radio',
       options: ['default', 'dark', 'light-outlined'],
     },
@@ -25,22 +25,22 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
   args: {
-    buttonTheme: 'default',
+    variant: 'default',
     children: 'Default Button',
   },
 };
 
 export const WithIcon: Story = {
   args: {
-    buttonTheme: 'dark',
+    variant: 'dark',
     children: 'Dark Button',
     icon,
   },
 };
 
 export const CustomStyled: Story = {
   args: {
-    buttonTheme: 'default',
+    variant: 'default',
     children: 'Custom Styled Button',
     css: {
       backgroundColor: 'lightblue',

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -2,18 +2,18 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
 import { CSSObject } from '@emotion/react';
 import DynamicIcon from '@components/internal/dynamic-icon';
 import useButtonStyle from '@components/button/useButtonStyle';
-import { ButtonTheme } from '@/types';
+import { ButtonVariants } from '@/types';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   css?: CSSObject;
-  buttonTheme?: ButtonTheme;
+  variant?: ButtonVariants;
   icon?: ReactNode | string;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
-  children, buttonTheme = 'default', css, icon, ...rest
+  children, variant = 'default', css, icon, ...rest
 }: ButtonProps, ref) => {
-  const { buttonStyle, buttonIconStyle } = useButtonStyle({ buttonTheme });
+  const { buttonStyle, buttonIconStyle } = useButtonStyle({ variant });
 
   return (
     <button

diff --git a/src/components/button/useButtonStyle.ts b/src/components/button/useButtonStyle.ts
@@ -1,12 +1,11 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
-import { ButtonTheme } from '@/types';
+import { css, useTheme } from '@emotion/react';
+import { ButtonVariants } from '@/types';
 
 interface UseButtonStyleProps {
-  buttonTheme?: ButtonTheme;
+  variant?: ButtonVariants;
 }
 
-function useButtonStyle({ buttonTheme = 'default' }: UseButtonStyleProps) {
+function useButtonStyle({ variant = 'default' }: UseButtonStyleProps) {
   const globalTheme = useTheme();
 
   const buttonStyle = css`
@@ -16,7 +15,7 @@ function useButtonStyle({ buttonTheme = 'default' }: UseButtonStyleProps) {
     outline: none;
     padding: 10px 18px;
     border-radius: 100px;
-    color: ${buttonTheme === 'dark' ? globalTheme.colors.primary.main : globalTheme.colors.text.prominent};
+    color: ${variant === 'dark' ? globalTheme.colors.primary.main : globalTheme.colors.text.prominent};
     border: ${getBorderStyle()};
     background-color: ${getBackgroundColor()};
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
@@ -35,53 +34,53 @@ function useButtonStyle({ buttonTheme = 'default' }: UseButtonStyleProps) {
   `;
 
   function getBackgroundColor() {
-    if (buttonTheme === 'light-outlined') {
+    if (variant === 'light-outlined') {
       return 'transparent';
     }
 
-    if (buttonTheme === 'dark') {
+    if (variant === 'dark') {
       return globalTheme.colors.text.prominent;
     }
 
     return globalTheme.colors.background.main;
   }
 
   function getBorderStyle() {
-    if (buttonTheme === 'light-outlined') {
+    if (variant === 'light-outlined') {
       return `2px solid ${globalTheme.colors.absolute.black}`;
     }
 
     const baseStyle = '1px solid ';
 
-    return baseStyle + (buttonTheme === 'dark' ? 'transparent' : globalTheme.colors.text.subtle);
+    return baseStyle + (variant === 'dark' ? 'transparent' : globalTheme.colors.text.subtle);
   }
 
   function getHoverBackgroundColor() {
-    if (buttonTheme === 'light-outlined') {
+    if (variant === 'light-outlined') {
       return globalTheme.colors.text.prominent;
     }
 
-    if (buttonTheme === 'dark') {
+    if (variant === 'dark') {
       return globalTheme.colors.primary.main;
     }
 
     return globalTheme.colors.background.darken;
   }
 
   function getHoverColor() {
-    if (buttonTheme === 'light-outlined') {
+    if (variant === 'light-outlined') {
       return globalTheme.colors.background.main;
     }
 
     return globalTheme.colors.text.prominent;
   }
 
   function getHoverBorderColor() {
-    if (buttonTheme === 'light-outlined') {
+    if (variant === 'light-outlined') {
       return globalTheme.colors.absolute.black;
     }
 
-    return buttonTheme === 'dark' ? globalTheme.colors.primary.main : globalTheme.colors.border.prominent;
+    return variant === 'dark' ? globalTheme.colors.primary.main : globalTheme.colors.border.prominent;
   }
 
   return {

diff --git a/src/components/checkbox/useCheckboxStyle.ts b/src/components/checkbox/useCheckboxStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 
 function useCheckboxStyle() {
   const theme = useTheme();

diff --git a/src/components/input/useInputStyle.ts b/src/components/input/useInputStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import { ReactNode } from 'react';
 
 interface UseInputStyleProps {

diff --git a/src/components/label/useLabelStyle.ts b/src/components/label/useLabelStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 
 function useLabelStyle() {
   const theme = useTheme();

diff --git a/src/components/radio/useRadioStyle.ts b/src/components/radio/useRadioStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 
 function useRadioStyle() {
   const theme = useTheme();

diff --git a/src/components/select/useSelectStyle.ts b/src/components/select/useSelectStyle.ts
@@ -1,5 +1,4 @@
-import useTheme from '@hooks/useTheme';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 
 function useSelectStyle() {
   const theme = useTheme();

diff --git a/src/components/switch/useSwitchStyle.ts b/src/components/switch/useSwitchStyle.ts
@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-import useTheme from '@hooks/useTheme';
+import { css, useTheme } from '@emotion/react';
 
 function useSwitchStyle() {
   const theme = useTheme();

diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
@@ -4,27 +4,27 @@ import { CSSObject } from '@emotion/react';
 import CloseButton from '@assets/icons/x.svg?react';
 import useTagStyle from '@components/tag/useTagStyle';
 import useTheme from '@hooks/useTheme';
-import { TagTheme } from '@/types';
+import { TagVariants } from '@/types';
 
 interface TagProps {
   icon?: ReactNode | string;
   children?: ReactNode;
   css?: CSSObject;
-  tagTheme?: TagTheme;
+  variant?: TagVariants;
   enableClose?: boolean;
   onClose?: MouseEventHandler<HTMLImageElement>;
 }
 
 function Tag({
-  icon, css, children, tagTheme = 'default', enableClose, onClose,
+  icon, css, children, variant = 'default', enableClose, onClose,
 }: TagProps) {
   const {
     tagContainerStyle,
     tagIconStyle,
     tagStyle,
     closeIconContainerStyle,
   } = useTagStyle({
-    enableClose, tagTheme,
+    enableClose, variant,
   });
   const theme = useTheme();
 
@@ -42,7 +42,7 @@ function Tag({
         enableClose
         && (
           <div css={[closeIconContainerStyle, css]} onClick={onClose} role="presentation">
-            <CloseButton stroke={tagTheme === 'default' ? theme.colors.text.moderate : theme.colors.primary.main} />
+            <CloseButton stroke={variant === 'default' ? theme.colors.text.moderate : theme.colors.primary.main} />
           </div>
         )
       }

diff --git a/src/components/tag/tag.stories.tsx b/src/components/tag/tag.stories.tsx
@@ -51,7 +51,7 @@ export const EnableClosePrimary: Story = {
     children: 'label',
     icon,
     enableClose: true,
-    tagTheme: 'primary',
+    variant: 'primary',
     onClose: () => { console.log('close'); },
   },
 };
diff --git a/src/components/tag/useTagStyle.ts b/src/components/tag/useTagStyle.ts
@@ -1,13 +1,12 @@
-import { css } from '@emotion/react';
-import useTheme from '@hooks/useTheme';
-import { TagTheme } from '@/types';
+import { css, useTheme } from '@emotion/react';
+import { TagVariants } from '@/types';
 
 interface UseTagStyleProps {
   enableClose?: boolean;
-  tagTheme?: TagTheme;
+  variant?: TagVariants;
 }
 
-function useTagStyle({ enableClose, tagTheme }: UseTagStyleProps) {
+function useTagStyle({ enableClose, variant }: UseTagStyleProps) {
   const theme = useTheme();
   const tagStyle = (
     css`
@@ -59,15 +58,15 @@ function useTagStyle({ enableClose, tagTheme }: UseTagStyleProps) {
   }
 
   function getBorderStyle() {
-    return tagTheme === 'primary' ? 'transparent' : theme.colors.border.subtle;
+    return variant === 'primary' ? 'transparent' : theme.colors.border.subtle;
   }
 
   function getBackgroundColor() {
-    return tagTheme === 'primary' ? theme.colors.primary.passive : 'transparent';
+    return variant === 'primary' ? theme.colors.primary.passive : 'transparent';
   }
 
   function getTextColor() {
-    return tagTheme === 'primary' ? theme.colors.primary.main : theme.colors.text.prominent;
+    return variant === 'primary' ? theme.colors.primary.main : theme.colors.text.prominent;
   }
 
   return {

diff --git a/src/components/textarea/useTextAreaStyle.ts b/src/components/textarea/useTextAreaStyle.ts
@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-import useTheme from '@hooks/useTheme';
+import { css, useTheme } from '@emotion/react';
 
 function useTextAreaStyle() {
   const theme = useTheme();

diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
diff --git a/src/providers/PassportProvider.tsx b/src/providers/PassportProvider.tsx
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -1,6 +1,8 @@
-export type ButtonTheme = 'default' | 'dark' | 'light-outlined';
+import '@emotion/react';
 
-export type TagTheme = 'default' | 'primary';
+export type ButtonVariants = 'default' | 'dark' | 'light-outlined';
+
+export type TagVariants = 'default' | 'primary';
 
 export type Colors = {
   primary: {
@@ -47,10 +49,12 @@ export type Corners = {
   round: string;
 };
 
-export type Theme = {
-  colors: Colors;
-  corners: Corners;
-};
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: Colors;
+    corners: Corners;
+  }
+}
 
 export type Sliced<T> = {
   [K in keyof T]?: Partial<T[K]>