feat(fe): impl kakao login

apps/frontend/app/(client)/layout.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { SocialLoginHandler } from '@/components/auth/SocialLoginHandler'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
@@ -18,6 +19,7 @@ export default function MainLayout({
 
   return (
     <QueryClientProvider client={queryClient}>
+      <SocialLoginHandler />
       {children}
       {process.env.NODE_ENV === 'development' && (
         <ReactQueryDevtools initialIsOpen={false} />

apps/frontend/app/(client)/login/layout.tsx

@@ -0,0 +1,45 @@
+import { SignUpHeader } from '@/components/auth/SignUpPage/SignUpHeader'
+import codedangLogoWhite from '@/public/logos/codedang-with-text-white.svg'
+import Image from 'next/image'
+import { HeaderTitleProvider } from '../(main)/_contexts/HeaderTitleContext'
+
+export default function LogInLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <HeaderTitleProvider>
+      <div className="flex min-h-dvh w-full flex-col items-center overflow-x-hidden">
+        <SignUpHeader />
+        <main className="relative flex min-h-dvh w-full max-w-[1920px] flex-1 pt-[60px] xl:px-[30px]">
+          <div
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+            style={{ backgroundImage: "url('/signup/background.png')" }}
+          />
+          <div className="relative z-10 flex w-full flex-1">
+            <section className="relative z-0 hidden flex-1 xl:block">
+              <div className="absolute left-[254px] top-[50dvh] z-0 flex w-[260px] -translate-y-1/2 flex-col items-center gap-[15px]">
+                <Image
+                  src={codedangLogoWhite}
+                  alt="Codedang"
+                  width={260}
+                  height={56}
+                  className="h-auto w-full"
+                  priority
+                />
+                <p className="text-sub3_sb_16 text-white">
+                  온라인 코딩 교육 &amp; 대회 플랫폼
+                </p>
+              </div>
+            </section>
+
+            <section className="relative z-20 flex flex-1 items-start justify-center px-4 pb-10 pt-10 lg:justify-end lg:px-0 lg:pr-[117px]">
+              {children}
+            </section>
+          </div>
+        </main>
+      </div>
+    </HeaderTitleProvider>
+  )
+}

apps/frontend/app/(client)/login/page.tsx

@@ -1,61 +1,12 @@
 'use client'
 
-import { AuthModal } from '@/components/auth/AuthModal'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle
-} from '@/components/shadcn/dialog'
-import { useSession } from '@/libs/hooks/useSession'
-import { useAuthModalStore } from '@/stores/authModal'
-import type { Route } from 'next'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
-
-export default function LoginPage() {
-  const { currentModal, hideModal, showSignIn } = useAuthModalStore(
-    (state) => state
-  )
-  const session = useSession()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    showSignIn()
-  }, [showSignIn])
-
-  useEffect(() => {
-    if (session) {
-      const redirectUrl = searchParams.get('redirectUrl')
-      if (redirectUrl) {
-        router.push(redirectUrl as Route)
-      } else {
-        router.push('/')
-      }
-    }
-  }, [session, router, searchParams])
+import { LogInPage } from '@/components/auth/LogInPage/LogInPage'
+import { Suspense } from 'react'
 
+export default function Page() {
   return (
-    <Dialog open={currentModal !== ''} onOpenChange={hideModal}>
-      <DialogContent
-        onOpenAutoFocus={(e) => {
-          e.preventDefault()
-        }}
-        onInteractOutside={(e) => {
-          e.preventDefault()
-        }}
-        onEscapeKeyDown={(e) => {
-          e.preventDefault()
-        }}
-        hideCloseButton={true}
-        className="!h-[620px] !w-[380px] rounded-[10px]"
-      >
-        <DialogHeader className="hidden">
-          <DialogTitle />
-        </DialogHeader>
-        <AuthModal />
-      </DialogContent>
-    </Dialog>
+    <Suspense>
+      <LogInPage />
+    </Suspense>
   )
 }

apps/frontend/app/(client)/signup/layout.tsx

@@ -18,8 +18,8 @@ export default function SignUpLayout({
             style={{ backgroundImage: "url('/signup/background.png')" }}
           />
           <div className="relative z-10 flex w-full flex-1">
-            <section className="relative hidden flex-1 lg:block">
-              <div className="fixed left-[254px] top-[414px] flex w-[260px] flex-col items-center gap-[15px]">
+            <section className="relative z-0 hidden flex-1 xl:block">
+              <div className="absolute left-[254px] top-[50dvh] flex w-[260px] -translate-y-1/2 flex-col items-center gap-[15px]">
                 <Image
                   src={codedangLogoWhite}
                   alt="Codedang"
@@ -34,7 +34,7 @@ export default function SignUpLayout({
               </div>
             </section>
 
-            <section className="flex flex-1 items-start justify-end pb-10 pr-[117px] pt-10">
+            <section className="relative z-20 flex flex-1 items-start justify-end pb-10 pr-[117px] pt-10">
               {children}
             </section>
           </div>

apps/frontend/components/auth/LogInPage/InfoModal.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { Button } from '@/components/shadcn/button'
+import { Checkbox } from '@/components/shadcn/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/shadcn/dialog'
+import { cn } from '@/libs/utils'
+import Image from 'next/image'
+import { useState } from 'react'
+
+interface InfoModalButton {
+  text: string
+  onClick: () => void
+}
+
+interface InfoModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  primaryButton: InfoModalButton
+  secondaryButton?: InfoModalButton
+  className?: string
+  dismissForTodayLabel?: string
+  onDismissForToday?: () => void
+}
+
+export function InfoModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  className,
+  dismissForTodayLabel,
+  onDismissForToday
+}: InfoModalProps) {
+  const [hideToday, setHideToday] = useState(false)
+
+  const withDismissCheck = (onClick: () => void) => () => {
+    if (hideToday) {
+      onDismissForToday?.()
+    }
+    onClick()
+  }
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn(
+          'inline-flex w-[456px] flex-col items-start gap-6 !rounded-2xl border-none bg-white px-8 pb-6 pt-8 shadow-lg',
+          className
+        )}
+        onInteractOutside={(event) => event.preventDefault()}
+        onEscapeKeyDown={(event) => event.preventDefault()}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <DialogHeader className="flex flex-col items-start gap-2 space-y-0">
+          <Image
+            src="/icons/icon-info-blue.svg"
+            alt="info"
+            width={42}
+            height={42}
+          />
+
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="text-head5_sb_24 whitespace-pre-wrap text-left">
+              {title}
+            </DialogTitle>
+
+            {description && (
+              <p className="text-body1_m_16 text-left text-[#474747]">
+                {description}
+              </p>
+            )}
+          </div>
+        </DialogHeader>
+
+        <DialogFooter className="flex w-full flex-col gap-3 sm:flex-col">
+          <div className="flex w-full flex-row gap-3">
+            {secondaryButton && (
+              <Button
+                type="button"
+                onClick={withDismissCheck(secondaryButton.onClick)}
+                className="border-primary text-sub3_sb_16 text-primary h-[50px] flex-1 rounded-xl border bg-white hover:bg-blue-50"
+              >
+                {secondaryButton.text}
+              </Button>
+            )}
+
+            <Button
+              type="button"
+              onClick={withDismissCheck(primaryButton.onClick)}
+              className="bg-primary text-sub3_sb_16 h-[50px] flex-1 rounded-xl"
+            >
+              {primaryButton.text}
+            </Button>
+          </div>
+
+          {dismissForTodayLabel && onDismissForToday && (
+            <label className="flex items-center gap-2">
+              <Checkbox
+                checked={hideToday}
+                onCheckedChange={(checked) => setHideToday(checked === true)}
+              />
+              <span className="text-caption2_m_12 text-[#474747]">
+                {dismissForTodayLabel}
+              </span>
+            </label>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}