[Feat] WTH-240: 애플 로그인 구현

src/app/(public)/apple/oauth/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const origin = request.nextUrl.origin;
+  const error = request.nextUrl.searchParams.get('error');
+
+  if (error) {
+    return NextResponse.redirect(new URL('/login', origin));
+  }
+
+  const registered = request.nextUrl.searchParams.get('registered') === 'true';
+  const name = request.nextUrl.searchParams.get('name');
+
+  const redirectUrl = registered ? '/hub' : '/login?terms=true';
+  const redirectResponse = NextResponse.redirect(new URL(redirectUrl, origin));
+
+  if (name) {
+    redirectResponse.cookies.set('userName', name, {
+      path: '/',
+      maxAge: 60 * 5,
+    });
+  }
+
+  return redirectResponse;
+}

src/components/auth/LoginCard.tsx

@@ -3,15 +3,16 @@ import Image from 'next/image';
 import { cn } from '@/lib/cn';
 import { LoginCoverIcon } from '@/assets/icons';
 import { Loading } from '@/components/ui';
-import { SocialLoginButtons } from '@/components/auth';
+import { SocialLoginButtons } from '@/components/auth/SocialLoginButtons';
 
 interface LoginCardProps {
   className?: string;
   isLoading?: boolean;
   onKakaoLogin?: () => void;
+  onAppleLogin?: () => void;
 }
 
-function LoginCard({ className, isLoading = false, onKakaoLogin }: LoginCardProps) {
+function LoginCard({ className, isLoading = false, onKakaoLogin, onAppleLogin }: LoginCardProps) {
   return (
     <div
       className={cn(
@@ -36,7 +37,11 @@ function LoginCard({ className, isLoading = false, onKakaoLogin }: LoginCardProp
             <p className="typo-body2 text-text-alternative">진행 중 입니다...</p>
           </div>
         ) : (
-          <SocialLoginButtons className="w-full" onKakaoLogin={onKakaoLogin} />
+          <SocialLoginButtons
+            className="w-full"
+            onKakaoLogin={onKakaoLogin}
+            onAppleLogin={onAppleLogin}
+          />
         )}
       </div>
     </div>

src/components/auth/LoginPageClient.tsx

@@ -6,8 +6,13 @@ import { agreeTermsAction } from '@/lib/actions/auth';
 import { encodeOAuthState } from '@/lib/auth/oauthState';
 import { toastError } from '@/stores/useToastStore';
 
+import dynamic from 'next/dynamic';
+
 import { LoginCard } from './LoginCard';
-import { TermsAgreementModal } from './TermsAgreementModal';
+
+const TermsAgreementModal = dynamic(() =>
+  import('./TermsAgreementModal').then((m) => m.TermsAgreementModal),
+);
 
 interface LoginPageClientProps {
   defaultTermsOpen?: boolean;
@@ -27,6 +32,23 @@ function LoginPageClient({
   const [termsOpen, setTermsOpen] = useState(defaultTermsOpen);
   const [isLoading, setIsLoading] = useState(false);
 
+  function handleAppleLoginStart() {
+    const clientId = process.env.NEXT_PUBLIC_APPLE_CLIENT_ID;
+    const redirectUri = process.env.NEXT_PUBLIC_APPLE_REDIRECT_URI;
+    if (!clientId || !redirectUri) return;
+
+    const params = new URLSearchParams({
+      response_type: 'code id_token',
+      response_mode: 'form_post',
+      scope: 'name email',
+      client_id: clientId,
+      redirect_uri: redirectUri,
+    });
+
+    setIsLoading(true);
+    window.location.href = `https://appleid.apple.com/auth/authorize?${params}`;
+  }
+
   function handleKakaoLoginStart() {
     const clientId = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID;
     const redirectUri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
@@ -48,7 +70,11 @@ function LoginPageClient({
         <br />
         Weeth에서 함께 활동을 이어가세요
       </div>
-      <LoginCard isLoading={isLoading} onKakaoLogin={handleKakaoLoginStart} />
+      <LoginCard
+        isLoading={isLoading}
+        onKakaoLogin={handleKakaoLoginStart}
+        onAppleLogin={handleAppleLoginStart}
+      />
       <TermsAgreementModal
         open={termsOpen}
         onOpenChange={setTermsOpen}

src/components/auth/SocialLoginButtons.tsx

@@ -4,13 +4,19 @@ import { AppleLoginButton } from '@/components/auth/AppleLoginButton';
 
 interface SocialLoginButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
   onKakaoLogin?: () => void;
+  onAppleLogin?: () => void;
 }
 
-function SocialLoginButtons({ className, onKakaoLogin, ...props }: SocialLoginButtonsProps) {
+function SocialLoginButtons({
+  className,
+  onKakaoLogin,
+  onAppleLogin,
+  ...props
+}: SocialLoginButtonsProps) {
   return (
     <div className={cn('flex flex-col gap-300', className)} {...props}>
       <KakaoLoginButton onClick={onKakaoLogin} />
-      <AppleLoginButton />
+      <AppleLoginButton onClick={onAppleLogin} />
     </div>
   );
 }

src/proxy.ts

@@ -49,7 +49,8 @@ export function proxy(request: NextRequest) {
   if (
     PUBLIC_PATHS.some((path) => pathname === path) ||
     pathname.startsWith('/club/') ||
-    pathname.startsWith('/kakao/')
+    pathname.startsWith('/kakao/') ||
+    pathname === '/apple/oauth'
   ) {
     return NextResponse.next();
   }