멀티 프로젝트 환경에서 UI 분기 처리...

고민했던 세 가지 방식

URL Path로 분기

전역 상태 관리 함수를 통해 분기

const { currentProjectId } = useProjectStore()

if (currentProjectId === 'abc123') {
  // 프로젝트 A용 데이터 페칭
} else if (currentProjectId === 'def456') {
  // 프로젝트 B용 데이터 페칭
}

URL 쿼리 스트링로 분기

쿼리 파라미터 + 쿠키 + 미들웨어 조합

1. 쿼리에 project-id가 있으면 쿠키에 저장한다
2. 쿼리에 없지만 쿠키에 저장된 값이 있으면 URL에 추가해서 리다이렉트한다
3. 쿼리에도 없고 쿠키에도 없다면 사용자의 프로젝트 리스트와 기본값을 데이터 페칭으로 가져온다

미들웨어 구현

export function middleware(request: NextRequest) {
  const acceptLanguage = request.headers.get("accept-language") || "ko";
  const isAuthenticated = request.cookies.get("ATAD_ACCESS_TOKEN");
  const { pathname, searchParams } = request.nextUrl;

  // 로그인 리다이렉트 처리
  if (isAuthenticated && pathname.startsWith("/login")) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  const userLang = acceptLanguage.split(",")[0];

  // 프로젝트 ID 쿼리 스트링 유지 로직
  const projectIdFromQuery = searchParams.get("project-id");
  const projectIdFromCookie = request.cookies.get("project-id")?.value;

  let response = NextResponse.next();

  // 1. 쿼리에 project-id가 있으면 쿠키에 저장
  if (projectIdFromQuery) {
    response.cookies.set("project-id", projectIdFromQuery, {
      path: "/",
      maxAge: 60 * 60 * 24 * 7, // 7일
    });
  }
  // 2. 쿼리에 없지만 쿠키에 있으면 URL에 추가해서 리다이렉트
  else if (projectIdFromCookie && !searchParams.has("project-id")) {
    const url = request.nextUrl.clone();
    url.searchParams.set("project-id", projectIdFromCookie);
    response = NextResponse.redirect(url);
  }
  // 3. 쿼리에도 없고 쿠키에도 없다면 추후 데이터 페칭으로 처리
  // 사용자의 프로젝트 리스트와 기본 선택값을 가져올 예정
  // 필요시 여기서 기본값으로 리다이렉트 처리도 가능
  else if (!projectIdFromQuery && !projectIdFromCookie) {
    // 현재는 데이터 페칭으로 처리하도록 통과
    // const url = request.nextUrl.clone();
    // url.searchParams.set("project-id", "default-project");
    // response = NextResponse.redirect(url);
  }

  response.headers.set("x-user-lang", userLang);

  return response;
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

컴포넌트에서 프로젝트 ID 가져오기

const searchParams = useSearchParams();
const projectId = searchParams.get("project-id") as ProjectType;

console.log("projectId", projectId); // abc123, def456, ghi789 등

export default function Dashboard({
  searchParams
}: {
  searchParams: { "project-id": string }
}) {
  const projectId = searchParams["project-id"];

  // 프로젝트별 데이터 페칭
  const data = await fetchProjectData(projectId);

  return <div>{/* UI 렌더링 */}</div>;
}

실제 동작 흐름

1. /dashboard
   로 접속
2. 미들웨어에서 쿼리와 쿠키 모두 없음을 확인
3. 그대로 통과시켜서 페이지 렌더링
4. 클라이언트에서 사용자의 프로젝트 리스트를 데이터 페칭
5. 기본 프로젝트를 선택하고
   /dashboard?project-id=abc123
   으로 리다이렉트
6. 미들웨어에서 쿼리의 project-id를 쿠키에 저장

1. /settings
   로 이동
2. 미들웨어에서 쿼리에는 없지만 쿠키에
   abc123
   이 있음을 확인
3. /settings?project-id=abc123
   으로 리다이렉트
4. 페이지에서 쿼리 파라미터로 프로젝트 ID를 읽어서 사용

1. 드롭다운에서
   def456
   선택
2. /dashboard?project-id=def456
   으로 리다이렉트
3. 미들웨어에서 새로운 project-id를 쿠키에 저장
4. 이후 모든 페이지 이동에서
   def456
   이 자동으로 유지됨

마치며