refactor: migrate SummaryCheckField folder to typescript

woowacourse · Oct 9, 2022 · 5121663 · 5121663
1 parent 8b706ec
commit 5121663
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/...ryCheckField/SummaryCheckField.stories.js → ...yCheckField/SummaryCheckField.stories.tsx b/...ryCheckField/SummaryCheckField.stories.js → ...yCheckField/SummaryCheckField.stories.tsx
@@ -1,16 +1,19 @@
-import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import SummaryCheckField from "./SummaryCheckField";
 
 export default {
   title: "form/SummaryCheckField",
   component: SummaryCheckField,
-};
+} as ComponentMeta<typeof SummaryCheckField>;
 
-const Template = (args) => <SummaryCheckField {...args} />;
+const Template: ComponentStory<typeof SummaryCheckField> = (args) => (
+  <SummaryCheckField {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {
   label: "약관 동의",
+  checked: false,
   children: (
     <p>
       Ullamco duis cillum adipisicing elit Lorem. Culpa veniam aliqua commodo esse culpa officia qui

diff --git a/...rm/SummaryCheckField/SummaryCheckField.js → ...m/SummaryCheckField/SummaryCheckField.tsx b/...rm/SummaryCheckField/SummaryCheckField.js → ...m/SummaryCheckField/SummaryCheckField.tsx
@@ -1,9 +1,18 @@
-import PropTypes from "prop-types";
 import React from "react";
+
 import CheckBox from "../CheckBox/CheckBox";
 import styles from "./SummaryCheckField.module.css";
 
-const SummaryCheckField = ({ children, label, required, ...props }) => {
+type SummaryCheckFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+};
+
+const SummaryCheckField = ({
+  label,
+  required = false,
+  children,
+  ...props
+}: SummaryCheckFieldProps) => {
   return (
     <div className={styles.box}>
       <CheckBox label={label} required={required} {...props} />
@@ -14,15 +23,4 @@ const SummaryCheckField = ({ children, label, required, ...props }) => {
   );
 };
 
-SummaryCheckField.propTypes = {
-  children: PropTypes.node.isRequired,
-  label: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-SummaryCheckField.defaultProps = {
-  label: "",
-  required: false,
-};
-
 export default SummaryCheckField;