💄 Style: login button

aeye/app/page.tsx

@@ -1,54 +1,60 @@
 'use client'
 
 import { useEffect } from 'react';
-import Paper from '@mui/material/Paper';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
+import Image from 'next/image'
+import {
+	Paper,
+	Button,
+	Stack,
+	Typography
+} from '@mui/material';
 
-const handleLoginWithGoogle = async () => {
-	window.location.replace(`https://api.a-eye.live/oauth2/authorization/google`);
-}
+function GoogleLoginButton() {
+	const handleLoginWithGoogle = async () => {
+		window.location.replace(`https://api.a-eye.live/oauth2/authorization/google`);
+	}
 
-const handleLoginWithKakao = async () => {
-	window.location.replace(`https://api.a-eye.live/oauth2/authorization/kakao`);
+	return (
+		<Image
+			src="/signin-assets/[email protected]"
+			width={189}
+			height={40}
+			alt="kakao-login-button"
+			onClick={handleLoginWithGoogle}
+		/>
+	);
 }
 
+function KakaoLoginButton() {
+	const handleLoginWithKakao = async () => {
+		window.location.replace(`https://api.a-eye.live/oauth2/authorization/kakao`);
+	}
+
+	return (
+		<Image
+			src="/signin-assets/kakao_login_medium_narrow.png"
+			width={183}
+			height={45}
+			alt="kakao-login-button"
+			onClick={handleLoginWithKakao}
+		/>
+	);
+}
 
 function LoginCard() {
 	return (
 		<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
 			<Paper elevation={24} style={{ padding: '60px', textAlign: 'center' }}>
 				<Stack spacing={3}>
 					<Typography variant="h4">AEYE</Typography>
-					<Button
-						variant="contained"
-						sx={{ bgcolor: '#65d586', '&:hover': { bgcolor: '#4caf50' } }}
-						onClick={handleLoginWithGoogle}
-					>
-						Login with Google
-					</Button>
-					<Button
-						variant="contained"
-						sx={{ bgcolor: '#65d586', '&:hover': { bgcolor: '#4caf50' } }}
-						onClick={handleLoginWithKakao}
-					>
-						Login with Kakao
-					</Button>
+					<GoogleLoginButton />
+					<KakaoLoginButton />
 				</Stack>
 			</Paper>
 		</div>
 	);
 }
 
-function Logo() {
-	return (
-		<div>
-			logo image
-		</div>
-	);
-}
-
 export default function Landing() {
 	useEffect(() => {
 		document.body.style.margin = '0';
@@ -84,7 +90,6 @@ export default function Landing() {
 
 	return (
 		<Stack>
-			<Logo />
 			<LoginCard />
 		</Stack>
 	);