feat: 데스크톱 앱 로그인 핸드오프 페이지 추가 (/auth/desktop) (#385)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: sumi-0011

apps/web/src/app/(noLocale)/auth/desktop/page.tsx

@@ -0,0 +1,58 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { css } from '_panda/css';
+
+import { getServerAuth } from '@/auth';
+import { buildDesktopCallbackUrl, isValidDesktopRedirect } from '@/constants/desktopAuth';
+import { COOKIE_KEY } from '@/constants/storage';
+import { DEFAULT_LOCALE } from '@/i18n/routing';
+
+export default async function DesktopAuthEntryPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ redirect_uri?: string; state?: string }>;
+}) {
+  const { redirect_uri, state } = await searchParams;
+
+  if (!redirect_uri || !state || !isValidDesktopRedirect(redirect_uri)) {
+    return (
+      <main className={mainCss}>
+        <h1 className={headingCss}>잘못된 요청</h1>
+        <p className={descCss}>
+          {!redirect_uri || !state
+            ? '필수 파라미터(redirect_uri, state)가 누락되었습니다.'
+            : 'redirect_uri가 허용 범위를 벗어났습니다. GitAnimals 데스크톱 앱을 통해 다시 시도해주세요.'}
+        </p>
+      </main>
+    );
+  }
+
+  const session = await getServerAuth();
+  if (session?.user?.accessToken) {
+    redirect(buildDesktopCallbackUrl(redirect_uri, session.user.accessToken, state));
+  }
+
+  const locale = cookies().get(COOKIE_KEY.locale)?.value ?? DEFAULT_LOCALE;
+  const params = new URLSearchParams({ redirect_uri, state }).toString();
+  redirect(`/${locale}/auth/desktop?${params}`);
+}
+
+const mainCss = css({
+  backgroundColor: 'white',
+  w: '100dvw',
+  h: '100dvh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 16px',
+});
+
+const headingCss = css({
+  textStyle: 'glyph40.bold',
+  marginBottom: '12px',
+});
+
+const descCss = css({
+  textStyle: 'glyph16.regular',
+});

apps/web/src/app/[locale]/auth/desktop/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { css } from '_panda/css';
+
+import { login } from '@/components/AuthButton';
+import { buildDesktopCallbackUrl, isValidDesktopRedirect } from '@/constants/desktopAuth';
+import { useClientSession } from '@/utils/clientAuth';
+
+export default function DesktopAuthPage() {
+  const params = useSearchParams();
+  const redirectUri = params.get('redirect_uri');
+  const state = params.get('state');
+
+  const { status, data } = useClientSession();
+
+  const isValid = isValidDesktopRedirect(redirectUri) && !!state;
+
+  useEffect(() => {
+    if (!isValid) return;
+
+    if (status === 'authenticated' && data?.user?.accessToken) {
+      window.location.replace(buildDesktopCallbackUrl(redirectUri!, data.user.accessToken, state!));
+    } else if (status === 'unauthenticated') {
+      login(
+        `/auth/desktop?redirect_uri=${encodeURIComponent(redirectUri!)}&state=${encodeURIComponent(state!)}`,
+      );
+    }
+  }, [status, isValid, redirectUri, state, data?.user?.accessToken]);
+
+  if (!isValid) {
+    return (
+      <div className={pageRootCss}>
+        <div className={cardCss}>
+          <h1 className={titleCss}>잘못된 요청</h1>
+          <p className={descCss}>
+            redirect_uri가 허용 범위를 벗어났거나 필수 파라미터가 누락되었습니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const message =
+    status === 'authenticated' ? '데스크톱 앱으로 이동합니다…' : '로그인으로 이동합니다…';
+
+  return (
+    <div className={pageRootCss}>
+      <div className={cardCss}>
+        <p className={loadingTextCss}>{message}</p>
+      </div>
+    </div>
+  );
+}
+
+const pageRootCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '100vh',
+  padding: '24px',
+  bg: 'linear-gradient(180deg, #000 0%, #004875 38.51%, #005B93 52.46%, #006FB3 73.8%, #0187DB 100%)',
+  color: 'white',
+  _mobile: {
+    padding: '16px',
+  },
+});
+
+const cardCss = css({
+  borderRadius: '16px',
+  background: 'rgba(255, 255, 255, 0.1)',
+  backdropFilter: 'blur(7px)',
+  padding: '40px',
+  width: 'fit-content',
+  minWidth: '520px',
+  maxWidth: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+  _mobile: {
+    minWidth: '100%',
+    padding: '24px 16px',
+    background: 'rgba(255, 255, 255, 0.08)',
+  },
+});
+
+const titleCss = css({
+  textStyle: 'glyph28.bold',
+  color: 'white',
+  _mobile: { textStyle: 'glyph24.bold' },
+});
+
+const loadingTextCss = css({
+  textStyle: 'glyph20.regular',
+  color: 'white.white_70',
+});
+
+const descCss = css({
+  textStyle: 'glyph16.regular',
+  color: 'white.white_80',
+  textAlign: 'center',
+});

apps/web/src/constants/desktopAuth.ts

@@ -0,0 +1,13 @@
+export const DESKTOP_REDIRECT_PATTERN =
+  /^http:\/\/127\.0\.0\.1:(2333[8-9]|2334[0-2])\/auth\/callback$/;
+
+export function isValidDesktopRedirect(url: string | null | undefined): url is string {
+  return typeof url === 'string' && DESKTOP_REDIRECT_PATTERN.test(url);
+}
+
+export function buildDesktopCallbackUrl(redirectUri: string, token: string, state: string): string {
+  const url = new URL(redirectUri);
+  url.searchParams.set('token', token);
+  url.searchParams.set('state', state);
+  return url.toString();
+}

apps/web/src/middleware.ts

@@ -4,7 +4,7 @@ import createMiddleware from 'next-intl/middleware';
 
 import { routing } from './i18n/routing';
 
-const publicPages = ['/', '/auth', '/event/HALLOWEEN_2024', '/event/CHRISTMAS_2024', '/test/ranking'];
+const publicPages = ['/', '/auth', '/auth/desktop', '/event/HALLOWEEN_2024', '/event/CHRISTMAS_2024', '/test/ranking'];
 
 const intlMiddleware = createMiddleware({
   ...routing,