refactor: migrate common files to ts

frontend/src/components/@common/Button/Button.stories.js → frontend/src/components/@common/Button/Button.stories.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import Button from "./Button";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Button, { ButtonProps } from "./Button";
 
 export default {
   title: "form/Button",
   component: Button,
-};
+} as ComponentMeta<typeof Button>;
 
-const Template = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -15,18 +16,18 @@ Default.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  children: "버튼",
   variant: "outlined",
+  children: "버튼",
 };
 
 export const Cancel = Template.bind({});
 Cancel.args = {
-  children: "취소",
   cancel: true,
+  children: "취소",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  children: "버튼",
   disabled: true,
+  children: "버튼",
 };

frontend/src/components/@common/Button/Button.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import styles from "./Button.module.css";
+
+export const BUTTON_VARIANT = {
+  CONTAINED: "contained",
+  OUTLINED: "outlined",
+} as const;
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  className?: string;
+  variant?: typeof BUTTON_VARIANT[keyof typeof BUTTON_VARIANT];
+  cancel?: boolean;
+  type?: "button" | "submit" | "reset";
+  children: React.ReactNode;
+};
+
+const Button = ({
+  className,
+  variant = "contained",
+  cancel = false,
+  type,
+  children,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={classNames(className, styles[variant], styles.button, {
+        [styles.cancel]: cancel,
+      })}
+      type={type}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

frontend/src/components/@common/Container/Container.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Container, { CONTAINER_SIZE, ContainerProps } from "./Container";
+
+export default {
+  title: "components/Container",
+  component: Container,
+} as ComponentMeta<typeof Container>;
+
+const Template: ComponentStory<typeof Container> = (args: ContainerProps) => (
+  <Container {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: "내용물",
+};
+
+export const Narrow = Template.bind({});
+
+Narrow.args = {
+  size: CONTAINER_SIZE.NARROW,
+  children: "내용물",
+};

frontend/src/components/@common/Container/Container.js → frontend/src/components/@common/Container/Container.tsx

@@ -1,14 +1,19 @@
 import classNames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
 import styles from "./Container.module.css";
 
 export const CONTAINER_SIZE = {
   DEFAULT: "default",
   NARROW: "narrow",
+} as const;
+
+export type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+  size?: typeof CONTAINER_SIZE[keyof typeof CONTAINER_SIZE];
+  className?: string;
+  title?: string;
+  children: React.ReactNode;
 };
 
-const Container = ({ title, size, children, className, ...props }) => {
+const Container = ({ size = "default", className, title, children, ...props }: ContainerProps) => {
   return (
     <div
       className={classNames(
@@ -33,13 +38,3 @@ const Container = ({ title, size, children, className, ...props }) => {
 };
 
 export default Container;
-
-Container.propTypes = {
-  title: PropTypes.string,
-  size: PropTypes.oneOf(["default", "narrow"]),
-  children: PropTypes.node,
-};
-
-Container.defaultProps = {
-  size: "default",
-};

frontend/src/components/@common/Description/Description.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Description, { DescriptionProps } from "./Description";
+
+export default {
+  title: "form/Description",
+  component: Description,
+} as ComponentMeta<typeof Description>;
+
+const Template: ComponentStory<typeof Description> = (args: DescriptionProps) => (
+  <Description {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "설명입니다!",
+};

frontend/src/components/@common/Description/Description.js → frontend/src/components/@common/Description/Description.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./Description.module.css";
 
-const Description = ({ children, className }) => {
-  return <div className={classNames(styles.description, className)}>{children}</div>;
+export type DescriptionProps = {
+  className?: string;
+  children: React.ReactNode;
 };
 
-Description.propTypes = {
-  children: PropTypes.node.isRequired,
+const Description = ({ className, children }: DescriptionProps) => {
+  return <div className={classNames(styles.description, className)}>{children}</div>;
 };
 
 export default Description;

frontend/src/components/@common/IconButton/IconButton.stories.js → frontend/src/components/@common/IconButton/IconButton.stories.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import Button from "./IconButton";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Button, { IconButtonProps } from "./IconButton";
 
 export default {
   title: "components/IconButton",
   component: Button,
-};
+} as ComponentMeta<typeof Button>;
 
-const Template = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args: IconButtonProps) => <Button {...args} />;
 
 export const Default = Template.bind({});
 

frontend/src/components/@common/IconButton/IconButton.tsx

@@ -0,0 +1,18 @@
+import styles from "./IconButton.module.css";
+
+export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  type?: "button" | "submit" | "reset";
+  className?: string;
+  src: string;
+  alt?: string;
+};
+
+const IconButton = ({ type, className, src, alt, ...props }: IconButtonProps) => {
+  return (
+    <button type={type} className={styles.button} {...props}>
+      <img src={src} alt={alt} className={className} />
+    </button>
+  );
+};
+
+export default IconButton;

frontend/src/components/@common/Label/Label.stories.js → frontend/src/components/@common/Label/Label.stories.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import Label from "./Label";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Label, { LabelProps } from "./Label";
 
 export default {
   title: "form/Label",
   component: Label,
-};
+} as ComponentMeta<typeof Label>;
 
-const Template = (args) => <Label {...args} />;
+const Template: ComponentStory<typeof Label> = (args: LabelProps) => <Label {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -15,6 +15,6 @@ Default.args = {
 
 export const Required = Template.bind({});
 Required.args = {
-  children: "이름",
   required: true,
+  children: "이름",
 };

frontend/src/components/@common/Label/Label.js → frontend/src/components/@common/Label/Label.tsx

@@ -1,9 +1,14 @@
 import React from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./Label.module.css";
 
-const Label = ({ children, className, required }) => {
+export type LabelProps = {
+  className?: string;
+  required?: boolean;
+  children: React.ReactNode;
+};
+
+const Label = ({ className = "", required = false, children }: LabelProps) => {
   return (
     <label
       className={classNames(styles.label, className, {
@@ -15,15 +20,4 @@ const Label = ({ children, className, required }) => {
   );
 };
 
-Label.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-Label.defaultProps = {
-  className: "",
-  required: false,
-};
-
 export default Label;