이번 시간에는 이 프로젝트를 선택할 수 있도록 하겠습니다
이 때 필요한 것은 두 가지입니다
먼저 새로운 컴포넌트를 만들어서
선택된 프로젝트의 상세 내용을 표시해야 하고
그 다음으로 필요한 것은
프로젝트 사이드바 파일에서
추가할 컴포넌트에 어떤 프로젝트가 선택되었는지에 대한
정보를 받아오는 것입니다
새로운 컴포넌트부터 시작하겠습니다
선택된 프로젝트(SelectedProject.jsx)라고 하겠습니다
그리고 그 안에
SelectedProject라는 함수를 추가합니다
여기에 디브(div)를 반환한다고 가정하여
그러면 헤더(header)를 추가하여
선택된 프로젝트의 주요 정보를 보여주도록 하고
그 밑으로는 프로젝트의
할 일 목록을 추가하겠습니다
이 부분은 나중에 작업하고
우선은 헤더 작업을 하겠습니다
이 헤더 안에 h1 요소를 추가하여
프로젝트 제목을 출력하게 하겠습니다
그리고 그 다음으로
이 프로젝트를 삭제할 수 있는 버튼을 만들겠습니다
이 두 가지 요소는 나란히 렌더링해야 하므로
한 가지 디브로 묶겠습니다
그런 다음 flexbox를 사용하여
이 요소들을 나란히 위치시키겠습니다
즉 아직 헤더 안에 있지만
이 제목-버튼 콤비네이션 아래에는
문단에 프로젝트의 마감일을 추가하고
그 밑에 또다른 문단을 만들어
상세 내용을 추가하겠습니다
물론 이 모든 데이터는
여기에서 속성으로 받아야 합니다
그래서 여기에 프로젝트 속성이
프로젝트 제목을 출력할 수 있는
프로젝트 객체가 되어야 합니다
이 프로젝트 마감일에
날짜를 조금 더 편하게 읽을 수 있게 만들기 위해
여기에 새로운 상수 formattedDate를 만들고
새로운 date 객체를 추가하여
Project 객체에 저장되있는 dueDate를 전달하겠습니다
그리고 브라우저가 제공하는
내장된 날짜 객체에서
toLocaleDateString을 불러와서 날짜를 포맷하겠습니다
여기서는 미국 기준으로 하겠습니다
그리고 toLocaleDateString의 두번째 인수로
구성(config) 객체를 전달하여
연도 표시 방법을 설정하겠습니다
예를 들면 두 자리 수로 표시하거나
전체 숫자를 표시하거나 정하고
월 정보를
길게 표시할 지 짧게 표시할 지 정하겠습니다
여기서는 짧은 방식으로 하겠습니다
마찬가지로 일 수는 정수값으로 하겠습니다
여기 있는 객체와 메소드를 가지고
자유롭게 수정해 보시기 바랍니다
우선 이것으로 formattedDate를 만들었으니
아래쪽에 출력하겠습니다
그리고 당연히 상세 내용의
Project.description은 이렇게 출력하겠습니다
다음엔 형식이 필요합니다
우선 모든 것을 감싸는 디브에서 시작하겠습니다
여기에 맞춤 너비로 35rem을 이렇게 설정하고
위쪽에 여백을 추가하겠습니다
그리고 이 헤더 밑에는 PB-4를 사용하여
1rem의 패딩(padding)을, mb-4을 이용하여 1rem의 여백을
그리고 2pixel의 테두리를 넣겠습니다
테두리에 border-stone-300을 사용하여
연한 회색을 주겠습니다
그리고 이 디브에는 클래스를 추가하여
제목과 버튼이 나란히
위치될 수 있도록 하겠습니다
여기에 Flex, items-center을 추가하고
justify-between을 사용하여
제목과 버튼 사이 조금의 공간을 줍니다
그리고 여기 값으로 text-3xl을
추가하여 이 글자가 커지게 합니다
Font-bold로 굵게 하고, 글자 색은
text-Stone 600, 그리고 아래에 여백을 두겠습니다
버튼 문자 색은 text stone 600로 하고
롤오버(hover) 문자 색으로는 text stone 950을 사용하여
조금 더 진하게 합니다
이제 첫 문단으로 넘어가서
아래 여백으로는 mb-4
글자색은 text-stone-400을 사용하겠습니다
두 번째 문단에는
Text-stone-60를 사용해서 짙은 회색을 주고
White-space-pre-wrap을 사용하여
여기 상세 내용란에 줄 바꿈이
제거되지 않고 유지될 수 있게 합니다
즉 whitespace-pre-wrap의 역할입니다
이렇게 하면 좀더 나은 모양이 될 것입니다
이것이 작동하려면
사이드바에서 프로젝트를 선택할 수 있어야 합니다
이 작업을 위해서는
여기 이 버튼이
앱 컴포넌트의 상태를 변경해야 합니다
그러니 앱 컴포넌트로 들어가서
새로운 함수를 추가하겠습니다
HandleSelectProject라고 하겠습니다
여기서는 프로젝트 ID가 값으로 출력되어야 합니다
그다음 여기 handleStartAddProject에서 하는 것처럼
상태를 업데이트하겠습니다
이제 selectedProjectID는
여기 입력값으로 받는
ID로 설정해야 합니다
이제 HandleSelectProject는
이 ProjectSidebar 컴포넌트로 전달해야 합니다
여기에 새로운 속성으로 onSelectProject를 추가하고
여기의 값은 새로 추가된
HandleSelectProject 함수가 되어야 합니다
ProjectSidebar에서 이제 이 onSelect 속성을
추출해야 합니다
가져오는 속성을 구조 분해(destructure)해서
이 버튼에 연결시킵니다
이제 이 버튼은
더 읽기 쉽도록
줄을 좀 나눠 주고
onClick을 추가하여 새로 추가된 onSelectProject를 값으로 지정합니다
추가로 여기서 선택된 프로젝트에
강조 표시를 추가하겠습니다
따라서 selectedProjectID를
속성으로 가져오겠습니다
방금 추가한 onselectproject에
추가해서 가져오는 것입니다
이제 선택된 프로젝트의 ID가
포함된 이 속성을 사용하여
특정의 버튼에 강조 표시를 더할 수 있습니다
그렇게 하기 위해 여기 map 메소드에 있는
이 코드를 바꾸겠습니다
이 짧은 인라인(inlin) 표기법에서 멀어지게 하고
대신에 중괄호로 열고 닫아줍니다
이 항목을 반환하여
이 함수에
편리하게 더 많은 코드를 추가할 수 있습니다
이제 이 버튼에 동적으로 설정된
CSS 클래스를 가져오겠습니다
이 요소에 강조 표시가 더해지는지 여부가
가져오는 조건입니다
그러기 위해 여기 CSS 클래스 문자열을 설정합니다
여기 이 뭄ㄴ자열입니다
그리고 지금 작업하는
지금 작업하는 프로젝트 ID가
여기 나오는 속성의 선택된 프로젝트 ID와
같은지 확인해야 합니다
그러니가 여기에 반환되는 프로젝트가
선택된 프로젝트(SelectedProject)가 됩니다
그렇게 되면 제 CSS 클래스를 조정하곘습니다
이 경우에는
배경색을 BG Stone 800으로 추가하고,
롤오버 할때 사용한 색과
같은색을 쓰겠습니다
그리고 글자색을 아까 사용한
text stone 200으로 설정하겠습니다
이게 기본값의
Text-stone-400 색과
충돌하지 않게 하려면
여기에 else 블록을 추가해야 합니다
그래서 이게 선택된 프로젝트가 아닌 경우
다른 기본 글자색, 즉 text-stone-400을
여기에 항시 적용되는
기본 클래스 값에서 잘라와서
이게 선택된 프로젝트가 아닐 경우에만
여기에 적용하겠습니다
추가로 첫 번째 클래스 앞 부분에
공백을 추가하여
이 클래스가 너무 길어지지
않도록 하겠습니다
이제 이 cssClasses 상수가
이 버튼의 클래스 이름에 대한 값으로 사용됩니다
이제 한 가지 요소를 선택하여
선택된 요소에 강조 처리를 할 수 있습니다
마지막 단계로
새로 추가된 SelectedProject 컴포넌트를
프로젝트가 선택되었을 때 앱 컴포넌트에 출력되도록 하겠습니다
그러기 위하여 이 if else 코드를 약간 조정해야 합니다
지금은 선택된 프로젝트가
Null인지 undefined인지를 체크하고 있는데
이제 프로젝트가 선택되었을 때의 상황도
관리해 보겠습니다
그렇게 하려면 content를
SelectedProject의 기본값으로 설정하겠습니다
이제 selectedProject를 가져와서
그 작업 이후에
그 project 속성을
기존에 선택된 프로젝트로 설정되게 합니다
지금 속성에는 선택된 프로젝트 ID만 있습니다
그러니 projectsState와
이 프로젝트 배열을 사용하여
SelectedProject를 불러와야 하며
그리고 projectID가 selectedProjectID와 동일할 때
프로젝트를 찾도록 하겠습니다
이 자바 코드를 사용하여
배열의 한 ID 요소를 찾는 데 사용할 수 있습니다
Find like map은 바닐라 자바에 내장된 메소드로
함수를 인수로 취합니다
이 배열의 모든 요소에
실행된 함수입니다
그리고 우리가 원하는 요소가 나왔을 때
함수는 True 가 됩니다
그러면 find는 그 요소를 반환하게 되고
찾은 요소가
SelectedProject에 저장됩니다
이제 project 속성을 사용하여
SelectedProject 컴포넌트로 패스 할 수있는
선택된 프로젝트가 생깁니다
이 모든 수정사항들을
저장하고 새로고침 한 후 새로운 프로젝트를 만들어서
'이것은 첫 번째 테스트입니다' 라고 쓰고
줄 바꿈이 유지되는지 보겠습니다
날짜를 선택하고 저장하면 여기 프로젝트가 보입니다
그리고 클릭하면 오류가 생깁니다
그 이유로는 selectedProject 컴포넌트 안
Undefined의 dueDate을 읽을 수 없어서라고 나옵니다
새로 만든 SelectedProject 컴포넌트 안의
프로젝트가 정의되지 않은 것 같습니다
이렇게 프로젝트 실패에 dueDate를 접근하는 것입니다
그 이유는 앱 컴포넌트에서
HandleSelectProject를 추가했는데
SelectedProjectID를
여기 이 ID로 설정한 데에 있습니다
이 함수를 onSelect를 이용하여
ProjectSidebar의 값으로 전달했는데
ProjectSidebar에는
OnSelectProject 속성을 사용하여
제가 방금 보여드린 함수를 내장하고 있는데
이걸 그냥 버튼 쪽으로 전달한 것입니다
그리고 물론 버튼은 선택된 프로젝트의 ID를
저희에게 주지 못하므로
이 모든 작업에 대한 통제권을 더 얻기 위해
이 부분을 함수로 감싸고
이 함수 안으로 가지고 들어와서
현재 여기서 렌더링되고 있는
프로젝트의 ID를
onSelectProjcet의 값으로 전달할 수 있도록 하겠습니다
다른 말로 하면
HandleSelectProject의 값입니다
이제 이걸로 저장을 하고, 이걸 지우고
새로운 프로젝트를 다시 만들겠습니다
'작동이 되나요?'라고 쓰고 날짜를 지정합니다
이제 이걸 클릭하면
여기 프로젝트가 뜹니다
이제 여기 콘솔에도 에러가 없습니다
그리고 여기 줄 바꿈도 유지되는 걸 확인 가능합니다
이제 여기 프로젝트 상세 내용이 보입니다
이제 할 일 목록 작업을 하기 전에
이 '삭제' 버튼을 눌렀을 때
실제로 삭제가 되도록 작업을 먼저 해 보겠습니다