Merge pull request #10 from KNU-AEYE/4-profile-page

4 profile page

aeye/app/(nav)/my/page.tsx

@@ -1,5 +1,57 @@
-export default function() {
+'use client'
+
+import React, { useState } from "react";
+import { styled } from '@mui/material/styles';
+import {
+	Box,
+	Grid,
+	Paper,
+	Avatar,
+	Tooltip,
+	Typography
+} from "@mui/material";
+
+const Item = styled(Paper)(({ theme }) => ({
+	backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+	...theme.typography.body2,
+	padding: theme.spacing(1),
+	textAlign: 'center',
+	color: theme.palette.text.secondary,
+	margin: theme.spacing(1),
+}));
+
+function ProfileAvatar() {
+	const [avatar, setAvatar] = useState<string | null>(null);
 	return (
-		<div>my page</div>
+		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+			<Tooltip title="Update Avatar" placement="top-start">
+				<Avatar
+					alt="User Avatar"
+					src={avatar || "/default-avatar.png"}
+					sx={{ width: 56, height: 56 }}
+				/>
+			</Tooltip>
+			<Typography variant="h5" component="h2" style={{ marginTop: '8px' }}>
+				사람이름
+			</Typography>
+		</div>
 	);
 }
+
+export default function MyPage() {
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<Grid container spacing={4}>
+				<Grid item xs={12} md={8} lg={9} container direction="column">
+					<ProfileAvatar />
+					<Grid item>
+						<Item>xs=8</Item>
+					</Grid>
+					<Grid item>
+						<Item>xs=4</Item>
+					</Grid>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+};

aeye/app/components/Navbar.tsx

@@ -30,7 +30,7 @@ const Navbar: React.FC = () => {
 	};
 
 	return (
-		<div>
+		<div style={{marginBottom: '30px'}}>
 			<AppBar position="static" style={{ backgroundColor: '#65d586' }}>
 				<Toolbar variant="dense">
 					{small && (

aeye/app/login/page.tsx

@@ -17,7 +17,7 @@ const LoginPage = () => {
     }
 
     router.push('/home');
-  }, []);
+  }, [router]);
 
   return (
     <div>

aeye/app/page.tsx

@@ -7,11 +7,11 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 const handleLoginWithGoogle = async () => {
-	window.location.replace(`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=982098409297-8krnotrs5aq8d9og7tofnvnnslfvf677.apps.googleusercontent.com&scope=email%20profile&state=z7o9tS1KdVjnBVcc1YhH7Dwk5FPqID_u_MIkY38nTP8%3D&redirect_uri=http://localhost:8080/login/oauth2/code/google`);
+	window.location.replace(`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=982098409297-8krnotrs5aq8d9og7tofnvnnslfvf677.apps.googleusercontent.com&scope=email%20profile&state=z7o9tS1KdVjnBVcc1YhH7Dwk5FPqID_u_MIkY38nTP8%3D&redirect_uri=https://api.a-eye.live/login/oauth2/code/google`);
 }
 
 const handleLoginWithKakao = async () => {
-	window.location.replace(`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=cdfde096b799357de4372685356ad669&scope=profile_nickname%20profile_image%20account_email&state=gefkirF7Oe7S0L7WPE2MQU2nnajOgYBMD1DSgI56N2s%3D&redirect_uri=http://localhost:8080/login/oauth2/code/kakao`);
+	window.location.replace(`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=cdfde096b799357de4372685356ad669&scope=profile_nickname%20profile_image%20account_email&state=gefkirF7Oe7S0L7WPE2MQU2nnajOgYBMD1DSgI56N2s%3D&redirect_uri=https://api.a-eye.live/login/oauth2/code/kakao`);
 }