✅ 오늘한 일
질문 작성 페이지 구현
해당 페이지를 작성할 때 가장 고생했던 부분은 배경에 이미지를 넣는 것이었다. 로봇이랑 체크 박스가 담긴 이미지 인데 svg파일로 되어있고 원하는 위치에 올리는 것이 너무 힘들었지만 div로 감싸서 위치를 맞추고 배경을 넣었더니 해결이 되었다. (동기분의 조언으로 완료!!)
제목과 내용이 비어있을 경우 empty title, body라는 내용이 출력되도록 유효성 검사까지 진행했다.
제목과 내용을 작성하고 post yourt question버튼을 클릭했을 때 axios.post를 사용하여 데이터가 서버쪽에 담기는 지 확인하기위해 JSON 서버를 사용하여 API 명세서에 맞춰 틀을 구현하였다. 아직 백엔드분들이 서버 로직을 구현하는 단계였기 때문에 확인을 하려면 JSON 서버를 사용하는 것이 가장 빠른 방법이라고 생각했기 때문이다.
post메서드가 정상적으로 작동하여 JSON 서버 db에 담기는 것 까지 확인하였다. 추후 서버와 연동시 URL 주소와 CORS 부분을 해결하면 동작 가능하도록 코드를 작성했다.
오른쪽 사이드바 구현
오른쪽 사이드바는 원래 페이지에서는 계속 스텝이 변화하면서 바뀌는 식으로 나오게 되지만 CRUD 기능에 조금더 힘을 쏟기 위해 간단하게 Step1만 틀로 구현하였다. 아코디언 형식으로 보고싶은 곳을 클릭했을 때 내용이 나오고 열려있던 내용은 닫히는 것을 구현했다.
스터디에서 컴포넌트 만들기를 한주에 하나씩 구현해내는 것을 진행했었는데 이때 한번 작성해봐서 이번 프로젝트에서 구현하는데 굉장히 많은 도움이 되었다.
📌 해야할 일
- S3 배포 테스트
- 질문 보기 페이지 구현
- 질문 수정 페이지 구현
- 답변 작성 구현
- 로그아웃 드롭다운 메뉴 구현
- 백엔드와 통신하기
'Project > pre-project' 카테고리의 다른 글
| pre-project 8일차 (22.08.29. 질문 상세페이지 구현) (2) | 2022.09.06 |
|---|---|
| pre-project 7일차 (22.08.28. S3 1차 배포) (0) | 2022.09.05 |
| pre-project 5일차 (22.08.26. 메인 왼쪽 사이드바 구현) (0) | 2022.09.05 |
| pre-project 4일차 (22.08.25. Navbar 구현) (0) | 2022.09.05 |
| pre-project 3일차 (22.08.24. 파트나누기, 초기설정) (0) | 2022.09.05 |