@pfct/purple 1.4.0-rc.0 → 1.4.0-rc.3

package/dist/components/Button/DoubleButton/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { SingleButtonProps } from '../SingleButton';
 import { ColorType, PurposeType } from '../../../utils';
 type DoubleButtonProps = {
     colorType: ColorType;
     purpose: PurposeType;
-    left: Omit<SingleButtonProps, 'purpose' | 'colorType'>;
-    right: Omit<SingleButtonProps, 'purpose' | 'colorType'>;
+    left: PropsWithChildren<Omit<SingleButtonProps, 'purpose' | 'colorType'>>;
+    right: PropsWithChildren<Omit<SingleButtonProps, 'purpose' | 'colorType'>>;
 };
 declare const DoubleButton: React.FC<DoubleButtonProps>;
 export type { DoubleButtonProps };

package/dist/components/Control/Switch/index.d.ts

@@ -4,6 +4,7 @@ type SwitchProps = {
     value: boolean;
     colorType: ColorType;
     disabled?: boolean;
+    size?: 's' | 'm';
     onChange: (active: boolean) => void;
 };
 declare const Switch: React.FC<SwitchProps>;

package/dist/components/Control/Switch/index.js

@@ -27,7 +27,7 @@ exports.Switch = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../../../utils");
 const Styled = __importStar(require("./index.styled"));
-const Switch = ({ colorType, value: checked, disabled = false, onChange }) => {
+const Switch = ({ colorType, value: checked, disabled = false, size = 'm', onChange }) => {
     const handleActive = (0, react_1.useCallback)(() => {
         if (!disabled) {
             onChange(!checked);
@@ -39,7 +39,7 @@ const Switch = ({ colorType, value: checked, disabled = false, onChange }) => {
         const on_off = checked ? 'on' : 'off';
         return colorStyle[state][on_off].containerColor;
     }, [colorType, disabled, checked]);
-    return (react_1.default.createElement(Styled.Wrapper, { backgroundColor: fillColor, disabled: disabled, onClick: handleActive },
-        react_1.default.createElement(Styled.Control, { active: checked })));
+    return (react_1.default.createElement(Styled.Wrapper, { backgroundColor: fillColor, disabled: disabled, onClick: handleActive, size: size },
+        react_1.default.createElement(Styled.Control, { active: checked, size: size })));
 };
 exports.Switch = Switch;

package/dist/components/Control/Switch/index.stories.d.ts

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SwitchProps } from '.';
 type Story = StoryObj<SwitchProps>;
 /**
- * updated 230523
+ * updated 241108
  *
- * <a href="https://www.notion.so/Control-462646debf424154a108e1931f16c034?pvs=4" target="_blank">노션페이지</a>
+ * <a href="https://www.notion.so/Control-396458ba4b454782941b14d673353299" target="_blank">노션페이지</a>
  * <br/>
  * 한 가지 옵션을 켜고 끌 수 있는 컨트롤입니다.
  *

package/dist/components/Control/Switch/index.stories.js

@@ -27,9 +27,9 @@ exports.Story1 = void 0;
 const react_1 = __importStar(require("react"));
 const _1 = require(".");
 /**
- * updated 230523
+ * updated 241108
  *
- * <a href="https://www.notion.so/Control-462646debf424154a108e1931f16c034?pvs=4" target="_blank">노션페이지</a>
+ * <a href="https://www.notion.so/Control-396458ba4b454782941b14d673353299" target="_blank">노션페이지</a>
  * <br/>
  * 한 가지 옵션을 켜고 끌 수 있는 컨트롤입니다.
  *
@@ -49,6 +49,7 @@ exports.Story1 = {
     render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
     args: {
         colorType: 'blue',
+        size: 'm',
     },
     argTypes: {
         onChange: { action: 'onChange' },

package/dist/components/Control/Switch/index.styled.d.ts

@@ -5,10 +5,12 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 } & {
     backgroundColor: string;
     disabled: boolean;
+    size: 's' | 'm';
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Control: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     active: boolean;
+    size: 's' | 'm';
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Control/Switch/index.styled.js

@@ -4,24 +4,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Control = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Colors_1 = require("../../../core/Colors");
+const getSizeStyle = ({ size, active = false }) => {
+    const WrapperMediumCss = (0, react_1.css) `
+		width: 50px;
+		height: 30px;
+		padding: 3px;
+	`;
+    const WrapperSmallCss = (0, react_1.css) `
+		width: 36px;
+		height: 22px;
+		padding: 2px;
+	`;
+    const ControlMediumCss = (0, react_1.css) `
+		width: 24px;
+		height: 24px;
+		left: ${active ? '20px' : 0};
+	`;
+    const ControlSmallCss = (0, react_1.css) `
+		width: 18px;
+		height: 18px;
+		left: ${active ? '14px' : 0};
+	`;
+    if (size === 'm') {
+        return { Wrapper: WrapperMediumCss, Control: ControlMediumCss };
+    }
+    return { Wrapper: WrapperSmallCss, Control: ControlSmallCss };
+};
 exports.Wrapper = styled_1.default.div `
-	width: 50px;
-	height: 30px;
 	border-radius: 25px;
 	position: relative;
 	box-sizing: border-box;
-	padding: 3px;
 	background-color: ${({ backgroundColor }) => backgroundColor};
 	cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+	${({ size }) => {
+    return getSizeStyle({ size }).Wrapper;
+}}
 `;
 exports.Control = styled_1.default.div `
-	width: 24px;
-	height: 24px;
 	position: relative;
 	background-color: ${Colors_1.basicColors.white};
 	border-radius: 50%;
 	transition: all 0.4s ease-out;
-	left: ${({ active }) => (active ? '20px' : 0)};
+
+	${({ size, active }) => {
+    return getSizeStyle({ size, active }).Control;
+}};
 `;

package/dist/components/Modal/index.d.ts

@@ -8,8 +8,8 @@ type ModalProps = Omit<BaseModalProps, 'children'> & {
     children?: ReactNode;
 };
 declare const Modal: React.FC<ModalProps> & {
-    SingleButton: React.FC<import("../Button/BaseButton").BaseButtonProps>;
-    DoubleButton: React.FC<DoubleButtonProps>;
+    SingleButton: React.FC<React.PropsWithChildren<import("../Button/BaseButton").BaseButtonProps>>;
+    DoubleButton: React.FC<React.PropsWithChildren<DoubleButtonProps>>;
     Title: React.FC<{
         title: ReactNode;
         subTitle?: ReactNode;

package/dist/library/BasicLayout/index.d.ts

@@ -8,7 +8,9 @@ export type BasicLayoutProps = PropsWithChildren<{
     marginBottomNoFooterColor?: string;
 }>;
 declare const BasicLayout: React.FC<BasicLayoutProps> & {
-    VerticalHorizontalCenterLayout: React.FC<{}>;
+    VerticalHorizontalCenterLayout: React.FC<{
+        readonly children: React.ReactNode;
+    }>;
     Header: React.FC<import("../../components/Title").TitleProps>;
     Body: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;

package/dist/library/Flex/index.stories.d.ts

@@ -1,7 +1,8 @@
+import { PropsWithChildren } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FlexContainerProps } from './index.styled';
 type Story = StoryObj<FlexContainerProps>;
-declare const meta: Meta<FlexContainerProps>;
+declare const meta: Meta<PropsWithChildren<FlexContainerProps>>;
 export default meta;
 export declare const Story1: Story;
 export declare const Story2: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfct/purple",
-  "version": "1.4.0-rc.0",
+  "version": "1.4.0-rc.3",
   "description": "design system for PFCT web service",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,9 +13,7 @@
     "peoplefund-tech",
     "design-system"
   ],
-  "contributors": [
-    "SEONMI KIM <hello.ddubbu@gmail.com>"
-  ],
+  "contributors": [],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/peoplefund-tech/PurpleUI-WEB/issues"
@@ -50,15 +48,15 @@
     ]
   },
   "dependencies": {
-    "@emotion/core": "10.1.1",
+    "@emotion/core": "11.0.0",
     "@emotion/css": "^11.9.0",
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
-    "@emotion/styled-base": "^10.3.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@emotion/styled-base": "^11.0.0",
     "@tippyjs/react": "^4.2.6",
     "lottie-web": "^5.10.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.11.1",
     "rifm": "^0.12.1"
@@ -76,17 +74,17 @@
     "@storybook/react": "^7.0.6",
     "@storybook/react-webpack5": "^7.0.6",
     "@storybook/testing-library": "^0.2.0",
-    "@types/jest": "^27.1.5",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "aws-sdk": "^2.1366.0",
     "babel-loader": "^8.2.5",
     "core-js": "^3.23.4",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.1",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.9",
     "mini-css-extract-plugin": "^2.7.6",
     "standard-version": "^9.5.0",
     "storybook": "^7.0.6",
@@ -96,10 +94,10 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "terser-webpack-plugin": "^5.3.3",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tsc-files": "^1.1.3",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^4.10.0",
@@ -107,11 +105,11 @@
     "webpack-merge": "^5.8.0"
   },
   "optionalDependencies": {
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/eslint-plugin": "^11.7.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.30.0",
@@ -125,7 +123,7 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-testing-library": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1"
+    "jest": "^29.5.0"
   },
   "eslintConfig": {
     "extends": [

package/.history/.eslintrc.config_20240620114140.js

@@ -1,39 +0,0 @@
-{
-	"extends": [
-	  "plugin:@typescript-eslint/recommended",
-	  "plugin:react/recommended",
-	  "plugin:prettier/recommended",
-	  "prettier"
-	],
-	"plugins": ["react-hooks"],
-	"rules": {
-	  /**
-	  * react/display-name
-	  * React.memo, React.forwardRef도 막는 경우가 존재하여 해당 Rule은 생산성을 떨어트린다 판단되 off 처리됨
-	  * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
-	  * */
-	  "react/display-name": "off",
-	  "react-hooks/rules-of-hooks": "error",
-	  "react-hooks/exhaustive-deps": [
-		  "error",
-		  {
-			  "additionalHooks": "useRecoilCallback"
-		  }
-	  ], 		
-	  "@typescript-eslint/no-unused-vars": "error",
-	  /**
-		  * react/prop-types
-		  * Type선언으로 propTypes를 이미 명명하고 있으므로, off 처리함
-		  * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
-		  */
-	  "react/prop-types": "off",
-	  "prettier/prettier":[
-		  "off",
-		  {
-			  "trailingComma" : 0
-		  }
-	  ],
-	  "@typescript-eslint/no-explicit-any": "warn"
-	}
-  }
-  

package/.history/.eslintrc.config_20240620130453.js

@@ -1,164 +0,0 @@
-module.exports = {
-	extends: [
-		'plugin:@typescript-eslint/recommended',
-		'plugin:react/recommended',
-		'plugin:prettier/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		ecmaFeatures: {
-			jsx: true
-		},
-		ecmaVersion: 6,
-		sourceType: 'module'
-	},
-	plugins: ['react', '@typescript-eslint', 'react-hooks', 'import', '@emotion', 'prettier'],
-	globals: {
-		process: true
-	},
-	settings: {
-		react: { version: 'detect' }
-	},
-	rules: {
-		'@emotion/jsx-import': 'error',
-
-		/**
-		 * prettier가 적용 되었는지 체크
-		 */
-		'prettier/prettier': 'warn',
-		/**
-		 * 짧은 표기법으로 진행하는 형변환은 이해하기 어려울 수 있으므로 코드의 직관성이 떨어져 금지
-		 * https://eslint.org/docs/rules/no-implicit-coercion
-		 */
-		'no-implicit-coercion': 'error',
-
-		/**
-		 * no-extra-boolean-cast
-		 * !!var, !!!var 등 구분하기 애매한 boolean 형변환을 명확하도록
-		 * https://eslint.org/docs/rules/no-extra-boolean-cast
-		 */
-		'no-extra-boolean-cast': 'off',
-
-		/**
-		 * getter-return
-		 * 함수의 input output이 어떤지 사이드 이펙트를 측정하기 힘들어지므로,
-		 * 아무런 값도 return 하지 않는 함수일경우 경고
-		 * https://eslint.org/docs/rules/getter-return
-		 */
-		'getter-return': 'warn',
-
-		/**
-		 * 재할당되지 않는 변수는 const 선언
-		 * https://eslint.org/docs/rules/prefer-const
-		 */
-		'prefer-const': 'error',
-
-		/**
-		 * no-var
-		 * var 선언 금지
-		 * https://eslint.org/docs/rules/no-var
-		 */
-		'no-var': 'error',
-
-		/**
-		 * @typescript-eslint/no-empty-interface
-		 * 빈 인터페이스 경고
-		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-empty-interface.md
-		 */
-		'@typescript-eslint/no-empty-interface': 'warn',
-
-		/**
-		 * curly
-		 * if문 또는 for문에 대한 코드가 하나만 포홤된경우 중괄호를 생략할수 있으나, 버그를 유발하고 코드의 명확성을 떨어트릴 수 있기 때문에 금지
-		 * https://eslint.org/docs/rules/curly
-		 */
-		curly: ['error', 'all'],
-
-		/**
-		 * eqeqeq
-		 * === 및 !==등 형병환 비교 연산자만 허용, 대신 null은 해당 Rule에 대해서 예외 처리
-		 * https://eslint.org/docs/rules/eqeqeq#require-and-eqeqeq
-		 */
-		eqeqeq: ['error', 'always', { null: 'ignore' }],
-
-		/**
-		 * import/no-cycle
-		 * 다른 모듈끼리 서로를 import 하는것을 방지
-		 * https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-cycle.md
-		 * */
-		'import/no-cycle': ['error', { maxDepth: Infinity }],
-
-		/**
-		 * import/no-duplicates
-		 * 중복된 import 금지
-		 * https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
-		 * */
-		'import/no-duplicates': 'error',
-
-		/**
-		 * react/display-name
-		 * React.memo, React.forwardRef도 막는 경우가 존재하여 해당 Rule은 생산성을 떨어트린다 판단되 off 처리됨
-		 * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
-		 * */
-		'react/display-name': 'off',
-
-		/**
-		 * react/prop-types
-		 * Type선언으로 propTypes를 이미 명명하고 있으므로, off 처리함
-		 * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
-		 */
-		'react/prop-types': 'off',
-		/**
-		 * react-hooks/rules-of-hooks
-		 * 내부 코드 컨벤션상 React Hook 으로만 코드를 작성하도록 강제
-		 */
-		'react-hooks/rules-of-hooks': 'error',
-
-		/**
-		 * react-hooks/exhaustive-deps
-		 * useCallback, useMemo, useEffect등 Hook에서 사용되는 변수중, 누락된 deps가 있는지 검사
-		 */
-		'react-hooks/exhaustive-deps': 'error',
-
-		/**
-		 * @deprecated - 기존 eslint가 동작하지 않음으로써 생긴 에러가 다소 존재하여 임시로 warn 처리됨. 차후엔 error로 변경 필요
-		 * @typescript-eslint/no-explicit-any
-		 * any 타입 선언 금지
-		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-explicit-any.md
-		 */
-		'@typescript-eslint/no-explicit-any': 'warn',
-
-		/**
-		 * 아직 미개발 사항들이 있는 것 같아서 팀원들 확인이 필요하여 그대로 둠. error 로 변경 필요
-		 * tsconfig.json 의 noUnusedLocals, noUnusedParameters 옵션과 동시 변경
-		 */
-		'@typescript-eslint/no-unused-vars': 'error',
-
-		'@typescript-eslint/no-non-null-assertion': 'error',
-
-		/**
-		 * 7.22.0 에 추가된 스펙으로, 일단 모두 추가하여 테스트 중
-		 */
-		'react/jsx-key': ['error', { checkFragmentShorthand: true, checkKeyMustBeforeSpread: true }],
-		'react/jsx-no-constructed-context-values': 'error',
-		'react/jsx-indent-props': ['error', { indentMode: 'tab', ignoreTernaryOperator: true }],
-		'react/jsx-no-target-blank': ['error', { enforceDynamicLinks: 'always', warnOnSpreadAttributes: true }]
-	},
-	overrides: [
-		/**
-		 * .js 파일에 대해 require 허용, ES6 module 로 변환하게끔 하지 않음
-		 */
-		{
-			files: ['*.js'],
-			rules: {
-				'@typescript-eslint/no-var-requires': 'off',
-				'@typescript-eslint/explicit-module-boundary-types': 'off'
-			}
-		},
-		{
-			files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-			extends: ['plugin:testing-library/react', 'plugin:jest/recommended', 'plugin:jest/style']
-		}
-	]
-};

package/.history/.eslintrc_20230510193851.json

@@ -1,164 +0,0 @@
-module.exports = {
-	extends: [
-		'plugin:@typescript-eslint/recommended',
-		'plugin:react/recommended',
-		'plugin:prettier/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		ecmaFeatures: {
-			jsx: true
-		},
-		ecmaVersion: 6,
-		sourceType: 'module'
-	},
-	plugins: ['react', '@typescript-eslint', 'react-hooks', 'import', '@emotion', 'prettier'],
-	globals: {
-		process: true
-	},
-	settings: {
-		react: { version: 'detect' }
-	},
-	rules: {
-		'@emotion/jsx-import': 'error',
-
-		/**
-		 * prettier가 적용 되었는지 체크
-		 */
-		'prettier/prettier': 'warn',
-		/**
-		 * 짧은 표기법으로 진행하는 형변환은 이해하기 어려울 수 있으므로 코드의 직관성이 떨어져 금지
-		 * https://eslint.org/docs/rules/no-implicit-coercion
-		 */
-		'no-implicit-coercion': 'error',
-
-		/**
-		 * no-extra-boolean-cast
-		 * !!var, !!!var 등 구분하기 애매한 boolean 형변환을 명확하도록
-		 * https://eslint.org/docs/rules/no-extra-boolean-cast
-		 */
-		'no-extra-boolean-cast': 'off',
-
-		/**
-		 * getter-return
-		 * 함수의 input output이 어떤지 사이드 이펙트를 측정하기 힘들어지므로,
-		 * 아무런 값도 return 하지 않는 함수일경우 경고
-		 * https://eslint.org/docs/rules/getter-return
-		 */
-		'getter-return': 'warn',
-
-		/**
-		 * 재할당되지 않는 변수는 const 선언
-		 * https://eslint.org/docs/rules/prefer-const
-		 */
-		'prefer-const': 'error',
-
-		/**
-		 * no-var
-		 * var 선언 금지
-		 * https://eslint.org/docs/rules/no-var
-		 */
-		'no-var': 'error',
-
-		/**
-		 * @typescript-eslint/no-empty-interface
-		 * 빈 인터페이스 경고
-		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-empty-interface.md
-		 */
-		'@typescript-eslint/no-empty-interface': 'warn',
-
-		/**
-		 * curly
-		 * if문 또는 for문에 대한 코드가 하나만 포홤된경우 중괄호를 생략할수 있으나, 버그를 유발하고 코드의 명확성을 떨어트릴 수 있기 때문에 금지
-		 * https://eslint.org/docs/rules/curly
-		 */
-		curly: ['error', 'all'],
-
-		/**
-		 * eqeqeq
-		 * === 및 !==등 형병환 비교 연산자만 허용, 대신 null은 해당 Rule에 대해서 예외 처리
-		 * https://eslint.org/docs/rules/eqeqeq#require-and-eqeqeq
-		 */
-		eqeqeq: ['error', 'always', { null: 'ignore' }],
-
-		/**
-		 * import/no-cycle
-		 * 다른 모듈끼리 서로를 import 하는것을 방지
-		 * https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-cycle.md
-		 * */
-		'import/no-cycle': ['error', { maxDepth: Infinity }],
-
-		/**
-		 * import/no-duplicates
-		 * 중복된 import 금지
-		 * https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
-		 * */
-		'import/no-duplicates': 'error',
-
-		/**
-		 * react/display-name
-		 * React.memo, React.forwardRef도 막는 경우가 존재하여 해당 Rule은 생산성을 떨어트린다 판단되 off 처리됨
-		 * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
-		 * */
-		'react/display-name': 'off',
-
-		/**
-		 * react/prop-types
-		 * Type선언으로 propTypes를 이미 명명하고 있으므로, off 처리함
-		 * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
-		 */
-		'react/prop-types': 'off',
-		/**
-		 * react-hooks/rules-of-hooks
-		 * 내부 코드 컨벤션상 React Hook 으로만 코드를 작성하도록 강제
-		 */
-		'react-hooks/rules-of-hooks': 'error',
-
-		/**
-		 * react-hooks/exhaustive-deps
-		 * useCallback, useMemo, useEffect등 Hook에서 사용되는 변수중, 누락된 deps가 있는지 검사
-		 */
-		'react-hooks/exhaustive-deps': 'error',
-
-		/**
-		 * @deprecated - 기존 eslint가 동작하지 않음으로써 생긴 에러가 다소 존재하여 임시로 warn 처리됨. 차후엔 error로 변경 필요
-		 * @typescript-eslint/no-explicit-any
-		 * any 타입 선언 금지
-		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-explicit-any.md
-		 */
-		'@typescript-eslint/no-explicit-any': 'warn',
-
-		/**
-		 * 아직 미개발 사항들이 있는 것 같아서 팀원들 확인이 필요하여 그대로 둠. error 로 변경 필요
-		 * tsconfig.json 의 noUnusedLocals, noUnusedParameters 옵션과 동시 변경
-		 */
-		'@typescript-eslint/no-unused-vars': 'error',
-
-		'@typescript-eslint/no-non-null-assertion': 'error',
-
-		/**
-		 * 7.22.0 에 추가된 스펙으로, 일단 모두 추가하여 테스트 중
-		 */
-		'react/jsx-key': ['error', { checkFragmentShorthand: true, checkKeyMustBeforeSpread: true }],
-		'react/jsx-no-constructed-context-values': 'error',
-		'react/jsx-indent-props': ['error', { indentMode: 'tab', ignoreTernaryOperator: true }],
-		'react/jsx-no-target-blank': ['error', { enforceDynamicLinks: 'always', warnOnSpreadAttributes: true }]
-	},
-	overrides: [
-		/**
-		 * .js 파일에 대해 require 허용, ES6 module 로 변환하게끔 하지 않음
-		 */
-		{
-			files: ['*.js'],
-			rules: {
-				'@typescript-eslint/no-var-requires': 'off',
-				'@typescript-eslint/explicit-module-boundary-types': 'off'
-			}
-		},
-		{
-			files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-			extends: ['plugin:testing-library/react', 'plugin:jest/recommended', 'plugin:jest/style']
-		}
-	]
-};