From c9a0a4449fe4fa075c5a0d3f9cf8c58ff0b638a8 Mon Sep 17 00:00:00 2001
From: Jiwoo Ahn <ilp_rincipe@naver.com>
Date: Wed, 10 Apr 2024 20:02:25 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Format:=20apply=20prettier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aeye/app/(nav)/cams/page.tsx   |   2 +-
 aeye/app/(nav)/home/page.tsx   | 102 +++++++++----------
 aeye/app/(nav)/layout.tsx      |  20 ++--
 aeye/app/(nav)/my/page.tsx     |  59 +++++------
 aeye/app/(nav)/stat/page.tsx   |   4 +-
 aeye/app/components/Navbar.tsx | 180 +++++++++++++++------------------
 aeye/app/layout.tsx            |  26 ++---
 aeye/app/login/page.tsx        |  36 +++----
 aeye/app/page.tsx              | 150 ++++++++++++++-------------
 9 files changed, 276 insertions(+), 303 deletions(-)

diff --git a/aeye/app/(nav)/cams/page.tsx b/aeye/app/(nav)/cams/page.tsx
index a4153d8..263fd3b 100644
--- a/aeye/app/(nav)/cams/page.tsx
+++ b/aeye/app/(nav)/cams/page.tsx
@@ -1,3 +1,3 @@
 export default function Cams() {
-	return <div></div>;
+  return <div></div>;
 }
diff --git a/aeye/app/(nav)/home/page.tsx b/aeye/app/(nav)/home/page.tsx
index c1acec8..16f87b7 100644
--- a/aeye/app/(nav)/home/page.tsx
+++ b/aeye/app/(nav)/home/page.tsx
@@ -1,62 +1,62 @@
-'use client'
+"use client";
 
-import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
-import SearchIcon from '@mui/icons-material/Search';
-import InputBase from '@mui/material/InputBase';
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import SearchIcon from "@mui/icons-material/Search";
+import InputBase from "@mui/material/InputBase";
 
-const Search = styled('div')(({ theme }) => ({
-	position: 'relative',
-	borderRadius: theme.shape.borderRadius,
-	backgroundColor: '#efefef',
-	'&:hover': {
-	backgroundColor: alpha(theme.palette.common.white, 0.25),
-},
-	marginLeft: 0,
-	width: '100%',
-	[theme.breakpoints.up('sm')]: {
-	marginLeft: theme.spacing(1),
-	width: 'auto',
-},
+const Search = styled("div")(({ theme }) => ({
+  position: "relative",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: "#efefef",
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: "100%",
+  [theme.breakpoints.up("sm")]: {
+    marginLeft: theme.spacing(1),
+    width: "auto",
+  },
 }));
 
-const SearchIconWrapper = styled('div')(({ theme }) => ({
-	padding: theme.spacing(0, 2),
-	height: '100%',
-	position: 'absolute',
-	pointerEvents: 'none',
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
+const SearchIconWrapper = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
-	color: 'inherit',
-	width: '100%',
-	'& .MuiInputBase-input': {
-		padding: theme.spacing(1, 1, 1, 0),
-		// vertical padding + font size from searchIcon
-		paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-		transition: theme.transitions.create('width'),
-		[theme.breakpoints.up('sm')]: {
-			width: '12ch',
-			'&:focus': {
-				width: '20ch',
-			},
-		},
-	},
+  color: "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create("width"),
+    [theme.breakpoints.up("sm")]: {
+      width: "12ch",
+      "&:focus": {
+        width: "20ch",
+      },
+    },
+  },
 }));
 
 export default function Home() {
-	return (
-		<Search>
-			<SearchIconWrapper>
-				<SearchIcon />
-			</SearchIconWrapper>
-			<StyledInputBase
-				placeholder="Search…"
-				inputProps={{ 'aria-label': 'search' }}
-			/>
-		</Search>
-	);
+  return (
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon />
+      </SearchIconWrapper>
+      <StyledInputBase
+        placeholder="Search…"
+        inputProps={{ "aria-label": "search" }}
+      />
+    </Search>
+  );
 }
diff --git a/aeye/app/(nav)/layout.tsx b/aeye/app/(nav)/layout.tsx
index c0b4689..6cdcbc9 100644
--- a/aeye/app/(nav)/layout.tsx
+++ b/aeye/app/(nav)/layout.tsx
@@ -1,14 +1,10 @@
-import Navbar from '@/app/components/Navbar'
+import Navbar from "@/app/components/Navbar";
 
-export default function NavLayout({
-	children,
-}: {
-	children: React.ReactNode
-}) {
-	return (
-		<>
-			<Navbar />
-			<div>{children}</div>
-		</>
-	);
+export default function NavLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <div>{children}</div>
+    </>
+  );
 }
diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx
index 4058522..347062a 100644
--- a/aeye/app/(nav)/my/page.tsx
+++ b/aeye/app/(nav)/my/page.tsx
@@ -1,23 +1,16 @@
-'use client'
+"use client";
 
-import React, { useState } from "react";
-import { styled } from '@mui/material/styles';
-import {
-	Box,
-	Grid,
-	Paper,
-	Avatar,
-	Tooltip,
-	Typography
-} from "@mui/material";
+import React, { useEffect, 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),
+  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),
 }));
 
 type Member = {
@@ -87,19 +80,19 @@ function ProfileAvatar() {
 }
 
 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>
-	);
-};
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={4}>
+        <Grid item xs={12} md={8} lg={9} container direction="column">
+          <ProfileAvatar />
+          <Grid item>
+            <Item>itme1</Item>
+          </Grid>
+          <Grid item>
+            <Item>item2</Item>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/aeye/app/(nav)/stat/page.tsx b/aeye/app/(nav)/stat/page.tsx
index ef86185..fc0caf8 100644
--- a/aeye/app/(nav)/stat/page.tsx
+++ b/aeye/app/(nav)/stat/page.tsx
@@ -1,5 +1,3 @@
 export default function Stat() {
-	return (
-		<div>stat page</div>
-	);
+  return <div>stat page</div>;
 }
diff --git a/aeye/app/components/Navbar.tsx b/aeye/app/components/Navbar.tsx
index 71966c2..f16ee32 100644
--- a/aeye/app/components/Navbar.tsx
+++ b/aeye/app/components/Navbar.tsx
@@ -1,115 +1,97 @@
-'use client'
+"use client";
 
 import React, { useState } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 
 import {
-	List,
-	ListItem,
-	ListItemText,
-	Collapse,
-	Typography,
-	AppBar,
-	Toolbar,
-	Button,
+  List,
+  ListItem,
+  ListItemText,
+  Collapse,
+  Typography,
+  AppBar,
+  Toolbar,
+  Button,
 } from "@mui/material";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
-import MenuIcon from '@mui/icons-material/Menu';
+import MenuIcon from "@mui/icons-material/Menu";
 
 const Navbar: React.FC = () => {
-	const small = useMediaQuery("(max-width:600px)");
-	const full = useMediaQuery("(min-width:600px)");
-	const router = useRouter();
+  const small = useMediaQuery("(max-width:600px)");
+  const full = useMediaQuery("(min-width:600px)");
+  const router = useRouter();
 
-	const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
 
-	const handleClick = (): void => {
-		setOpen(!open);
-	};
+  const handleClick = (): void => {
+    setOpen(!open);
+  };
 
-	return (
-		<div style={{ marginBottom: '30px' }}>
-			<AppBar position="static" style={{ backgroundColor: '#65d586' }}>
-				<Toolbar variant="dense">
-					{small && (
-						<>
-							<List>
-								<ListItem button>
-									<Button
-										onClick={handleClick}
-									>
-										<MenuIcon />
-										{open ? (
-											<ExpandLess />
-										) : (
-											<ExpandMore />
-										)}
-									</Button>
-									<Typography
-										variant="h6"
-										color="inherit"
-										onClick={() => {
-											console.log(
-												"logo clicked"
-											);
-											setOpen(false);
-										}}
-									>
-										AEYE
-									</Typography>
-								</ListItem>
-								<Collapse
-									in={open}
-									timeout="auto"
-									unmountOnExit
-								>
-									<List
-										component="div"
-										disablePadding
-									>
-										<ListItem button>
-											<ListItemText primary="Home" />
-										</ListItem>
-										<ListItem button>
-											<ListItemText primary="About" />
-										</ListItem>
-										<ListItem button>
-											<ListItemText primary="Contact" />
-										</ListItem>
-									</List>
-								</Collapse>
-							</List>
-						</>
-					)}
+  return (
+    <div style={{ marginBottom: "30px" }}>
+      <AppBar position="static" style={{ backgroundColor: "#65d586" }}>
+        <Toolbar variant="dense">
+          {small && (
+            <>
+              <List>
+                <ListItem button>
+                  <Button onClick={handleClick}>
+                    <MenuIcon />
+                    {open ? <ExpandLess /> : <ExpandMore />}
+                  </Button>
+                  <Typography
+                    variant="h6"
+                    color="inherit"
+                    onClick={() => {
+                      console.log("logo clicked");
+                      setOpen(false);
+                    }}
+                  >
+                    AEYE
+                  </Typography>
+                </ListItem>
+                <Collapse in={open} timeout="auto" unmountOnExit>
+                  <List component="div" disablePadding>
+                    <ListItem button>
+                      <ListItemText primary="Home" />
+                    </ListItem>
+                    <ListItem button>
+                      <ListItemText primary="About" />
+                    </ListItem>
+                    <ListItem button>
+                      <ListItemText primary="Contact" />
+                    </ListItem>
+                  </List>
+                </Collapse>
+              </List>
+            </>
+          )}
 
-					{full && (
-						<>
-							<Typography
-								variant="h6"
-								color="inherit"
-							>
-								AEYE
-							</Typography>
-							<Button color="inherit" onClick={() => router.push('/home')}>
-								Home
-							</Button>
-							<Button color="inherit" onClick={() => router.push('/cams')}>
-								Cams
-							</Button>
-							<Button color="inherit" onClick={() => router.push('/stat')}>
-								Stat
-							</Button>
-							<Button color="inherit" onClick={() => router.push('/my')}>
-								My
-							</Button>
-						</>
-					)}
-				</Toolbar>
-			</AppBar>
-		</div>
-	);
-}
+          {full && (
+            <>
+              <Typography variant="h6" color="inherit">
+                AEYE
+              </Typography>
+              <Button color="inherit" onClick={() => router.push("/home")}>
+                Home
+              </Button>
+              <Button color="inherit" onClick={() => router.push("/cams")}>
+                Cams
+              </Button>
+              <Button color="inherit" onClick={() => router.push("/stat")}>
+                Stat
+              </Button>
+              <Button color="inherit" onClick={() => router.push("/my")}>
+                My
+              </Button>
+            </>
+          )}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
 
 export default Navbar;
diff --git a/aeye/app/layout.tsx b/aeye/app/layout.tsx
index 335d37f..7a00ee6 100644
--- a/aeye/app/layout.tsx
+++ b/aeye/app/layout.tsx
@@ -1,19 +1,19 @@
 export const metadata = {
-	title: 'AEYE',
-	description: 'AI powered CCTV controller',
-}
+  title: "AEYE",
+  description: "AI powered CCTV controller",
+};
 
 export default function RootLayout({
-	children,
+  children,
 }: {
-	children: React.ReactNode
+  children: React.ReactNode;
 }) {
-	return (
-		<html lang="en">
-			<body>
-			 <link rel="icon" href="/images/favicon.ico" sizes="any" />
-				{children}
-			</body>
-		</html>
-	)
+  return (
+    <html lang="en">
+      <body>
+        <link rel="icon" href="/images/favicon.ico" sizes="any" />
+        {children}
+      </body>
+    </html>
+  );
 }
diff --git a/aeye/app/login/page.tsx b/aeye/app/login/page.tsx
index 7da585e..9b57d16 100644
--- a/aeye/app/login/page.tsx
+++ b/aeye/app/login/page.tsx
@@ -1,29 +1,25 @@
-'use client'
+"use client";
 
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import LinearProgress from '@mui/material/LinearProgress';
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import LinearProgress from "@mui/material/LinearProgress";
 
 const LoginPage = () => {
-	const router = useRouter();
+  const router = useRouter();
 
-	useEffect(() => {
-		// Parse access token from URL
-		const urlParams = new URLSearchParams(window.location.search);
-		const accessToken = urlParams.get('accessToken');
+  useEffect(() => {
+    // Parse access token from URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const accessToken = urlParams.get("accessToken");
+    // Save access token to local storage or state
+    if (accessToken) {
+      localStorage.setItem("accessToken", accessToken);
+    }
 
-		// Save access token to local storage or state
-		if (accessToken) {
-			localStorage.setItem('accessToken', accessToken);
-		}
+    router.push("/home");
+  }, [router]);
 
-		router.push('/home');
-	}, [router]);
-
-	return (
-		<LinearProgress color="success" />
-	);
+  return <LinearProgress color="success" />;
 };
 
 export default LoginPage;
-
diff --git a/aeye/app/page.tsx b/aeye/app/page.tsx
index 8f4b309..2042ea1 100644
--- a/aeye/app/page.tsx
+++ b/aeye/app/page.tsx
@@ -1,95 +1,103 @@
-'use client'
+"use client";
 
-import { useEffect } from 'react';
-import Image from 'next/image'
-import {
-	Paper,
-	Stack,
-	Typography
-} from '@mui/material';
+import { useEffect } from "react";
+import Image from "next/image";
+import { Paper, Stack, Typography } from "@mui/material";
 
 function GoogleLoginButton() {
-	const handleLoginWithGoogle = async () => {
-		window.location.replace(`https://api.a-eye.live/oauth2/authorization/google`);
-	}
+  const handleLoginWithGoogle = async () => {
+    window.location.replace(
+      `https://api.a-eye.live/oauth2/authorization/google`
+    );
+  };
 
-	return (
-		<Image
-			src="/signin-assets/web_light_rd_ctn@1x.png"
-			width={189}
-			height={40}
-			alt="kakao-login-button"
-			onClick={handleLoginWithGoogle}
-		/>
-	);
+  return (
+    <Image
+      src="/signin-assets/web_light_rd_ctn@1x.png"
+      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`);
-	}
+  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}
-		/>
-	);
+  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>
-					<GoogleLoginButton />
-					<KakaoLoginButton />
-				</Stack>
-			</Paper>
-		</div>
-	);
+  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>
+          <GoogleLoginButton />
+          <KakaoLoginButton />
+        </Stack>
+      </Paper>
+    </div>
+  );
 }
 
 export default function Landing() {
-	useEffect(() => {
-		document.body.style.margin = '0';
-		document.body.style.padding = '0';
-		document.body.style.overflow = 'hidden';
-		document.body.style.height = '100vh';
+  useEffect(() => {
+    document.body.style.margin = "0";
+    document.body.style.padding = "0";
+    document.body.style.overflow = "hidden";
+    document.body.style.height = "100vh";
 
-		document.body.style.background = 'linear-gradient(135deg, #65d586 0%, #e0e0e0 100%)';
-		document.body.style.backgroundSize = '200% 200%';
-		document.body.style.animation = 'waving 20s ease infinite';
+    document.body.style.background =
+      "linear-gradient(135deg, #65d586 0%, #e0e0e0 100%)";
+    document.body.style.backgroundSize = "200% 200%";
+    document.body.style.animation = "waving 20s ease infinite";
 
-		const keyframes = `@keyframes waving {
+    const keyframes = `@keyframes waving {
       0% { background-position: 0% 50%; opacity: 0.8; }
       50% { background-position: 100% 50%; opacity: 1; }
       100% { background-position: 0% 50%; opacity: 0.8; }
     }`;
 
-		const styleSheet = document.styleSheets[0];
-		styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
+    const styleSheet = document.styleSheets[0];
+    styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
 
-		return () => {
-			// Clean up the style changes when the component unmounts
-			document.body.style.removeProperty('margin');
-			document.body.style.removeProperty('padding');
-			document.body.style.removeProperty('overflow');
-			document.body.style.removeProperty('height');
-			document.body.style.removeProperty('background');
-			document.body.style.removeProperty('background-size');
-			document.body.style.removeProperty('animation');
-			styleSheet.deleteRule(styleSheet.cssRules.length - 1);
-		};
-	}, []);
+    return () => {
+      // Clean up the style changes when the component unmounts
+      document.body.style.removeProperty("margin");
+      document.body.style.removeProperty("padding");
+      document.body.style.removeProperty("overflow");
+      document.body.style.removeProperty("height");
+      document.body.style.removeProperty("background");
+      document.body.style.removeProperty("background-size");
+      document.body.style.removeProperty("animation");
+      styleSheet.deleteRule(styleSheet.cssRules.length - 1);
+    };
+  }, []);
 
-	return (
-		<Stack>
-			<LoginCard />
-		</Stack>
-	);
+  return (
+    <Stack>
+      <LoginCard />
+    </Stack>
+  );
 }