Refactor/code style

client/src/components/Edit/QuestionEdit/Objective/index.tsx

@@ -30,7 +30,7 @@ function Objective({ index, questionState, addQuestionChoice, modifyChoice, dele
             color={theme.colors.grey5}
             fontSize={theme.fontSize.sz14}
             onClick={() => addQuestionChoice(index)}
-            custom="padding-left: 2px;"
+            style={{ paddingLeft: "2px" }}
           >
             옵션 추가
           </TextButton>

client/src/components/Modal/DeleteFormModal/index.tsx

@@ -25,7 +25,7 @@ function DeleteFormModal({ closeModal, refetchData, selectedFormId }: DeleteForm
           border={theme.colors.red1}
           color={theme.colors.red1}
           fontSize={theme.fontSize.sz12}
-          custom="margin-right: 12px;"
+          style={{ marginRight: "12px" }}
           hover={theme.colors.red0}
           active
         >

client/src/components/Modal/EditFormNameModal/index.tsx

@@ -32,7 +32,7 @@ function EditFormNameModal({ closeModal, selectedFormId, refetchData }: EditForm
           border={theme.colors.blue2}
           color={theme.colors.blue2}
           fontSize={theme.fontSize.sz12}
-          custom="margin-right: 12px;"
+          style={{ marginRight: "12px" }}
           hover={theme.colors.blue0}
           active
         >

client/src/components/Modal/ShareFormModal/index.tsx

@@ -64,7 +64,7 @@ function ShareFormModal({
           backgroundColor={theme.colors.blue5}
           border={theme.colors.grey2}
           color={theme.colors.white}
-          custom="margin-right: 12px;"
+          style={{ marginRight: "12px" }}
         >
           저장
         </Button>

client/src/components/common/Button/index.tsx

@@ -1,17 +1,7 @@
 import React from "react";
 import theme from "styles/theme";
 import ButtonComponent from "./style";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-  color?: string;
-  backgroundColor?: string;
-  hover?: string;
-  fontSize?: string;
-  active?: boolean;
-  border?: string;
-  custom?: string;
-}
+import { ButtonProps } from "./type";
 
 function Button({
   children,
@@ -22,8 +12,8 @@ function Button({
   color,
   hover,
   active,
-  custom,
   onClick,
+  style,
 }: ButtonProps) {
   return (
     <ButtonComponent
@@ -34,8 +24,8 @@ function Button({
       color={color}
       hover={hover}
       active={active}
-      custom={custom}
       onClick={onClick}
+      style={style}
     >
       {children}
     </ButtonComponent>
@@ -49,7 +39,6 @@ Button.defaultProps = {
   color: theme.colors.black,
   hover: "",
   active: false,
-  custom: "",
 };
 
 export default Button;

client/src/components/common/Button/style.ts

@@ -1,14 +1,5 @@
 import styled, { css } from "styled-components";
-
-interface StyledButtonProps {
-  color?: string;
-  backgroundColor?: string;
-  hover?: string;
-  fontSize?: string;
-  active?: boolean;
-  border?: string;
-  custom?: string;
-}
+import { StyledButtonProps } from "./type";
 
 const Button = styled.button<StyledButtonProps>`
   display: flex;
@@ -37,8 +28,6 @@ const Button = styled.button<StyledButtonProps>`
         transform: translateY(1px);
       }
     `}
-
-    ${({ custom }) => custom}
 `;
 
 export default Button;

client/src/components/common/Button/type.ts

@@ -0,0 +1,20 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  color?: string;
+  backgroundColor?: string;
+  hover?: string;
+  fontSize?: string;
+  active?: boolean;
+  border?: string;
+}
+
+interface StyledButtonProps {
+  color?: string;
+  backgroundColor?: string;
+  hover?: string;
+  fontSize?: string;
+  active?: boolean;
+  border?: string;
+}
+
+export type { ButtonProps, StyledButtonProps };

client/src/components/common/Dropdown/IconDropdown/type.ts

@@ -1,5 +1,4 @@
 import { IconType } from "components/common/Icon/type";
-import { QuestionType } from "types/form";
 
 interface IconItem {
   value: string;

client/src/components/common/Dropdown/TextDropdown/index.tsx

@@ -55,20 +55,16 @@ Head.defaultProps = {
   bold: false,
 };
 
-function ItemList({ children, custom = "" }: ItemListProps) {
+function ItemList({ children, style }: ItemListProps) {
   const { open, setOpen } = useContext(TextDropdownContext);
 
   return open ? (
     <OutsideDetecter callback={() => setOpen && setOpen(false)}>
-      <S.Content custom={custom}>{children}</S.Content>
+      <S.Content style={style}>{children}</S.Content>
     </OutsideDetecter>
   ) : null;
 }
 
-ItemList.defaultProps = {
-  custom: "",
-};
-
 function Item({ value, onClick }: ItemProps) {
   const { setSelected, setOpen, fontSize } = useContext(TextDropdownContext);
 

client/src/components/common/Dropdown/TextDropdown/style.ts

@@ -19,7 +19,7 @@ const Button = styled.button<{ fontSize: string; border: string; padding: string
   cursor: pointer;
 `;
 
-const Content = styled.ul<{ custom: string }>`
+const Content = styled.ul`
   width: 100%;
   position: absolute;
   z-index: 1;
@@ -28,8 +28,6 @@ const Content = styled.ul<{ custom: string }>`
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.colors.grey3};
 
-  ${({ custom }) => custom}
-
   li {
     text-align: left;
 

client/src/components/common/Dropdown/TextDropdown/type.ts

@@ -1,3 +1,5 @@
+import { HTMLAttributes } from "react";
+
 interface DropdownProps {
   state: string;
   defaultState: string;
@@ -17,9 +19,8 @@ interface ItemProps {
   onClick: () => void;
 }
 
-interface ItemListProps {
+interface ItemListProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
-  custom?: string;
 }
 
 export type { DropdownProps, HeadProps, ItemProps, ItemListProps };

client/src/components/common/ErrorBoundary/index.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from "react";
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    const { hasError, error } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      return <div>sth went wrong {error?.message}</div>;
+    }
+    return children;
+  }
+}
+
+export default ErrorBoundary;

client/src/components/common/IconButton/index.tsx

@@ -1,22 +1,11 @@
 import React from "react";
 import Icon from "components/common/Icon";
-import { IconType } from "components/common/Icon/type";
 import IconButtonComponent from "./style";
+import { IconButtonProps } from "./type";
 
-interface IconButtonProps {
-  type: "button" | "submit" | "reset";
-  icon: IconType;
-  fill?: string;
-  size: string;
-  active?: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-  custom?: string;
-}
-
-function IconButton({ size, type, active, fill, onClick, disabled, custom, icon }: IconButtonProps) {
+function IconButton({ size, type, active, fill, onClick, disabled, icon, style }: IconButtonProps) {
   return (
-    <IconButtonComponent onClick={onClick} disabled={disabled} active={active} custom={custom} type={type}>
+    <IconButtonComponent onClick={onClick} disabled={disabled} active={active} type={type} style={style}>
       <Icon size={size} type={icon} fill={fill} />
     </IconButtonComponent>
   );
@@ -26,7 +15,6 @@ IconButton.defaultProps = {
   fill: "black",
   disabled: false,
   active: false,
-  custom: "",
 };
 
 export default IconButton;

client/src/components/common/IconButton/style.ts

@@ -1,9 +1,5 @@
 import styled, { css } from "styled-components";
-
-interface StyledIconButtonProps {
-  active?: boolean;
-  custom?: string;
-}
+import { StyledIconButtonProps } from "./type";
 
 const IconButton = styled.button<StyledIconButtonProps>`
   padding: 0;
@@ -32,8 +28,6 @@ const IconButton = styled.button<StyledIconButtonProps>`
         transform: translateY(1px);
       }
     `}
-
-  ${({ custom }) => custom}
 `;
 
 export default IconButton;

client/src/components/common/IconButton/type.ts

@@ -0,0 +1,16 @@
+import { IconType } from "components/common/Icon/type";
+
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  type: "button" | "submit" | "reset";
+  icon: IconType;
+  fill?: string;
+  size: string;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+interface StyledIconButtonProps {
+  active?: boolean;
+}
+
+export type { IconButtonProps, StyledIconButtonProps };

client/src/components/common/Pagination/index.tsx

@@ -3,15 +3,13 @@ import IconButton from "components/common/IconButton";
 import theme from "styles/theme";
 import * as S from "./style";
 
-function Pagination({
-  currentPage,
-  lastPage,
-  callback,
-}: {
+interface PaginationProps {
   currentPage: number;
   lastPage: number;
   callback: (pageNumber: number) => void;
-}) {
+}
+
+function Pagination({ currentPage, lastPage, callback }: PaginationProps) {
   const [pageNumbers, setPageNumbers] = useState<number[]>([]);
 
   useEffect(() => {
@@ -34,7 +32,7 @@ function Pagination({
         disabled={currentPage === 1}
         icon="left"
         fill={theme.colors.grey5}
-        custom="height: 24px;"
+        style={{ height: "24px" }}
       />
       <S.PageNumberWrapper>
         {pageNumbers.map((number) => (
@@ -50,7 +48,7 @@ function Pagination({
         disabled={currentPage === lastPage}
         icon="right"
         fill={theme.colors.grey5}
-        custom="height: 24px;"
+        style={{ height: "24px" }}
       />
     </S.Container>
   );

client/src/components/common/Skeleton/index.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import * as S from "./style";
-import SkeletonType from "./type";
+import { SkeletonType, SkeletonContainerProps } from "./type";
 
-function SkeletonContainer({ children, custom = "" }: { children: React.ReactNode; custom?: string }) {
-  return <S.Container custom={custom}>{children}</S.Container>;
+function SkeletonContainer({ children, style }: SkeletonContainerProps) {
+  return <S.Container style={style}>{children}</S.Container>;
 }
-SkeletonContainer.defaultProps = {
-  custom: "",
-};
 
 function Element({ type }: { type: SkeletonType }) {
   return <S.Element type={type} />;

client/src/components/common/Skeleton/style.ts

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import SkeletonType from "./type";
+import { SkeletonType } from "./type";
 
 const getSkeletonTypeCss = (type: SkeletonType) => {
   switch (type) {
@@ -57,15 +57,13 @@ const getSkeletonTypeCss = (type: SkeletonType) => {
   }
 };
 
-const Container = styled.div<{ custom: string }>`
+const Container = styled.div`
   margin: 20px auto;
   padding: 10px 15px;
   background-color: #f2f2f2;
   border-radius: 3px;
   position: relative;
   overflow: hidden;
-
-  ${({ custom }) => custom}
 `;
 
 const Element = styled.div<{ type: SkeletonType }>`

client/src/components/common/Skeleton/type.ts

@@ -7,4 +7,8 @@ type SkeletonType =
   | "button"
   | "formQuestionTitleEdit";
 
-export default SkeletonType;
+interface SkeletonContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type { SkeletonType, SkeletonContainerProps };