이 포스팅에서는 일일 달성률을 월간 달력에 시각적으로 표시하는 방법을 설명합니다. 각 날짜에 대한 달성률에 따라 달성률이 높은 날에는 다른 스티커를 붙이는 것처럼 시각적으로 표현하여, 달성률을 직관적으로 확인할 수 있도록 구현합니다참고: achievement 데이터를 패치하는 것은 이전 글에서 다뤘으므로, 이번 글에서는 생략합니다. 1. 타일 콘텐츠 함수각 날짜 타일에 달성률에 따른 아이콘을 표시// pages/index.tsx// 타일 콘텐츠 함수const tileContent = ({ date }: { date: Date }) => { const dateString = dayjs(date).format('YYYY-MM-DD'); // 날짜를 문자열로 변환 const achievement = mo..

이 포스팅에서는 사용자별 일일 달성률을 시각화하는 도넛 차트를 구현하는 방법을 설명합니다. 프론트엔드 1. 일일 달성률 데이터 가져오기우선, 일일 달성률 데이터를 가져와서 도넛 차트에 전달하는 작업을 합니다. 이 과정은 메인 페이지 컴포넌트에서 수행됩니다.// pages/index.tsxuseEffect(() => { const fetchAchievement = async () => { const res = await fetch(`/api/achievement/get?user_id=${currentUser.user_id}&date=${dayjs(selectedDate).format('YYYY-MM-DD')}`); if (res.ok) { const data = await res.js..

이 포스팅에서는 음식 및 운동을 등록할 때 하루의 달성률을 계산하고 저장하는 방법을 설명합니다. 하루에 이미 등록된 달성률이 있는지 확인하고, 없으면 생성(Create)하고, 있으면 업데이트(Update)하는 과정을 다룹니다.  데이터베이스 스키마  achievement 테이블model achievement { id Int @id @default(autoincrement()) user_id Int // 해당 기록을 보유한 사용자 ID date DateTime // 달성률이 기록된 날짜 achievement Int // 계산된 달성률 user users @relation(fields: [user_id], referen..

이번 글에서는 일반 참여자가 채팅방을 나가는 기능을 구현하는 방법에 대해 설명합니다. 사용자가 채팅방을 나가면, 데이터베이스에서 해당 사용자의 정보를 삭제합니다.  프론트엔드  1. 채팅방 나가기 버튼{isOwner ? ( ) : ( )}일반 참여자는 채팅방 나가기 버튼이 보이며, 이 버튼을 클릭하면 handleLeaveRoom 함수가 호출됩니다. 2. handleLeaveRoom 함수const handleLeaveRoom = async () => { if (!currentUser) { alert("유효하지 않은 사용자입니다."); // 사용자가 유효하지 않을 경우 경고 메시지 return; } if (..

이번 포스팅에서는 방장이 채팅방에서 공지사항을 작성하고 표시하는 기능을 구현하는 방법에 대해 설명합니다. 또한 공지사항의 접기와 "오늘 하루 보지 않기" 상태를 저장하여 상태를 관리하는 방법도 다룹니다.  데이터베이스 스키마notice 테이블model notices { id Int @id @default(autoincrement()) chatroom_id Int title String content String created_at DateTime @default(now()) chatroom chatrooms @relation(fields: [chatroom_id], references: [id], onDelete: Cascade) @@inde..

방장이 특정 사용자를 강제로 퇴장시키는 기능에 대해서 설명하겠습니다. 프론트엔드 1. 참여 사용자 목록 가져오기특정 채팅방의 사용자 목록을 가져오는 API를 호출하여 참여 사용자 목록을 상태에 저장합니다.const fetchParticipatingUsers = async () => { const res = await fetch(`/api/community/current-chatroom-info?roomId=${roomId}&action=users`); const data = await res.json(); setParticipatingUsers(data); // 참여 사용자 목록을 상태에 저장}; 2. 방장 여부 확인현재 사용자가 방장인지 확인하기 위해 채팅방 정보를 가져오는 API를 호출합니다.c..