Merge pull request #64 from codesquad-member-2020/feature_fe/cookies

[FE] 쿠키 유틸함수를 이용해 헤더에 유저정보 표시
codesquad-member-2020 · Nov 9, 2020 · 64eef58 · 64eef58
2 parents c6e8ded + a7479ba
commit 64eef58
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 35 deletions.
diff --git a/FE/src/common/lib/cookies.js b/FE/src/common/lib/cookies.js
@@ -0,0 +1,14 @@
+export const setCookie = (cookieName, value) => {
+ var date = new Date();
+ date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+ document.cookie = cookieName + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
+};
+
+export const getCookie = (cookieName) => {
+ var value = document.cookie.match("(^|;) ?" + cookieName + "=([^;]*)(;|$)");
+ return value ? value[2] : null;
+};
+
+export const deleteCookie = (cookieName) => {
+ document.cookie = cookieName + "=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
+};
diff --git a/FE/src/components/Header/Header.jsx b/FE/src/components/Header/Header.jsx
@@ -4,6 +4,8 @@ import { API_URL } from "@/common/config";
 import logo from "@/image/airbnbLogo.png";
 import menuLogo from "@/image/menuLogo.png";
 
+import { setCookie, getCookie, deleteCookie } from "@/common/lib/cookies";
+
 const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
@@ -102,39 +104,9 @@ const Header = () => {
 
  const logoutHandler = () => {
  setIsLogout(true);
-
- const date = new Date();
- date.setDate(date.getDate() - 1);
- document.cookie += ";Expires=" + date.toUTCString();
- };
-
- const setCookie = (key, value) => {
- document.cookie = `${key}=${value};`;
- };
-
- setCookie(
- "jwt",
- "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzA0Mjc3MTF9.FWFdt65Y7UosXEczKuw6RClNJ8guLvczJkqYv6Msl2g"
- );
- setCookie("userId", "choisohyun");
- setCookie("userImage", "https://avatars2.githubusercontent.com/u/30427711?v=4");
-
- const getCookieValue = (key) => {
- let cookieKey = key + "=";
- let result = "";
- const cookieArr = document.cookie.split(";");
-
- for (let i = 0; i < cookieArr.length; i++) {
- if (cookieArr[i][0] === " ") {
- cookieArr[i] = cookieArr[i].substring(1);
- }
-
- if (cookieArr[i].indexOf(cookieKey) === 0) {
- result = cookieArr[i].slice(cookieKey.length, cookieArr[i].length);
- return result;
- }
- }
- return result;
+ deleteCookie("userImage");
+ deleteCookie("userId");
+ deleteCookie("jwt");
  };
 
  return (
@@ -154,8 +126,8 @@ const Header = () => {
  {document.cookie && !isLogout && (
  <>
  <UserWrapper>
- <UserId>{getCookieValue("userId")}</UserId>
- <UserImage src={decodeURIComponent(getCookieValue("userImage"))} />
+ <UserId>{getCookie("userId")}</UserId>
+ <UserImage src={decodeURIComponent(getCookie("userImage"))} />
  <UserMenuWrapper>
  <UserMenu>예약 목록</UserMenu>
  <UserMenu onClick={logoutHandler}>로그아웃</UserMenu>