아고라 스테이츠 2

Descriotion

Section 1에서 배운 내용을 총 동원하여 나만의 멋진 아고라 스테이츠를 만듭니다.

My Agora States

jiwonp12.github.io

스스로 구현 완료한 부분까지 체크하여 제출합니다.

✅ 디스커션 나열 기능
- script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다.
✅ CSS
- ✅ 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다.
- ✅ style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다.
- ✅ colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다.
✅ 디스커션 추가 기능
- ✅ script.js를 수정하여 디스커션 추가 기능을 구현합니다.
- ✅ section.form__container 요소에 새로운 아고라 스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식 은 자유입니다.
- ✅ 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야 합니다.
- ✅ agoraStatesDiscussions 배열에 추가한 데이터가 실제 쌓여야 합니다.
✅ Github Page 배포
- ✅ Github Page 배포 기능을 이용하여 누구나 볼 수 있게 배포합니다.
✅ 코드스테이츠 fe-sprint-my-agora-states 리포지토리로 Pull Request
- ✅ 나만의 아고라 스테이츠를 코드스테이츠 깃허브에 Pull request합니다.
- ✅ 주어진 Pull request 형식에 따라주세요.

스스로 구현 완료한 부분까지 체크하여 제출합니다.

✅ 현지 시간 적용
- ✅ 샘플 시간을 잘 변형하여, 현지 시간에 맞게 표현합니다. (ex. 오전 10:02:17)
✅ 페이지네이션 기능
- ✅ 페이지네이션에 대해서 스스로 학습합니다.
- ✅ 한 페이지에 10개씩 디스커션이 보여야 합니다.
- ✅ 다음 페이지로 넘어갈 수 있어야 합니다.
- ✅ 이전 페이지로 돌아올 수 있어야 합니다.
- ✅ 다음 페이지가 없거나, 이전 페이지가 없는 경우 페이지를 유지해야 합니다.
✅ 디스커션 유지 기능
- ✅ LocalStorage에 대해서 스스로 학습하고, 새롭게 추가하는 Discussion이 페이지를 새로고침해도 유지되도록 제작합니다.

페이지네이션은 블로그를 참고하며 6시간 정도 ~~대가리 박고~~ 했더니 수많은 시도 끝에 성공하였다...😂😂😂

addEventListener에서 살짝 헷갈려서 에러를 몇 번 만나기도 했고 의도한 값이 나오지 않을 땐 콘솔을 통해 올바른 길을 찾아내며 완성시켰다. 로컬 스토리지는 생각보다 코드가 간단해서 금방 구현했지만 이해하기 위한 공부가 따로 필요할 것 같다.

랜더링 된 li요소를 클릭했을 때 해당요소의 agoraobj.bodyHTML을 가져와서 팝업메시지처럼 띄우고 싶었는데 결국 구현하지 못했다. 시행착오 끝에 우선 없애기로 타협을 했지만 나중에 따로 구현해 낼 것이다!!🔥🔥