Day10 김미진 48 post message 페이지 구현

[mijin0928]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [x] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

롤링페이퍼에 메세지 보내기 페이지 구현

• 반응형 페이지

Recipient

• 받는 사람을 작성하는 input 구현
• TextField 컴포넌트에서 InputContainer 가져와 사용
• input 값 없을 시 '값을 입력해주세요.' 오류 메시지 출력

SelectProfile

• 프로필 이미지를 선택하지 않으면 기본 이미지로 설정되며 프로필 이미지를 선택하면 선택한 이미지로 변경

텍스트 에디터

• md-editor 설치
• 디자인에 맞게 수정

SelectBox

• relationship, font 두 가지 셀렉트 박스 구현

생성하기 버튼

• Button 컴포넌트 가져와 사용
• 보내는 사람 input에 값을 서버에 POST 리퀘스트를 보내 추가
• 사용자가 선택한 프로필 이미지와 선택한 셀렉트박스의 옵션 및 작성한 내용을 서버에 POST 리퀘스트를 보내 추가
• 기본은 비활성화 상태로 받는 사람을 작성하는 input에 값이 있고 입력된 내용이 있을 시 활성화

관련 티켓 및 문서

• Related Issue #48
• Closes #48

스크린샷, 녹화

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [x] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [x] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?