캘린더 풀스택 개발: FastAPI + Next.js로 반복 일정까지 구현하기

# protocol.py
class MemberServiceProtocol(Protocol):
    def get_all(self) -> list[FamilyMemberResponse]: ...
    def create(self, data: FamilyMemberCreate) -> FamilyMemberResponse: ...
    def verify_and_link(self, email: str, firebase_uid: str) -> FamilyMemberResponse: ...

{
  "title": "학원",
  "start_time": "2024-01-15T16:00:00",
  "end_time": "2024-01-15T18:00:00",
  "recurrence_pattern": {
    "frequency": "WEEKLY",
    "weekdays": ["MO", "WE", "FR"]
  },
  "recurrence_end": "2024-12-31"
}

def get_by_date_range(self, start_date: date, end_date: date):
    results = []
 
    # 1. 일반 일정 조회
    non_recurring = self.db.query(Event).filter(
        Event.recurrence_rule.is_(None),
        Event.start_time.between(start_date, end_date),
    ).all()
 
    # 2. 반복 일정 확장
    recurring = self.db.query(Event).filter(
        Event.recurrence_rule.isnot(None),
        Event.start_time <= end_date,
    ).all()
 
    for event in recurring:
        occurrences = get_occurrences(
            rrule_str=event.recurrence_rule,
            dtstart=event.start_time,
            range_start=start_date,
            range_end=end_date,
        )
        for occurrence_date in occurrences:
            results.append(self._event_to_response(event, occurrence_date))
 
    return results

async function fetchWithAuth(url: string, options: RequestInit = {}) {
  const token = await getIdToken();
 
  const headers = {
    'Content-Type': 'application/json',
    ...(token && { Authorization: `Bearer ${token}` }),
    ...options.headers,
  };
 
  const response = await fetch(`${API_URL}${url}`, {
    ...options,
    headers,
  });
 
  if (!response.ok) {
    const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
    throw new Error(error.detail || `HTTP ${response.status}`);
  }
 
  return response.json();
}

{view === 'month' && <MonthView currentDate={currentDate} events={events} />}
{view === 'week' && <WeekView currentDate={currentDate} events={events} />}
{view === 'day' && <DayView currentDate={currentDate} events={events} />}

type Frequency = 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
type Weekday = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
 
interface RecurrencePattern {
  frequency: Frequency;
  interval?: number;
  weekdays?: Weekday[];
}

{frequency === 'WEEKLY' && (
  <div className="flex flex-wrap gap-1">
    {WEEKDAY_OPTIONS.map((opt) => (
      <Button
        key={opt.value}
        variant={weekdays.includes(opt.value) ? 'default' : 'outline'}
        size="sm"
        className="w-9 h-9 p-0"
        onClick={() => toggleWeekday(opt.value)}
      >
        {opt.label}
      </Button>
    ))}
  </div>
)}

// 화면 크기별 표시 개수
const mobileCount = 1;
const tabletCount = 2;
const desktopCount = 3;
 
// 모바일: 1개만 표시
<div className="md:hidden">
  {dayEvents.slice(0, mobileCount).map(renderEvent)}
  {dayEvents.length > mobileCount && (
    <p className="text-xs">+{dayEvents.length - mobileCount}</p>
  )}
</div>
 
// 태블릿: 2개
<div className="hidden md:block lg:hidden">
  {dayEvents.slice(0, tabletCount).map(renderEvent)}
</div>
 
// 데스크톱: 3개
<div className="hidden lg:block">
  {dayEvents.slice(0, desktopCount).map(renderEvent)}
</div>

// 문제 코드
const dateStr = date.toISOString().split('T')[0];
// 1월 3일 00:00 KST → "2026-01-02" (UTC 기준)

// 해결 코드
const getEventsForDate = (date: Date) => {
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();
 
  return events.filter((event) => {
    // 반복 일정은 occurrence_date 사용
    if (event.is_recurring && event.occurrence_date) {
      const [y, m, d] = event.occurrence_date.split('-').map(Number);
      return y === year && m - 1 === month && d === day;
    }
    // 일반 일정은 start_time 파싱
    const eventDate = new Date(event.start_time);
    return (
      eventDate.getFullYear() === year &&
      eventDate.getMonth() === month &&
      eventDate.getDate() === day
    );
  });
};

export async function getEvents(startDate: string, endDate: string) {
  const response = await fetchWithAuth(
    `/calendar/events?start_date=${startDate}&end_date=${endDate}`
  );
  // 객체에서 배열 추출
  return response?.events || [];
}

// Before: 10개의 개별 useState
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
// ...
 
// After: 단일 FormState 객체
interface FormState {
  title: string;
  description: string;
  startDate: Date;
  startTime: string;
  // ...
}
 
const [formState, setFormState] = useState<FormState>(getInitialFormState);

def test_weekly_specific_days(self):
    """매주 월, 수, 금 반복"""
    occurrences = get_occurrences(
        rrule_str="FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR",
        dtstart=datetime(2024, 1, 1, 10, 0),
        range_start=date(2024, 1, 1),
        range_end=date(2024, 1, 7),
    )
 
    assert len(occurrences) == 3
    assert date(2024, 1, 1) in occurrences  # 월
    assert date(2024, 1, 3) in occurrences  # 수
    assert date(2024, 1, 5) in occurrences  # 금

test('일정 생성 및 표시', async ({ page }) => {
  await page.goto('/');
 
  // 일정 추가 버튼 클릭
  await page.click('text=일정 추가');
 
  // 폼 작성
  await page.fill('[name=title]', '테스트 일정');
  await page.click('text=저장');
 
  // 캘린더에 일정 표시 확인
  await expect(page.locator('text=테스트 일정')).toBeVisible();
});

sudo nano /etc/nginx/sites-available/calendar.conf

server {
    server_name calendar.funq.kr;
 
    location / {
        proxy_pass http://127.0.0.1:3002;
        proxy_http_version 1.1;
 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
 
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
 
    listen 80;
}

sudo ln -s /etc/nginx/sites-available/calendar.conf /etc/nginx/sites-enabled/

sudo nginx -t
# syntax is ok 메시지 확인

sudo systemctl reload nginx

sudo certbot --nginx -d calendar.funq.kr