components 폴더안에 TodoItem.js 파일을 만들어주고
아이템 리스트 컴포넌트를만들어보자
여기서 사용해야 할 아이콘은 따로 있으니 다른 사이트에서 가져와보자
react-icons라는 사이트에 들어와서
MdDone하고 MdDelete 라는 아이콘을 쓸건데, 어떻게 쓰냐!
import 해주는곳에서 하단에 아이콘 이름 그대로 같이 넣어주고, 경로값을 아까 말했던 사이트/종류 로 넣어주면 된다
- 이렇게만 하니까 경로를 못찾아서
npm install react-icons --save 를 입력해서 설치를 해주었더니 경로를 찾더라
이번에는 여러가지의 styled components를 만들어줄것이다
먼저 Remove에는 투명도를 0을 줄건데, 우리는 이거를
'아이템블록에 마우스가 올라가면 보여줘~'라고 Remove에 요청할거다
즉, 안보이다 마우스 올리면 보이게 해줘 라는거다
아이템블록으로 와서
&:hover {}를 사용하면 '마우스가 올라갔을때'의 값을 넣어줄수있다
${}라는 방법을쓰면 컴포넌트를 바로 선택할수있고, 그 안에다가 실행될 값을 넣어주면 된다.
"우리는 안보이다 보여줘 !" 라는 주문을 넣었으니 opacity:1;로 해주면 이제 보이게 될 것이다
기본적인 Remove에 대한 styled-componenets 설정이고
여기에 마우스를 올리면 색깔이 변하게 해두었다
체크서클에 대한 styled-componenets 설정이고
done이라는 값을 props로 넘겨줄건데, 그 값이 있다면 !
이하의 테두리와 색깔이 바뀌는 css값을 적용시켜줄것이다
참고로
styled-components안에서 css를 따로 쓸때는 
이렇게 또한 import 해주어야한다
텍스트에 대한 styled-componenets 설정이고 done 이라는 값을 갖고있다면 색깔을 바꿔주는 설정을했다.
TodoItem 컴포넌트 안에는 id, done, text를 props로 받아올건데,이것에 따라서
컴포넌트를 렌더링 해줄것이다
왼쪽에서부터 체크서클이 있고 여기에 done 값을 props해주고서
체크서클(컴포넌트)안에 done값이 있다면 MdDone컴포넌트를 렌더링 할 것이다.
텍스트 컴포넌트 안에도 done값을 props로 주고, 이 안에 내용은{text}이고
Remove 컴포넌트 안에는 MdDelete 컴포넌트를 넣어주자.
정리하자면
CheckCircle 컴포넌트는 좌측에 있는 체크를 보여주는 컴포넌트
Text 컴포넌트는 텍스트를 보여주는 컴포넌트
Remove라는 컴포넌트는 우측에 나타나는 쓰레기통 아이콘을 보여주는 컴포넌트
TodoItemBlock는 상단 3가지 컴포넌트가 들어가서 보여지는
총괄적인 틀 역할을 하는 컴포넌트이다
다시 TodoList 컴포넌트로 돌아와서
만들어놓은 3가지를 다 담아놓은 ! TodoItem 컴포넌트에 텍스트를 달아주고
원하는 텍스트를 입력하자, 그리고 done 값을 true로 해주게되면 바로 보이게 되고
false로 하면 보이지 않게된다
그러면 이렇게 기본적인 틀이 완성된다 !
그럼 이제 다시 components 폴더에 TodoCreate.js라는 컴포넌트 파일을 만들어보자
리스트 아래에 버튼을 만들어주고 꾸며줄건데
여기서 주의깊게 봐야하는것은 !
-
다른 내용을 가려야하니 z-index를 사용하고
-
position: absolute
left: 50%
bottom : 0px 를 주어서
맨 아래에 붙혀서 가운데로 위치하겠다고 한것인데
좀 더 정확한 위치 설정을 위해서 translate(-50%,50%)를 사용하자
그리고 TodoCreate 컴포넌트안에다가
CircleButton이라는 styled-components를 넣어주고
그 CircleButton 컴포넌트안에다가 우리가 이전에 가져온 react-icons중 하나인 MdAdd 컴포넌트를 넣어주면 적용이 끝난다
이제 이걸 TodoCreate 컴포넌트에 담았으니 app.js로 가져가서 사용해보자
그러면 이렇게 ! 귀여운 버튼이 하나가 딱 생긴다
hover 동작도 원활하게 잘 된다
우리가 방금 만든 TodoCreate 컴포넌트는 상태관리가 필요합니다 !
왜냐하면 열고,닫고 기능을 수행할수 있어야 하기 때문이다
이럴때 우리는 자주 사용했던 useState를 사용해 볼 것이다 
import로 useState를 해주고서
TodoCreate 컴포넌트 안에다가 기능을 만들어주자
스위치 작용을 할 open이라는 useState를 하나 만들어주고
open을 컨트롤할 함수를 하나 만들어주자
onToggle이라는 함수는 실행되면
open의 변경함수인 setOpen의 값을 변경시켜준다(반대로)
그러면 초기값이 false로 되어있던 open은 onToggle이 실행하면 true로 바뀌게되어 보여지게 된다
그러면 ! 이제 CircleButton 컴포넌트에 props로 open을 주고
onToggle 함수를 쉽게 실행할수있게 onClick 기능을 주어서
CircleButton은 기능부여를 해놓은 상태가 됐다, 이제 디테일한 기능을 설정해주자
우리는 만약에 open 이라는 값이 있다면 다른 스타일을 보여주도록 설정하자
selector 를 이용해서
'만약에 open이라는 값이 true면'의 상태값을 넣어주자
기본배경색과, hover 했을때, active 했을때의 색을 정해주고
transform으로 위치를 바꾸어줄건데
기존에 우리는 정확한 위치값을 잡기위해
translate(-50%,50%)해준값을 그대로 유지한 상태에서 rotate(45deg)를 주어 회전시켜주었다.
하지만 이렇게하면 끊키면서 기울기때문에 좀 더 부드러운 연출을 위한
transition값을 설정해주어 좀 더 부드러운 애니메이션과 연출을 해보자.
이제는 버튼의 상태가 x가 되어있다면 새로운 form을 보여주는 형태를 구현해보자!
3가지 컴포넌트를 만들어주자
1. InsertFormPositioner = form이 들어갈 전체적인 위치에 대한것
2. InsertForm = 입력폼의 위치와 뒷배경에 대한것
3. Input = input 입력칸에 들어갈 설정값
조심해야 할 것은 우리는 항상 styled.div를 사용했는데
input값에는 styled.input이라고 적어주어야 나중에 input태그를 사용할수있다
이제 InsertForm을 InsertFormPositioner에 감싸서 렌더링 해보자
return() 아래의 값을 <> </>로 감싸주고
open 값이 true면 InsertFormPositioner안에서 InsertForm에
Input 컴포넌트를 넣어주고
Input 컴포넌트에 placeholder와 autoFocus를 통해 input의 초기값을 정해주자
그러면 이렇게 깔끔하게 모든 UI 설정이 끝난다..!
