Skip to content

Commit

Permalink
feat : add login id cookie
Browse files Browse the repository at this point in the history
  • Loading branch information
@bicco2
bicco2 committed Jul 19, 2022
1 parent ad01801 commit 818fc0c
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 14 deletions.
86 changes: 86 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"http-proxy-middleware": "^2.0.6",
"mysql": "^2.18.1",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-image-file-resizer": "^0.4.8",
"react-router-dom": "^6.3.0",
Expand Down
91 changes: 80 additions & 11 deletions frontend/src/Page/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import * as React from "react";
import axios from "axios";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
Divider,
FormControlLabel,
Checkbox,
Button,
CssBaseline,
TextField,
Expand All @@ -16,6 +19,7 @@ import {
Modal,
Backdrop,
} from "@mui/material";
import { fontFamily } from "@mui/system";

const style = {
position: "absolute",
Expand Down Expand Up @@ -74,6 +78,29 @@ function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

//쿠키 및 체크박스 기억
const [cookies, setCookie, removeCookie] = useCookies(["rememberUserId"]);
const [isRemember, setIsRemember] = useState(false);

// 최초 렌더링 시
useEffect(() => {
/*저장된 쿠키값이 있으면, CheckBox TRUE 및 UserID에 값 셋팅*/
if (cookies.rememberUserId !== undefined) {
setEmail(cookies.rememberUserId);
setIsRemember(true);
}
}, []);

//쿠키 핸들
const handleOnCookie = (e) => {
setIsRemember(e.target.checked);
if (!e.target.checked) {
removeCookie("rememberUserId");
} else {
setCookie("rememberUserId", email, { maxAge: 180 }); //시간 설정 30 초
}
};

const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

Expand Down Expand Up @@ -184,17 +211,59 @@ function Login() {
>
Login
</Button>
<Typography align="right">
<Link
href="/register"
style={{
textDecoration: "none",
fontWeight: "bold",
<Box
sx={{
display: "flex",
alignItems: "flex-end",
flexDirection: "column",
}}
>
<FormControlLabel
sx={{ mr: -0.5 }}
control={
<Checkbox
defaultChecked
size="small"
sx={{
mr: -1,
color: "#759F98",
}}
/>
}
label={
<Typography
style={{ color: "#759F98", fontWeight: "bold" }}
>
아이디 저장
</Typography>
}
checked={isRemember}
onChange={(e) => {
handleOnCookie(e);
}}
/>
{/* <input
type="checkbox"
id="saveId"
name="saveId"
onChange={(e) => {
handleOnCookie(e);
}}
>
가입하기
</Link>
</Typography>
checked={isRemember}
/> */}

<Typography align="right">
<Link
href="/register"
style={{
textDecoration: "none",
fontWeight: "bold",
}}
>
가입하기
</Link>
</Typography>
</Box>
<Divider sx={{ color: "lightgrey" }}>또는</Divider>
<KakaoLoginBtn
variant="outlined"
Expand Down
41 changes: 38 additions & 3 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2017,6 +2017,11 @@
dependencies:
"@types/node" "*"

"@types/cookie@^0.3.3":
"integrity" "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
"resolved" "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz"
"version" "0.3.3"

"@types/eslint-scope@^3.7.3":
"integrity" "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA=="
"resolved" "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"
Expand Down Expand Up @@ -2074,6 +2079,14 @@
dependencies:
"@types/node" "*"

"@types/hoist-non-react-statics@^3.0.1":
"integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
"resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
"version" "3.3.1"
dependencies:
"@types/react" "*"
"hoist-non-react-statics" "^3.3.0"

"@types/html-minifier-terser@^6.0.0":
"integrity" "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
"resolved" "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz"
Expand Down Expand Up @@ -3470,6 +3483,11 @@
"resolved" "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
"version" "1.0.6"

"cookie@^0.4.0":
"integrity" "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
"resolved" "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz"
"version" "0.4.2"

"[email protected]":
"integrity" "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
"resolved" "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
Expand Down Expand Up @@ -5055,7 +5073,7 @@
dependencies:
"@babel/runtime" "^7.7.6"

"hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.3.1":
"hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.1":
"integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
"resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
"version" "3.3.2"
Expand Down Expand Up @@ -5168,7 +5186,7 @@
"agent-base" "6"
"debug" "4"

"http-proxy-middleware@^2.0.3":
"http-proxy-middleware@^2.0.3", "http-proxy-middleware@^2.0.6":
"integrity" "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw=="
"resolved" "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz"
"version" "2.0.6"
Expand Down Expand Up @@ -7632,6 +7650,15 @@
"regenerator-runtime" "^0.13.9"
"whatwg-fetch" "^3.6.2"

"react-cookie@^4.1.1":
"integrity" "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A=="
"resolved" "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz"
"version" "4.1.1"
dependencies:
"@types/hoist-non-react-statics" "^3.0.1"
"hoist-non-react-statics" "^3.0.0"
"universal-cookie" "^4.0.0"

"react-dev-utils@^12.0.1":
"integrity" "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ=="
"resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
Expand Down Expand Up @@ -7785,7 +7812,7 @@
"loose-envify" "^1.4.0"
"prop-types" "^15.6.2"

"react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
"react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0"
Expand Down Expand Up @@ -8967,6 +8994,14 @@
dependencies:
"crypto-random-string" "^2.0.0"

"universal-cookie@^4.0.0":
"integrity" "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw=="
"resolved" "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz"
"version" "4.0.4"
dependencies:
"@types/cookie" "^0.3.3"
"cookie" "^0.4.0"

"universalify@^0.1.2":
"integrity" "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
"resolved" "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
Expand Down

0 comments on commit 818fc0c

Please sign in to comment.