Merge pull request #286 from boostcampwm-2024/feat/#283/oauth

[Feat] 로그인 페이지 구현

apps/api/src/auth/auth.controller.ts

@@ -47,7 +47,7 @@ export class AuthController {
     this.loginProcess(response, userId);
   }
 
-  @Post('guest/login')
+  @Get('guest/login')
   @ApiOperation({ summary: '게스트 로그인' })
   @ApiResponse({ status: 302, description: '홈으로 리다이렉션' })
   @UseGuards(ThrottlerGuard)

apps/api/src/auth/auth.service.ts

@@ -32,13 +32,16 @@ export class AuthService {
 
   async createGuestUser() {
     const randomNum = Math.floor(Math.random() * 10000);
+    const response = await fetch('https://api.thecatapi.com/v1/images/search');
+    const catImageUrl = (await response.json())[0].url;
+
     const guestUser = {
       username: `guest_${randomNum}`,
       password: `guest_password_${randomNum}`,
       email: `[email protected]`,
       nickname: `guest_${randomNum}`,
       introduce: `게스트 사용자입니다. `,
-      profileImageUrl: `https://cataas.com/cat?${Date.now()}`,
+      profileImageUrl: catImageUrl,
     };
     const user = await this.userService.findUserByUsername(guestUser.username);
     if (!user) {

apps/web/src/api/auth.ts

@@ -1,4 +1,5 @@
 import axiosInstance from '@/api/axios';
+import { ENV } from '@/constants/env';
 
 type SignUpDto = {
   username: string;
@@ -23,8 +24,12 @@ const signOut = async () => {
   await axiosInstance.post('/auth/logout');
 };
 
-const oauthLogin = async (provider: 'google' | 'github') => {
-  await axiosInstance.get(`/auth/${provider}/login`);
+const guestLogin = () => {
+  window.location.href = `${ENV.API_URL}/auth/guest/login`;
 };
 
-export { logIn, signUp, oauthLogin, signOut };
+const oauthLogin = (provider: 'google' | 'github') => {
+  window.location.href = `${ENV.API_URL}/auth/${provider}/login`;
+};
+
+export { logIn, signUp, oauthLogin, guestLogin, signOut };

apps/web/src/components/auth/GuestLogin.tsx

@@ -0,0 +1,20 @@
+import { guestLogin } from '@/api/auth';
+import ChevronRight from '@/assets/icons/chevron-right.svg?react';
+
+function GuestLogin() {
+  const handleGuestLogin = () => {
+    guestLogin();
+  };
+
+  return (
+    <span
+      className="mt-3 flex items-center gap-1.5 text-title2 text-main"
+      onClick={handleGuestLogin}
+    >
+      게스트 로그인
+      <ChevronRight className="w-2 fill-black" />
+    </span>
+  );
+}
+
+export default GuestLogin;

apps/web/src/components/auth/OAuthLogin.tsx

@@ -0,0 +1,43 @@
+import { cva } from 'class-variance-authority';
+
+import { oauthLogin } from '@/api/auth';
+import GithubIc from '@/assets/icons/github.svg?react';
+import GoogleIc from '@/assets/icons/google.svg?react';
+
+const oauthButton = cva('flex w-96 justify-center gap-3 rounded-lg py-4 shadow-normal', {
+  variants: {
+    type: {
+      github: 'bg-black text-white',
+      google: 'border border-main bg-white text-alt',
+    },
+  },
+  defaultVariants: {
+    type: 'github',
+  },
+});
+
+const OAUTH_LABEL = {
+  github: 'Github',
+  google: 'Google',
+} as const;
+
+type OAuthType = keyof typeof OAUTH_LABEL;
+
+interface OAuthLoginProps {
+  type: OAuthType;
+}
+
+function OAuthLogin({ type }: OAuthLoginProps) {
+  const onLoginBtnClick = (type: OAuthType) => {
+    oauthLogin(type);
+  };
+
+  return (
+    <button type="button" className={oauthButton({ type })} onClick={() => onLoginBtnClick(type)}>
+      {type === 'github' ? <GithubIc /> : <GoogleIc />}
+      <span className="text-head3">{OAUTH_LABEL[type]} 계정으로 로그인</span>
+    </button>
+  );
+}
+
+export default OAuthLogin;

apps/web/src/components/auth/index.tsx

@@ -0,0 +1,24 @@
+import TicleCharacterBadge from '@/assets/images/ticle-character-badge.png';
+import TicleLogo from '@/assets/ticle.svg?react';
+
+import GuestLogin from './GuestLogin';
+import OAuthLogin from './OAuthLogin';
+
+function Auth() {
+  return (
+    <div className="flex h-dvh w-full flex-col items-center justify-center gap-16">
+      <div className="flex flex-col items-center gap-6">
+        <img src={TicleCharacterBadge} alt="티클 캐릭터" width={150} height={150} />
+        <TicleLogo className="fill-primary" width={190} />
+        <span className="text-head3 text-alt">작은 지식이 모여 큰 성장이 되는 곳</span>
+      </div>
+      <main className="flex flex-col items-center gap-4">
+        <OAuthLogin type="github" />
+        <OAuthLogin type="google" />
+        <GuestLogin />
+      </main>
+    </div>
+  );
+}
+
+export default Auth;

apps/web/src/components/common/Dialog/index.tsx

@@ -2,7 +2,7 @@
 import { ReactNode } from '@tanstack/react-router';
 import { cva } from 'class-variance-authority';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useRef } from 'react';
+import { MouseEvent, useRef } from 'react';
 
 import CloseIc from '@/assets/icons/close.svg?react';
 import useOutsideClick from '@/hooks/useOutsideClick';
@@ -25,6 +25,10 @@ function DialogRoot({ isOpen, onClose, children, className }: DialogRootProps) {
 
   if (!isOpen) return null;
 
+  const handleInnerClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
   return (
     <Portal portalId="dialog">
       <AnimatePresence>
@@ -41,6 +45,7 @@ function DialogRoot({ isOpen, onClose, children, className }: DialogRootProps) {
               className={cn('relative w-80 rounded-lg bg-white px-6 py-7 shadow-normal', className)}
               initial={{ opacity: 0, y: 50 }}
               animate={{ opacity: 1, y: 0 }}
+              onClick={handleInnerClick}
             >
               {children}
             </motion.div>

apps/web/src/components/ticle/list/index.tsx

@@ -80,7 +80,7 @@ function TicleList() {
           <div className="flex h-80 w-full items-center justify-center">
             <Loading color="primary" />
           </div>
-        ) : data?.pages.length === 0 ? (
+        ) : data?.pages[0].ticles.length === 0 ? (
           <Empty />
         ) : (
           data?.pages.map((page) => (

apps/web/src/hooks/api/auth.ts

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 
-import { logIn, signUp, oauthLogin, signOut } from '@/api/auth';
+import { logIn, signUp, signOut } from '@/api/auth';
 
 export const useLogIn = () => {
   const navigate = useNavigate();
@@ -35,9 +35,3 @@ export const useSignOut = () => {
     },
   });
 };
-
-export const useOauthLogin = () => {
-  return useMutation({
-    mutationFn: (provider: 'google' | 'github') => oauthLogin(provider),
-  });
-};

apps/web/src/routes/auth/oauth.tsx

@@ -1,16 +1,11 @@
-import { createFileRoute, Link } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+
+import Auth from '@/components/auth';
 
 export const Route = createFileRoute('/auth/oauth')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return (
-    <div className="flex">
-      OAuth 로그인
-      <Link to="/auth/login" className="border border-main p-5">
-        로컬 로그인
-      </Link>
-    </div>
-  );
+  return <Auth />;
 }