웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 7일차

썸네일 - 뤼튼 생성 AI 이미지

 

7일차에는 기록을 월별로 보는 드롭다운을 추가하겠습니다.

 

오늘의 목표 미리보기

 

🗓️ 활동 기록을 월별로 나누기 (feat. 서버)

 

우선 활동 기록을 월별로 나누려면 날짜 정보가 필요합니다.

현재 날짜 속성은 관계형으로 가져온 기록 DB의 날짜를 롤업한 속성이었습니다.

그래서 기록 DB와 노션 API를 추가로 연결해야 했습니다.

 

⭐ 노션 API로 관계형과 롤업 데이터를 사용하려면 관계형된 DB도 노션 API와 추가로 연결해야한다.

(저는 이걸 몰라서 관계형과 롤업 데이터는 API로 활용 못 하는 줄 알고 삽질 여러번 했음😂)

 

 

연결하고 난 후 postman으로 확인해보면 roollup 속성은 이런 형식으로 나타납니다.

날짜-rollup-array-date-start를 활용하면 되겠네요.

그러면 기존의 API로 데이터를 받아 오는 부분의 코드를 수정해봅시다.

 

const rollupDate = page.properties["날짜"]?.rollup?.array[0]?.date?.start || null; // 롤업 날짜
const year = rollupDate ? new Date(rollupDate).getFullYear() : "Unknown"; // 년도만
const month = rollupDate ? new Date(rollupDate).getMonth() + 1 : "Unknown"; // 월만

return { iconUrl, memberName, time, state, year, month };

// 생략

allPages.forEach((page) => {
      const { iconUrl, memberName, time, state, year, month } = page; // 년, 월 추가
      
      if (!memberTimeMap.has(memberName)) {
        memberTimeMap.set(memberName, {
          // 생략
          activityByMonth: {}, // 월 별로 나눌 기록 추가
        });
      }
      
      // 날짜 별 기록 데이터 추가
      const currentData = memberTimeMap.get(memberName);
      const monthKey = `${year}년 ${String(month).padStart(2, "0")}월`; // 토글에 나타낼 날짜 형식
      const currentMonthActivity = currentData.activityByMonth[monthKey] || {
        totalTime: 0,
        count: 0,
        stateCounts: { 좋음: 0, 보통: 0, 나쁨: 0 },
      };

      currentMonthActivity.totalTime += time;
      currentMonthActivity.count += 1;
      currentMonthActivity.stateCounts[state] = (currentMonthActivity.stateCounts[state] || 0) + 1;
      
      memberTimeMap.set(memberName, {
        // 생략
        activityByMonth: {
          ...currentData.activityByMonth,
          [monthKey]: currentMonthActivity, // 추가
        },
      });

 

최종 데이터를 log에 찍어 보면 월별로 나누어져 저장된 것을 확인할 수 있습니다!

 

 

🗓️ 월별 드롭다운 만들기 (feat. 클라이언트)

 

데이터는 월별로 나누어졌으니 이에 따른 드롭다운을 만들기만 하면 됩니다!

// 현재 날짜를 기준으로 초기화
const [selectedMonth, setSelectedMonth] = useState(() => {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, "0");
        return `${year}년 ${String(month).padStart(2, "0")}월`;
    });
    
    // 생략
    
    // 각 멤버 월별 활동 데이터 추출 후 오름차순 정렬
    const uniqueMonths = Array.from(
        new Set(
            memberData.flatMap((member) => Object.keys(member.activityByMonth))
        )
    ).sort();

{/* 드롭 다운 */}
<div className="flex justify-end items-center w-full mb-6">
    <select
        className="border border-gray-300 rounded-md px-4 py-2 bg-white"
        value={selectedMonth}
        onChange={(e) => setSelectedMonth(e.target.value)}
    >
        {uniqueMonths.map((month) => (
            <option key={month} value={month}>
                {month}
            </option>
        ))}
    </select>
</div>

 

각 월에 따른 데이터로 텍스트와 차트가 변하는 모습을 확인할 수 있습니다😎

 

 

하루에 기능 하나씩 만들면 생각보다 금방 완성될거 같다는 생각이 드네요 후후

 

 

(대충 하루에 기능 하나씩 추가하고 포스팅 했다는 뜻으로 이모티콘 쓰겠음)

 

코드를 전부 올리면 너무 길어져서 수정한 부분만 올렸는데 혹시나 전체 코드를 참고하고 싶은 분도 계실까봐...

깃허브 PR도 같이 올려서 수정된 코드만 볼 수 있도록 작업 추가 했습니다!

 

https://github.com/JoHyeonJi0408/Study-Introduction-Website/pull/1/commits/33c02a3866e714ae1451106c643d557bf0fb1d53

월별 드롭다운 추가 by JoHyeonJi0408 · Pull Request #1 · JoHyeonJi0408/Study-Introduction-Website