feat: ToggleButton 컴포넌트 Controlled로 작성

woowacourse · May 14, 2021 · 8ec2dc9 · 8ec2dc9
1 parent 003bea7
commit 8ec2dc9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/src/components/containers/UserLotto/index.js b/src/components/containers/UserLotto/index.js
@@ -10,23 +10,21 @@ const initialState = { isToggled: false };
 
 export const UserLotto = (props) => {
   const { lottoBundle } = props;
-  const [isToggled, setLottoBundle] = useState(initialState.isToggled);
-  const onChangeToggleButton = (e) => setLottoBundle(e.target.checked);
-  const userLottoListClassname = cx({
-    UserLotto__list: true,
-    toggle: isToggled,
-  });
+  const [isToggled, setIsToggled] = useState(initialState.isToggled);
+  const onChangeToggleButton = (e) => setIsToggled(e.target.checked);
 
   return (
     <div className="UserLotto">
-      <ToggleButton onChange={onChangeToggleButton}>번호보기</ToggleButton>
+      <ToggleButton isToggled={isToggled} onChange={onChangeToggleButton}>
+        번호보기
+      </ToggleButton>
       <p>
         총 <span className="UserLotto__number">{lottoBundle.length}</span>개 구매하였습니다.
       </p>
-      <ul className={userLottoListClassname}>
-        {lottoBundle.map((v, i) => (
-          <li key={i}>
-            <Lotto numbers={v} />
+      <ul className={cx('UserLotto__list', { toggle: isToggled })}>
+        {lottoBundle.map((lotto, index) => (
+          <li key={index}>
+            <Lotto numbers={lotto} />
           </li>
         ))}
       </ul>

diff --git a/src/components/shared/ToggleButton/index.js b/src/components/shared/ToggleButton/index.js
@@ -6,20 +6,28 @@ import styles from './style.css';
 const cx = classNames.bind(styles);
 
 export default function ToggleButton(props) {
-  const { className, onChange, children, ...rest } = props;
+  const { containerClassname, className, isToggled, onChange, children, ...rest } = props;
 
   return (
-    <div className={cx('ToggleButton', className)}>
+    <div className={cx('ToggleButton', containerClassname)}>
       <label className="ToggleButton__label">
-        <input type="checkbox" className="ToggleButton__input" onChange={onChange} {...rest} />
+        <input
+          type="checkbox"
+          className={cx('ToggleButton__input', className)}
+          checked={isToggled}
+          onChange={onChange}
+          {...rest}
+        />
         <span className="ToggleButton__text">{children}</span>
       </label>
     </div>
   );
 }
 
 ToggleButton.propTypes = {
+  containerClassname: PropTypes.string,
   className: PropTypes.string,
+  isToggled: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   children: PropTypes.node,
 };