Unit 11. [실습] 나만의 아고라 스테이츠 만들기

📣 나만의 아고라 스테이츠 만들기

1️⃣ Bare Minimum Requirment

 

✔️ 디스커션 나열 기능

// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element) => {
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    element.append(convertToDiscussion(agoraStatesDiscussions[i]));
  }
  return;
};

// ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링합니다.
const ul = document.querySelector("ul.discussions__container");
render(ul);

➰ 원래는 render() 사용해서 ul에 디스커션 하나하나 li로 추가해줬다.


✔️ 디스커션 추가 기능
➰ 빈 객체를 생성해서 추가한 데이터를 넣어주고, 그 객체를 agoraStatesDiscussions 배열에 추가해줬다.


✔️ CSS


✔️ Github 배포

https://jieuny0314.github.io/fe-sprint-my-agora-states/

 

---

 

2️⃣ Advanced Challenge

📌 Advanced 하면서 디스커션 나열, 추가 기능 수정

✔️ 현지 시간 적용

➰ new Date().toLocaleString() 사용

//convertToDiscussion(obj, itemLi) 함수
let localeDate = new Date(obj.createdAt).toLocaleString();

//버튼 눌렀을 때 디스커션 추가 부분
let currentTime = new Date();
// currenTime이 convertToDiscussion() 안에서 toLocaleSting()이 적용되므로 미리 적용시키면 안된다.

 

✔️ 페이지네이션 기능

➰ displayLIst() : 화면에 디스커션 하나하나 렌더링 해주는 함수

const listElement = document.querySelector('.discussions__container');  // 디스커션 담을 ul 가져오기
const pageList = document.querySelector('.page_list');  // 페이지 목록 넣을 곳 가져오기

let discussionsCount = document.querySelector('.discussions__count');

let currentPage = 1;  //초기화하면 시작 페이지
let rows = 10; //한 목록에 보여줄 아이템

let firstPage = 1;  // 처음 펲이지

function displayList(items, wrapper, rows_per_page, page){  // 화면에 렌더링 함수(렌더링 할 요소, 어디에 append 할건지, 한 페이지에 표시할 디스커션 개수, 현재 페이지) 
  wrapper.innerHTML = '';
  page--; // 배열 0부터 돌아야되니까 -- 해주기

  let start = rows_per_page * page;  // 현재 페이지에 보여줄 첫번째 아이템 몇번째 인지
  let end = start + rows_per_page;  // 현재 페이지에 보여줄 마지막 아이템 몇번째인지
  let paginatedItems = items.slice(start, end);  // 배열에서 현재 페이지 첫번째 아이템부터 마지막 아이템까지 가져오기
  
  for(let i = 0; i < paginatedItems.length; i++){ // 현재 페이지의 아이템 불러오기
    let item = paginatedItems[i]; // 현재 페이지에 들어갈 아이템 넣어주기

    let itemElement = document.createElement('li'); // 한 디스커션이 하나의 li이므로 li 생성
    itemElement.className = "discussion__container";

    wrapper.append(itemElement);  // ul에 li 넣어주고

    convertToDiscussion(item, itemElement); // 만든 li에 각 객체 요소 넣어주기

  }
}

➰ setupPagination(): 페이지 이동 제어함수 (pagenationButton을 페이지 수만큼 호출)

// 페이지 이동 제어 함수
function setupPagination(items, wrapper, rows_per_page) {
  wrapper.innerHTML = '';

  let page_count = Math.ceil(items.length / rows_per_page); // 총 필요한 페이지 수 구하기
  for(let i = 1; i < page_count + 1 ; i++){	// 여기서 i는 페이지 번호를 의미한다.
    let btn = paginationButton(i, items);	
    pageList.append(btn);
  }
}

➰ paginationButton() : 페이지 버튼 생성 + 클릭하면 페이지 이동해주는 함수

// 페이지 버튼 생성 + 버튼 누르면 페이지 이동해주는 함수 
function paginationButton(page, items) {
  let paginationBtn = document.createElement('button');	// 페이지 버튼 생성

  paginationBtn.innerText = page;	// 현재 생성한 페이지가 몇번째 페이지인지 

  if(currentPage === page) {	// 현재 페이지가 내가 누른 페이지면
    paginationBtn.classList.add('active');	// 그 페이지 버튼에 active 주기 (색 다른 CSS추가)
  }

  paginationBtn.addEventListener('click', function() {
    currentPage = page;	// 현재 페이지를 지금 누른 페이지로 바꿔준다.
    displayList(items, listElement, rows, currentPage);	// 현재 페이지의 디스커션을 렌더링 해주기 위해 호출

    let currentBtn = document.querySelector('.page_list .active');  // 현재 active 되어있는 버튼 가져와서
    currentBtn.classList.remove('active');  // active 지워주고

    paginationBtn.classList.add('active');  // 지금 누른 버튼에 active 해주기
  })  

  return paginationBtn;	// 현재 만든 버튼을 반환
}

➰ 페이지네이션 '<' '>' 누르면 이전 페이지, 다음페이지로 이동
🚨 items이 선언된 함수 안에서 구현한게 아니라서 items 를 받아올 수 없다.
그래서 로컬 스토리지에 저장된 데이터를 displayList()에 넘겨줘서 디스커션을 렌더링해왔다.

leftBtn.addEventListener('click', function(clickedPage) {
  if(currentPage > firstPage){  // 1페이지일 경우 전 페이지로 안간다.
    let currentBtn = document.querySelector('.page_list .active');
    currentBtn.classList.remove('active');  // 지금 활성화 되어있는 버튼 끄고
    let prevBtn = currentBtn.previousSibling; // 지금 활성화 되어있는 버튼의 이전 형제를 가져온다.
    prevBtn.classList.add('active');
    currentPage = currentPage - 1;  // 현재 페이지를 지금 페이지 - 1 해주기
    displayList(JSON.parse(localStorage.getItem('Discussions')), listElement, rows, currentPage); // items를 전달받지 못해서 현재 데이터로 렌더링 해주기
  }
  else{
    alert('첫번째 페이지입니다.');
  }
});

rightBtn.addEventListener('click', function() {
  let lastPage = Math.ceil(JSON.parse(localStorage.getItem('Discussions')).length / rows);  // 마지막 페이지
  if(currentPage < lastPage) {  // 마지막 페이지일 경우 다음 페이지로 안간다.
    let currentBtn = document.querySelector('.page_list .active');
    currentBtn.classList.remove('active');
    let nextBtn = currentBtn.nextSibling;
    nextBtn.classList.add('active');
    currentPage = currentPage + 1;
    displayList(JSON.parse(localStorage.getItem('Discussions')), listElement, rows, currentPage);
  }
  else{
    alert('마지막 페이지입니다.');
  }
});

📌 참고 : Pagination in JavaScript

✔️ 디스커션 유지 기능

➰ 'localStorage가 빈 경우' 와 '내가 추가한 데이터가 있어서 차있는 경우' 를 나눠서 구현

// 경우의 수 두개 나누지 않으면 discussions이 계속 초기화 되서 추가한 데이터가 날아감.
if(localStorage.length === 0){  // 저장된 데이터가 없으면 (내가 추가한 거 없을 때)
  localStorage.setItem('Discussions', JSON.stringify(agoraStatesDiscussions));  // 로컬 스토리지에 이미 주어진 agoraStatesDiscussion 데이터 저장
  discussions = JSON.parse(localStorage.getItem('Discussions'));  // 로컬 스토리지에 저장한 데이터 담아주기
  displayList(discussions, listElement, rows, currentPage); // 화면에 담아온 데이터 그려주기
  setupPagination(discussions, pageList, rows); // 페이지네이션 그려주기
}

else{ // 추가 한 게 있을 때
  discussions = JSON.parse(localStorage.getItem('Discussions'));  // 추가한게 있을 경우에는 로컬 스토리지에 이미 저장되어 있는 데이터를 받아온다.(내가 추가한 데이터까지 포함되어있음)
  displayList(discussions, listElement, rows, currentPage);
  setupPagination(discussions, pageList, rows);
}

// js 전체에 구현해준다. -> 새로고침하거나 페이지 이동했을 때 새로운 화면을 보여줘야하니까

➰ 버튼 눌러서 디스커션 추가했을 경우 그 디스커션을 localStorage 에 저장해준다.
➰ input에 빈칸이 있으면 추가 안되고 alert 띄운다.

// submit 누르면 디스커션 추가하는 기능 만들기
const submitBtn = document.querySelector('.form__submit');
let discussions= [];  // 로컬 스토리지에 있는 데이터 담을 배열 선언

submitBtn.addEventListener('click', function(e) {
  e.preventDefault();
  let nameValue = document.querySelector('#name').value;
  let titleValue = document.querySelector('#title').value;
  let storyValue = document.querySelector('#story').value;
  let form = document.querySelector('.form');
  let currentTime = new Date();
  
  const newDiscussion = {
    id: 'random id',
    createdAt: currentTime,
    author: nameValue,
    title: titleValue,
    body: storyValue,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
    avatarUrl: "./images/계피_.png",
    answer: null  // 안 넣어주면 answer null 아닌거 if문에 걸려서 오류난다.
  };
  if(nameValue !== '' && titleValue !== '' && storyValue !== '' ){	// 빈칸 없으면
    agoraStatesDiscussions.unshift(newDiscussion);  // 데이터 배열에 새로만든 객체 추가

    discussions.unshift(newDiscussion); // 원래 discussions 배열에 추가한 데이터 객체 추가해주고

    localStorage.setItem('Discussions', JSON.stringify(discussions)); // 추가한 데이터가 더해진 discussions를 다시 로컬 스토리지에 데이터로 넣어준다.
    
    discussionsCount.innerText = '( ' + discussions.length + ' )';  // 디스커션 개수 업데이트

    displayList(JSON.parse(localStorage.getItem('Discussions')), listElement, rows, currentPage); // 새로운 데이터 추가했을 때도 화면에 그려줘야 하므로 호출
    setupPagination(JSON.parse(localStorage.getItem('Discussions')), pageList, rows); // 데이터가 늘었을 때 페이지 수가 늘어날 수 있으므로 호출
    
    form.reset();
  }
  else {	// 빈칸 있으면 alert
    alert('모두 입력해주세요.');
  }
});

📌 localStroage 설명은 여기로

✔️ 답변 있으면 답변 박스도 렌더링

 if(obj.answer !== null){	// 답변 있으면 이모지 띄우고
    answeredCheck.textContent = '💬';
  }
  discussionAnswered.append(answeredCheck);

if(obj.answer !== null) {
    // 답변 전체 박스
    const answeredContainer = document.createElement("div");
   answeredContainer.className = "answered__container";
   answeredContainer.classList.add('hide');		// 처음엔 안보이게 했다가


    itemLi.append(answeredContainer);

    answeredCheck.addEventListener('click', function() {	// 이모지 누르면 보이게
      answeredContainer.classList.toggle('hide');	// 보였다 안보였다
    });

 

✔️ 바탕화면에 움직이는 이미지 만들기 (화면에 닿으면 공처럼 튕겨나온다)

➰ canvas 사용

➰ init() : 초기화 함수

let canvas = document.createElement('canvas');  // 원들이 움직일 캔버스 생성
canvas.id = "canvas";
body.prepend(canvas);

let getCanvas = document.querySelector('#canvas'); // 캔버스 가져오기
let ctx = getCanvas.getContext('2d');

getCanvas.setAttribute("width", window.innerWidth);
getCanvas.setAttribute("height", window.innerHeight);

let canvasWidth = getCanvas.width, canvasHeight = getCanvas.height;  // 캔버스 크기 담기

let circle = [
  { x: 100, y: 100, radius: 80} // 공 좌표, 반지름 
]
let dx = 4;
let dy = 4; // 공 속도 조절

let anim; // 애니메이션 담을 변수

function init() {
  anim = window.requestAnimationFrame(draw);  // 적절한 타이밍에 draw 함수를 계속 호출한다.
}

➕ requestAnimationFrame() 이란?

➰ 부드러운 애니메이션 구현을 위해 사용한다.

➰ 매개변수로 콜백함수를 받는데, 리페인트 이전에 실행할 함수이다.

➰ draw() : 실제 도형, 이미지를 화면에 그려주는 함수

function draw() {
  clear();

  for(let i = 0; i < circle.length; i++){
    ball(circle[i].x, circle[i].y, circle[i].radius);
    circle[i].x += dx;  // x 좌표가 계속 늘어나게
    circle[i].y += dy;  // y 좌표가 계속 늘어나게
 
    if(circle[i].x >= canvasWidth - circle[i].radius || circle[i].x <= 0 + circle[i].radius){
      dx = -dx; // 왼쪽이나 오른쪽 벽에 닿으면 - 값을 곱해줘서 반대 방향으로 가게끔
    }
    if( circle[i].y >= canvasHeight - circle[i].radius || circle[i].y <= 0 + circle[i].radius){
      dy = -dy;
    }
  }
    anim = window.requestAnimationFrame(draw);
}

➰ clear() : 캔버스 초기화 해주는 함수

// canvas 초기화함수
function clear() {  // 매 호출 시 캔버스를 비워준다.
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}

➰ ball() : 공 그려주는 함수

// 공 그려주는 함수
function ball(x, y, r) {
  let img = new Image();
  img.src = './images/cinnamon.png';
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  ctx.drawImage(img, x-80, y-80, 160, 160);
}

 

✔️ 상단바에 메뉴 누르면 닫기, 탭으로 내리기, 확대 & 축소
➰ 누르면 사라지거나 크기 변화 할 요소에 class 제거, 추가 하는 방식으로 구현

/* 메뉴 버튼 누르면 */
let exitBtn = document.querySelector('.exitBtn');
let downBtn = document.querySelector('.downBtn');
let smallBtn = document.querySelector('.smallBtn');
let agorastatesTab = document.querySelector('.agorastatesTab');


exitBtn.addEventListener('click', function() {
  main.classList.add('exit');
});

downBtn.addEventListener('click', function() {
  agorastatesTab.classList.remove('change__opacity__zero');
  agorastatesTab.classList.add('change__opacity__one');
  main.classList.add('down');
  main.classList.remove('up');
});


agorastatesTab.addEventListener('click', function() {
  agorastatesTab.classList.remove('change__opacity__one');
  agorastatesTab.classList.add('change__opacity__zero');
  main.classList.add('up');
  main.classList.remove('down');
});


smallBtn.addEventListener('click', function() {
  if(main.classList.contains('sizeBig')){
    main.classList.remove('sizeBig');
    main.classList.add('sizeSmall');
  }
  else {
    main.classList.add('sizeBig');
    main.classList.remove('sizeSmall');
  }
});

 

➰ 아쉬운점

반응형 레이아웃으로 구현하지 않은 것
코드 리팩토링 하지 않은 것

 

📣 구현 화면