[Next] 내배캠 심화 프로젝트 : 투두 공유 사이트 - fullcalendar, 사이트 이용 현황

 

 

💡 심화 프로젝트 기록..

 

점점 카테고리 구분이 흐려지고 있다..

 

우리 팀..

 

💬 와이어프레임

우리 주제는 투두 공유 사이트! 계속 만들었던 투두를 좀 더 발전시킨 ~ 😶

주제 정하고 와이어프레임 짜는데 하루 반? 정도가 걸렸다.

생각보다 오래 걸렸지만 그래도 구체적으로 얘기하고 넘어가는게 좋은 거 같다.

 

💬 github issue & PR

해리님이 이슈 활용 특강을 해주셔서.. 🥹 열심히 활용하려고 하고 있다.

언젠간 멋드러지게 쓰겠지..

 

또한 PR 특강도 해주셨다.

원래 따로 본문을 안 쓰고 날리기만 했었는데, 이렇게 보니 내가 맡은 일 기록하기에 좋은 거 같다.

다른 분들 구현하신 내용 파악하는데도 좋다!

 

💬 기능 구현 : 캘런더, Todo & User 현황, Footer

우선 캘린더! 기획 단계에서 tui 캘린더를 쓰기로 했었지만 next 여서인지 불러오기에 실패하고..

다른 캘린더 라이브러리를 찾다가 react calendar 랑 fullcalendar 중 풀캘린더를 선택했다.

 

fullcalendar 에서 활용할 수 있는 기능들이 많았는데, (날짜 클릭해서 일정을 추가한다던가)

우리는 따로 할 일 등록 페이지를 만들기로 해서 캘린더는 일정 확인용으로만 만들었다.

[React] fullcalendar 리액트 캘린더 구현 ~ next.js

 

서비스 소개 페이지에 현재까지의 투두, 유저 현황을 볼 수 있도록 했다. 

작고 소중한 숫자들..

 

완료 투두는 우리가 isDone 속성을 따로 안만들어서

투두의 end 날짜가 어제 날짜보다 작다면 완료 투두로 간주하기로 했다.

const { data: todos } = await supabase.from('TodoList').select('*');
const { data: users } = await supabase.from('usersAccounts').select('*');

const today = new Date(); // 오늘 날짜
const deadline = new Date(today.setDate(today.getDate() - 1)); // 어제 날짜

const todosNum = todos?.length; // 투두 개수
const usersNum = users?.length; // 유저 명수
const doneTodos = todos?.filter((todo) => new Date(todo.end) < deadline); // 완료된 투두리스트
const doneTodosNum = doneTodos?.length; // 완료 투두 개수

그 아래 들어가는 닭들..

 

 

푸터는 daisy UI 를 사용했고, (틀 잡기에 편하지만 세세한건 tailwind 랑 같이 이용!)

화살표 버튼을 누르면 상단으로 이동되게 했다.

  const moveToTop = () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth', // 천천히 올라가도록
    });
  };

 

그리고 이건 활용했던 tailwind css

[CSS/Next] tailwind text-shadow 폰트 그림자 넣기

[CSS/Next] tailwind drop-shadow 태그에 그림자 넣기

데이터 정리 겸 올려 본..

 

 

 

🔗 https://www.youtube.com/watch?v=PEPl1VwTRTI