이번 시간에는 형식 편집을 하겠습니다
배경부터 시작하겠습니다
다시 이 모달 컴포넌트로 돌아오면
여기서 테일윈드에서 제공된 특별한 CSS 클래스를
이 대화상자에 추가할 수 있습니다
backdrop: 으로 시작하되, 엄밀히는
이 접두사를 사용하여, 대화상자 뒤에 자동으로 렌더링된
배경화면 요소에 원하는 모든 종류의
클래스를 추가할 수 있습니다
여기서는 색 설정을
bg-stone-900/90으로 하겠습니다
좀 이상한 이름이지만
약간 투명한 배경을 추가할때 쓰는 테일윈드 class 입니다
이제 추가로, 배경이 아닌 대화상자 그 자체의
모든 면에 패딩(padding)을 추가하겠습니다
모두 둥근 모서리를 추가하고
뒤에 그림자도 추가합니다
이렇게만 해도 훨씬 좋아 보입니다
하지만 안쪽 내용은 작업할 것이 아직 많습니다
이 부분을 작업하기 위해
NoProjcetsSelected 컴포넌트로 가겠습니다
여기 h2 태그에 넣어놨던 클래스를 복사합니다
그러면 이것을
재사용 가능한 요소로 만들 수 있는데요
여기선 시간을 줄이기 위해
북사 및 붙여넣기를 하겠습니다
이제 NewProjec 컴포넌트에서
이 클래스 이름을 H2태그에 넣고
그리고 이 P에 있는 클래스 이름을 가져와
모달에 있는 이 문단에 추가합니다
다시 한 번 말하지만, 재사용할 요소를 만들어서
복사 및 붙여넣기를 피할 수는 있지만
몇 개 안되는 요소에 쓰이는 클래스이므로
시간도 아끼기 위해
복사 붙여넣기를 쓰겠습니다
작업을 끝내고 보면
아까보다 좋아졌습니다
이 밑의 버튼은 아직 작업이 필요합니다
이 작업을 위해 모달 컴포넌트로 돌아와서
form에 클래스 이름을 추가합니다
여백을 추가하고, text-right class를 사용하여
문자 정렬을 오른쪽으로 맞추면
글자가 오른쪽으로 조금 옮겨집니다
또, 기본 버튼을 쓰기보다는
커스텀 버튼을 사용하겠습니다
버튼 파일(Button.jsx)에서
가져와서
종료 태그에도 붙여 주겠습니다
이제 버튼이 훨씬 나아 보일 것입니다
마지막으로
제 생각엔 문자 색이 좀 더 짙어야 할 것 같습니다
그러니 여기 형식을 약간 조정해서
제목 부분에 더 진한 색을 넣고
문단에도 진한 색을 넣겠습니다
이제 꽤 좋아보입니다
여기 이 모달은
무효한 입력값이 한 개만 있어도 뜨게 되므로
그래서 여기에 데이터 작성을 해도
날짜를 추가하지 않으면 뜨게 됩니다
하지만 날짜를 다시 추가하면
모든 입력 창에 유효한 값이 들어갔으니
저장하여 프로젝트를 추가할 수 있게 됩니다
이제 다음으로
이 취소 버튼의 작동여부도 확인해 봅시다
그러려면 당연히
NewProject 컴포넌트에서 이 취소 버튼이
앱 컴포넌트에서 상태를 변경하는 부분을
확인해야 합니다
그러면 앱 컴포넌트에서
정의되지 않은 상태로 다시 전환하여
NoProjectSelected 컴포넌트를 보여지게 하면 됩니다
그러면 앱 컴포넌트에서
새로운 함수를 하나 더 추가하겠습니다
handleCancelAddProject라고 칭하겠습니다
이 이름이 이 작업을 잘 나타내는 것 같습니다
즉 새로운 프로젝트 생성을 취소하는 작업입니다
여기에서
handleStartAddProject에 있는
이 코드를 복사하고
SelectedProjectID를 undefined라고 설정하겠습니다
그러면 이 함수에 있는 포인터가
저의 NewProject 컴포넌트로
전달되게 됩니다
그러니 여기 onCancel에
방금 작업했던 handleCancelAddProject 함수를
가져오겠습니다
NewProject 안에서
새로 추가된 onCancel 속성을 받아야 하므로
여기에 추가해서
이 취소 버튼과 연결되게 해 줍니다
그럼 여기 취소 버튼으로 와서
onClick을 추가한 뒤 onCancel을
그것의 값으로 전달하겠습니다
이제 이 버튼을 클릭하면 onClick이 실행되고
onCancel은 당연히
이 handleCancelAddProject 입니다
이것이 selectedProjectId를 undefined로 리셋시킬 것입니다
그렇게 해서
여기서 클릭을 누르면 시작 화면으로
돌아오게 됩니다
모두 잘 작동합니다
다음 시간에 마지막으로 점검해야 할 부분은
프로젝트 선택을 할 수 있게 하고
프로젝트 상세를 볼 수 있게 하는 것입니다