저번 시간까지의 작업으로 이제
프로젝트 생성, 선택, 삭제가 가능해졌습니다
이 데모 프로젝트의 마지막 단계는
할 일(task) 작동을 확인하는것입니다
여기서 프로젝트가 선택되었을 때
할 일 리스트를 추가하고 싶습니다
그리고 입력란을 만들어서
새로운 할 일을 추가할 수 있어야 합니다
그리고 그것이
우리가 마지막으로 할 일입니다
시작으로 task 컴포넌트를 만들겠습니다
그리고 여기 컴포넌트 파일이 많이 생기기 때문에
이제 하위폴더를 사용해 정리하는것도
생각해 볼 수 있습니다만
여기서는 그냥 메인폴더에 나열하겠습니다
그리고 이 할 일 파일(Tasks.jsx) 안에서
이렇게 함수 컴포넌트로 내보내겠습니다
그리고 여기 섹션을 반환합니다
이 섹션 안에 '할 일'이라고 하는 제목을 넣겠습니다
그리고 그 밑에 '새로운 할 일'이라고
입력란이 주어져
새로운 할 일을 추가하도록 하고
그 밑에 할 일 목록이 들어갑니다
하지만 아직 할 일 목록이 없다면
문단을 추가하여 ‘이 프로젝트에는'
'아직 할 일 목록이 없습니다‘ 라고 쓰겠습니다
하지만 이 문장은 조건부로 보여질 것입니다
마치 이 목록이 조건부로 할 일이 있을때만
보여져야 하는 것과 같습니다
여기 이 할 일 기능을 추가하기 전에
먼저 형식을 편집하겠습니다
먼저 h2 요소를 추가하여
Text-2xl 클래스를 사용해서
글자 크기를 키우겠습니다
Font-bold 클래스와 text-stone-700
그리고 밑부분에 여백을 추가합니다
그리고 이 문단에서는
Text stone 800의 색을 설정하고
밑부분에 여백을 주겠습니다
그렇게 해서 selectedProject 컴포넌트에서
이 task 컴포넌트를
이 가짜 문구 대신에 사용할 수 있습니다
여기에 이 tasks 컴포넌트를 반환하고
그리고 당연히
할 일 파일(Tasks.jsx)에서 가져오는것인지
확인해야 합니다
그렇게 해서 여기에 컴포넌트를 추가하면
여기 '할 일'이 보입니다
그리고 여기 자리 표시자(placeholder)와 이 문장이 보입니다
이제 이 자리 표시자를
실제 입력 칸으로 만들어야 합니다
그리고 새로운 할 일 추가를 위한 버튼도 필요합니다
그러기 위하여 여기서 새로운 컴포넌트를 추가해서
새 할 일(New Tasks.jsx)이라고 이름짓겟습니다
그리고 그 안에 NewTasks라는
함수를 추가해서
디브(div)를 반환하겠습니다
그 안에 입력란이 필요하고
그 입력란 다음으로 버튼을 추가합니다
여기에는 커스텀 input 컴포넌트를 사용하지는 않겠습니다
라벨이 필요하지 않기 때문입니다
그 이유는 할 일은 단일값으로만 구성되어 있고
그 값은 할 일의 내용이기 때문입니다
따라서 납득 가능한 이 이유로 라벨이 필요하지 않습니다
그러니 NewTask 컴포넌트에서
그냥 기본 input 요소를 추가하여
유형을 text로 지정합니다
그리고 버튼에는 ‘할 일 추가’ 라고 합니다
그리고 당연히 형식 편집도 필요합니다
이 디브에
클래스를 추가하겠습니다
Flexbox를 사용하는걸 확인하고
이 두 가지 요소를 나란히 두고
이것을 세로 축 중심에 정렬하고
그 사이에 간격(gap)을 좀 넣고
입력값에는
60rem으로 너비가
고정되게 하겠습니다
가로와 세로의 패딩(padding)도 추가하고
모서리도 둥글게 만듭니다
그리고 보이시겠지만
몇 가지 테일윈드 클래스를
계속 반복하고 있습니다
테일윈드 CSS 를 사용할 땐
대부분 그렇게 작업합니다
몇 가지 핵심 클래스를 반복해서 사용하고
다른 특정 클래스는 때에 따라서 사용하게 됩니다
이제 이 입력값 부분을 마무리짓기 위해
Bg-stone-200의 배경색을 더하겠습니다
이제 이 버튼은
글자색을 Stone 700으로
그리고 롤오버(hover) 했을 때
더 진한 색을 선택합니다
이것으로 관련 작업이 끝났습니다
이제 이 NewTask 컴포넌트를
여기 Task에 사용하기 위해 가져오겠습니다
이 부분을 추가하면 이제 여기에서 확인할 수 있습니다
이 아래에 여백을 좀더 추가하겠습니다
여기 있는 문단의
Mb를 my로 바꾸어서
여백이 위 아래로 추가되게 하겠습니다
이제 더 보기 좋아졌습니다
당연히 이제는
이 내용이 작동되는지도 확인해야 합니다
여기에 할 일을 넣고 '할 일 추가'를 누르면
실제로 추가되도록 작업하겠습니다