D+19 / 아고라 스테이츠 만들기 - 도전 과제

* Bare Minimum Requirement (최소 요구 사항)

• 디스커션 나열 기능
  • 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 형식에 따른다.
    
    
    
    

* 결과물

* 부족한 부분

• 함수에서 받아오는 매게변수 있는지 확인 하기

  const avatarImg = document.createElement("img");
   avatarImg.src = obj.avatarUrl; 
  // obj대신 agoraStatesDiscussions[0] 이렇게 입력했었어서, 동일한 데이터만 중복으로 여러개 나왔다.
  // for문 이용해서 인덱스로 해보려고 했는데 안되서 한참 고민을 했는데...
  // 하단 render함수에서 agoraStatesDiscussions[i]로 태그 추가하는 함수 호출하고 있었기 때문에, obj로 들어가면 간단히 해결된다.
  // **항상 함수 실행되는 부분 먼저 확인하기 **

• new Date().toISOString()
  • new Date() : 내장 객체 사용하면, 현지 시간 생성된다.
  • .toISOString() : 날짜 형식
• form에 입력하고 submit한 내용 추가

  const form = document.querySelector("form");
   const title = document.querySelector("div.form__input--title > input");
   const nameInput = document.querySelector("div.form__input--name > input");
   const textbox = document.querySelector("div.form__textbox > textarea");
   form.addEventListener("submit", (event) => {
   event.preventDefault();
   //새로운 객체를 만들어야한다
   //input에 입력된 값(value)를 넣은 새로운 객체
   //새로운 객체를 ul요소 앞으로 넣어준다.
   // 더미데이터(agoraStatesDiscussions)에도 추가해준다. ( 더미데이터는 기존에 가지고있던 데이터)- 기존데이터에 넣어주는건 안전장치
   const obj = {
     id: "unique id", //id는 나중에 배움..?!@?#?
     createdAt: new Date().toISOString(),
     title: title.value,
     url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
     author: nameInput.value,
     answer: null,
     bodyHTML: textbox.value,
     avatarUrl:
       "https://avatars.githubusercontent.com/u/97888923?s=64&u=12b18768cdeebcf358b70051283a3ef57be6a20f&v=4",
   };
   agoraStatesDiscussions.unshift(obj);
   const newDiscussion = convertToDiscussion(obj); // 위에 디스커션 추가해주는 함수불러와서 적용
   ul.prepend(newDiscussion);
   });

  $ element.prepend() : element의 첫번째 자식 앞에 객체를 추가한다.

• css에서 색상 적용시 root사용하면 변수로 간단하게 입력할 수 있다.

  :root {
    --purple: blueviolet;
   }
   textarea:focus {
     outline: 2px solid var(--purple);
   }

• submit 시, 새로고침 막는 방법
  1 . form 태그에 onsubmit 속성 추가

  <form action="" method="get" class="form" onsubmit="return false;">

  2 . form eventlistener 함수에 event.preventDefault(); 넣기

  const form = document.querySelector("form");
  form.addEventListener("submit", (event) => {
  event.preventDefault();
  });
  

* Advanced Challenge (도전과제

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