From 5c8814096277ea2a50556a372e0ce773042586b0 Mon Sep 17 00:00:00 2001
From: MinsuKim <minsu020302@gmail.com>
Date: Thu, 18 Aug 2022 13:01:55 +0900
Subject: [PATCH] =?UTF-8?q?Design=20:=20=ED=99=94=EB=A9=B4=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD#6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/LoginPage.jsx | 142 +++++++++++++++++++++++++++--------------
 1 file changed, 94 insertions(+), 48 deletions(-)

diff --git a/src/page/LoginPage.jsx b/src/page/LoginPage.jsx
index d598f34..4bff911 100644
--- a/src/page/LoginPage.jsx
+++ b/src/page/LoginPage.jsx
@@ -1,59 +1,105 @@
-import React from 'react'
+import React from 'react';
 import TextField from '@mui/material/TextField';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Link from '@mui/material/Link';
-import { Grid, Typography, Box, Container } from '@mui/material';
-
-function LoginPage () {
+import { Grid, Typography, Box, Container, createTheme, ThemeProvider } from '@mui/material';
 
+function LoginPage() {
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: '#550064',
+      },
+      secondary: {
+        main: '#7966ce',
+      },
+    },
+  });
   return (
-    <div>
-      <Container component="main" maxWidth="xs">
-      <Box
-        sx={{
-          marginTop: 35,
-          display: 'flex',
-          flexDirection: 'column'
-          }}
-        >
-      <Typography component='h1' varient='h1' style={{textAlign:"center", fontSize:"30px", fontWeight:'bold', marginBottom:"10px"}}>
-        Login
-      </Typography>
-      <TextField 
-        margin='normal'
-        label='Email Address' 
-        name='email'
-        type='email'
-        autoComplete='email'
-        required 
-        fullWidth
-        autoFocus/>
+    <ThemeProvider theme={theme}>
+      <Box sx={{ height: '100vh', backgroundImage: 'url(/images/background.png)' }}>
+        <Container component="main" maxWidth="xs">
+          <Box
+            sx={{
+              paddingTop: 35,
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Typography
+              component="h1"
+              varient="h1"
+              style={{ textAlign: 'center', fontSize: '30px', fontWeight: 'bold', marginBottom: '10px' }}
+            >
+              Login
+            </Typography>
+            <TextField
+              sx={{ backgroundColor: 'white' }}
+              color="secondary"
+              margin="normal"
+              label="Email Address"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              fullWidth
+              autoFocus
+            />
+            <TextField
+              sx={{ backgroundColor: 'white' }}
+              color="secondary"
+              margin="normal"
+              label="Password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              fullWidth
+            />
 
-      <TextField 
-        margin='normal'
-        label="Password"
-        name="password" 
-        type="password"
-        autoComplete='current-password'
-        required 
-        fullWidth/>
-        
-      <FormControlLabel
-        control={<Checkbox value="remember" color="primary" />}
-        label="자동로그인"/>
-      <Button type="submit" fullWidth variant='contained' sx={{ mt: 3, mb:2 }} style={{backgroundColor:"#7A84EB", height:'60px', fontSize:"20px"}}> 로그인 </Button>
-      <Grid container>
-        <Grid item xs> <Link href="/register" style={{color : 'gray' , textDecoration: 'none'}}> 회원가입 </Link> </Grid>
-        <Grid item> <Link href="/" style={{color : 'gray' , textDecoration: 'none'}}> 메인으로 이동 </Link> </Grid>
-      </Grid>
+            <FormControlLabel
+              sx={{ color: '#7966ce' }}
+              control={
+                <Checkbox
+                  value="remember"
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 }, color: 'white', '&.Mui-checked': { color: '#7966ce' } }}
+                />
+              }
+              label="자동로그인"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+              style={{ backgroundColor: '#7966ce', height: '60px', fontSize: '20px' }}
+            >
+              {' '}
+              로그인{' '}
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                {' '}
+                <Link href="/register" style={{ color: '#B73DCC', textDecoration: 'none' }}>
+                  {' '}
+                  회원가입{' '}
+                </Link>{' '}
+              </Grid>
+              <Grid item>
+                {' '}
+                <Link href="/" style={{ color: '#B73DCC', textDecoration: 'none' }}>
+                  {' '}
+                  메인으로 이동{' '}
+                </Link>{' '}
+              </Grid>
+            </Grid>
+          </Box>
+        </Container>
       </Box>
-      </Container>
-      
-
-    </div>
-  )
+    </ThemeProvider>
+  );
 }
 
-export default LoginPage
\ No newline at end of file
+export default LoginPage;