이번 시간에는
이 컴포넌트를 닫아 보겠습니다
즉 저장을 클릭하면 화면에서 사라지게 할 것입니다
그렇게 하려면
컴포넌트로 돌아가서앱
Console.log 코드를 지우고
SelectedProjectID가
정의되지 않은 값으로 돌아간 것을 확인해야 합니다
이것이 널값(null)으로 설정되어 있기 때문에
이 컴포넌트가 지워지지 않았습니다
SelectedProjectID가 널값인 동안은
새로운 프로젝트 컴포넌트가 계속 띄워져 있습니다
이 컴포넌트를 안 보이게 하고싶다면
이것을 바꾸셔야 합니다
여기서 두 가지 선택지가 있습니다
handleAddProject에서
SelectedProjectID를 undefined로 설정하면
대체 화면(fallback)으로 돌아가게 됩니다
이렇게 해서 저장하고
저장 버튼을 클릭하면 이 화면이 나옵니다
이것은 괜찮은 선택지입니다
대안으로는
여기서 만든 ID로 설정하는 방법입니다
여기서 ID를 생성하여
프로젝트 ID를 상수에 넣고
여기서도 쓰고, 여기서도 사용합니다
그럼 자동으로 해당 프로젝트가 선택됩니다
하지만 여기서 그렇게 하지는 않겠습니다
왜냐하면 아직
프로젝트 선택 단계까지 가지 않았기 때문입니다
그러니 우선 undefined로 설정하여
이 화면으로 돌아오게 하겠습니다
또 확인해야 할 것은
프로젝트가 사이드바에 추가되도록 하는 것입니다
그렇게 하려면
당연히 프로젝트를
ProjectSidebar 컴포넌트에 넘겨야 합니다
여기서 프로젝트 속성을 만들어
값으로는
projectsState.project를 사용하겠습니다
이것은 우리가 관리하고 있는
모든 프로젝트에 대한 배열입니다
이제 그것을 ProjectSidebar 컴포넌트에 있는
project라는 이름의 속성으로 넘기겠습니다
그럼 이 컴포넌트에서
이 프로젝트들을 내보낼 수 있습니다
이 순서 없는 목록(unordered list)에 하겠습니다
즉 먼저
ProjectSidebar 컴포넌트에 있는 이 프로젝트 속성을
모두 받아서 추출합니다
그리고 이 ul에는
동적 표현을 추가하여 이 project라는 속성이
배열에 있는 모든 아이템을 매핑하여
모든 아이템을 JSX 요소로 내보낼 수 있게 합니다
이제 여기서 모든 프로젝트를 확인하고
각 프로젝트마다 li를 반환하게 하겠습니다
이미 배우셨다시피 이런 맵을 사용할 때
여러분이 사용하는 루트(root) 항목은
즉 li는 키 속성(key prop)을 받아야 합니다
즉 이 아이템에 대한 고유 식별자가 있어야 합니다
여기서 사용하기 적절한 것으로는
프로젝트 ID가 있습니다
프로젝트마다 고유번호가 있기 때문입니다
Li 텍스트 사이에 버튼을 하나 넣겠습니다
프로젝트를 선택할 수 있게 하는것이 목표이기 때문입니다
이제 프로젝트를 클릭하고
선택된 프로젝트의 상세 내용을 볼 수 있게 하겠습니다
버튼 태그 사이에
프로젝트 제목을 내보내겠습니다
당연히 여기도 형식 편집이 필요합니다
이 버튼의 형식을 설정해야 하므로
이 버튼에
w-full를 추가하여
이 버튼이 사용할수 있는 너비를 다 사용하게 하겠습니다
text-left를 사용하여 텍스트를 왼쪽으로 정렬하고
양 옆에 패딩(padding)도 추가합니다
위 아래에도 패딩을 더하겠습니다
둥근 모서리로 설정해서
위 아래로 여백을 추가하고
글자 색은 text stone 400을 사용하겠습니다
이 버튼은 어두운 배경 위에 있기 때문에
밝은 텍스트 색을 골랐습니다
롤오버(hover) 형식도 필요합니다
마우스를 올렸을 때 글자 색을
아주 밝은 색으로 바꾸겠습니다
커서를 올리면 버튼은 그 전보다 더 어두운 색으로
바뀌도록 하겠습니다
이제 버튼에 형식을 많이 더했습니다
이제 이것을 저장하면
여기 프로젝트가 보입니다
이쪽으로 커서를 옮기면
강조되는 것도 보입니다
이대로 새로고침하여
새 프로젝트를 추가하면 옆에 또 나타날 것 입니다
이 버튼과 첫 번째 프로젝트 사이에
공간이 조금 더 많았으면 좋겠습니다
그래서 ol에서
윗부분에 여백을 추가하겠습니다
예를 들어 mt-8 클래스를 사용하겠습니다
이제 목록이 조금 밑으로 내려와
프로젝트 목록이 여기 있습니다
이것을 선택해서
상세 내용을 확인하기 전에
먼저 새로운 프로젝트를 만들 때
이 취소 버튼이 작동하는지
확인해야 합니다
또한 모든 입력창에 값을 다
입력하지 않고 저장을 누르면
에러 메시지가 떠야 합니다
이 작업을 다음 시간에 하겠습니다