chore: yarn lint

sopt-makers · Apr 5, 2024 · f244841 · f244841
1 parent 3b0bd50
commit f244841
Show file tree

Hide file tree

Showing 24 changed files with 140 additions and 139 deletions.
diff --git a/packages/eslint-config-custom/react-internal.js b/packages/eslint-config-custom/react-internal.js
@@ -35,7 +35,9 @@ module.exports = {
 
   rules: {
     "import/no-default-export": "off",
-    "import/prefer-default-export": "on",
+    "import/prefer-default-export": "warn",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-empty-function": "off",
     "unicorn/filename-case": [
       "error",
       {

diff --git a/packages/ui/Button/Button.tsx b/packages/ui/Button/Button.tsx
@@ -1,10 +1,11 @@
+import type {ButtonHTMLAttributes} from 'react';
 import React from 'react';
 import * as S from './style.css';
-import { createButtonVariant } from './utils';
+import createButtonVariant from './utils';
 
-type IconProps = { color?: string };
+interface IconProps { color?: string }
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   className?: string;
   size?: 'sm' | 'md' | 'lg';
@@ -26,13 +27,13 @@ function Button({
 }: ButtonProps) {
   const variant = createButtonVariant(theme, rounded, size);
   return (
-    <button
-      className={`${S.root} ${variant} ${className}`}
+    <button className={`${S.root} ${variant} ${className}`}
+      type="button"
       {...buttonElementProps}
     >
-      {LeftIcon && <LeftIcon />}
+      {LeftIcon ? <LeftIcon /> : null}
       <span>{children}</span>
-      {RightIcon && <RightIcon />}
+      {RightIcon ? <RightIcon /> : null}
     </button>
   );
 }

diff --git a/packages/ui/Button/constants.ts b/packages/ui/Button/constants.ts
@@ -1,5 +1,5 @@
 import theme from '../theme.css';
-import {
+import type {
   ButtonColorTheme,
   ButtonColorThemeWithStatus,
   ButtonSizeTheme,

diff --git a/packages/ui/Button/utils.ts b/packages/ui/Button/utils.ts
@@ -1,8 +1,8 @@
 import { colorThemeToTextColor } from './constants';
 import { sprinkles } from './style.css';
-import { ButtonColorTheme, ButtonRadiusTheme, ButtonSizeTheme } from './types';
+import type { ButtonColorTheme, ButtonRadiusTheme, ButtonSizeTheme } from './types';
 
-export function createButtonVariant(
+function createButtonVariant(
   colorTheme: ButtonColorTheme,
   radiusTheme: ButtonRadiusTheme,
   sizeTheme: ButtonSizeTheme
@@ -23,3 +23,5 @@ export function createButtonVariant(
     fontSize: sizeTheme,
   });
 }
+
+export default createButtonVariant;
diff --git a/packages/ui/CheckBox/index.tsx b/packages/ui/CheckBox/index.tsx
@@ -1,4 +1,6 @@
-import React, { InputHTMLAttributes, forwardRef } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+// TODO: import 경로 수정
 import IconCheck from '../../icons/src/Icon/Interaction/ic-check';
 import {
   check,
@@ -21,14 +23,15 @@ const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
   ({ checked = false, label, size = 'small', color = 'white', onChange, ...props }, ref) => {
     return (
       <label className={checkBoxWrapper}>
-        <input ref={ref} type="checkbox" onChange={onChange} className={checkBoxInput} {...props} />
+        <input className={checkBoxInput} onChange={onChange} ref={ref} type="checkbox" {...props} />
         <div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
-          {checked && <IconCheck className={check[size]} />}
+          {checked ? <IconCheck className={check[size]} /> : null}
         </div>
-        <p className={`${checkBoxLabel[size]} ${labelColor[color]}`}>{label && label}</p>
+        <p className={`${checkBoxLabel[size]} ${labelColor[color]}`}>{label ? label : null}</p>
       </label>
     );
   }
 );
+CheckBox.displayName = 'CheckBox';
 
 export default CheckBox;
diff --git a/packages/ui/CheckBox/style.css.ts b/packages/ui/CheckBox/style.css.ts
@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { colors } from '../../colors/src';
-import theme from '../theme.css';
+import { colors } from "@sopt-makers/colors/src";
+import theme from "../theme.css";
 
 export const checkBoxWrapper = style({
   display: 'flex',

diff --git a/packages/ui/Dialog/Dialog.tsx b/packages/ui/Dialog/Dialog.tsx
@@ -1,19 +1,17 @@
 "use client";
 
-import { FC } from 'react';
-
 import * as Dialogs from '@radix-ui/react-dialog';
 import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components';
 import { dialogContainer, overlay } from './style.css';
-import { DialogProps } from './types';
+import type { DialogProps } from './types';
 
-export const DialogContainer: FC<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
+export function DialogContainer ({ isOpen, onClose, children, ...restProps }: DialogProps) {
   return (
-    <Dialogs.Root open={isOpen} onOpenChange={onClose}>
+    <Dialogs.Root onOpenChange={onClose} open={isOpen}>
       <Dialogs.Portal>
         <Dialogs.Overlay className={overlay}>
           <DialogAnimation>
-            <Dialogs.Content className={dialogContainer} asChild {...restProps}>
+            <Dialogs.Content asChild className={dialogContainer} {...restProps}>
               <div>{children}</div>
             </Dialogs.Content>
           </DialogAnimation>

diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
@@ -2,19 +2,19 @@ import Button from '../Button';
 import CheckBox from '../CheckBox';
 import Dialog from './Dialog';
 import { buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css';
-import { DialogValueProps } from './types';
+import type { DialogValueProps } from './types';
 
-export const DialogComponent = ({
+export default function DialogComponent({
   isOpen,
   onClose,
   title,
   description,
   checkBoxOptions,
   type,
   typeOptions,
-}: DialogValueProps) => {
+}: DialogValueProps) {
   const onApprove = () => {
-    typeOptions && typeOptions.buttonFunction;
+    typeOptions?.buttonFunction;
     onClose();
   };
 
@@ -26,58 +26,54 @@ export const DialogComponent = ({
           {description}
         </Dialog.Description>
       </div>
-      {checkBoxOptions && (
-        <div className={checkBoxWapper}>
+      {checkBoxOptions ? <div className={checkBoxWapper}>
           <CheckBox
-            label={checkBoxOptions.label}
-            size={checkBoxOptions.size ?? 'small'}
             checked={checkBoxOptions.checked}
             color={checkBoxOptions.color}
+            label={checkBoxOptions.label}
             onChange={checkBoxOptions.onChange}
+            size={checkBoxOptions.size ?? 'small'}
           />
-        </div>
-      )}
-      {type && typeOptions && (
-        <Dialog.Footer align={'default'}>
+        </div> : null}
+      {type && typeOptions ? <Dialog.Footer align="default">
           {type === 'default' && (
             <>
-              <Button size="md" rounded="md" theme="black" onClick={onClose} className={buttonSize}>
-                {typeOptions?.cancelButtonText}
+              <Button className={buttonSize} onClick={onClose} rounded="md" size="md" theme="black">
+                {typeOptions.cancelButtonText}
               </Button>
               <Button
-                size="md"
+                className={buttonSize}
+                onClick={onApprove}
                 rounded="md"
+                size="md"
                 theme="white"
-                onClick={onApprove}
-                className={buttonSize}
               >
-                {typeOptions?.approveButtonText}
+                {typeOptions.approveButtonText}
               </Button>
             </>
           )}
           {type === 'danger' && (
             <>
-              <Button size="md" rounded="md" theme="black" onClick={onClose} className={buttonSize}>
-                {typeOptions?.cancelButtonText}
+              <Button className={buttonSize} onClick={onClose} rounded="md" size="md" theme="black">
+                {typeOptions.cancelButtonText}
               </Button>
-              <Button size="md" rounded="md" theme="red" onClick={onApprove} className={buttonSize}>
-                {typeOptions?.approveButtonText}
+              <Button className={buttonSize} onClick={onApprove} rounded="md" size="md" theme="red">
+                {typeOptions.approveButtonText}
               </Button>
             </>
           )}
           {type === 'single' && (
             <Button
-              size="md"
+              className={`${buttonSize}`}
+              onClick={onApprove}
               rounded="md"
+              size="md"
               theme="white"
-              onClick={onApprove}
-              className={`${buttonSize}`}
             >
-              {typeOptions?.approveButtonText}
+              {typeOptions.approveButtonText}
             </Button>
           )}
-        </Dialog.Footer>
-      )}
+        </Dialog.Footer> : null}
     </Dialog>
   );
-};
+}
diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { createContext, useEffect, useState } from 'react';
-import { DialogComponent } from './DialogComponent';
-import { DialogOptionType, ProviderChildren } from './types';
+import DialogComponent from './DialogComponent';
+import type { DialogOptionType, ProviderChildren } from './types';
 
 export const DialogContext = createContext({
-  openDialog(option: DialogOptionType) {},
-  closeDialog() {},
-  checkCheckBox(isCheckValue:boolean) {},
+  openDialog: (_option: DialogOptionType) => {},
+  closeDialog: () => {},
+  checkCheckBox: (_isCheckValue:boolean) => {},
 });
 
 function DialogProvider({ children }: ProviderChildren) {
@@ -32,17 +32,13 @@ function DialogProvider({ children }: ProviderChildren) {
       const newDialogOption = { ...dialogOption, checkBoxOptions: newCheckBoxOption };
       setDialogOption(newDialogOption);
     }
-  }, [isCheck]);
+  }, [isCheck, dialogOption]);
 
   return (
-    <>
-      <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
+    <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
         {children}
-        {dialogOption && (
-          <DialogComponent isOpen={dialogOption !== null} onClose={closeDialog} {...dialogOption} />
-        )}
+        {dialogOption ? <DialogComponent isOpen={Boolean(dialogOption)} onClose={closeDialog} {...dialogOption} /> : null}
       </DialogContext.Provider>
-    </>
   );
 }
 

diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types';
+import type { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types';
 import { animation, description, footer, gap, title } from './style.css';
 
 export function DialogTitle({ children }: ChildrenProp) {

diff --git a/packages/ui/Dialog/types.ts b/packages/ui/Dialog/types.ts
@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { CheckBoxProps } from '../CheckBox';
+import type { ReactNode } from 'react';
+import type React from 'react';
+import type { CheckBoxProps } from '../CheckBox';
 
 export interface ChildrenProp {
   children: ReactNode;
@@ -38,4 +39,4 @@ export interface DialogProps {
   children?: ReactNode;
 }
 
-export type ProviderChildren = { children: React.ReactNode };
+export interface ProviderChildren { children: React.ReactNode }
diff --git a/packages/ui/Dialog/useDialog.tsx b/packages/ui/Dialog/useDialog.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'react';
 import { DialogContext } from './DialogProvider';
-import { DialogOptionType } from './types';
+import type { DialogOptionType } from './types';
 
 const useDialog = () => {
   const { openDialog, closeDialog } = useContext(DialogContext);

diff --git a/packages/ui/Toast/Toast.tsx b/packages/ui/Toast/Toast.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef } from "react";
 import * as Toast from "./parts";
-import { ToastOptionType } from "./types";
+import type { ToastOptionType } from "./types";
 
 function ToastComponent(props: ToastOptionType, ref: React.Ref<HTMLDivElement>) {
   const { icon, content, action, style } = props;
 
   return (
-    <Toast.Root ref={ref} style={style?.root} icon={icon}>
-      <Toast.Content style={style?.content} content={content} />
-      {action && <Toast.Action style={style?.action} {...action} />}
+    <Toast.Root icon={icon} ref={ref} style={style?.root}>
+      <Toast.Content content={content} style={style?.content} />
+      {action ? <Toast.Action style={style?.action} {...action} /> : null}
     </Toast.Root>
   );
 }

diff --git a/packages/ui/Toast/ToastProvider.tsx b/packages/ui/Toast/ToastProvider.tsx
@@ -2,11 +2,11 @@
 
 import { createContext, useRef, useState } from "react";
 import ToastComponent from "./Toast";
-import { Children, ToastOptionType } from "./types";
+import type { Children, ToastOptionType } from "./types";
 
 export const ToastContext = createContext({
-  openToast(option: ToastOptionType) {},
-  closeToast() {},
+  openToast: (_option: ToastOptionType) => {},
+  closeToast: () => {},
 });
 
 function ToastProvider({ children }: Children) {
@@ -28,7 +28,7 @@ function ToastProvider({ children }: Children) {
     if (!toastOption) return;
 
     clearTimeout(timerRef.current);
-    setTimeout(() => setToastOption(null), 200);
+    setTimeout(() => { setToastOption(null); }, 200);
     if (toastRef.current) {
       toastRef.current.style.opacity = "0";
       toastRef.current.style.transition = "opacity .2s linear";
@@ -38,7 +38,7 @@ function ToastProvider({ children }: Children) {
   return (
     <ToastContext.Provider value={{ openToast, closeToast }}>
       {children}
-      {toastOption && <ToastComponent ref={toastRef} {...toastOption} />}
+      {toastOption ? <ToastComponent ref={toastRef} {...toastOption} /> : null}
     </ToastContext.Provider>
   );
 }

diff --git a/packages/ui/Toast/icons/alert.tsx b/packages/ui/Toast/icons/alert.tsx
@@ -1,14 +1,14 @@
-const ToastIconAlert = () => {
+function ToastIconAlert() {
   return (
     <svg
-      width="20"
+      fill="none"
       height="20"
       viewBox="0 0 20 20"
-      fill="none"
+      width="20"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clipPath="url(#clip0_1309_17539)">
-        <circle cx="10" cy="10" r="10" fill="#FFDE8A" />
+        <circle cx="10" cy="10" fill="#FFDE8A" r="10" />
         <path
           d="M10.9671 5.52686C10.9671 5.01502 10.5333 4.6001 9.99819 4.6001C9.46308 4.6001 9.0293 5.01502 9.0293 5.52686V10.4696C9.0293 10.9814 9.46308 11.3964 9.99819 11.3964C10.5333 11.3964 10.9671 10.9814 10.9671 10.4696V5.52686Z"
           fill="#B57B1D"
@@ -20,11 +20,11 @@ const ToastIconAlert = () => {
       </g>
       <defs>
         <clipPath id="clip0_1309_17539">
-          <rect width="20" height="20" fill="white" />
+          <rect fill="white" height="20" width="20" />
         </clipPath>
       </defs>
     </svg>
   );
-};
+}
 
 export default ToastIconAlert;