이번 시간에는
이 내용을 늘 띄워두는 것이 아니라
프로젝트 추가를 클릭했을때만 띄우고
그 자리에 대신해서 대체(fallback) 내용을 채우겠습니다
대체 내용 작업부터 시작하겠스빈다
새로운 컴포넌트로 NoPojectSelected를 추가합니다
이 이름이 적절한 이유는 이 컴포넌트가
추가되거나 선택된 프로젝트가 없을 때를 위해서이기 때문입니다
이 파일에서 NoProjectSelected 라는
컴포넌트 함수를 내보내겠습니다
그리고 여기에 디브(div)를 반환하여
이미지를 표시하겠습니다
초기 프로젝트 파일에 있던
이 이미지입니다
이미지 밑 제목에는 '선택된 프로젝트 없음'이라고 쓰고
그 제목 밑으로 문단(p)을 추가하겠습니다
'프로젝트를 선택하거나 새로운 프로젝트를 시작하십시오 '
그 밑에 또 다른 문단으로
'새 프로젝트 추가'라는
버튼을 추가함으로써
여기 이 버튼과 같은 기능으로 컴포넌트를 보여주게 됩니다
이것을 마크업(markup)이라고 합니다
이제 형식 편집으로 넘어가서
감싸는 디브에 몇 가지 클래스를 추가하겠습니다
제일 중요한 것으로 위에 여백을 추가하고
문자는 가운데 정렬로 맞추겠습니다
추가로 이것의 너비는
사용 가능한 공간의 2/3 정도로 만들었습니다
그리고 이미지는 애셋 폴더(assets)에 있는
no-projects.png 파일을 가져와서
noProjectImage라고 칭하겠습니다
한 층위 위에서 가져오기 위해
애셋 폴더로 가서
이 no-projects.png 파일을 불러옵니다
이 img 태그에서
가져온 이미지는 소스로 지정되고
그리고 대체 텍스트는 '빈 할 일 목록'이라고 하겠습니다
이미지의 내용을 묘사하는 것입니다
Img 밑에 있는 h2 에도
형식 편집이 필요합니다
글자 크기를 키우기 위해
Text-xl 클래스를 쓰고, 글자를 굵게 표시하고
Text-stone-500을 사용하여 색을 줍니다
위에 여백을 추가하여
이미지와 h2 요소 사이에 공간을 줍니다
밑부분에도 여백을 추가합니다
똑같은 여백이기 때문에 my-4를 사용하면 되겠습니다
여기있는 이미지도 클래스가 필요합니다
w-16 클래스를 사용하여 두께감을 주고
똑같이 높이감도 추가합니다
object-contains를 사용하여 이미지가 왜곡되지 않게 하고
mx-auto로 중앙에 정렬시키겠습니다
이제 여기 이 문단의 내용인
‘프로젝트를 선택하거나 새로운 프로젝트를 시작하세요’
이 내용에도 형식을 더하겠습니다
여기에 작업할 내용은
text-stone-400으로 문자 색을 바꾸고
밑에 여백을 추가하겠습니다
버튼을 감싼 이 문단 위쪽에도
추가적으로 여백을 넣습니다
버튼에도 형식을 더해 해줍니다
이 버튼에는
프로젝트 사이드바 파일에서 썼던 클래스를
동일하게 사용하겠습니다
그러니까 이것을 새로운 컴포넌트로 내보내면
똑같은 내용의
테일윈드 CSS 클래스를 반복하지 않아도 됩니다
버튼(Button)이라는 컴포넌트 함수를 내보내서
프로젝트 사이드바의 버튼 마크업을 반환하려면
이 마크업을 복사해서
이 버튼 컴포넌트로 반환하면 됩니다
그리고 이 버튼 태그 사이에 있는 내용은
유연해야 하므로
들어오는 속성에 있는
자녀 속성을 사용해서
버튼 태그 사이에 추가하겠습니다
이제 프로젝트 사이드바 컴포넌트로 돌아가서
이 버튼을 새로운 버튼으로 바꿀 수 있습니다
이 버튼은 버튼 파일(Button.jsx)에서 가져오고
이 클래스는 지우도록 하겠습니다
여기에도 마찬가지입니다
이 작업을 NoProjectSelected에서 반복하면 됩니다
이 버튼은 이제
우리가 커스텀하여 버튼 파일(Button.jsx)에서 가져온
새로운 버튼으로 바꾸겠습니다
종료 태그에도 넣겠습니다
그렇게 하면 여기에 클래스를 추가할 필요가 없어집니다
이 커스텀 버튼으로 해야 하는 작업은
이 버튼 컴포넌트에 설정된
다른 속성들을 모아서
이 버튼에 펼치는 것입니다
바뀌지 않은 속성도 추가하겠습니다
즉 이 속성을 여기 컴포넌트에 추가해야 합니다
이제 이걸로
NoProjectSelected 컴포넌트가 어떻게 보이는지 확인하겠습니다
그러려면 앱 컴포넌트로 돌아가서
여기에 NewProject 컴포넌트가 아니라
NoProjectSelected 컴포넌트를 내보내겠습니다
나중에 이 컴포넌트는 조건부로 렌더링이 되어
이 컴포넌트를 보여주거나
NewProject 컴포넌트를 보여주는데
조건은 버튼이 클릭되었는지 여부입니다
이제 저장하고 돌아가 보면
대체 내용을 볼 수 있습니다
버튼이 여기 있는 것을 확인할 수 있습니다
다음 시간에는
버튼을 클릭할 때
NewProject 컴포넌트로 넘어가도록 작업하겠습니다