SEB_FE_40 홍유진 나만의 아고라 스테이츠 만들기

[yujinyny]

Description

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

• 코드스테이츠 fe-sprint-my-agora-states 리포지토리에서 자신의 리포지토리로 fork후 과제 진행합니다.

배포 링크

Github Page 배포 링크를 아래 작성합니다

유진이의 아고라 스테이츠.

Bare Minimum Requirement Self Checklist

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

• 디스커션 나열 기능
  • [o] 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 형식에 따라주세요.

Advanced Challenge Self Checklist

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

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

My Own Self Checklist

자신이 추가로 더 구현한 기능이 있으면 아래 적어주세요.

• 답변 보러 가기 클릭 시 답변 링크로 이동
• 답변 있는 것만 ✅ 표시
• 개인적으로 form 태그 사용하는 것을 선호하지 않아 form과 input:submit 태그 대신 button 태그에 onclick 이벤트를 사용해 구현했습니다.

배포 시연 화면

아래 예시를 지우고, 자신의 과제 시연 화면을 추가합니다.

가장 자랑하고 싶은 기능

적어주세요

구현하고 싶었는데 하지 못한 아쉬운 기능

페이지네이션 - prev, next 버튼 구현
local storage - 페이지 새로고침 시 discussion data 유지

도움을 받고 싶은 부분

Advanced Challenge 문구를 제대로 확인 안 해서
페이지 버튼 리스트 출력하고 클릭 시 페이지 이동하는 방법으로 코드를 짰어요
prev, next 버튼 기능도 보완해볼게요 😊

마지막 3시간을 local storage에 쏟았는데 마무리하지 못했어요
local storage에 새로운 값 저장하고 읽어오는 것 까지는 확인했는데,
새로고침 시 local storage 값이 다시 초기화 되면서 초기값을 불러오더라구요 😂
새로고침할 때 마다 local storage를 설정해줘서 그런 거 같은데 다시 시도 해봐야겠어요!

[KKKHun2]

엄청 잘하셨네요! ㄷㄷ 짧은 시간에 다 구현하시고 저도 조금씩이라도 진행해서 완성하고싶네요!

[1224minutes]

구현도 잘하셨구 디자인도 귀엽네요 ㅎㅎ 대단하세요 수고하셨습니다 !!

[s-y-yu-legacy]

귀여운 디자인으로 구현 잘 하신 것 같아요! 저도 prev, next 버튼 부분을 을 못 보고 페이지네이션을 만들었네요. 로컬 스토리지 부분은 정보 찾기가 더 어려운 것 같아요. 남은 기간 동안 화이팅입니다!

[waymokorea]

기능구현도 완벽하시고 '답변보러가기' 까지 만드신 부분 너무 멋져요! 많이 자극 받고 갑니다 남은과정도 화이팅하세요!

[yujinyny]

코멘트 감사합니다 🙏

[rmaomina]

정말 잘 만드셨네요! 디자인이 엄청 안정적인 느낌! 페이징 구현도 멋져요! 잘 보았습니다 :)