[유데미 러닝크루] Next.js 스터디 4주차 – 파일 기반 라우팅 완벽 정리! 동적 경로 & 필터링까지

// pages/events/[eventId].js
import { useRouter } from "next/router";
import { getEventById } from "../../helpers/api-util";
import EventSummary from "../../components/event-detail/event-summary";
import EventLogistics from "../../components/event-detail/event-logistics";
import EventContent from "../../components/event-detail/event-content";

export default function EventDetailPage(){
  const router = useRouter();
  const { eventId } = router.query;
  const event = getEventById(eventId);

  if (!event) return <p>Loading...</p>;

  return (
    <>
      <EventSummary title={event.title} />
      <EventLogistics date={event.date} address={event.location} image={event.image} imageAlt={event.title} />
      <EventContent><p>{event.description}</p></EventContent>
    </>
  );
}

// pages/events/[...slug].js
import { useRouter } from "next/router";
import { getFilteredEvents } from "../../helpers/api-util";
import EventList from "../../components/events/event-list";
import ErrorAlert from "../../components/ui/error-alert";

export default function FilteredEventsPage(){
  const router = useRouter();
  const slug = router.query.slug;

  if (!slug) return <p>Loading...</p>;

  const year = +slug[0];
  const month = +slug[1];

  if (isNaN(year) || isNaN(month) || year < 2020 || year > 2030 || month < 1 || month > 12) {
    return <ErrorAlert><p>Invalid filter. Please check values!</p></ErrorAlert>;
  }

  const events = getFilteredEvents({ year, month });

  if (!events || events.length === 0) {
    return <ErrorAlert><p>No events found!</p></ErrorAlert>;
  }

  return <EventList items={events} />;
}

// components/events/events-search.js
import { useRef } from "react";
import { useRouter } from "next/router";

export default function EventsSearch(){
  const router = useRouter();
  const yearRef = useRef();
  const monthRef = useRef();

  function submitHandler(e){
    e.preventDefault();
    const y = yearRef.current.value;
    const m = monthRef.current.value;
    router.push(`/events/${y}/${m}`);
  }

  return (
    <form onSubmit={submitHandler}>
      <select ref={yearRef} defaultValue="2023">
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
      </select>

      <select ref={monthRef} defaultValue="5">
        {Array.from({length:12}).map((_,i)=>(
          <option key={i+1} value={i+1}>{i+1}</option>
        ))}
      </select>

      <button>찾기</button>
    </form>
  );
}

// components/ui/button.js (예시)
import Link from "next/link";
export default function Button({ link, children }){
  if (link) return <Link className="btn" href={link}>{children}</Link>;
  return <button className="btn">{children}</button>;
}