Fix typo

Author: velopert

SUMMARY.md

@@ -27,8 +27,8 @@
   - [23. Immer 를 사용한 더 쉬운 불변성 관리](./basic/23-immer.md)
   - [24. 클래스형 컴포넌트](./basic/24-class-component.md)
   - [25. LifeCycle Method](./basic/25-lifecycle.md)
-  - [26. componentDidCatch 로 에러 잡아내기 / Sentry 연동](./basic/componentDidCatch-and-sentry.md)
-  - [27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet](./basic/useful-tools.md)
+  - [26. componentDidCatch 로 에러 잡아내기 / Sentry 연동](./basic/26-componentDidCatch-and-sentry.md)
+  - [27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet](./basic/27-useful-tools.md)
   - [리액트 입문 마무리](./basic/CONCLUSION.md)
 - [2장. 리액트 컴포넌트 스타일링하기](./styling/README.md)
   - [1. Sass](./styling/01-sass.md)

basic/25-lifecyle.md renamed to basic/25-lifecycle.md

@@ -176,10 +176,10 @@ const Remove = styled.div`
   color: #dee2e6;
   font-size: 24px;
   cursor: pointer;
+  opacity: 0;
   &:hover {
     color: #ff6b6b;
   }
-  display: none;
 `;
 
 const TodoItemBlock = styled.div`
@@ -189,7 +189,7 @@ const TodoItemBlock = styled.div`
   padding-bottom: 12px;
   &:hover {
     ${Remove} {
-      display: initial;
+      opacity: 1;
     }
   }
 `;
@@ -281,7 +281,6 @@ const CircleButton = styled.button`
   cursor: pointer;
   width: 80px;
   height: 80px;
-  display: block;
   align-items: center;
   justify-content: center;
   font-size: 60px;
@@ -293,9 +292,7 @@ const CircleButton = styled.button`
   border-radius: 50%;
   border: none;
   outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
 
   transition: 0.125s all ease-in;
   ${props =>

mashup-todolist/03-implement.md

@@ -30,7 +30,7 @@ body {
 }
 ```
 
-더 많은 차이점들은 여기 서 비교해볼 수 있습니다. 보통 scss 문법이 더 많이 사용되므로, 우리는 .scss 확장자로 스타일을 작성하겠습니다. 
+더 많은 차이점들은 [여기](https://sass-lang.com/guide) 서 비교해볼 수 있습니다. 보통 scss 문법이 더 많이 사용되므로, 우리는 .scss 확장자로 스타일을 작성하겠습니다. 
 
 
 ### 시작하기

styling/01-sass.md

@@ -74,7 +74,7 @@ function CheckBox({ children, checked, ...rest }) {
   return (
     <div>
       <label>
-        <input type="checkbox" />
+        <input type="checkbox" checked={checked} {...rest} />
         <div>{checked ? '체크됨' : '체크 안됨'}</div>
       </label>
       <span>{children}</span>

styling/02-css-module.md

@@ -592,7 +592,7 @@ Button.defaultProps = {
 export default Button;
 ```
 
-`props.theme.palett.blue` 이런식으로 값을 조회하는 대신에 비구조화 할당 문법을 사용하여 가독성을 높여주었습니다.
+`props.theme.palette.blue` 이런식으로 값을 조회하는 대신에 비구조화 할당 문법을 사용하여 가독성을 높여주었습니다.
 
 참고로 위 로직은 다음과 같이 색상에 관련된 코드를 분리하여 사용 할 수도 있습니다.