Merge pull request #8 from yourssu/feat/component-definition

함수 작성 방식 통일을 위한 eslint rule 추가

.eslintrc.cjs

@@ -10,11 +10,12 @@ module.exports = {
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', 'prettier'],
+  plugins: ['react-refresh', 'react', 'prettier'],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'react/react-in-jsx-scope': 'off',
+    'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
     'import/no-unresolved': 'off',
     'import/order': [
       'error',

package.json

@@ -45,6 +45,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-storybook": "^0.6.13",

src/components/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import { IconContext } from '@/style';
 import { StyledBadge } from './Badge.style';
 import { BadgeProps } from './Badge.type';
 
-function Badge({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProps) {
+const Badge = ({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProps) => {
   return (
     <StyledBadge
       style={{
@@ -24,6 +24,6 @@ function Badge({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProp
       {children}
     </StyledBadge>
   );
-}
+};
 
 export { Badge };

src/components/YDSWrapper/YDSWrapper.tsx

@@ -9,11 +9,11 @@ export type YDSWrapperProps = {
  * YDS에 사용되는 Context, Style을 위한 컴포넌트입니다.
  * YDS를 사용하는 프로젝트의 최상위 컴포넌트로 사용해야 합니다.
  */
-export function YDSWrapper({ children }: YDSWrapperProps) {
+export const YDSWrapper = ({ children }: YDSWrapperProps) => {
   return (
     <>
       <GlobalStyles />
       <YDSProvider>{children}</YDSProvider>
     </>
   );
-}
+};

src/contexts/YDSProvider/YDSProvider.tsx

@@ -14,10 +14,10 @@ export type YDSProviderProps = {
  * @param param0
  * @returns
  */
-export function YDSProvider({ children, fixedColorTheme }: YDSProviderProps) {
+export const YDSProvider = ({ children, fixedColorTheme }: YDSProviderProps) => {
   return (
     <ColorThemeContextProvider fixedColorTheme={fixedColorTheme}>
       <YDSThemeProvider>{children}</YDSThemeProvider>
     </ColorThemeContextProvider>
   );
-}
+};

src/hooks/useColorTheme/ColorTheme.context.tsx

@@ -38,10 +38,10 @@ export interface ColorThemeContextProviderProps {
   fixedColorTheme?: CurrentTheme;
 }
 
-export function ColorThemeContextProvider({
+export const ColorThemeContextProvider = ({
   children,
   fixedColorTheme: fixedTheme,
-}: ColorThemeContextProviderProps) {
+}: ColorThemeContextProviderProps) => {
   const [SelectedTheme, setSelectedTheme] = useState<SelectedColorTheme>('system');
 
   useEffect(() => {
@@ -86,4 +86,4 @@ export function ColorThemeContextProvider({
       {children}
     </ColorThemeContext.Provider>
   );
-}
+};

src/style/theme/YDSThemeProvider.tsx

@@ -11,7 +11,7 @@ import { YDSTheme } from './theme.type';
 export interface YDSThemeProviderProps {
   children?: React.ReactNode;
 }
-export function YDSThemeProvider({ children }: YDSThemeProviderProps) {
+export const YDSThemeProvider = ({ children }: YDSThemeProviderProps) => {
   const { currentColorTheme } = useColorTheme();
 
   const theme: YDSTheme = useMemo(() => {
@@ -33,4 +33,4 @@ export function YDSThemeProvider({ children }: YDSThemeProviderProps) {
   }, [currentColorTheme]);
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-}
+};