[SEB_FE] 나만의 아고라 스테이츠 만들기

배포 링크
https://novice-hero.github.io/fe-sprint-my-agora-states/

My Agora States

 

📄 소개

 

코드스테이츠 부트캠프에서 솔로 프로젝트로 제작한 웹 사이트입니다.
질문을 등록할 수 있고 등록된 질문들을 확인할 수 있습니다.

---

💡 구현

 

기능

• 디스커션 배열 및 추가
• 한국 시간 저장
• 로컬 스토리지 사용해서 디스커션 저장하고 불러오기
• 페이지네이션
• 모달
• Github Page 배포

디자인

• 배경화면 뒤에 반짝이는 별
• 반짝이는 제목
• 질문 등록할 때 랜덤 아바타
• 반응형 디자인

 

---

🔎 주요 기능 시연

 

페이지네이션 기능

 

모달 & 저장 기능

 

반응형 디자인

 

 

---

💢 어려웠던 점

 

디자인

디자인은 항상 어렵습니다...
요즘에 픽셀 아트가 눈에 자주 보여서 픽셀을 컨셉으로 디자인 하게 되었습니다.
어떻게든 예쁘게 보이려고 발버둥을 쳐보았습니다.

발버둥들 중에서 배경에 반짝이는 별들을 나오게 하는 방법을 한 번 소개해보겠습니다.

/* CSS */
/* 별들이 반짝반짝 */
@keyframes twinkling {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px #fff;
  animation: twinkling 1s infinite; 
  /* 애니메이션으로 무한하게 반짝 */
}

// JS
// 200개의 별들을 만들어주기
const makeStars = () => {
  const numStars = 200;
  for (let i = 0; i < numStars; i++) {
    const star = document.createElement("div");
    star.classList.add("star");
    star.style.top = `${Math.random() * 100}%`;
    star.style.left = `${Math.random() * 100}%`;
    document.body.appendChild(star);
  }
};

 

페이지네이션

 

페이지네이션을 구현하는 것이 처음이라서 막막했었습니다.
어떤 식으로 시작해야할 지 몰라서 구글링을 통해서 대충 어떻게 시작해야할지만 알아보고 만들었습니다.
무작정 만든 것이라 이게 맞는 방식인지 몰라서 이상하거나 피드백하실 부분이 있다! 싶으면 알려주십시오... 그럼 정말 감사합니다.

let currentPage = 0;
let totalDiscussons = 0;

const totalPages = () => {
  return Math.ceil(agoraStatesDiscussions.length / PAGE_LIMIT);
};

현재 페이지와 총 디스커션의 수를 담을 변수를 선언하고 0을 할당해주었습니다.

총 페이지의 수를 반환하는 함수를 만들었는데, 페이지에 컨텐츠가 가득 차지 않아도 페이지는 있어야 하므로 Math.ceil을 사용하여 구했습니다.

const addPagesNumber = () => {
  $pages.replaceChildren();
  // 총 페이지 수 만큼 탐색하여 페이지 추가
  for (let i = 1; i < totalPages() + 1; i++) {
    const span = document.createElement("span");
    span.classList.add("page");
    span.textContent = i;
    // 페이지 선택 시 페이지 span에 하이라이트 주기
    if (currentPage === i) span.classList.add("page-highlight");
    else span.classList.remove("page-highlight");
    $pages.append(span); // 페이지 추가
  }
};

총 페이지를 보여주는 함수입니다.

 

$pages.addEventListener("click", (e) => {
  if (e.target.className === "page") {
    currentPage = parseInt(e.target.textContent);
    renderPage($ul, currentPage);
  }
});

페이지를 선택하면 페이지 번호를 읽어서 currentPage를 변경합니다.

 

const start = currentPage === 0 ? 0 : (currentPage - 1) * 10;
const end = start + PAGE_LIMIT;
for (let i = start; i < end; i++) {
  if (i >= loadData.length) break;
  element.append(convertToDiscussion(loadData[i]));
}

renderPage에 있는 디스커션을 보여주는 로직입니다.
전달받은 currentPage를 시작으로 해서 디스커션을 보여줄 개수만큼 반복하여 데이터를 넣어줍니다.

 

---

😓 아쉬웠던 점

왼쪽, 오른쪽 버튼을 추가하여 움직일 수 있게 했으면 더 좋았을 것 같습니다...
다음에 페이지네이션을 구현할 때는 꼭 구현해보아야겠습니다.

 

---

👍 후기

 

구현해야 할 기능이 많지 않아 보였는데 생각보다 할 게 많았습니다.

하면서 디자인도 욕심나고, 짠 코드를 어떻게 깔끔하게 정리할 지도 고민하고, 버그도 많았고, 그 버그들 중에 엄청 간단한 이유로 안되던 것을 보고 허무하기도 했었습니다.

코드를 정리한다고는 했는데 아직도 더 깔끔하게 할 수 있을 것 같은 느낌입니다.
하지만 저는 부족해서인지 방법을 잘 모르겠습니다..ㅎ

어떻게 해야 클린 코드가 될 지... 갈 길이 멉니다.

어쨌든 직접 토이 프로젝트를 해보니 재밌었고, 깃허브 페이지로 배포까지 해서 동기들에게 피드백도 받는 것이 참 재미있었습니다.